介绍

在本教程中，您将创建一个 CSS类选择器，它允许您仅将 CSS 规则应用于分配了该类的 HTML 元素。当您想为同一 HTML 元素的不同实例应用不同的样式规则时，CSS 类选择器非常有用。

先决条件

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

CSS 类选择器的工作原理

CSS 类选择器允许您将样式规则分配给您使用该类指定的 HTML 元素，而不是某个元素的所有实例。与名称是预先确定的HTML 元素（例如<p>、<h1>或<img>）不同，类名称由开发人员在创建类时选择。类名总是以 开头.，这可以帮助您区分 CSS 文件中的标签选择器和类选择器。

类选择器的 CSS 规则的编写方式与标签选择器的规则相同，不同之处.在于类名的前置：

.red-text {
  color: red;
}

要在向网页添加 HTML 内容时使用类，您必须使用HTML 文档中的 class属性在HTML 元素的开始标记中指定它，如下所示：

<h1 class=".red-text">Content.</element>

使用类选择器创建 CSS 类

让我们开始在实践中探索 CSS 类。擦除styles.css文件中的所有内容并添加以下代码片段以指定类的规则red-text：

.red-text {
  color: red;
}

将代码片段添加到styles.css文件后，保存文件。

返回index.html并删除除<link rel="stylesheet" href="css/styles.css">链接到 CSS 样式表的第一行代码之外的所有内容。然后添加以下 HTML 代码片段：

<p class="red-text">Here is the first sample of paragraph text.</p>

请注意，这里的类名没有.像在用作 CSS 规则的选择器时那样在前面加上 a 。您的整个index.html文件应包含以下内容：

. . .
<link rel="stylesheet" href="css/styles.css">
<p class="red-text" Here is the first sample of paragraph text.</p>

在此代码片段中，您使用 HTML<p>标记添加了文本。但你还指定了red-text通过添加高亮类类属性 class="red-text" 中打开HTML标签。

保存您的index.html文件并将其加载到浏览器中。（有关加载 HTML 文件的说明，请访问我们的教程步骤如何在浏览器中查看脱机 HTML 文件）。

您应该会收到一个带有红色文本的网页：

让我们添加一个额外的 CSS 类来探索使用不同类来设置不同<p>文本内容的样式。将以下代码片段添加到您的styles.css文件中（在“red-text”的 CSS 规则之后）：

.yellow-background-text {
  background-color: yellow;
}

此 CSS 规则声明为该类yellow-background-text分配属性yellow值background-color。任何分配了此类的 HTML 文本元素都将具有黄色背景。需要注意的是使用这个词text在类yellow-background-*text*仅用于易读目的。text对于分配给 HTML 文本的类，您不需要在类名称中包含该词。

要应用这个新的 CSS 类，请返回到您的index.html文件并将以下代码行添加到底部：

<p class="yellow-background-text"> Here is the second sample of paragraph text.<p> 

在此代码片段中，您已为<p>元素添加了一些文本内容并指定了yellow-background-text类。保存文件并在浏览器中重新加载它。你应该有一个包含两个不同句子的网页，第一个是红色，第二个是黄色背景：

请注意，您可以向一个 HTML 标记添加多个类。通过将以下行添加到您的index.html文件中，尝试将这两个类添加到单个文本元素：

<p class="red-text yellow-background-text">Here is a third sample of text.</p>

请注意，类名仅由空格分隔。保存文件并在浏览器中重新加载它。你应该会收到这样的信息：

您的第三行文本现在应该根据red-text类和yellow-background-text类中设置的属性值设置样式，并具有红色字体和黄色背景。

向图像添加 CSS 类

CSS 类也可以应用于其他 HTML 元素，例如图像。要探索对图像使用 CSS 类，请擦除styles.css文件中的内容并添加以下代码片段：

.black-img {
  border: 5px dotted black;
  border-radius: 10%;
}

.yellow-img {
  border: 25px solid yellow;
  border-radius: 50%;
}

.red-img {
  border: 15px double red;
}

在这里，您为可应用于 HTML<img>标记的三个不同类创建了 CSS 规则。在继续之前，让我们简要研究一下我们在每个规则集中声明的内容：

• 第一个 CSS 规则声明类black-img应该有一个black,dotted边框宽 5 个像素，border-radius大小为 10%，这使元素圆角。
• 第二个 CSS 规则声明类yellow-img应该有一个yellow,solid边框宽 25 像素，border-radius大小为 50%，这使元素具有圆形形状。
• 第三条 CSS 规则声明类red-img应该有一个15 像素宽的red,double边框。您尚未设置边框半径，因此边框将符合元素的形状。

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

<img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="black-img">
<img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="yellow-img">
<img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="red-img">

这三行 HTML 代码中的每一行都将一个图像添加到 HTML 文档中，并将您刚刚添加到styles.css文件中的三个类中的一个指定给它。请注意，您是从在线位置获取图像。您还可以按照我们的教程如何使用 HTML 将图像添加到您的网页中，通过指定文件路径来使用您自己的图像。

保存您的index.html文件并将其加载到浏览器中。你应该会收到这样的信息：

您的网页现在应该显示三张图片，每张图片都使用其指定类别的不同规格进行样式设置。

继续探索 CSS 类，尝试创建具有不同规则集的新类并将它们应用于不同类型的 HTML 内容。请注意，在类声明块中指定的属性和值仅适用于它们适用的元素。例如，font-color声明不会更改图像边框的颜色。同样，height声明不会改变字体的大小。

结论

您现在已经探索了如何创建类，为它们分配特定的属性值，并将它们应用于文本和图像内容。在本系列教程的后半部分开始构建网站时，您将重新使用类。

在下一个教程中，您将创建 CSS ID选择器，除了一些独特的功能外，它的工作方式与类选择器类似。