Rumah >hujung hadapan web >html tutorial >Menggunakan berbilang kelas CSS untuk satu elemen dalam HTML
Menggunakan berbilang kelas CSS untuk satu elemen dalam HTML
- WBOYke hadapan
- 2023-09-09 08:45:03852semak imbas
Untuk mencipta CSS dengan lebih pantas, kami boleh menetapkan berbilang kelas kepada satu elemen HTML dan menggayakan setiap kelas secara berasingan. Pendekatan ini membolehkan kami menguruskan redundansi dalam aplikasi gaya. Kami boleh menggunakan gaya biasa pada banyak kelas dan gaya khusus kategori pada kategori tertentu.
Tatabahasa
<tag_name class="class_1 class_2">
Contoh
Dalam contoh di bawah, kami menggunakan gaya kelas "Varma" untuk digunakan pada dua perenggan, dan perenggan kedua menggunakan gaya varma1 kelas kedua.
<!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>
Hasilnya akan dijana selepas melaksanakan skrip di atas. Ia adalah gabungan teks "Selamat Datang ke tutorialspoint" dengan dua gaya CSS dan teks "Hello semua" dengan satu gaya CSS.
Contoh: Menggunakan javascript
Dalam contoh berikut kami menambah dua gaya pada satu teks dengan mengisytiharkan gaya .bg-biru dan .teks-putih.
<!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>
Apabila dilaksanakan, skrip menjana output teks dengan dua gaya CSS digunakan: "Selamat Datang ke Tutorial Point".
Atas ialah kandungan terperinci Menggunakan berbilang kelas CSS untuk satu elemen dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!