Menggunakan berbilang kelas CSS untuk satu elemen dalam HTML
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Cara membaca data excel dalam html
Mar 27, 2024 pm 05:11 PM
Cara membaca data excel dalam html: 1. Gunakan perpustakaan JavaScript untuk membaca data Excel 2. Gunakan bahasa pengaturcaraan bahagian pelayan untuk membaca data Excel;
Jalankan fungsi PHP menggunakan onclick
Feb 29, 2024 pm 04:31 PM
Kami juga akan merangkumi cara lain untuk melaksanakan fungsi PHP melalui acara onclick() menggunakan perpustakaan Jquery. Kaedah ini memanggil fungsi javascript, yang akan mengeluarkan kandungan fungsi php dalam halaman web. Kami juga akan menunjukkan cara lain untuk melaksanakan fungsi PHP menggunakan acara onclick(), memanggil fungsi PHP menggunakan JavaScript tulen. Artikel ini akan memperkenalkan cara untuk melaksanakan fungsi PHP, menggunakan kaedah GET untuk menghantar data dalam URL dan menggunakan fungsi isset() untuk menyemak data GET. Kaedah ini memanggil fungsi PHP jika data ditetapkan dan fungsi tersebut dilaksanakan. Menggunakan jQuery untuk melaksanakan fungsi PHP melalui acara onclick() yang boleh kita gunakan
Perbezaan antara appendChild dan append dalam JS
Feb 20, 2024 pm 06:57 PM
Perbezaan antara appendChild dan append dalam JS memerlukan contoh kod khusus Dalam JavaScript, apabila kami perlu menambahkan elemen anak secara dinamik pada DOM (Model Objek Dokumen), kami biasanya menggunakan kaedah appendChild dan tambah. Walaupun tujuan mereka adalah untuk menambah elemen kanak-kanak kepada elemen induk, terdapat beberapa perbezaan dalam penggunaannya. 1. kaedah appendChild Kaedah appendChild adalah salah satu kaedah bagi objek nod DOM
Apakah pemisah talian dreamweaver?
Apr 08, 2024 pm 09:54 PM
Gunakan teg <br> dalam Dreamweaver untuk membuat pemisah baris, yang boleh dimasukkan melalui menu, kekunci pintasan atau menaip terus. Boleh digabungkan dengan gaya CSS untuk mencipta baris kosong ketinggian tertentu. Dalam sesetengah kes, adalah lebih sesuai untuk menggunakan teg <p> dan bukannya teg <br> kerana ia secara automatik mencipta baris kosong antara perenggan dan menggunakan kawalan gaya.
Gunakan CSS Transform untuk mengubah elemen
Feb 24, 2024 am 10:09 AM
Penggunaan Transform dalam CSS Sifat Transform CSS ialah alat yang sangat berkuasa yang boleh melakukan operasi seperti terjemahan, putaran, penskalaan dan menyengetkan elemen HTML. Ia boleh mengubah penampilan elemen secara mendadak dan menjadikan halaman web lebih kreatif dan dinamik. Dalam artikel ini, kami akan memperkenalkan pelbagai kegunaan Transform secara terperinci dan memberikan contoh kod khusus. 1. Terjemah (Terjemah) Terjemah merujuk kepada menggerakkan elemen pada jarak tertentu di sepanjang paksi-x dan paksi-y. Sintaksnya adalah seperti berikut: tran
jQuery melaksanakan kaedah mudah untuk menentukan sama ada terdapat elemen anak dalam elemen
Feb 28, 2024 pm 03:21 PM
jQuery ialah perpustakaan JavaScript yang digunakan secara meluas yang menyediakan banyak kaedah mudah untuk memanipulasi elemen HTML. Dalam proses membangunkan halaman web, kita sering menghadapi situasi di mana kita perlu menentukan sama ada terdapat sub-elemen dalam elemen. Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk mencapai fungsi ini dan menyediakan contoh kod khusus. Untuk menentukan sama ada terdapat elemen anak dalam elemen, kita boleh menggunakan kaedah children() jQuery. Kaedah children() digunakan untuk mendapatkan padanan
Apakah maksud ridge dalam css
Apr 28, 2024 pm 04:06 PM
Ridge ialah gaya sempadan dalam CSS yang digunakan untuk mencipta sempadan 3D dengan kesan timbul, yang ditunjukkan sebagai garisan seperti rabung yang dinaikkan.
Cara menggunakan hover dalam css
Feb 23, 2024 pm 12:06 PM
Kelas pseudo hover dalam CSS ialah pemilih yang sangat biasa digunakan yang membolehkan kita menukar gaya elemen apabila tetikus melayang di atasnya. Artikel ini akan memperkenalkan penggunaan hover dan memberikan contoh kod khusus. 1. Penggunaan Asas Untuk menggunakan hover, kita perlu terlebih dahulu mentakrifkan gaya untuk elemen, dan kemudian menggunakan :hover pseudo-class untuk menentukan gaya yang sepadan apabila tetikus melayang. Sebagai contoh, kami mempunyai elemen butang Apabila tetikus melayang di atas butang, kami mahu warna latar belakang butang bertukar kepada merah dan warna teks kepada putih.
