如何理解和创建CSS规则

来自菜鸟教程
跳转至:导航、​搜索

介绍

在本教程中,您将学习如何理解和创建 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-sizecolor。 在 CSS 示例中,属性为 color. 请注意,在属性后附加了一个冒号。
  • 指的是赋予属性的具体值,如16pxblue。 在示例 CSS 规则中,值为 blue. 请注意,分号附加在值之后。

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

结论

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

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