CSS如何工作

Go to Previous Section:
为何使用CSS？这是 CSS Getting Started 教程的第三章; 这章解释了CSS在浏览器中是如何工作的。你可以通过分析示例代码来看看样式表中的详细信息。

信息：CSS 如何工作

浏览器在展现一个文档的时候，必须要把文档内容和相应的样式信息结合起来展示。这个处理过程一般分两个阶段：

浏览器先将标记语言和CSS转换成DOM (文档对象模型)结构。这时DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。
最后浏览器把 DOM的内容展示出来。

标记语言通过使用“元素”来定义文档结构。你需要使用一些以'<'开头和以'>'结尾的字符串，俗称tags，来构成元素。这些元素一般是在'< >'里加上元素名来作为起始tag，在'< >'里加上'/'和元素名的组合来构成结束tag。标记语言中规定，一些元素可以只有一个起始tag，或者构成元素的tag只有一个，但是这个tag里的名称后面必须要加个'/'。

元素也可以作为容器而存在，这样可以把其他元素放到这个元素的起始tag和结束tag之间。

DOM是一种树形结构。每个元素和非空文本都可以看做是树形结构上的一个结点。DOM结点不再是容器，但是，它可以作为子结点的父类结点而存在。

示例

在示例代码中，我们使用 <p> 标签和它的结束标签 </p> 构造了一个容器：

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

实例

https://jsfiddle.net/djaniketster/6jbpS/

在这个 DOM中， P 结点是一个父结点，它的子结点包含了一些STRONG结点和文本结点。同时，STRONG结点各自也是父结点，它们也分别包含了一些文本结点作为子结点。

P
├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"

理解 DOM 结构可以帮助你更好的去设计、调试、维护CSS，因为 DOM 结构就是你的CSS和文档内容融合而成的。

行动：分析DOM结构

使用 DOM Inspector

你需要使用特殊的软件来分析 DOM结构。在这里，假设你使用的是 Mozilla的 DOM Inspector (DOMi) 插件来分析一个 DOM结构。下面的操作需要你提前安装插件才可以执行。

使用 Mozilla 浏览器来打开示例文档。
在浏览器菜单栏中，选择 工具 > 查看器，也可能是选择 工具> Web 开发者 > 查看器。

更多细节

如果你的 Mozilla 浏览器没有安装 DOMi，你可以到安装地址来安装并重启浏览器，然后再回到这里继续学习。

如果你不想安装 DOMi (或者你使用的是非Mozilla浏览器)，那么你可以试试下个章节中介绍的 Web X-Ray Goggles。你也可以直接跳过本章节，进行下一章的学习，这并不会影响你接下来的学习内容。
你可以在 DOMi中通过点击文档结点前面的箭头来将他们展开。
注意: HTML 文件中的空格在 DOMi 中会显示为一些空的文本结点，你可以直接忽略掉它。

通过展开元素结点，你可能会看到下面这样的一部分内容：
```
│ ▼╴P
│ │ │ ▼╴STRONG
│ │ └#text
│ ├╴#text
│ ►╴STRONG
│ │
```
选择任何元素都可以在 DOMi 右边的面板中找到关于这个元素更详细的信息。例如，当你选择一个文本结点的时候，右边面板中会显示这个结点的文本信息。

如果你选择的结点是一个元素，那么 DOMi 会分析这个元素，并在右边面板中展示关于它的一大堆信息内容。同时，样式信息只是这些内容的一部分罢了。

挑战

在 DOMi 中，点击一个 STRONG 结点。

在 DOMi的右边面板中找出，设置此结点颜色为红色的地方和设置结点内容加粗的地方。

Possible solution

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

Hide solution

查看挑战的解决方案

使用 Web X-Ray Goggles

Web X-Ray Goggles 显示的信息内容相比较 DOM Inspector要少，但是它安装和使用的步骤更简单。

到 Web X-Ray Goggles的主页。

将页面中的书签链接拖拽到浏览器工具栏。
打开你的示例 HTML 文档。
通过点击工具栏中的相应书签来激活Web X-Ray Goggles。
通过在文档中移动鼠标箭头来查看相应的文档元素。

What next?

Go to Next Section:
层叠和继承如果你做过上文中的练习，你会发现不同位置的style样式是相互影响共同生成了元素的最终展现。在下一章中将会深入解释这种相互联系和相互影响。