CSS:Getting Started:How CSS works
From MDC
[编辑] 资料: CSS是如何工作的?
Mozilla在显示一篇文档时，它会将文档内容与文档样式组合在一起。这个过程可分为二个步骤：
- 第一步，Mozilla将标记语言和CSS转换为DOM（文档对象模型）。DOM在计算机内存中呈现文档。它将文档的内容与样式结合在一起。
- 第二步,Mozilla显示DOM标记语言使用标签定义文档结构。首尾闭合的标签可以作为容器嵌套其它标签。
DOM具有树形结构。在树形结构中,标记语言中的标签和文本成为节点。DOM节点并不是容器。它们可以成为子节点的父节点。
节点对应的标签也称之为元素。
我们的示例文档中, <P> 标签和它的结束标签</P> 创建了一个容器:
<P> <STRONG>C</STRONG>ascading <STRONG>S</STRONG>tyle <STRONG>S</STRONG>heets </P> 在DOM中，下图中的P节点是一个父节点。它的子节点是STRONG节点和文本节点。同时STRONG也是父节点，它下面的文本节点是它的子节点： P ├─STRONG │ │ │ └─"C" │ ├─"ascading" │ ├─STRONG │ │ │ └─"S" │ ├─"tyle" │ ├─STRONG │ │ │ └─"S" │ └─"heets" |
因为DOM是CSS与文档内容相结合的地方，因此理解DOM对CSS的设计，调试和维护有很大的帮助。
[编辑] 实践: 分析DOM
我们需要专门的软件来分析DOM。 在本指南中，我们使用Mozilla的DOM Inspector(DOMi)来分析DOM。 使用Mozilla浏览器打开我们先前创建的示例文档。
在菜单栏中选择工具–DOM 查看器，也许是工具– Web开发–DOM 查看器。
| 如果在Mozilla浏览器中找不到DOM查看器，那么需要重新安装浏览器并确保在安装时选择Web工具组件选项。安装完成后，回到我们的指南。
假如你不想安装DOM查看器，可以跳过本部分内容，直接阅读下一个页面。跳过本部分内容不影响后面内容的学习。 |
进入DOM查看器，单击节点前的箭头展开节点。
注意: HTML中的空格在DOMi中显示为空文本节点，你可以忽略它。
下面显示了节点展开后部分内容，你看到的内容跟你展开的节点相关：
│ ▼╴P │ │ │ ▼╴STRONG │ │ └#text │ ├╴#text │ ▶╴STRONG │ │ |
选择任意节点，可以在DOM查看器的右面板中看到节点的详细信息。
例如，当选择一个文本节点，DOM查看器会在右面板中显示文本内容。
当选择一个元素节点，DOM查看器会分析它，并在右面板显示大量的相关信息。样式信息只是分析出来的大量信息中的一部分。
| 在DOM查看器中, 单击STRONG 节点.
在DOM查看的右面板中找到节点在何处被设置成了红色及在何处被设置为加粗。 |
[编辑] 接下去的内容是什么?
If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.
If you took the challenge, you saw that style information from more than one place interacts to create the final style for an element.
The next page explains more about these interactions: Cascading and inheritance