介绍

在本教程中，您将学习如何在 CSS 规则中为多个属性声明值。在单个规则中声明多个属性允许您一次性将许多样式指令（例如大小、颜色和对齐方式）应用于一个元素。我们还将探索创建各种 CSS 规则，这些规则允许我们将不同的样式应用于单个 HTML 文档中的不同内容片段。

先决条件

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

创建具有多个声明的 CSS 规则

要将多个声明添加到 CSS 规则中，请尝试修改文件中的<h1>规则styles.css（或者，如果您没有遵循教程系列，则添加整个代码片段），使其包含其他突出显示的声明：

h1 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}

保存文件并在浏览器中重新加载 HTML 文档。（有关加载 HTML 文件的说明，请访问我们的教程步骤如何在浏览器中查看脱机 HTML 文件）。您的文本现在应该位于页面的中心，大小为 100 像素，并使用Courier字体呈现：

在下一节中，我们将添加更多 CSS 规则以扩展网页内容的样式可能性。

创建多个 CSS 规则来设置 HTML 内容样式

在本节中，我们将index.html使用 HTML<p>元素向文件中添加更多文本。我们将尝试使用仅适用于<p>标签的新 CSS 规则集修改其属性。

在index.html文件中，在您在如何理解和创建 CSS 规则教程中添加<p>Some paragraph text</p>的现有<h1>A sample title<h1>行下方添加一行：

<h1>A sample title</h1>
<p>Some paragraph text</p>

保存index.html文件并在浏览器窗口中重新加载它以检查文件的显示方式。您的浏览器应该呈现一个蓝色标题，上面写着“一个示例标题”，下面是一个没有样式的段落，上面写着“一些段落文本”，如下例所示：

接下来，让我们添加一个 CSS 规则来设置<p>元素的样式。返回到您的styles.css文件并在文件底部添加以下规则集：

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

保存文件并在浏览器窗口中重新加载它以检查文件的显示方式。您的<p>文本现在应该具有您在刚刚创建的 CSS 规则中声明的样式：

既然您已经为<h1>和<p>元素制定了 CSS 规则，那么您在 HTML 文档中使用这些标签标记的任何文本都将采用您在styles.css文件中为这些元素声明的样式规则。

进一步实践

如果你想继续使用CSS规则进行试验，尝试不同的HTML文本元素，如创建CSS规则集<h2>，<h3>和<h4>-和使用他们在您的修改文本index.html文件。如果您遇到困难，可以复制以下示例中的 CSS 规则并将它们添加到您的styles.css文件中：

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}

保存您的文件，然后将以下 HTML 内容添加到您的index.html文件中：

<h2> This is red text with a size of 40 pixels. </h2>
<h3> This is purple text with a size of 50 pixels. </h3>
<h4> This is green text with a size 60 pixels. </h4>

保存文件并加载index.html到浏览器中。您应该会收到以下结果：

结论

在本教程中，您尝试使用 CSS 为多个属性指定值。您还为 HTML 文档中的文本内容样式创建了多个 CSS 规则。在本系列教程的后面开始构建演示网站时，您将扩展这两项技能。在下一个教程中，您将开始探索如何使用 CSS 设置图像样式。