如何使用CSS创建ID

介绍

在本教程中，您将创建 CSS ID 选择器 并了解在使用 CSS 和 HTML 构建网站时如何以及为什么使用它们。

CSS ID 选择器的功能类似于 CSS 类选择器。它们允许您创建可以应用于具有唯一 ID 属性的 HTML 元素的 CSS 规则。与类一样，ID 名称由开发人员在使用 ID 选择器创建 CSS 规则时选择。但是，ID 与类的不同之处在于，您只能在 HTML 文档中使用单个 ID once。因此，您只需为出现在页面上一次的项目（如顶部徽标、站点标题或导航栏）定义 ID。通常，CSS ID 会被谨慎使用。

先决条件

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

创建 CSS ID 选择器

为 ID 创建规则时，会在 ID 名称前添加 #：

#my-first-id {
  color: blue;
}

此 CSS 规则创建一个名为“my-first-id”的 ID，并声明分配此 ID 的任何 HTML 文本元素都是蓝色的。

现在让我们探讨一下 ID 在实践中是如何工作的。首先，确保您已按照本系列前面教程如何设置 CSS 和 HTML 练习项目中的说明设置了必要的文件和文件夹。

删除 styles.css 文件中的所有内容（如果您一直在关注本系列）并将上面的 CSS 规则“#my-first-id”添加到您的 styles.css 文件并保存文件.

接下来，返回您的 index.html 文件并擦除所有内容（第一行代码除外：<link rel="stylesheet" href="css/styles.css">）。然后添加以下代码片段：

索引.html

<p id="my-first-id">This text is styled using a CSS ID.</p>

保存文件并在浏览器中重新加载。（有关加载 HTML 文件的说明，请访问我们的教程部分如何在浏览器中查看脱机 HTML 文件）。

您应该会收到如下信息：

在本练习中，您在 styles.css 文件中创建了 CSS ID “my-first-id”，然后使用突出显示的 ID 属性将其应用于 index.html 文件中的文本内容。请注意，您可以为任何类型的 HTML 内容（例如图像和[[how-to-build-a-website-with-html#how-to-use-a-<div>,-the-html-content-division-element|]]

元素 .

结论

您探索了如何为仅在网页上出现一次的样式元素创建和使用 ID。在下一个教程中，您将了解 CSS pseudo-classes，这是一种由某些状态激活的特殊类型的类，可以由用户行为触发。