為了更快地創(chuàng)建CSS，我們可以給單個HTML元素賦予多個類，并分別為每個類設(shè)置樣式。這種方法允許我們管理樣式應(yīng)用的冗余。我們可以將通用樣式應(yīng)用于許多類，而將特定類別的樣式應(yīng)用于特定類別。
語法
<tag_name class="class_1 class_2">
登錄后復制
Example
在下面的示例中，我們使用class“Varma”的樣式來應(yīng)用于兩個段落，而第二個段落應(yīng)用了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>
登錄后復制
執(zhí)行上述腳本后將生成結(jié)果。它是文本“歡迎來到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>
登錄后復制
在執(zhí)行時，腳本生成一個應(yīng)用了兩個CSS樣式的文本輸出：“歡迎來到教程點”。
以上就是在HTML中為一個元素使用多個CSS類的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
