如何在CSS规则中声明多个属性的值

介绍

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

先决条件

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

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

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

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

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

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

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

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

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

索引.html

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

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

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

样式.css

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

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

现在您已经有了 <h1> 和 <p> 元素的 CSS 规则，您在 HTML 文档中用这些标签标记的任何文本都将采用您在 [ X203X] 文件。

进一步练习

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

样式.css

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

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

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

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

索引.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 为多个属性指定值。您还创建了多个 CSS 规则来设置 HTML 文档中文本内容的样式。当您开始构建演示网站稍后在教程系列中时，您将扩展这两个技能。在下一个教程中，您将开始探索如何使用 CSS 设置图像样式。