背景，边框，列表，链接相关属性
背景相关属性
background简写：
| 属性 | 值 |
|---|---|
| background-color | 特别注意：rgba中的a是透明度（0.0到1.0之间，0.5为半透明） 如：rgba(255,255,255,0)完全透明的白色 |
| background-image | url(xxx.jpg) |
| background-size | 长度: 百分比: cover:保留宽高比,使背景图像完全覆盖背景区域 contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
| background-repeat | repeat-x:在水平方向上重复 repeat-y :在垂直方向上重复 no-repeat :不允许图像平铺 |
| background-position | 一对或单个关键字、百分数、长度值/混合使用（使用单个则默认另一个关键字是 center） 关键字:top、bottom、left、right 和 center |
边框相关属性
前三个属性可简写border属性：
| 属性 | 值 |
|---|---|
| border-style | 默认值：none，所以必须记得设置border-style，否则边框就不会出现 |
| border-width | 长度值/关键字 |
| border-color | 命名颜色/十六进制/ RGB 值 |
| border-radius | 一个或两个长度或百分比，第一个值定义水平半径，第二个值定义垂直半径 |
列表相关属性
可以在 <ul> 或 <ol> 或<li>元素上简写list-style：
| 属性 | 值 |
|---|---|
| list-style-type项目符号的类型 | 默认disc（实心圆） |
| list-style-position列表标志位置 | 默认 outside |
| list-style-image图像标志 | url(xxx.jpg) 默认none |
链接相关属性
选择器四种状态：**(他们不是属性！)**
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
注意：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
举例：
1 | a:link {color:#FF0000;} |
属性
| 属性 | 值 |
|---|---|
| 文本修饰（下划线）text-decoration（多个属性值) | 具体参考 |
| 背景色background-color | 常用俱可 |
| 鼠标光标的样式cursor | 属性值 |
| 文字的轮廓（框）outline | 简写：宽度 （outline-width）、样式（outline-style） 、颜色 |
| outline-width | 关键字（取决于用户代理）：thin/medium/thick 长度：10px/1rem 全局值:inherit |
| outline-style | 关键字：none(默认值);auto; dotted;dashed; solid; double;groove; ridge;inset; outset; 全局值:inherit;initial; unset; |
CSS 各种选择器的概念，使用方法及使用场景。
简单选择器
- ID选择器：
#ID名称{属性：值;} - 类选择器：
.类名称{属性：值;} - 标签（元素）选择器：
html元素名{属性：值;} - 通用选择器：
*{属性：值;}
属性选择器
- 属性选择器：
[属性名]{CSS样式} - 属性和值选择器：
[属性名=值]{CSS样式} - 属性和（多个）值选择器(类似模糊查找)：
| 语法 | 含义 |
|---|---|
[属性名~=值]{CSS样式} |
适用于HTML中由空格分隔的属性值 |
| `[属性名 | =值]{CSS样式}` |
[属性名^=值]{CSS样式} |
匹配属性值以指定值开头的每个元素 |
[属性名$=值]{CSS样式} |
匹配属性值以指定值结尾的每个元素 |
[属性名*=值]{CSS样式} |
匹配属性值中包含指定值的每个元素 |
伪类选择器
:first-child表示一组同级元素中的第一元素:last-child表示一组同级元素中的最后一个元素:only-child表示没有任何兄弟姐妹的元素:invalid设置值无效时的样式
伪元素选择器
- 注意：使用双冒号，与伪类选择器区分开。
::first-line伪元素设置文本首行的特殊样式::first-letter伪元素设置文本首字母的特殊样式::before伪元素在元素前面插入新内容
派生选择器
- 用于选择一个标签中的所有另一个标签。（id选择器与类选择器、属性选择器也可以派生）
- 用空格分隔开两个元素名称。
后代选择器
- 空格分隔两个选择器名称
- 选择的元素是其选择器的后代。他们不需要是直接子元素就可以配对(子孙后代都可以)。
儿童组合器
- 大于号分隔
- 仅当选择器选择直接子元素时才匹配。层次结构后面的子孙不匹配。（注意：直接子元素并不是一定只有一个，要与伪类选择器:first-child区别开来）
直接相邻的同级选择器
- 加号分隔
- 用于选择与层次结构中相同级别的另一个元素相邻的对象。
- 注意：这两个选择器不仅要是同级别的，还要直接相邻。
一般同级[所有的同级选择器]
- 用**
~分隔**开两个选择器。 - 用于选择与层次结构中相同级别的所有指定选择器的对象（包括直接相邻的同级），也可以使用常规的同级组合器。
- 注意：空格分隔开的是父元素与子元素组成的后代选择器，~分隔开的是同级别的所有指定选择器的对象。
CSS 选择器的优先级
- 影响优先级的因素从高到低的顺序是：重要性、特异性、源顺序。
- 注意：并不是整个规则都会被覆盖，只是相同的属性。
源顺序（靠后的获胜）
如果有多个选择器作用于同一个元素，则靠后的将获胜。
特异性(计算各个选择器的特异性值)
- 选择器具有的特异性程度是使用四个不同的值（或成分）来衡量的，可以将其视为千位，百位，十位和个位这四列中的四个个位数：
| 值 | 范围 |
|---|---|
| 千 | 如果声明位于style属性内（也称为内联样式）内，则在此列中得一千分。这样的声明没有选择器，因此它们的特异性始终只是1000 |
| 百 | 在此列中为整体选择器中包含的每个ID选择器打分（有几个ID选择器就几百分） |
| 十 | 在此列中为整体选择器中包含的每个类选择器，属性选择器或伪类计分（注意属性选择器的书写方法） |
| 一 | 在此列中为整体选择器中包含的每个元素选择器或伪元素*打一分。 |
重要性!important
- 超越了上述两个级联的常规规则，但最好不要用。
- 语法
选择器{属性: 属性值 !important;}