Untuk mengelakkan pengulangan kod, kami menggunakan berbilang kelas dalam HTML dan CSS. Dengan CSS, kita juga boleh mentakrifkan dan menggayakan kedua-dua kelas bersama-sama dan menggunakan berbilang kelas dalam satu elemen dengan memberikan mereka id kelas yang berbeza. Pendekatan ini boleh diikuti dengan menggunakan sintaks yang dipisahkan ruang untuk menambah berbilang kelas pada satu elemen HTML.
Dalam artikel ini, kita akan belajar cara menambah berbilang kelas pada satu elemen.
Bagaimana Menggunakan Pelbagai Kelas dalam CSS?
Untuk menggunakan dua atau lebih kelas dalam satu elemen, setiap id kelas akan dipisahkan oleh ruang.
Anda perlu mengikuti sintaks berikut untuk menggunakan berbilang kelas dalam satu elemen:
< kelas h1 = 'kelas_1 kelas_2 kelas_3' > menyerahkan... h >
Dalam satu elemen HTML, anda boleh memasukkan lebih daripada satu kelas dengan mengasingkannya dengan ruang. Untuk kemudahan anda, berikut adalah contoh.
Contoh: Menggunakan Pelbagai Kelas dalam CSS
Dalam contoh di bawah, kami akan mencipta:
- Tajuk menggunakan tag
dan berikan nama kelas “ tajuk ”.
- Seterusnya, kami akan mencipta tajuk lain dan menetapkannya kepada dua kelas berbeza: “ tajuk ” dan “ barisan ”. Id kelas ini dipisahkan oleh ruang:
HTML
h1 >
< h1 kelas = 'baris tajuk' >
Pelbagai Kelas dalam Satu Elemen
h1 >
Sekarang, mari beralih ke fail CSS dan gunakan beberapa sifat CSS yang disenaraikan di bawah:
- Tetapkan warna latar belakang pada tajuk menggunakan fungsi rgb() sebagai “ (69, 51, 151) ”.
- Tetapkan gaya fon “ condong ” untuk tajuk.
Dalam kelas HTML, tajuk pertama menggunakan nama kelas ' tajuk ”. Jadi, gaya yang dinyatakan dalam kelas yang ditentukan akan dilaksanakan pada tajuk pertama:
.heading {
warna latar belakang: rgb ( 69 , 51 , 151 ) ;
gaya fon:italic
}
Untuk ' barisan ” kelas, kami ada:
- Tetapkan warna tajuk menggunakan fungsi rgb() sebagai “ (255, 0, 0) ”.
- Gunakan baris hiasan-teks sebagai “ garis bawah ”.
Tajuk kedua akan menggunakan gaya kedua-dua kelas: “ tajuk ” dan “ barisan ” kelas:
.line {warna: rgb ( 255 , 0 , 0 ) ;
text-decoration-line:underline;
}
Selepas pelaksanaan, semak hasilnya:
Daripada output, anda boleh melihat bahawa tajuk kedua menggunakan kedua-dua kelas CSS.
Kesimpulan
Untuk menggunakan berbilang kelas pada satu elemen, gunakan id kelas berbeza yang dipisahkan oleh ruang putih. Menggunakan ini, kita boleh menggunakan sifat CSS yang berbeza sekaligus. Ia membolehkan kami menggunakan semula kelas di mana unsur serupa wujud. Artikel ini menerangkan cara menggunakan berbilang kelas dalam satu elemen dan menggayakannya bersama-sama dengan contoh.