CSS 是什么

上一篇讲了 CSS 在三剑客里的位置，这一篇把 CSS 这个名字拆开看看。CSS 的全称是 Cascading Style Sheets，翻译过来就是层叠样式表。三个词，每个都值得说道说道。

样式表是什么

样式表就是”样式的集合”。一份样式表，可以简单到只有几行，也可以复杂到几千行，本质都是规则的列表，每条规则描述”某个元素应该长什么样”。

先看一个最小例子。

p {
  color: red;
  font-size: 16px;
}

这条规则的意思是，所有 p 元素，文字颜色是红色，字号是 16 像素。把若干条这样的规则凑在一起，就是一张样式表。以前网页的样式直接写在 HTML 里，结构混样式，改起来痛苦。样式表把外观单独抽出来，结构归结构，样式归样式，这就是”表”的由来。

样式管什么

样式覆盖的范围比想象中大。字体、颜色、大小、间距、位置、背景、边框、排列方式、动画，都是样式。笼统地说，你在屏幕上看到的一切”长什么样”，都由 CSS 决定。

比如说，一段文字，字号多大、行距多宽、是粗体还是斜体，这是字体样式。文字和边框的距离，边框和外面元素的距离，这是间距样式。两个元素是并排还是上下排列，这是布局样式。范围虽然广，但不用怕，整个课程会一条一条拆开讲。

层叠是什么意思

层叠是 CSS 里最重要的一个词，也是新手最容易困惑的地方。它的意思是，一个元素的最终样式，不是由一条规则决定的，而是由多条规则叠加出来的。

举个直觉的例子。你写了一条规则，让所有段落文字是黑色。又写了一条规则，让所有段落字号是 16 像素。两条规则一起作用，黑色和 16 像素同时生效，互不冲突，这就是叠加。但如果一条规则说文字是黑色，另一条说文字是红色，冲突了怎么办，这就是”层叠”要解决的问题，CSS 有一套完整的优先级规则来裁定谁说了算。这块内容在后面会专门用一篇讲透，现在只需要记住，层叠意味着样式是可以叠加、会有冲突、但最终总能定出一个结果。

发展简史

CSS 的历史不长，但很有故事。

CSS1 诞生于 1996 年，定义了最基础的字体、颜色、间距、对齐规则，解决的是”让页面更好看”这个原始需求。

CSS2 在 1998 年发布，补上了定位、浮动、层叠优先级这些布局能力，网页从”文档”走向”设计”。

之后 CSS 就没有再发布过 CSS3 这样的整体大版本。从 CSS3 开始，规范被拆成一个个独立的模块，比如选择器、Flexbox、Grid、动画，各自独立演进，谁准备好了谁发布。这就是为什么我们现在说的”CSS3”其实是一个范围模糊的统称，也解释了为什么每年都有新特性出现，比如课程后面要学的 CSS 变量和 Grid，都是这个时期长出来的。

一句话总结

CSS 是一套给网页化妆的规则语言。名字里的层叠、样式、表三个词，分别对应它的裁定机制、职责范围和存在形式。对 CSS 有了整体认识，下一篇就开始动手写第一份样式。