这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。

什么是CSS?

CSS （Cascading Style Sheets，层叠样式表）是用来控制网页在浏览器中的显示外观的声明式语言。浏览器会根据 CSS 的样式定义将其选定的元素显示为恰当的形式。一条 CSS 的样式定义包括属性和属性值，它们共同决定网页的外观。

它是一组定义用于你的网页中特定元素样式的规则。同样和语义化标签相同，CSS作为Web的三大核心技术之一，在与样式相关的地方尽量使用CSS来单独控制，各司其职。

CSS语法

语法是由一个选择器开始，后面接着输入一个{}括号，括号内部定义一个或多个属性(property):值(value)形式的声明。例如:

h1 {
    color: red;
    font-size: 2em;
}

CSS有三种写法。

• 内联式（即直接写在标签内）
• 内部式（写在html页面内部，将css分离出来写在style标签内容部分，一般放在head标签中）
• 外部式（通过link标签引入外部文件，专门用来写css样式）

因为各司其职的分工，所以一般推荐使用外部式来达到样式分离的作用，提高可维护性，可读性。

CSS如何运行

当浏览器展示一个文件的时候，它会兼顾文件的内容和文件的样式信息，下面介绍下它处理文件的标准的流程。

1. HTML代码转化成DOM
2. CSS代码转化成CSSOM（CSS Object Model）
3. 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
4. 生成布局（layout），即将所有渲染树的所有节点进行平面合成
5. 将布局绘制（paint）在屏幕上

一到三步的实现都很快，但是第四步和第五步（也就是回流和重绘）比较耗时耗性能，（修改样式会导致重绘，但是重绘不一定引起回流，回流一定引起重绘）所以尽量要减少这些操作。需要修改样式的话，可以用class一次性修改就不要一条条修改。