目录
1、CSS概念和作用
CSS的最大贡献就是： 让 HTML 从样式中脱离， 实现了 HTML 专注去做 结构呈现，样式交给css
1.1 概念：
CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
1.2 作用：
①主要用于**设置** HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及**版面的布局和外观显示样式。**
-②CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
2. CSS样式表引入的三种方法？
分为行内式（内联样式）、内部样式（内嵌样式）、外部样式（外链式）
2.1 行内式（内联样式）
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
2.2 内部样式（内嵌样式）
在html中任何一个位置可添加<style type="text/CSS"></style>，以下演示了再<head></head>标签下添加的情况：
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
2.3 外部样式表（外链式）
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
3. CSS基础选择器：
3.1 标签选择器
标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
3.2 类选择器
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
3.3 id选择器
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
2.3 外部样式表（外链式）
*{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
4. CSS复合选择器：
4.1 后代选择器：
（当标签发生嵌套时，内层标签就成为外层标签的后代）
语法：父级 子级 { 属性:属性值; 属性:属性值; }
用来选择元素或元素组的子孙后代
4.2 子元素选择器
语法：.class>h3{color:red;font-size:14px;}
子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。
4.3 交集选择器
（交集选择器 是 并且的意思。 即...又...的意思
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
比如： p .one 选择的是： 类名为 .one 的 段落标签。
4.4 并集选择器
如果某些选择器定义的相同样式，就可以利用并集选择器；中间用“,”逗号隔开
比如 .one, p , #test {color: #F00;}
4.5 链接伪类选择器： (:)
a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */
顺序尽量不要颠倒,* 否则可能引起错误。
5. 复合选择器总结：
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是> .nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是...... 又是......... | 较少 | 没有符号 p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
| 链接伪类选择器 | 给链接更改状态 | ： | 较多 |
6、CSS三大特性：
CSS层叠性、CSS继承性、CSS优先级
6.1 CSS层叠性：
原则：
- 样式冲突，遵循的原则是**就近原则。** 那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠
6.2 CSS继承性
- 子标签会继承父标签的某些样式，如文本颜色和字号。
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
6.3 CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，
- 选择器相同，则执行层叠性
- 选择器不同，就会出现优先级的问题。
6.3.1 权重计算公式
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性
| 标签选择器 | 计算权重公式 |
| 继承或者* | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类(class)，伪类 | 0,0,1,0 |
| 每个id | 0,1,0,0 |
| 每个行内样式style="" | 1,0,0,0 |
| 每个!important重要的 | ∞ 无穷大 |
- (权重公式)值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
- 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
- !important 权限无限大。使用方式：div { color: pink!important; }
- 继承的权重是0
6.3.2 权重叠加
用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。
比如：
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover -----—> 0,0,1,1
- .nav a ------> 0,0,1,1
CSS注释：/* 需要注释的内容 */