如何理解和创建CSS规则

在本教程中，您将学习如何理解和创建 CSS 规则（也称为 rulesets）来设置样式和控制 HTML 内容的布局。本教程将从一个示例 CSS 规则开始，该示例将 <h1> HTML 元素变为蓝色，以研究 CSS 规则如何在行动中发挥作用，然后再解释 CSS 规则的每个组件。

先决条件

要学习本教程，请确保您已按照上一教程如何设置 CSS 和 HTML 练习项目中的说明设置了必要的文件和文件夹。

下面是 CSS 规则的示例。将以下规则写入您的 styles.css 文件：

样式.css

h1 {
  color: blue;
}

保存您的 styles.css 文件。请注意，您已将 color: blue 向右缩进两个空格。这种缩进是编写 CSS 样式规则的推荐最佳实践，因为它使开发人员更容易阅读代码。

您刚刚添加的规则指示浏览器将任何带有 HTML 元素 <h1> 标记的 HTML 文本内容显示为蓝色。（有关 HTML 元素如何工作的复习，请访问我们的教程如何使用和理解 HTML 元素）。

接下来，将带有 <h1> 元素标记的 HTML 内容添加到 index.html 文件（文档顶部 <link rel="stylesheet" href="css/styles.css"> 行的正下方）：

索引.html

<h1>A Sample Title</h1>

保存文件并在浏览器中加载 HTML 文件以检查结果。（有关在浏览器中查看 HTML 文件的说明，请访问我们的教程步骤如何在浏览器中查看脱机 HTML 文件）。

在您的浏览器中，您应该会收到以下结果：

如果您没有相同的结果，请确保您已保存 index.html 文件和 styles.css 文件，并且代码中没有错误。

现在让我们检查示例 CSS 规则以了解其每个不同的组件。一般来说，CSS规则由选择器、声明块、属性和值组成。下图说明了每个部分如何在规则中表示：

现在让我们研究这些部分以及它们与示例 CSS 规则的关系。

选择器 指示要由 CSS 规则设置样式的内容类型。选择器放置在 CSS 规则的开头和左大括号之外。在 CSS 示例中，选择器是 <h1> HTML 元素，它是一个 tag 选择器。我们将在后面的教程系列中了解其他类型的选择器。
声明块 是 CSS 规则的一部分，它为选择器声明样式规则。声明块放置在大括号的内。在 CSS 示例中，声明块是 color:blue;。
属性是指CSS规则会修改的HTML内容的属性，如font-size或color。在 CSS 示例中，属性为 color. 请注意，在属性后附加了一个冒号。
值指的是赋予属性的具体值，如16px或blue。在示例 CSS 规则中，值为 blue. 请注意，分号附加在值之后。

为选择器声明规则后，HTML 文档中标有该选择器的每条内容都将根据该规则显示。但是，如果优先考虑冲突的 CSS 规则，则会出现异常。

在本教程中，您检查了编写完整 CSS 规则所需的所有组件，包括选择器、声明块、属性和值。

在下一个教程中，您将向 CSS 规则添加多个属性，并为单个 HTML 文档创建不同的 CSS 规则。