Untuk menghindari pengulangan kode, kami menggunakan beberapa kelas dalam HTML dan CSS. Dengan CSS, kita juga dapat mendefinisikan dan menata kedua kelas bersama-sama dan menggunakan beberapa kelas dalam satu elemen dengan menetapkan id kelas yang berbeda. Pendekatan ini dapat diikuti dengan menggunakan sintaks yang dipisahkan oleh spasi untuk menambahkan beberapa kelas ke satu elemen HTML.
Pada artikel ini, kita akan belajar cara menambahkan beberapa kelas ke satu elemen.
Bagaimana Cara Menggunakan Beberapa Kelas di CSS?
Untuk menggunakan dua atau lebih kelas dalam satu elemen, setiap id kelas akan dipisahkan oleh spasi.
Anda harus mengikuti sintaks berikut untuk menggunakan beberapa kelas dalam satu elemen:
< kelas h1 = 'kelas_1 kelas_2 kelas_3' > menyerahkan... h >
Dalam satu elemen HTML, Anda dapat menyertakan lebih dari satu kelas dengan memisahkannya dengan spasi. Untuk kenyamanan Anda, berikut adalah contohnya.
Contoh: Menggunakan Beberapa Kelas di CSS
Pada contoh di bawah ini, kita akan membuat:
- Judul menggunakan tag
dan menetapkan nama kelas “ menuju ”.
- Selanjutnya, kita akan membuat heading lain dan menetapkannya ke dua kelas yang berbeda: “ menuju ' dan ' garis ”. Id kelas ini dipisahkan oleh spasi:
HTML
h1 >
< h1 kelas = 'garis judul' >
Beberapa Kelas di Satu Elemen
h1 >
Sekarang, mari kita pindah ke file CSS dan menerapkan beberapa properti CSS yang tercantum di bawah ini:
- Atur warna latar belakang ke heading menggunakan fungsi rgb() sebagai “ (69, 51, 151) ”.
- Mengatur gaya font “ miring ” untuk judulnya.
Di kelas HTML, judul pertama menggunakan nama kelas “ menuju ”. Jadi, gaya yang ditentukan dalam kelas yang ditentukan akan diimplementasikan pada judul pertama:
.menuju {
warna latar: rgb ( 69 , 51 , 151 ) ;
gaya font:italic
}
Untuk ' garis ” kelas, kami memiliki:
- Atur warna heading menggunakan fungsi rgb() sebagai “ (255, 0, 0) ”.
- Terapkan text-decoration-line sebagai “ menggarisbawahi ”.
Judul kedua akan memanfaatkan gaya kedua kelas: “ menuju ' dan ' garis ' kelas:
.garis {warna: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:garis bawah;
}
Setelah implementasi, periksa hasilnya:
Dari output, Anda dapat mengamati bahwa heading kedua menggunakan kedua kelas CSS.
Kesimpulan
Untuk menggunakan beberapa kelas pada satu elemen, gunakan id kelas yang berbeda yang dipisahkan oleh spasi putih. Dengan ini, kita dapat menerapkan properti CSS yang berbeda sekaligus. Hal ini memungkinkan kita untuk menggunakan kembali kelas di mana elemen serupa ada. Artikel ini menjelaskan cara menggunakan beberapa kelas dalam satu elemen dan menatanya bersama dengan sebuah contoh.