---恢复内容开始---
作用：结构和样式相分离，用样式控制结构，是页面更加好看
简介：CSS通常称为层叠样式表，主要用于设置HTML页面的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能、如字体、颜色、背景的控制及整体排版等
一、CSS选择器
1.语法
选择器 {
属性1：属性值1；
属性2：属性值2；
}
F12打开开发者调试工具，ctrl +/- 可以放大/缩小视图
多类名之间用空格隔开，顺序与css样式表中顺序有关
2.选择器分类
伪类选择器也是选择器，用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，也可以选择，第一个，第n个元素
l类选择器是一个点，伪类选择器是2个点
2.1类选择器：.red {color:red}
2.2伪类选择器： a:hover {color:purple} :hover 是链接伪类选择器
2.2.1链接伪类选择器
2.2.2结构（位置）伪类选择器
:first-child 选取属于其父元素的首个子元素的指定选择器
:first-child 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) 匹配属于其父元素的第n个子元素，even是偶数，odd是奇数，n从0开始
:nth-last-child(n) 匹配属于其父元素的第n个子元素，even是偶数，odd是奇数，n从0开始
语法：li:first-child {color:red}
2.2.3目标伪类选择器：选择器可以选择当前活动的目标元素
::target {color:red}当前被选中元素设置样式
3.css外观样式及应用
color：文本颜色，取值方式有3种（英文字母颜色、十六进制、rgb)
line-height：行间距，就是行与行之间的距离，即字符的垂直距离，一般情况下，行距比字号大7/8 像素就可以了
test-aline：水平对齐方式，属性用来设置文本内容的水平对齐（在浏览器中的）
test-indent：首行缩进，用于设置首行文本的缩进，一般使用em作为单位，1em就是1个子的宽度，如果是汉字的段落，1em就是1个汉字的宽度
letter-spacing：字间距。就是字符与字符之间的空白（英文字母之间的空白）
word-spacing：单词之间的间距，仅针对英文
rgba(255,0,0,0.5):半透明
test-shadow：文字阴影，4个参数：水平位置、垂直位置、模糊距离、阴影颜色，前2个参数必须写
test-decoration：none取消下划线
line-height=height 可让文本垂直居中
4.元素分类（标签）
常见的块级元素：h1-h6，div，p，ul，ol，li等
常见的行内元素有：a，strong，em，i，del，ins，span等
常见的行内块元素有：img、input、td等
4.1块级元素：每个块级元素通常会独自占据一整行或多整行可以设置宽度、高度、对齐等属性，通常用来网页布局和网页结构的搭建。
特点：
（1）单独占一行，总是从新行开始
（2）宽高、行高、外边距以及内边距都可以控制
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他元素（h1-h6，p，dt都是文字类的块级元素，里面不能放其他块级元素 ）
4.2行内元素（内联元素）：不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽高、行高、对齐等属性，常用于控制页面中文本的样式。
特点：
（1）和相邻行内元素在一行上
（2）宽高无效，但水平方向的padding、margin可以设置，垂直方向上设置无效
（3）默认宽度就是它本身内容的宽度
（4）行内元素只能容纳文本或其他行内元素（a标签例外）
4.3行内块元素（内联元素）：既有块级元素的特点又有行内元素的特点
特点：
（1）和相邻行内（行内块）元素在一行上，但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度、行高、内边距、外边距都可以控制。
4.4标签显示模式转换display
5.CSS盒模型及应用
网页布局的本质：把网页元素比如文字图片等等放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
5.1边框（相当于橘子皮）：border-width,border=style,border-color
border：0 没有边框
border-style:none,没有边框，即忽略所有边框的宽度
table(border-collapse:collapse)表示表格的边框合并在一起
border-radius：圆角，顺序：左上角、右上角、右下角、左下角 2个值代表：左上角/右下角，右上角/左下角 3个值代表：左上角，右上角./左下角，右下角
5.2内边距padding
4个值表示上右下左顺时针的顺序，3个值表示上，左右，下；2个值表示上下，左右
---恢复内容结束---