1 CSS属性
1.1 背景属性
| 属性名 | 作用 | 属性值 |
|---|---|---|
| background-color | 背景颜色 | 颜色值，默认：transparent透明 |
| background-image | 背景图像 | url(图片地址) |
| background-repeat | 背景图像重复 |
repeat：水平、垂直方向都重复 repeat-x：水平方向重复 repeat-y：垂直方向重复 no-repeat :不重复 |
| background-position | 背景图像位置 | ① 关键字表示 水平：left / center / right 垂直：top / center / bottom ② 长度表示 用长度表示x轴和y轴坐标 |
| background-attachment | 设置背景图像固定 本质上设置的是图像在元素上坐标体系。 |
scroll：背景图像随元素滚动，默认值 fixed：背景图像固定（改变坐标系位置，将坐标系的建立在视口上，而非元素上） |
| background | 复合属性 | 子属性的值，多个值用空格隔开；无数量、顺序要求，实践中推荐使用。 |
① background-position
使用关键字设置图像位置：
设置两个值作为属性的值，使用空格隔开，先写水平方向位置，再写垂直方向位置。
background-position:right bottom;
使用长度表示的坐标设置图像位置：
元素左上角作为坐标原点，x轴方向从左到右，y轴方向从上到下； 设置两个长度作为x坐标和y坐标，设置的是图像左上角在元素上的位置。
background-position: 10px 20px;
省略写法: 只设置一个值：
使用的是关键字：浏览器根据关键字自动判断设置的是水平位置还是垂直位置，另外一个取默认值 center；
使用长度： 该长度被作为x坐标，垂直位置默认为 center；
background-position:bottom;/* center bottom */
background-position:right;/* right center */
background-position:100px;/* 100px center */
② background-attachment
如果设置了 background-attachment 的值为 fixed ，则设置图像位置时，则不再参考图像所在元素的左上角而是参考视口的左上角。页面比视口长时，就会出现滚动条，当图像所在元素经过视口（即与视口有重合部分）时可以看到该图像。
③ background 复合属性
background:#f90;
background:#f90 url(图像地址);
background:#f90 url(图像地址) no-repeat;
background:#f90 url(图像地址) no-repeat 100px 100px;
1.2 鼠标光标属性
| 属性名 | 作用 | 属性值 |
|---|---|---|
| cursor | 设置鼠标光标在元素上的样式 |
default：默认样式 pointer：点击 move：移动 text：文字 wait：等待 help：帮助 |
/* 自定义鼠标光标样式 */
cursor:url(images/arrow.ico),pointer;/* 图标等常用ico图片格式 */
1.3 列表属性
| 属性名 | 作用 | 属性值 |
|---|---|---|
| list-style-type | 列表项图标样式 |
none：无图标，最常用 disc：实心圆 decimal：数字 circle：圆圈 |
| list-style-image | 自定义列表项图标 | url(图片路径) |
| list-style-position | 列表项图标位置 |
outside：图标在 li 外面 inside：图标在 li 里面 |
| list-style | 复合属性 | 子属性的值，多个值用空格隔开；无数量、顺序要求。 |
注意： 列表相关 CSS属性只有设置给 ul、ol、li 元素才会生效。
1.4 表格属性
| 属性名 | 作用 | 属性值 |
|---|---|---|
| table-layout | 设置列宽固定 |
auto：布局基于单元格内容，默认值。若设置的单元格宽度大于内容宽度，则按设置显示；若设置的单元格宽度小于内容宽度，则按内容宽度显示单元格 fixed：布局与单元格内容无关。若设置了单元格宽度，则按设置显示；若没有设置，则列宽等分。 |
| border-collapse | 合并单元格边框 |
separate：不合并单元格边框，默认值 collapse：合并单元格边框 |
| border-spacing | 设置单元格之间的间距 生效前提：不能设置 border-collapse |
长度 |
| empty-cells | 设置空单元格是否显示 生效前提：不能设置 border-collapse |
show：显示空单元格，默认值 hide：空单元格不显示 |
| caption-side | 设置表格标题在表格上面还是下面 |
top：标题在表格上面。 bottom：标题在表格下面。 |
注意： 表格相关 CSS 属性只有设置给 table 元素才会生效。
2 CSS选择器
2.1 组合选择器
① 后代元素选择器
选择器1 选择器2 {
}/* 选择器2 是 选择器1 的后代（儿子、孙子）。*/
② 子元素选择器
选择器1>选择器2 {
}/* 选择器2 是 选择器1 的儿子*/
③ 并集选择器
选择器1，选择器2 {
}
④ 交集选择器
选择器1选择器2 {
}/* 可以是 标签名类名、类名类名、标签名ID名、类名ID名、ID名类名，但ID名一般没有必要用交集选择 */
注意：
- 作为交集选择器，中间没有任何额外的符号。
- 标签名和类名可以组合，类名和类名也可以组合，ID也可以与标签名、类名组合， 但是标签名和标签名不可以组合。
- 标签名和类名进行交集选择器组合的时候，标签名一定写在前面。
可以将以上四种选择器进行大组合，但需注意最后再计算并集。
2.2 伪类选择器
是独立的选择器，权重与类相同，可以单独使用，但通常与其他选择器一起使用。
:link 表示地址没有被访问过的状态 /* 只能用于超链接元素 */
:visited 表示地址被访问过的状态 /* 只能用于超链接元素 */
:hover 鼠标悬停在元素上 /* 可用于所有元素 */
:active 鼠标按住元素尚未松开 /* 可用于所有元素 */
注意：四种伪类选择器一起使用时，顺序为：link、visited、hover、active。
2.3 选择器权重（优先级）
1. 权重比较（注：!important和行内式不是选择器，此处仅用于权重比较）
!important > 行内式 > ID 选择器 > 类名选择器、伪类选择器 > 标签名选择器 > 全局选择器
2. 组合选择器（不包括并集选择器）权重计算规则：
① 先比较两个选择器中ID选择器的数量，数量多的权重大。
② 如果两个选择器没有ID选择器或者ID选择器数量一致，再比较类名选择器和伪类选择前的数量，数量多的权重大。
③ 如果类名选择器、伪类选择器数量也数量一致，再比较标签名的数量，数量多的权重大。
④ 如果选择器权重一样大，后面的覆盖前面的。
注意： !important用法为：选择器 {样式：值 !important}，用于提高某一属性值的优先级，而非提高某一选择器的优先级。
