2.1 KiB
2.1 KiB
title | localeTitle |
---|---|
CSS Classes | CSS类 |
CSS类
类是对HTML元素进行分组的有效方式,以便它们可以共享相同的样式。 CSS(层叠样式表)类可用于排列和装饰网页元素。
编写HTML时,可以向元素添加类。只需将属性class="myclass"
到元素即可。多个元素可以具有相同的类,一个元素可以具有多个类。通过将空格分隔的所有所需类名添加到HTML中的class
属性,可以为元素分配多个类。
<h1 class="super-man other-class third-class">"Here I come to save the day!"</h1>
<p>is a popular catchphrase that <span class="super-man">Super Man</span> often said.</p>
然后可以使用CSS设置这些元素的样式。在CSS中使用句点(。)引用类,但不应在HTML中添加句点。
.super-man {
color: red;
background-color: blue;
}
此代码为具有super-man
所有元素提供蓝色背景和红色文本颜色。 在CodePen上查看此示例 。
您还可以为元素声明多个类,例如:
<div class="ironMan alfred">
We're going to save you.
</div>
然后在你的css文件中:
.ironMan{
color:red;
}
.alfred{
background-color: black;
}
**注意:**类名传统上都是小写的,多个单词类名中的每个单词用连字符分隔(例如“super-man”)。
您还可以在同一行中组合类:
.superMan .spiderMan {
color: red;
background-color: blue;
}
您可以在此处查看上述代码的结果 。 在这里学习如何使用选择器组合CSS类。