信息：CSS 如何工作

瀏覽器在展現一個文檔的時候，必須要把文檔內容和相應的樣式信息結合起來展示。 這個處理過程一般分兩個階段：

標記語言通過使用“元素”來定義文檔結構。你需要使用一些以’<’開頭和以’>’結尾的字符串，俗稱tags，來構成元素。這些元素一般是在’< >‘里加上元素名來作為起始tag，在’< >‘里加上’/’和元素名的組合來構成結束tag。標記語言中規定，一些元素可以只有一個起始tag，或者構成元素的tag只有一個，但是這個tag里的名稱后面必須要加個’/’。

元素也可以作為容器而存在，這樣可以把其他元素放到這個元素的起始tag和結束tag之間。

DOM是一種樹形結構。 每個元素和非空文本都可以看做是樹形結構上的一個結點。DOM結點不再是容器，但是，它可以作為子結點的父類結點而存在。

示例

在示例代碼中， 我們使用<p>標簽和它的結束標簽</p>構造了一個容器：

實例

http://jsfiddle.net/djaniketster/6jbpS/ 在這個 DOM中， P 結點是一個父結點，它的子結點包含了一些STRONG結點和文本結點。同時，STRONG結點各自也是父結點，它們也分別包含了一些文本結點作為子結點。

理解 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 中會顯示為一些空的文本結點，你可以直接忽略掉它。

通過展開元素結點，你可能會看到下面這樣的一部分內容：

選擇任何元素都可以在 DOMi 右邊的面板中找到關于這個元素更詳細的信息。例如，當你選擇一個文本結點的時候，右邊面板中會顯示這個結點的文本信息。

如果你選擇的結點是一個元素，那么 DOMi 會分析這個元素，并在右邊面板中展示關于它的一大堆信息內容。同時，樣式信息只是這些內容的一部分罷了。 

挑戰 在 DOMi 中，點擊一個 STRONG 結點。

在 DOMi的右邊面板中找出，設置此結點顏色為紅色的地方和設置結點內容加粗的地方。 

使用 Web X-Ray Goggles

Web X-Ray Goggles 顯示的信息內容相比較 DOM Inspector要少， 但是它安裝和使用的步驟更簡單。

到 Web X-Ray Goggles的主頁。