这是我参与「第四届青训营」笔记创作活动的的第2天，以青训营课程为切入点复习和回顾前端 CSS 基础知识，新理解，新收获。
HTML 好比是树的树干，而 CSS 则是其装饰的树叶。CSS 可以是网页更加美观，可以装饰 THML 的元素，更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。用好 CSS 可以使网页更具有现代感，但是 CSS 却是极为麻烦的，不仅需要去了解基本知识，而且需要很强的耐心去调每一个元素。

CSS 基本概念

基础语法

首先是 CSS 的基本语法

CSS 就是由这些样式规则组成。

引入 CSS

一共有3种方式可以在页面中引入 CSS，分别是外链，嵌入和内联.

• 外链：通过<link>标签引入外部的css样式文件
• 嵌入：利用 HTML 的<stylt></style>嵌入CSS的代码
• 利用标签内的 style 属性<p style="margin:lem 0">，就不用写选择器了。

CSS 如何工作

• 生成DOM：HTML文档描述网页的结构，浏览器通过HTML解析器将HTML解析为DOM树结构。HTML文档中所有内容皆为节点，各节点间拥有层级关系，彼此相连，组成DOM树。 在解析的过程中会去加载 CSS 。
• 生成CSSOM：CSS文档描述网页的表现，浏览器通过CSS解析器将CSS解析为CSSOM树结构，与DOM树结构较像。CSS文档中所有内容皆为节点，与HTML文档中的节点一一相应，各节点间拥有层级关系，彼此相连，组成CSSOM树。
• 生成Render Tree：浏览器的渲染引擎将DOM树与CSSOM树合并生成渲染树，只渲染需显示的节点及其样式。

CSS 选择器 Selecor

通过选择器可以找出页面中的元素，以便给他们设置样式，CSS 提供了多种方式来选择元素。

基础选择器

• 标签选择器：tag选中指定类型的标签
• ID选择器：#id选中指定 id 的标签， id一般是唯一的
• 类选择器：.class选中指定类名的标签，一般可以有多个
• 通配选择器：*匹配所有标签，一般用来清除浏览器的默认样式。

属性选择器

[属性名]，可以直接指定属性名，也可以是满足一些规则

• [attr] 指定属性的元素
• [attr=val] 属性等于指定值的元素
• [attr*=val] 属性包括指定值的元素
• [attr^=val] 属性以指定值开头的元素
• [attr$=val] 属性以指定值结尾的元素

伪类选择器

伪类(pseudo-classes)不基于标签和属性定位元素，包括状态伪类和结构性伪类。

状态性伪类

元素只有在处于某种特定的状态下才能被选中，比如链接的状态（是否被访问过，鼠标是否hover）等 状态性伪类有很多，这里只列举比较常见的几种

• :active 鼠标激活的元素
• :hover 鼠标悬浮的元素
• :link 未访问的链接元素
• :visited 已访问的链接元素
• :target 当前锚点的元素
• :focus 输入聚焦的表单元素

结构的伪类

所谓结构的伪类根据 DOM 节点在 DOM 树中出现的位置来决定是否选中元素。 常见的有：

• :nth-child(n) 元素中指定顺序索引的元素
• :nth-last-child(n) 元素中指定逆序索引的元素
• :first-child 元素中为首的元素
• :last-child 元素中为尾的元素
• :only-child 父元素仅有该元素的元素

可以很方便滴对列表中的特殊元素实现特定的样式如前几名高亮，奇数和偶数行采取不同的样式。

组合

我们也可以通过多个选择器组合的形式实现更灵活的选择方式。 还可以通过逗号分隔多个选择器形成组选择器，同时对组内所有元素设置样式。