我们使用class属性来为HTML元素指定一个类。
多个 HTML 元素可以共享同一个类。使用类的各种属性，例如更改颜色、字体等，我们可以为这些 HTML 元素定义样式规则。具有该类的元素将根据定义的规则进行格式化。这称为类选择器。
要选择具有特定类的元素，您需要编写一个句点（.）字符，后面跟上类的名称，例如，让我们看一下“.black”类，
.black { color: #000000;}
对于我们文档中class属性设置为black的每个元素，以黑色渲染内容。例如，仅对class属性设置为black的
元素以黑色渲染内容。
立即学习“前端免费学习笔记（深入）”；
h3.black { color: #000000;}
我们使用类属性来指向样式表中的类名。 JavaScript 还可以使用它来访问具有特定类名的元素。
示例 1
下面给出了一个示例，其中我们有两个 元素，它们的 class 属性具有相同的值。所有 元素将根据 head 标记中的样式定义进行相同的样式设置。
.information,ol { border: 2px solid black; margin: 20px; padding: 20px; } ol{ background-color: darkgoldenrod; } Jason
- Bachelor's of Engineering
- IT stream
- section -A
Abdul
- Bachelor's of Engineering
- IT stream
- section -B
以下是上述示例程序的输出。
Example 2
的中文翻译为：
示例2
下面给出了一个示例，其中我们有两个 元素，它们的 class 属性具有不同的值。两个 元素将根据 head 标记中的样式定义设置样式。
要定义多个类，请用空格分隔类名。元素将根据指定的类进行样式设置。
.room { font-family: monospace; font-size: 200%; color: tomato; text-align: center; } .two{ font-family: cursive; color: lawngreen; text-align: center; } Meta tag contents are not visible on your browser.
The mata tag is added inside the head tag.
要定义多个类，请用空格分隔类名或指定不同的值。元素将根据指定的类进行样式设置。
Example 3
的中文翻译为：
示例 3
给出以下示例，其中我们有三个具有不同值的class属性的元素。根据head标签中的样式定义，两个元素将被等同地进行样式设置，而另一个元素将根据head标签中的样式定义进行样式设置
.information,ol { border: 2px solid black; margin: 20px; padding: 20px; } .computerscience,ul { border: 2px solid black; margin: 20px; padding: 20px; } ol{ background-color: brown; } ul{ background-color: tomato; } Jason
- Bachelor's of Engineering
- IT stream
- section -A
Abdul
- Bachelor's of Engineering
- IT stream
- section -B
Satya
- Bachelor's of Engineering
- Cse stream
- section -A
以下是上述示例程序的输出。
Example 4
的中文翻译为：
示例 4
另一个例子可以包括对
标签进行样式设置。通过以下方式，将所有具有class=”device”的
元素进行样式设置
p.device { background: #000000; color: #fffffF; } This is demo text
Information about devices.
This is demo text
示例 5
标签的样式可以通过多个类来完成，即此处的设备和配件 –
p.device { background: #000000; color: #fffffF; } p.accessories { text-align: center; } DEVICE DETAILS
Information about devices.
以上就是我们如何在HTML中使用不同的CSS类？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1551979.html
微信扫一扫 
支付宝扫一扫 
