介绍
在本教程中,您将学习如何理解和创建 CSS 规则(也称为 rulesets)来设置样式和控制 HTML 内容的布局。 本教程将从一个示例 CSS 规则开始,该示例将 <h1>
HTML 元素变为蓝色,以研究 CSS 规则如何在行动中发挥作用,然后再解释 CSS 规则的每个组件。
先决条件
要学习本教程,请确保您已按照上一教程 如何设置 CSS 和 HTML 练习项目 中的说明设置了必要的文件和文件夹。
探索示例 CSS 规则
下面是 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 文件)。
在您的浏览器中,您应该会收到以下结果:
![网页结果] (https://assets.digitalocean.com/articles/how-to-build-a-website-with-css/a-simple-title.png)
如果您没有相同的结果,请确保您已保存 index.html
文件和 styles.css
文件,并且代码中没有错误。
如何理解 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 规则。