CSS 的工作原理

¥How does CSS actually work?

当浏览器显示文档时，它必须将文档的内容与其样式信息结合起来。它分多个阶段处理文档，我们在下面列出了这些阶段。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。但这大致就是发生的情况。

¥When a browser displays a document, it must combine the document's content with its style information. It processes the document in a number of stages, which we've listed below. Bear in mind that this is a very simplified version of what happens when a browser loads a webpage, and that different browsers will handle the process in different ways. But this is roughly what happens.

1. 浏览器加载 HTML（例如从网络接收它）。
2. 它将 HTML 转换为 DOM（文档对象模型）。DOM 代表计算机内存中的文档。下一节将更详细地解释 DOM。
3. 然后，浏览器会获取 HTML 文档链接到的大部分资源，例如嵌入的图片、视频，甚至链接的 CSS！JavaScript 在此过程中稍后处理，为了让事情更简单，我们不会在这里讨论它。
4. 浏览器解析获取的 CSS，并根据选择器类型将不同的规则排序到不同的 "buckets" 中，例如 元素、类、ID 等。根据它找到的选择器，它会计算出哪些规则应该应用于 DOM 中的哪些节点，并根据需要将样式附加到它们（此中间步骤称为渲染树）。
5. 渲染树按照应用规则后应出现的结构进行布局。
6. 页面的视觉显示显示在屏幕上（这个阶段称为绘画）。

下图还提供了该过程的简单视图。

¥The following diagram also offers a simple view of the process.

¥About the DOM

DOM 具有树状结构。标记语言中的每个元素、属性和文本片段都成为树结构中的 DOM node。节点是根据它们与其他 DOM 节点的关系来定义的。有些元素是子节点的父节点，而子节点也有兄弟节点。

¥A DOM has a tree-like structure. Each element, attribute, and piece of text in the markup language becomes a DOM node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.

了解 DOM 有助于你设计、调试和维护 CSS，因为 DOM 是 CSS 和文档内容相遇的地方。当你开始使用浏览器 DevTools 时，你将在选择项目时浏览 DOM，以查看适用的规则。

¥Understanding the DOM helps you design, debug and maintain your CSS because the DOM is where your CSS and the document's content meet up. When you start working with browser DevTools you will be navigating the DOM as you select items in order to see which rules apply.

¥A real DOM representation

我们不想进行冗长乏味的解释，而是通过一个示例来了解如何将真实的 HTML 片段转换为 DOM。

¥Rather than a long, boring explanation, let's look at an example to see how a real HTML snippet is converted into a DOM.

采取以下 HTML 代码：

¥Take the following HTML code:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

在 DOM 中，对应于我们的 <p> 元素的节点是父节点。它的子节点是一个文本节点和对应于我们的 <span> 元素的三个节点。SPAN 节点也是父节点，文本节点作为其子节点：

¥In the DOM, the node corresponding to our <p> element is a parent. Its children are a text node and the three nodes corresponding to our <span> elements. The SPAN nodes are also parents, with text nodes as their children:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
    └─ "Sheets"

这就是浏览器解释前面的 HTML 片段的方式 - 它渲染上面的 DOM 树，然后将其输出到浏览器中，如下所示：

¥This is how a browser interprets the previous HTML snippet — it renders the above DOM tree and then outputs it in the browser like so:

p {
  margin: 0;
}

¥Applying CSS to the DOM

假设我们向文档中添加一些 CSS 来设置其样式。再次，HTML 如下：

¥Let's say we add some CSS to our document, to style it. Again, the HTML is as follows:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

假设我们对其应用以下 CSS：

¥Let's suppose we apply the following CSS to it:

span {
  border: 1px solid black;
  background-color: lime;
}

浏览器解析 HTML 并从中创建 DOM。接下来，它解析 CSS。由于 CSS 中唯一可用的规则有 span 选择器，因此浏览器对 CSS 进行排序的速度非常快！它将这一规则应用于三个 <span> 中的每一个，然后将最终的视觉表示绘制到屏幕上。

¥The browser parses the HTML and creates a DOM from it. Next, it parses the CSS. Since the only rule available in the CSS has a span selector, the browser sorts the CSS very quickly! It applies that rule to each one of the three <span>s, then paints the final visual representation to the screen.

