什么是 CSS

docs.scrimba.com

打开任何设计精良的网站，去掉它的 CSS，你会看到一列黑色文本在白色背景上：每个标题、每个段落、每个链接，按顺序堆叠，完全没有样式。这个简朴的列表就是你的 HTML。让页面看起来设计精美的所有内容——颜色、间距、字体、列、卡片和导航栏——都是 CSS。本章讲的是这第二种语言是什么以及它如何与第一种语言一起工作。

CSS 应用前后的页面对比

CSS 代表 级联样式表。重点是 样式：CSS 是描述页面外观的方式。你的 HTML 说"这是一个标题，这是一个段落，这是一个按钮"。CSS 则说"让标题大一点且深蓝色，给按钮一些内边距和圆角"。

把 HTML 想象成房间的内容、家具和它们的位置，把 CSS 想象成油漆、照明和布置。同一个房间，但一个空荡荡的，一个是你想待的地方。你写 CSS 规则指向你 HTML 的各个部分并改变它们的外观。

CSS 是网页的 展示 层。HTML 提供结构和含义；CSS 读取这个结构并描述它应该如何呈现：颜色、排版、间距、大小和布局。两者的设计目的是分开编写，所以同一个 HTML 可以通过交换 CSS 完全重新设计，一个样式表可以为一千个页面设置样式。

这种分离就是关键。当你的内容在 HTML 中、展示在 CSS 中时，你可以重新设计网站而不用改动标记，可以修改一个共享的样式表而不用编辑每一页。从你的第一条规则开始，就应该养成把两者分开的习惯。

CSS 是展示层，浏览器将其作为渲染的一个独特阶段应用：它将你的 HTML 解析为 DOM（文档对象模型，浏览器从你的标记构建的元素活跃树），将你的 CSS 解析为一组规则，然后将规则与元素匹配以计算每个元素的最终样式。你的 CSS 永远不会改变 DOM 树；它只是装饰它。

这种分阶段的模型是为什么关注点的分离在实践中真正成立，而不仅仅是原则上成立。一个其含义完全在 HTML 中的页面可以优雅降级：如果 CSS 加载失败，内容仍然存在并保持有序，因为结构和展示从未被混合。这也是为什么同一个标记可以使用浅色主题和深色主题，或打印布局和屏幕布局，而 HTML 完全不需要改变。展示是你附加的一层，不是烘焙在内容中的属性。

h1 {
  color: navy;
  font-size: 2rem;
}

这是一条单独的 CSS 规则。它找到页面上每个 <h1> 标题并将其变成海军蓝并放大。HTML 完全保持不变；只有它的外观改变了。

JunoCSS 应用前后的页面对比 HTML 是内容，CSS 是外观。你写规则指向你页面的各部分并改变它们的显示方式，比如使标题又大又蓝。页面下面没有改变，只是展示方式改变了。这种分离就是整个想法。

JunoCSS 应用前后的页面对比 CSS 是展示，HTML 是结构，它们故意分开。重新设计 CSS，同一个标记看起来完全不同；共享一个样式表，它为每一页设置样式。从你的第一条规则开始，就培养内容和外观分离的习惯。

JunoCSS 应用前后的页面对比 浏览器将 HTML 解析为 DOM，将 CSS 解析为规则，然后计算每个元素的样式：你的 CSS 装饰这棵树，它永远不会改写它。这种分阶段的模型是为什么一个含义在 HTML 中的页面在 CSS 加载失败时仍然有效。展示是你附加的一层，而不是烘焙在内容中的东西。

CSS 如何指向你的 HTML

CSS 只有能找到页面的正确部分时才有用。它通过 选择器 做到这一点：规则开始的部分，命名要设计样式的元素。在上面的规则中，h1 是选择器，意思是"每个 h1 标题"。

你通常会通过在 HTML 中给元素一个 class 并从 CSS 指向该 class 来定位元素。class 是你选择的标签：

<button class="buy-button">立即购买</button>

.buy-button {
  background-color: teal;
  color: white;
}

.buy-button 选择器找到带有该 class 的元素并设计它的样式。你稍后会遇到许多选择器类型；class 是你最经常使用的。

一条 CSS 规则有两部分：一个 选择器 说明匹配哪些元素，以及一个声明块说明如何设计它们的样式。选择器是 CSS 如何伸入 DOM 并选择元素应用样式的方式。你可以按元素类型（h1）、按 class（.buy-button）、按 id、按关系等进行选择。

<button class="buy-button">立即购买</button>

.buy-button {
  background-color: teal;
  color: white;
}

在实践中，你用 class 设置样式的频率远超过元素类型或 id，因为 class 可以重用并且不带任何内置的特异性包袱。选择器 章节涵盖了全部范围和何时每种是正确的工具。

