介绍

在本教程中,您将创建一个 CSS class 选择器,这将允许您仅将 CSS 规则应用于分配给该类的 HTML 元素。

前提条件

要遵循本教程,请确保您已设置必要的文件和文件夹,如在本系列的上一个教程中所指示的 How To Set Up You CSS and HTML Practice Project。

CSS类选择器如何工作

CSS 类选择器允许您为您指定该类的 HTML 元素分配风格规则,而不是某个元素的 all 实例。 与 HTML 元素(如 <p>、 <h1> 或 img>)不同,其名称是预先定义的,类名称是开发人员在创建类时选择的。

类选择器的 CSS 规则以与标签选择器的规则相同的方式编写,除了对类名称提前的 .:

1.red-text {
2  color: red;
3}

要在添加 HTML 内容到您的网页时使用类,您必须在 HTML 元素的开头标签中使用类 属性在您的 HTML 文档中这样指定:

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

使用类选择器创建 CSS 类

让我们从实践中开始探索 CSS 类,删除您的 styles.css 文件中的所有内容,并添加以下代码片段来指定类 red-text 的规则:

1[label styles.css]
2.red-text {
3  color: red;
4}

将代码片段添加到您的 styles.css 文件后,保存该文件。

返回您的 index.html 并删除除了链接到您的 CSS 样式表的第一个代码行之外的所有内容。

1[label index.html]
2<p class="red-text">Here is the first sample of paragraph text.</p>

请注意,类名称在这里没有预先注明一个 .,因为它是当它被用作CSS规则的选择器时。

1[label index.html]
2. . .
3<link rel="stylesheet" href="css/styles.css">
4<p class="red-text" Here is the first sample of paragraph text.</p>

在此代码片段中,您已使用 HTML <p> 标签添加了文本,但您还通过添加突出的类别 属性 class="red-text" inside 添加到打开 HTML 标签时,已指定了 `red-text' 类别。

保存您的 index.html 文件,并将其加载到浏览器中(有关下载 HTML 文件的说明,请访问我们的教程步骤 如何在您的浏览器中查看离线 HTML 文件)。

你应该收到一个红色文本的网页:

让我们添加一个额外的 CSS 类来探索不同类别的<p>文本内容的不同部件的格式化。

1[label styles.css]
2.yellow-background-text {
3  background-color: yellow;
4}

此 CSS 规则声明,类黄色背景文本被分配为黄色背景颜色属性的值。 任何被分配给此类的 HTML 文本元素都将具有黄色背景。 请注意,类黄色背景文本中的文本一词仅用于人类读取目的。

若要应用此新的 CSS 类,请返回您的 index.html 文件,并在底部添加以下代码行:

1[label index.html]
2<p class="yellow-background-text"> Here is the second sample of paragraph text.<p>

在这个代码片段中,你已经添加了一些文本内容与<p>元素,并指定了黄色背景文本类别. 保存文件并在浏览器中重新加载它. 你应该有一个网页有两个不同的句子,第一个是红色,第二个是黄色背景:

请注意,您可以将多个类添加到 HTML 标签中. 尝试将两个类添加到单个文本元素中,将以下行添加到您的 index.html 文件中:

1[label index.html]
2<p class="red-text yellow-background-text">Here is a third sample of text.</p>

请注意,类名称只由一个空间分开。 保存文件并在浏览器中重新加载。

您的第三行文本现在应该根据红色文本类和黄色背景文本类设置的属性值进行格式化,并具有红色字体和黄色背景。

向图像添加 CSS 类

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

 1[label styles.css]
 2.black-img {
 3  border: 5px dotted black;
 4  border-radius: 10%;
 5}
 6
 7.yellow-img {
 8  border: 25px solid yellow;
 9  border-radius: 50%;
10}
11
12.red-img {
13  border: 15px double red;
14}

在这里,您已经为三个不同的类创建了 CSS 规则,这些规则可以应用于 HTML <img> 标签。

• 联合国 第一套CSS规则宣布, " 黑-img " 类应有一个 " 黑 " 、 " 被点 " 相接面宽5像素,并有一个 " 相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相
• 联合国 第二项CSS规则宣布, " 黄-img " 类应具有 " 黄 " 、 " 固 " 边界宽25像素和 " 边界-辐射 " 大小为50%,使元素具有循环形状。
• 联合国 第三个CSS规则宣布, " 红色-img " 类应有一个 " 红色 " 、 " 二 " 相接的15像素宽度。 您没有设置边线, 因此边界将符合元素的形状 。 .

然后从您的 index.html 文件中删除所有内容(除了第一个代码行:)并添加以下代码片段:

1[label index.html]
2<img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="black-img">
3<img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="yellow-img">
4<img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="red-img">

这些 HTML 代码的三个行中每一个都添加一个图像到 HTML 文档,并分配给你刚刚添加到 styles.css 文件的三个类别之一. 请注意,你正在从一个在线位置获取图像。 您也可以通过指定文件路径来使用自己的图像,如我们的教程中所示(https://andsky.com/tech/tutorials/how-to-add-images-to-your-webpage-using-html)。

保存您的 index.html 文件并将其加载到浏览器中,您应该收到这样的东西:

您的网页现在应该显示三个图像,每个图像都具有其分配的类别的不同规格。

要继续探索 CSS 类,尝试创建不同的规则集的新类,并将它们应用到不同的 HTML 内容类型。 请注意,类声明块中指定的属性和值只适用于它们目的的元素。

结论

您现在已经探索了如何创建类,分配给它们特定的属性值,并将其应用于文本和图像内容. 当您开始构建网站时,您将返回使用类(https://andsky.com/tech/tutorials/how-to-set-up-your-css-and-html-website-project)。

在下一个教程中,您将创建CSS _ID_选择器,这些选择器与类选择器类似,除了一些独特的功能外。