CSS 的底層工作原理是什麼？

CSS（層疊樣式表）是一種樣式表語言，用於為網頁新增視覺效果。它用於描述 HTML 元素的頁面佈局和顯示。透過 CSS 可以節省大量時間。可以使用它同時管理多個網頁的佈局。它使開發人員能夠對不同的元素實現各種自定義屬性，從而增強網頁的外觀。在本文中，我們將學習 CSS 及其工作原理。

CSS 主要分為三種類型：

  • 外部 CSS- 在每個頁面上，都會使用元素，並且link> 標籤位於 head 部分。如果您想同時更改多個頁面，請使用外部樣式表。在這種情況下，它非常出色，因為它使您能夠透過修改單個檔案來更改整個網站的外觀。

  • 內聯 CSS- 如果單個 HTML 頁面具有獨特的樣式，則可以使用內部樣式表。head 部分中的style> 元素包含內部樣式的定義。

  • 內部 CSS- 要使單個元素具有獨特的外觀，請使用內聯樣式。透過將 style 屬性新增到相應的元素來使用內聯樣式。style 屬性是任何 CSS 屬性的容器。

語法

selector{
   property: value;
}

示例

下面是一個如何在 HTML 頁面中使用 CSS 的示例。在這裡，我們使用了內聯 CSS。h1 元素帶下劃線，而 div 元素為綠色。

<!DOCTYPE html>
<html>
<head>
   <title> Using CSS within a HTML page </title>
   <style>
      h1{
         text-decoration: underline;
      }
      div{
         width: 30%;
         height: 30px;
         background-color: green;
      }
   </style>
</head>
<body>
   <h1> Inline CSS </h1>
   <div> This is an example. </div>
</body>
</html>

為什麼要使用 CSS？

  • 節省時間- 它提供了大量的節省時間。由於 CSS 樣式定義儲存在單獨的 CSS 檔案中，因此更改其中一個檔案可能會影響整個網站。

  • 多個屬性- 與普通 HTML 相比，CSS 提供了更精確的選項來確定網站的外觀和感覺。

  • 快速頁面載入- 使用 CSS 時，並不總是需要編寫 HTML 標籤屬性。可以僅為標籤編寫一次規則，並將其應用於該標籤的所有例項。由於 CSS 使用的程式碼更少，因此下載速度更快。

  • 網站維護- 網站需要它進行維護。如果我們需要對檔案進行全域性修改，只需更改樣式，網頁上的所有元件就會立即更新。由於 CSS 檔案的靈活性，可以輕鬆地修改網站的設計。

  • 多裝置相容性- 由於 CSS 傳統上與它們相容，因此我們可以將 CSS 與以前的語言版本一起使用。因此，如果 CSS 應用程式是使用程式語言的早期版本建立的，並且開發人員將其與更新的開發合併，則可以輕鬆地將 CSS 與所需的調整整合，從而使開發人員能夠成功更新現有程式碼。使用 CSS，內容可以適應多種裝置型別。

CSS 底層工作原理

為給定的 HTML 元素計算最終 CSS 屬性的實際過程是一系列極其複雜的步驟：

資料積累

在此階段，將從各種來源（例如使用者代理、編寫者和使用者）收集特定元素的所有樣式宣告。必須過濾和驗證這些宣告，以確定它們是否來自當前適用於此文件且在語法上有效的樣式表。

層疊

CSS 代表層疊樣式表，這是 CSS 的核心概念。必須徹底理解此階段，因為它是唯一一個受開發人員作為作者來源強烈影響的階段。此階段採用上一步中收集的無序宣告列表，並根據以下標準按優先順序降序排列：

  • 基於宣告來源（使用者代理、使用者、作者、過渡、動畫）和！important 註釋的混合。

  • 基於選擇器的特殊性

  • 基於它們編寫的順序

設定預設值

當沒有宣告時，在嘗試設定元素的 CSS 屬性值時會呼叫此步驟。

修復

為了在響應式設計中獲得最大的靈活性，我們使用多個相對單位（auto、em、rem、vh）、相對 URL、百分比或某些人類可讀的關鍵字（small、normal、bold）。此階段將嘗試解析儘可能多的屬性值，而無需佈局文件、執行網路查詢或從其父級以外的任何位置獲取值。

格式化

此階段將格式化整個文件，並透過嘗試計算文件佈局中使用的最終絕對理論值來完成上一步中剩餘的工作。此階段側重於元素的相對協調、自動佈局和彈性佈局等場景。它需要多次計算，但為瀏覽器使用提供了幾乎完全可用的絕對數字。

最終更改

在繪製之前，此最終階段將執行一些取決於瀏覽環境的修改，例如瀏覽器引擎、媒體型別、裝置畫素密度或作業系統。將浮點數四捨五入為整數值或根據可用字型更改字型大小是兩種常見的更改。

結論

由於 CSS 層疊是 CSS 最不為人理解的方面之一（並且通常是許多錯誤的根源），因此瞭解其工作原理將為您在保持樣式表可管理性方面提供顯著優勢。但是，對 CSS 層疊的更多瞭解也意味著更大的責任。層疊的更專業的部分（例如！important、內聯樣式和 id 選擇器）會產生更難更改或覆蓋的樣式表。

更新時間： 2023 年 2 月 20 日

396 次瀏覽

開啟你的 職業生涯

完成課程獲得認證

開始學習
廣告