CSS 的工作原理

當瀏覽器顯示文件時，它必須將文件的內容與其樣式資訊結合起來。它會分多個階段處理文件，我們將在下面列出這些階段。請記住，這只是瀏覽器載入網頁時發生情況的簡化版本，不同的瀏覽器會以不同的方式處理此過程。但大體上會發生以下步驟。

1. 瀏覽器載入 HTML（例如從網路接收）。
2. 它將HTML轉換為DOM（文件物件模型）。DOM 在計算機記憶體中表示文件。DOM 在下一節中將作更詳細的說明。
3. 然後，瀏覽器會獲取 HTML 文件中連結的大多數資源，例如嵌入的影像、影片，甚至連結的 CSS！JavaScript 在此過程的稍後階段處理，為了簡化，我們在此不做介紹。
4. 瀏覽器解析獲取的 CSS，並將不同的規則根據其選擇器型別分類到不同的“桶”中，例如元素、類、ID 等等。根據找到的選擇器，它確定應將哪些規則應用於 DOM 中的哪些節點，並在需要時將樣式附加到它們（此中間步驟稱為渲染樹）。
5. 渲染樹按照在應用規則後應出現的結構進行佈局。
6. 頁面在螢幕上顯示其視覺效果（此階段稱為繪製）。

下圖也簡單地展示了該過程。

DOM 具有樹狀結構。標記語言中的每個元素、屬性和文字片段都會成為樹狀結構中的DOM 節點。節點由它們與其他 DOM 節點的關係定義。某些元素是子節點的父節點，而子節點具有兄弟節點。

瞭解 DOM 有助於您設計、除錯和維護 CSS，因為 DOM 是 CSS 與文件內容相遇的地方。當您開始使用瀏覽器開發者工具時，您將在選擇專案以檢視哪些規則適用時瀏覽 DOM。

與其長篇大論，不如透過一個示例來看看如何將實際的 HTML 程式碼片段轉換為 DOM。

請看以下 HTML 程式碼

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

在 DOM 中，與我們的<p>元素對應的節點是父節點。它的子節點是文字節點和與我們的<span>元素對應的三個節點。SPAN 節點也是父節點，其子節點為文字節點

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

這就是瀏覽器解釋上述 HTML 程式碼片段的方式 - 它渲染上面的 DOM 樹，然後在瀏覽器中輸出它，如下所示

p {
  margin: 0;
}

假設我們向文件新增一些 CSS 來對其進行樣式設定。再次，HTML 如下所示

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

假設我們對它應用以下 CSS

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

瀏覽器解析 HTML 並從中建立 DOM。接下來，它解析 CSS。由於 CSS 中唯一可用的規則具有span 選擇器，因此瀏覽器會非常快地對 CSS 進行排序！它將該規則應用於三個<span>中的每一個，然後將最終的視覺表示繪製到螢幕上。

更新後的輸出如下所示

在下一模組中的除錯 CSS 文章中，我們將使用瀏覽器開發者工具來除錯 CSS 問題，並更多地瞭解瀏覽器如何解釋 CSS。

"什麼是 CSS" 文章中的"瀏覽器支援資訊" 部分提到，瀏覽器並不一定同時實現新的 CSS 功能。此外，許多人並沒有使用最新版本的瀏覽器。鑑於 CSS 不斷發展，並且領先於瀏覽器所能識別的範圍，您可能會想知道如果瀏覽器遇到無法識別的 CSS 選擇器或宣告會發生什麼。

答案是，它什麼也不做，只是繼續處理下一個 CSS 部分！

如果瀏覽器正在解析您的規則，並且遇到無法理解的屬性或值，它會忽略它並繼續處理下一個宣告。如果您在拼寫屬性或值時出錯，或者屬性或值太新，瀏覽器尚不支援，它就會這樣做。

同樣，如果瀏覽器遇到無法理解的選擇器，它會忽略整個規則並繼續處理下一個規則。

在下面的示例中，我使用了“顏色”的英式拼寫，這使得該屬性無效，因為它無法識別。因此，我的段落沒有變為藍色。但是，所有其他 CSS 都已應用；僅忽略無效行。

<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 作為增強功能，因為您知道如果它不被理解，就不會發生錯誤 - 瀏覽器要麼獲得新功能，要麼不獲得。這使您可以實現基本的回退樣式。

當您想要使用一個非常新且並非處處都支援的值時，這種方法特別有效。例如，某些舊版瀏覽器不支援calc() 作為值。我可能會用畫素為一個框設定一個回退寬度，然後繼續用calc() 值100% - 50px 設定一個寬度。舊版瀏覽器將使用畫素版本，忽略關於calc() 的行，因為它們不理解它。新版瀏覽器將使用畫素解釋該行，但隨後將使用calc() 的行覆蓋它，因為該行在級聯中位於後面。

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

我們將在後面的課程中學習更多關於支援各種瀏覽器的方法。

您已經快要完成本模組了 - 我們只差最後一步。在樣式設定傳記頁面評估中，您將使用新學到的知識重新設定示例的樣式，並在此過程中測試一些 CSS。

• 上一步
• 概述: CSS 初學者指南
• 下一步