day02

DIV
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。

总结：div是一个块级元素,块级元素是独占一行的。

为什么选择div，就是因为他不作为，他没什么样式，方便做一些效果。

外部样式
通过 link标签引入这个外部css文件即可
格式
外部.css

a{
color:red;
}

html

优点：
1.可维护性非常高,代码的可重用性非常高
2.css代码脱离了html代码
3.项目中会经常使用

优先级、有效范围
有效范围:
外部 > 内部 > 行内

优先级:
行内> 外部&内部(哪个距离元素比较近)

       优先级的原则就是就近原则。优先级是指样式出现了冲突（相同的样式）的时候

字体样式
美化字体
font-style 字体的风格,三个常用取值
italic （倾斜） 字体倾斜
normal（默认，不倾斜）
oblique（倾斜） 字倾斜，整体倾斜，包括没有倾斜的字体也可以倾斜

font-weight 字体的粗细 一般常用值 bold 加粗

font-size 字体的大小 单位的px ，像素

font-family 字体的系列 ，遇到字体库中没有的字体就出不来效果

font 还可以简写，简写有规则，有顺序

font: style weight size family

文本样式
color 文本的颜色, 颜色的单词 16进制的值 rgb()
line-height 文本行高，调整文本的垂直方向的居中,当文本的行高和所在块元素的高度一致时，自动垂直居中
text-align 水平对齐，左对齐、右对齐、居中对齐
文本装饰线,
text-decoration:underline 下划线、
text-decoration:line-through 中划线、
text-decoration:overline 上划线
text-decoration: none 取消元素的装饰线效果
首行缩进 ：text-indent: 1em;

超链接伪类样式
代码

边框样式
给元素加边框
边框是有方向，可以逐一给每一个方向的边加上边框
上边框 线条的粗细 线条的类型 线条的颜色 border-top: 1px solid red;
下边框 线条的粗细 线条的类型 线条的颜色 border-bottom: 2px dashed green;
左边框 线条的粗细 线条的类型 线条的颜色 border-left: 3px dotted yellow;
有边框 线条的粗细 线条的类型 线条的颜色 border-right: 4px double blue;

如果四个方向的边框线都使用同一套样式，那么可以简写，更加方便
border:1px solid red;

倒圆角
border-radius: 50%;

背景样式
background-color: yellow; 背景颜色
background-image:url(img/tv02.jpg) 背景图片
background-size: 100%; 背景尺寸
/*调整背景图片的平铺方式
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
*/
/简写 x轴和y轴都不重复平铺/
background-repeat: no-repeat;
/调整背景图片的位置/
/background-position-x: 30px;/
/background-position-x:center;/
/background-position-y: 30px;/
/background-position-y:center;/
/背景偏移 x轴 和y轴都居中/
background-position: center center;

浮动样式
html布局默认采取的是流式布局。从左往右走，从上往下走。
h1、p、li、ul、div等等 这一类的标签都是块级元素，都是从上往下走的，因为独占一行的。
a、span、font等等 ，这一类的标签都是行级元素，都是从左往右走的，不会独占一行，因为这些标签没有宽度。
img 标签，这一类标签比较特殊，既可以有宽度，也可以和其他元素位于同一行。行块级元素。

1.怎么才能改变元素的布局方式呢，有两种方式，其中一种就是浮动。可以把块级元素在同一行显示。可以从左往右走。
2.浮动是具有方向的，左浮动，右浮动。
3.设置了浮动的元素会脱离文档流。原来的位置不在了，后面的元素就会受到影响。会被浮动的元素遮盖。
4.设置了浮动的元素会影响后续的元素，文字会呈现环绕的现象。
5.如果不想后续的元素受影响，可以清除浮动
可以在最后一个浮动元素后面加上一个块级元素，这个块级元素加上样式 clear:both