上查看所有课程
CSS 是用于样式化网页的语言，它有一些重要的核心概念需要理解。
这些概念包括
- 继承
- 规则顺序
- 样式规则层级
- 特异性
- 盒子模型
通过学习这些概念，我们可以为有效理解和使用 CSS 打下坚实的基础。
让我们详细看看其中的每一个。
继承
在 CSS 中，继承将样式直接从父元素传递到其子元素。
子元素通常会采用分配给父元素的相同样式，除非它们被赋予了自身的样式。
这种机制确保了网页设计的连贯性。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Inheritance</title>
</head>
<body>
<section>
<h2>This is a heading.</h2>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
</body>
</html>section {
color: blue;
}浏览器输出
在上面的例子中：
section {
color: blue;
}将 section 的所有子元素（即 h2 和 p）的文本颜色设置为 blue。
这最大限度地减少了重复声明样式的需要，从而在多个元素之间保持统一。
注意：CSS 中的继承行为是特定于属性的，并非所有属性都会被子元素继承。
规则顺序
规则顺序指的是 CSS 规则应用于 HTML 元素的顺序。
CSS 规则的顺序决定了样式的优先级。后面的规则会覆盖前面的规则，并确保应用最新的样式。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Rule Order</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>p {
color: red;
}
/* overrides color previous color value */
p {
color: blue;
}浏览器输出
在这里，段落的颜色是 blue，因为它是在样式表中最后声明的，覆盖了所有先前的值。
样式规则层级
样式规则层级决定了当多条规则针对同一元素时，CSS 规则的优先级。
在 CSS 中，应用以下样式优先级层级：
- 内联样式：直接在 HTML 元素内应用的样式。
- ID 选择器：样式化具有特定 ID 的元素。
- 类和属性选择器：样式化具有特定类或属性的元素。
- 元素选择器：样式化具有特定标签名的元素。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Style Rule Hierarchy</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class=""paragraph"" id="unique">
This text will be red as the ID selector takes precedence over other
selectors.
</p>
</body>
</html>/* id selector */
#unique {
color: red;
}
/* class selector */
.paragraph {
color: green;
}
/* element selector */
p {
color: blue;
}浏览器输出
在上面的例子中，ID 选择器覆盖了类和元素选择器的样式。这是因为 ID 选择器的优先级高于类和元素选择器。
特异性
CSS 中的特异性决定了当多条规则针对同一元素时，哪些样式规则具有优先权。
这有助于浏览器优先应用最相关的样式。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Specificity</title>
</head>
<body>
<div>
<p id="para">This is a paragraph.</p>
</div>
</body>
</html>div p {
color: blue;
}
p {
color: orange;
}浏览器输出
在上面的例子中，元素选择器 p 将所有 p 元素的颜色设置为 orange。
然而，选择器 div p 对段落的选择更加特异，因此段落的颜色被设置为 blue。
注意：CSS 选择器的特异性越强，其优先级就越高。这意味着，如果两个选择器匹配同一个元素，则会使用更特异的选择器来样式化该元素。
盒子模型
盒子模型规定 HTML 中的每个元素都表示为一个矩形框。它有助于理解元素在网页上的结构以及它们如何相互作用。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Box Model</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2>CSS Box Model</h2>
<div>
<p>This is a <span>paragraph</span> inside div element.</p>
</div>
</body>
</html>h2, div, p, span {
border: 1px solid;
}浏览器输出
在这里，这些样式使所有 h2、div、p 和 span 元素都具有 1px 的实线边框。这表明所有元素本质上都是矩形的。
这些核心概念使我们能够理解 CSS 规则的行为方式，并帮助更有效地设计布局。