CSS（層疊樣式表）是一種樣式表語言，用于向網頁添加視覺效果。它用于描述HTML元素的頁面布局和顯示。通過 CSS 可以節省大量時間。使用它可以同時管理多個網頁的布局。它使開發人員能夠為不同的元素實現各種自定義屬性，從而增強網頁的外觀。在本文中，我們將了解 CSS 及其工作原理。
CSS 基本上分為 3 種類型 –
外部 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 的底層工作
計算給定 HTML 元素的最終 CSS 屬性的實際過程是一系列極其復雜的步驟 –
數據積累
在此階段，特定元素的所有樣式聲明都是從各種來源（例如用戶代理、作者和用戶）收集的。必須對這些聲明進行過濾和驗證，以確定它們是否來自現在適用于本文檔的樣式表并且在語法上有效。
級聯
CSS這個詞代表層疊樣式表，這是CSS的基本概念。這一階段必須徹底理解，因為它是唯一一個深受開發者作為作者來源影響的階段。此階段采用上一步中收集的聲明的無序列表，并使用以下標準按優先級降序排列它們 –
基于聲明源（用戶代理、用戶、作者、過渡、動畫）和！重要注釋的組合。
基于選擇器的特殊性
基于它們的書寫順序
設置默認值
如果沒有聲明，則在嘗試為元素的 CSS 屬性設置值時調用此步驟。
修復
為了在響應式設計中獲得最大的靈活性，我們使用幾種相對單位（auto、em、rem、vh）、相對 URL、百分比或某些人類可讀的關鍵字（小、正常、粗體）。此階段將嘗試解析盡可能多的屬性值，而無需放置文檔、執行網絡查詢或從父級以外的其他位置獲取值。
格式化
此階段將格式化整個文檔，并通過嘗試計算文檔布局中使用的絕對理論值來完成上一步中剩余的工作。這一階段主要關注元素相對協調、自動布局、Flex布局等場景。它需要進行多次計算，但會產生幾乎完全可用的絕對數字供瀏覽器使用。
最終更改
在繪制之前，最后階段將根據沖浪環境執行一些修改，例如瀏覽器引擎、媒體類型、設備像素密度或操作系統。將浮點數舍入為整數值或根據可用字體更改字體大小是兩個常見的更改。
結論
由于 CSS 級聯是 CSS 最容易被誤解的方面之一（并且常常是許多錯誤的根源），因此了解它的工作原理將為您提供保持樣式表易于管理的顯著優勢。然而，對 CSS 級聯的了解越深入，責任就越大。級聯中更專業的部分（例如 !important、內聯樣式和 id 選擇器）生成的樣式表將來更難以更改或覆蓋。
以上就是"CSS在幕后是如何工作的？"的詳細內容，更多請關注www.92cms.cn其它相關文章！
