在HTML中为一个元素使用多个CSS类
- WBOY转载
- 2023-09-09 08:45:03852浏览
为了更快地创建CSS，我们可以给单个HTML元素赋予多个类，并分别为每个类设置样式。这种方法允许我们管理样式应用的冗余。我们可以将通用样式应用于许多类，而将特定类别的样式应用于特定类别。
语法
<tag_name class="class_1 class_2">
Example
在下面的示例中，我们使用class“Varma”的样式来应用于两个段落，而第二个段落应用了secondclass varma1的样式。
<!DOCTYPE html>
<html>
<style>
.varma {
font-size: larger;
margin-bottom: 35px;
background-color: lightgreen;
}
.varma1 {
color: red;
}
</style>
<body>
<p class="varma">
Hello Everyone.
</p>
<p class="varma varma1">
Welcome to Turorialspoint.
</p>
</body>
</html>
执行上述脚本后将生成结果。它是文本“欢迎来到tutorialspoint”与两个CSS样式以及文本“大家好”与单个CSS样式的组合。
Example: Using javascript
In the following example we are adding two style to an single text by declaring the .bg-blue style and .text-white style.
<!DOCTYPE html>
<html>
<style>
.bg-blue {
background-color: lightgreen;
}
.text-white {
color: red;
}
</style>
<body>
<div id="varma">Welcome To Tutorialspoint</div>
<script>
const box = document.getElementById('varma');
box.classList.add('bg-blue', 'text-white');
</script>
</body>
</html>
在执行时，脚本生成一个应用了两个CSS样式的文本输出：“欢迎来到教程点”。
以上是在HTML中为一个元素使用多个CSS类的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除