在HTML中為一個元素使用多個CSS類
- WBOY轉載
- 2023-09-09 08:45:03846瀏覽
為了更快地建立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刪除