CSS层叠样式表

CSS层叠样式表, 是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现

CSS是做什么的？

HTML用于定义内容的结构和语义，CSS用于设计风格和布局。比如，可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。

层叠样式表(Cascading Style Sheets)中的Cascading 即层叠，当应用两条同级别的规则到一个元素的时候，会根据规则的顺序生效，写在后面的就是实际使用的规则。

但是浏览器会根据规则的优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。

浏览器是根据以下判断规则重要性：

• 资源顺序
  如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用。可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式。

• 优先级
  在一些情况下，有些规则在最后出现，但是却应用了前面的规则。因为前面的有更高的优先级 — 它范围更小，因此浏览器就把它选择为元素的样式。

!important 可以用来覆盖所有上面所有优先级计算，用于修改特定属性的值， 能够覆盖普通规则的层叠。

CSS是怎么工作的？

当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

1. 浏览器载入HTML文件（比如从网络上获取）。
2. 将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。
3. 接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理。
4. 浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
6. 网页展示在屏幕上（这一步被称为着色）。

具体流程如下：