我们使用class属性来为HTML元素指定一个类。
多个 HTML 元素可以共享同一个类。使用类的各种属性，例如更改颜色、字体等，我们可以为这些 HTML 元素定义样式规则。具有该类的元素将根据定义的规则进行格式化。这称为类选择器。
要选择具有特定类的元素，您需要编写一个句点（.）字符，后面跟上类的名称，例如，让我们看一下“.black”类，
.black {
color: #000000;
}
对于我们文档中class属性设置为black的每个元素，以黑色渲染内容。例如，仅对class属性设置为black的
元素以黑色渲染内容。
h3.black {
color: #000000;
}
我们使用类属性来指向样式表中的类名。 JavaScript 还可以使用它来访问具有特定类名的元素。
示例 1
下面给出了一个示例，其中我们有两个 元素，它们的 class 属性具有相同的值。所有 元素将根据 head 标记中的样式定义进行相同的样式设置。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="meta tag in the web document"> <meta name="keywords" content="HTML,CSS"> <meta name="author" content="lokesh"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .information,ol { border: 2px solid black; margin: 20px; padding: 20px; } ol{ background-color: darkgoldenrod; } </style> </head> <body> <div class="information"> <h2>Jason</h2> <ol> <li>Bachelor's of Engineering</li> <li>IT stream</li> <li>section -A</li> </ol> </div> <div class="information"> <h2>Abdul</h2> <ol> <li>Bachelor's of Engineering</li> <li>IT stream</li> <li>section -B</li> </ol> </div> </body> </html>
以下是上述示例程序的输出。
Example 2
的中文翻译为：
示例2
下面给出了一个示例，其中我们有两个 元素，它们的 class 属性具有不同的值。两个 元素将根据 head 标记中的样式定义设置样式。
要定义多个类，请用空格分隔类名。元素将根据指定的类进行样式设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="meta tag in the web document">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="lokesh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.room {
font-family: monospace;
font-size: 200%;
color: tomato;
text-align: center;
}
.two{
font-family: cursive;
color: lawngreen;
text-align: center;
}
</style>
</head>
<body>
<p class="room">Meta tag contents are not visible on your browser.</p>
<p class="room two"> The mata tag is added inside the head tag.</p>
</body>
</html>
要定义多个类，请用空格分隔类名或指定不同的值。元素将根据指定的类进行样式设置。
Example 3
的中文翻译为：
示例 3
给出以下示例，其中我们有三个具有不同值的class属性的元素。根据head标签中的样式定义，两个元素将被等同地进行样式设置，而另一个元素将根据head标签中的样式定义进行样式设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="meta tag in the web document">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="lokesh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.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;
}
</style>
</head>
<body>
<div class="information">
<h2>Jason</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -A</li>
</ol>
</div>
<div class="information">
<h2>Abdul</h2>
<ol>
<li>Bachelor's of Engineering</li>
<li>IT stream</li>
<li>section -B</li>
</ol>
</div>
<div class="computerscience">
<h2>Satya</h2>
<ul>
<li>Bachelor's of Engineering</li>
<li>Cse stream</li>
<li>section -A</li>
</ul>
</div>
</body>
</html>
以下是上述示例程序的输出。
Example 4
的中文翻译为：
示例 4
另一个例子可以包括对<p>标签进行样式设置。通过以下方式，将所有具有class=”device”的<p>元素进行样式设置
<!DOCTYPE html>
<html>
<head>
<style>
p.device {
background: #000000;
color: #fffffF;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p class="device">Information about devices.</p>
<p>This is demo text</p>
</body>
</html>
示例 5
标签的样式可以通过多个类来完成，即此处的设备和配件 –
<!DOCTYPE html>
<html>
<head>
<style>
p.device {
background: #000000;
color: #fffffF;
}
p.accessories {
text-align: center;
}
</style>
</head>
<body>
<p class="device accessories">DEVICE DETAILS</p>
<p class="device">Information about devices.</p>
</body>
</html>
以上就是我们如何在HTML中使用不同的CSS类？的详细内容，更多请关注双恒网络其它相关文章！
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 我们如何在HTML中使用不同的CSS类？
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 我们如何在HTML中使用不同的CSS类？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
