HTML 和 CSS 初学者指南 - 第3课.docx

1
HTML 和 CSS 初学者指南
第 3 课
了解 CSS
CSS 是一种复杂的语言，具有强大的功能。
它允许我们为页面添加布局和设计，并允许我们从元素到元素以及从页面到页面共享这些样式。但是，在我们解锁其所有功能之前，我们必须完全了解该语言的几个方面。
首先，准确了解样式的呈现方式至关重要。具体来说，我们需要知道不同类型的选择器如何工作以及这些选择器的顺序如何影响我们的样式呈现方式。我们还想了解一些经常出现在 CSS 中的常见属性值，尤其是那些处理颜色和长度的属性值。
让我们深入了解 CSS，看看到底发生了什么。
级联
我们将通过查看所谓的级联并研究级联的一些示例来开始准确地分解样式的呈现方式。在 CSS 中，所有样式都从样式表的顶部级联到底部，允许随着样式表的进展添加或覆盖不同的样式。
例如，假设我们选择样式表顶部的所有段落元素并将它们的背景颜色设置orange为24像素，将字体大小设置为像素。然后在样式表的底部，我们再次选择所有段落元素并将它们的背景颜色设置为green，如下所示。
1
2
3
4
5
6
7
8
p {
background: orange;
font-size: 24px;
}
p {
background: green;
}
因为将背景颜色设置为 的段落选择器在将背景颜色设置为green的段落选择器之后orange，所以它将在级联中优先。所有段落都将带有green背景。字体大小将保持24像素，因为第二个段落选择器没有识别新的字体大小。
级联属性
2
级联也适用于单个选择器中的属性。同样，例如，假设我们选择所有段落元素并将它们的背景颜色设置为orange。然后在orange背景属性和值声明的正下方，我们添加另一个属性和值声明，将背景颜色设置为green，如下所示。
1
2
3
4
5
p {
background: orange;
background: green;}
因为green背景颜色声明在背景颜色声明之后orange，它会否决orange背景，并且和以前一样，我们的段落将带有green背景。
所有样式将从样式表的顶部级联到样式表的底部。然而，有时级联不会很好地发挥作用。当使用不同类型的选择器并且这些选择器的特殊性打破级联时，就会发生这些情况。让我们来看看。
计算特异性
CSS 中的每个选择器都有一个特殊权重。选择器的特定权重，以及它在级联中的位置，确定了它的样式将如何呈现。
在第 1 课“构建您的第一个网页”中，我们讨论了三种不同类型的选择器：类型、类和 ID 选择器。这些选择器中的每一个都有不同的特异性权重。
类型选择器具有最低的特异性权重并保持点值为0-0-1。类选择器具有中等特异性权重并保持点值为0-1-0。最后，ID 选择器具有很高的特异性权重并保持点值为1-0-0。正如我们所看到的，特异性点是使用三列计算的。第一列统计 ID 选择器，第二列统计类选择器，第三列统计类型选择器。
这里需要注意的重要一点是，ID选择器比类选择器具有更高的特异性权重，而类选择器比类型选择器具有更高的特异性权重。
特异性点
特异点被有意连字符，因为它们的值不是从 10 的基数计算出来的。类选择器的点值不为 10，ID 选择器的点值不为 100。相反，这些点应该被理解为0-1-0和1-0-0分别。当我们组合选择器时，我们将仔细研究为什么这些点值很快就会被连字符连接起来。
选择器的特定权重越高，在发生样式冲突时给予选择器的优势就越大。例如，如果在一个地方使用类型选择器选择一个段落元素，而在另一个地方使用 ID 选择器，则 ID 选择器将优先于类型选择器，而不管 ID 选择器出现在级联中的哪个位置。
HTML
3
1
2
<p id="food">...</p>
CSS
1
2
3
4
5
6
7
#food {
background: green;}p {
background: orange;}
这里我们有一个id属性值为 的段落元素food。在我们的 CSS 中，该段落由两种不同的选择器选择：一种类型选择器和一种 ID 选择器。尽管在级联中类型选择器在 ID 选择器之后，但 ID 选择器优先于类型选择器，因为它具有更高的特异性权重；因此，该段落将带有green背景。
记住不同类型选择器的特殊权重非常重要。有时样式可能不会按预期出现在元素上，而且我们的选择器的特殊权重可能会破坏级联，因此我们的样式没有正确显示。
了解级联和特异性如何工作是一个巨大的障碍，我们将继续讨论这个主题。现在，让我们看看如何通过组合它们来使我们的选择器更加