选择器是 CSS 的查询语言：每一个都是浏览器对每个元素进行测试以决定哪些规则适用的模式。这种匹配不是免费的，它与 特异性 相互作用（浏览器分配给选择器的权重，以便在多条规则在同一元素上设置相同属性时打破平局）。class 的权重超过元素类型；id 的权重超过 class；内联样式的权重更高。

.buy-button {
  background-color: teal;
  color: white;
}

实际后果是 如何 选择不仅是一个定位决策，还是一个设计决策。用 id 和深层嵌套选择器选择所有东西会积累特异性，使后来的规则难以覆盖，这就是样式表如何硬化的。平整的、基于 class 的选择器保持特异性低且可预测，这就是为什么几乎每个可扩展的 CSS 方法都建立在 class 上。选择器 章节恰当地分解了特异性。

JunoCSS 如何指向你的 HTML 选择器是规则中说明要设计什么样式的部分。最友好的开始是 class：你在 HTML 中的元素上放 class="name"，然后在你的 CSS 中设计 .name 的样式。现在不用担心其他类型，class 会让你走很远。

JunoCSS 如何指向你的 HTML 每条规则都以匹配 DOM 中元素的选择器开始，你可以按类型、class、id 或关系进行匹配。默认情况下使用 class：它们可重用并保持特异性可控。选择器章节有完整的工具包。

JunoCSS 如何指向你的 HTML 选择器是查询语言，每一个都带有特异性权重，在规则冲突时决定谁赢：id 胜过 class，class 胜过类型，内联胜过所有。你如何选择是可维护性决策，所以保持平整和基于 class 以防止特异性硬化你的样式表。特异性在选择器章节中得到充分处理。

"级联"的含义

级联样式表中的第一个词是人们跳过的那个，但它解释了很多。多条规则可以适用于同一元素，它们可能不同意。也许一条规则说段落是灰色的，另一条说这个特定段落是黑色的。级联 是浏览器用来决定哪个赢的一组规则。

大多数时候归结为一件事：如果两条规则的特异性相同，后写的规则赢。你现在不需要全貌。知道当样式没有按你预期显示时，通常是因为另一条规则击败了它，而不是因为 CSS 坏了。

级联是在多条规则针对同一元素并设置相同属性时解决冲突的算法。它按顺序衡量几件事：规则来自哪里、其选择器的特异性如何，以及作为最终平局破坏者的源顺序（后面赢）。当两条规则特异性相同时，最后声明的规则赢。

这是大多数"为什么我的 CSS 不工作"时刻的机制。样式被应用了；它被一条排名更高的规则覆盖了。正确地阅读级联，而不是堆积更多规则来强制改变，是将 CSS 从对抗转向指导的习惯之一。CSS 如何工作 章节演示了完整的解析顺序。

级联是 CSS 的冲突解决算法，了解其顺序将大多数样式 bug 从谜团变成查询。它通过按顺序解决竞争的声明：来源和重要性（作者样式与浏览器默认值与 !important），然后 特异性（选择器的权重），然后 源顺序（后面的规则赢最后的平局）。

这在生产规模很重要的原因是你写的每个覆盖都是该排名中的一步。通过 !important 或 id 达到赢得冲突会为每个未来需要接触同一元素的规则提高门槛，这些升级化合成一个没人能安全改变的样式表。耐用的修复几乎总是降低其他地方的特异性，而不是在这里提高它。现代 CSS 添加了给你级联控制而不会有特异性军备竞赛的工具，例如级联层，这在 CSS 的组织和扩展 章节中介绍。关于完整的解析顺序，见 CSS 如何工作。

Juno级联的含义 级联意味着多条规则可以应用于同一元素，级联决定哪个赢。日常版本：当两条规则特异性相同时，后面的赢。所以如果样式没有显示，另一条规则可能击败了它。我花了一段时间才停止发现这个神秘。

Juno级联的含义 级联通过来源解决冲突，然后特异性，然后源顺序，后面的规则赢平局。大多数"我的 CSS 不工作"时刻是覆盖，不是 bug。学会读为什么规则失败而不是堆积更多规则来强制它，CSS 就不再像战斗了。

Juno级联的含义 冲突通过来源和重要性、然后特异性、然后源顺序解决。你写的每个覆盖都是该排名中的一步，所以用 !important 或 id 赢会为它之后的每条规则提高门槛。耐用的修复是降低其他地方的特异性，而不是在这里提高它。级联层给你控制而不需要军备竞赛。

CSS 从这里走向何方

CSS 在其核心是一种小语言，一个选择器和一些属性值对，但它的覆盖范围很广。一旦你可以定位元素并设置属性，本手册的其余部分是关于值得了解的属性和建立在它们之上的系统：控制间距和大小的 box 模型，然后是颜色和类型，然后是布局工具 flexbox 和 grid，它们排列整个页面。

下一章 CSS 如何工作 具体说明了本章介绍的机制：将 CSS 附加到页面的三种方式、规则的确切解剖结构，以及级联和继承如何决定每个元素最后的外观。