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规则将被应用。特异性是基于规则中选择器的数量和类型计算的。
特异性计算规则：
- 内联样式具有最高的特异性
- 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