11.1 层叠 (Cascading)
CSS 的主要原則包括 层叠、继承 和 特异性。理解這些原則有助於更好地控制網頁的樣式和外觀。
层叠 (Cascading)
层叠是 CSS 的基本原則，用於確定當多個規則發生衝突時如何應用樣式。層疊時瀏覽器使用以下規則來解決衝突：
- 來源順序：樣式可以在不同位置定義——外部樣式表 (CSS 文件)、內部樣式表 (在
<style>標籤內) 和內嵌樣式 (在 HTML 元素的style屬性中)。規則按其出現的順序應用。 - 特異性：每個選擇器都有其特定的特異性級別。選擇器的特異性越高，其優先級越高。
- 重要性 (Importance)：帶有
!important指令的規則具有最高的優先級，即使存在其他衝突的規則也會被應用。
层叠示例：
在此示例中，背景顏色將為黃色，因為內嵌樣式的優先級高於內部樣式。 文本顏色將為紅色，因為內嵌樣式的優先級高於內部。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 层叠示例</title>
<style>
body {
background-color: lightblue; /* 內部樣式 */
}
p {
color: green;
}
</style>
</head>
<body style="background-color: yellow;"> <!-- 內嵌樣式 -->
<p style="color: red;">CSS 层叠示例</p>
</body>
</html>
11.2 继承 (Inheritance)
继承是指子元素接受其父元素样式的过程。并非所有 CSS 属性都会继承。可继承的属性包括文本颜色、字体系列、行高等。
继承示例：
在這個例子中，<p> 元素繼承了 <body> 元素的字體和顏色， 而字體大小繼承自 .container 類。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 继承示例</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<p>此文本繼承了 body 的字體和顏色，字體大小則繼承自 ".container"。</p>
</div>
</body>
</html>
11.3 特异性 (Specificity)
特异性用于确定当多个规则对应同一元素时，哪个 CSS 规则将被应用。特异性是基于规则中选择器的数量和类型计算的。
特异性计算规则：
- 内嵌样式 (inline styles) 具有最高的特异性
- ID 选择器 (selectors by ID) 的特异性高于类、伪类和属性
- 类、伪类和属性的特异性高于元素和伪元素
- 元素和伪元素的特异性最低
特异性计算示例：
在此示例中，文本将为红色，因为 #unique 选择器具有最高的特异性。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 特异性示例</title>
<style>
p {
color: blue; /* 特异性 0-0-0-1 */
}
.highlight {
color: green; /* 特异性 0-0-1-0 */
}
#unique {
color: red; /* 特异性 0-1-0-0 */
}
</style>
</head>
<body>
<p class="highlight" id="unique">此文本将为紅色。</p>
</body>
</html>
11.4 重要性 (Importance)
CSS 允許開發者使用 !important 指令顯式指定樣式的優先級。具有此指令的規則將被應用，無論其他規則的特異性如何。
使用 !important 的示例：
在此示例中，文本将为蓝色，因为带有 !important 的规则具有最高的优先级。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS !important 示例</title>
<style>
p {
color: blue !important;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<p class="highlight">此文本将为藍色，因為有 "!important"。</p>
</body>
</html>
11.5 CSS 原則的使用示例
CSS 原則在實際任務中的使用示例。
层叠和特异性示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 层叠和特异性示例</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
}
.important {
color: red;
}
</style>
</head>
<body>
<p class="important">此文本將为紅色，因為 .important 的特異性高於 "p"。</p>
</body>
</html>
继承和特异性示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 继承和特异性示例</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
color: green; /* 重寫 body 的顏色，適用於所有子元素 */
}
.highlight {
color: red; /* 具有比 .container 更高的特異性 */
}
</style>
</head>
<body>
<div class="container">
<p class="highlight">此文本將為紅色，因為 .highlight 的特異性更高。</p>
</div>
</body>
</html>
GO TO FULL VERSION