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


该系列的一部分:
如何使用 CSS 构建网站

本教程是使用 CSS创建和自定义此网站的系列的一部分,CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。

在继续之前,我们建议您了解一些 HTML 知识,HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML,可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程

介绍

在本教程中,您将学习如何在 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>下方添加一行

索引.html
<h1>A sample title</h1>
<p>Some paragraph text</p>

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

带有蓝色 `<h1>` 标题和无样式的 `<p>` 元素的网页输出

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

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

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

带有样式`<p>` 文本的网页输出

既然您已经为<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文件中:

索引.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 规则。在本系列教程的后面开始构建演示网站时,您将扩展这两项技能在下一个教程中,您将开始探索如何使用 CSS 设置图像样式。

觉得文章有用?

点个广告表达一下你的爱意吧 !😁