'CSS在幕後是如何運作的？'
- WBOY轉載
- 2023-09-17 10:33:021420瀏覽
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在幕後是如何運作的？'的詳細內容。更多資訊請關注PHP中文網其他相關文章！