更新后的输出如下：

¥The updated output is as follows:

在下一个模块的 调试 CSS 文章中，我们将使用浏览器 DevTools 来调试 CSS 问题，并将了解有关浏览器如何解释 CSS 的更多信息。

¥In our Debugging CSS article in the next module we will be using browser DevTools to debug CSS problems, and will learn more about how the browser interprets CSS.

¥What happens if a browser encounters CSS it doesn't understand?

"什么是 CSS" 文章中的 "浏览器支持信息" 部分 提到浏览器不一定同时实现新的 CSS 功能。此外，许多人没有使用最新版本的浏览器。鉴于 CSS 一直在开发，因此它领先于浏览器可以识别的内容，你可能想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。

¥The "Browser support information" section in the "What is CSS" article mentioned that browsers do not necessarily implement new CSS features at the same time. In addition, many people are not using the latest version of a browser. Given that CSS is being developed all the time, and is therefore ahead of what browsers can recognize, you might wonder what happens if a browser encounters a CSS selector or declaration it doesn't recognize.

答案是它什么也不做，只是继续执行下一个 CSS！

¥The answer is that it does nothing, and just moves on to the next bit of CSS!

如果浏览器正在解析你的规则，并遇到它不理解的属性或值，它会忽略它并继续进行下一个声明。如果你犯了错误并且拼错了属性或值，或者属性或值太新并且浏览器尚不支持它，它将执行此操作。

¥If a browser is parsing your rules, and encounters a property or value that it doesn't understand, it ignores it and moves on to the next declaration. It will do this if you have made an error and misspelled a property or value, or if the property or value is just too new and the browser doesn't yet support it.

类似地，如果浏览器遇到它不理解的选择器，它将忽略整个规则并继续执行下一个规则。

¥Similarly, if a browser encounters a selector that it doesn't understand, it will just ignore the whole rule and move on to the next one.

在下面的示例中，我使用了英式英语拼写颜色，这使得该属性无效，因为它无法被识别。所以我的段落没有被涂成蓝色。然而，所有其他 CSS 均已应用；仅忽略无效行。

¥In the example below I have used the British English spelling for color, which makes that property invalid as it is not recognized. So my paragraph has not been colored blue. All of the other CSS have been applied however; only the invalid line is ignored.

<p>I want this text to be large, bold and blue.</p>

p {
  font-weight: bold;
  colour: blue; /* incorrect spelling of the color property */
  font-size: 200%;
}

这种行为非常有用。这意味着你可以使用新的 CSS 作为增强功能，并且知道如果不理解就不会发生错误 - 浏览器要么获得新功能，要么不获得。这可以实现基本的后备样式。

¥This behavior is very useful. It means that you can use new CSS as an enhancement, knowing that no error will occur if it is not understood — the browser will either get the new feature or not. This enables basic fallback styling.

当你想要使用一个非常新且并非在所有地方都受支持的值时，这种方法特别有效。例如，某些较旧的浏览器不支持 calc() 作为值。我可能会给出一个框的回退宽度（以像素为单位），然后继续给出 calc() 值为 100% - 50px 的宽度。旧浏览器将使用像素版本，忽略有关 calc() 的行，因为它们不理解它。新的浏览器将使用像素解释该行，但随后使用 calc() 的行覆盖它，因为该行稍后出现在级联中。

¥This works particularly well when you want to use a value that is quite new and not supported everywhere. For example, some older browsers do not support calc() as a value. I might give a fallback width for a box in pixels, then go on to give a width with a calc() value of 100% - 50px. Old browsers will use the pixel version, ignoring the line about calc() as they don't understand it. New browsers will interpret the line using pixels, but then override it with the line using calc() as that line appears later in the cascade.

.box {
  width: 500px;
  width: calc(100% - 50px);
}

在后面的课程中，我们将了解更多支持各种浏览器的方法。

¥We will look at many more ways to support various browsers in later lessons.

¥Summary

你即将完成本模块 - 我们只剩下一件事要做。在 设计传记页面评估 中，你将使用新知识重新设计示例，并在此过程中测试一些 CSS。

¥You've nearly finished this module — we only have one more thing to do. In the Styling a biography page assessment you'll use your new knowledge to restyle an example, testing out some CSS in the process.