Atribut class

Atribut class menetapkan satu atau lebih kelas untuk unsur (yang dimaksudkan dengan unsur ialah tag).

Ini dilakukan untuk kemudian mengakses melalui CSS sekumpulan unsur yang mempunyai kelas yang sama, dan menggunakan sifat-sifat tertentu untuknya (misalnya, menukar warna teks, saiz font dan sebagainya).

Terdapat juga atribut id, yang serupa dengan atribut class membolehkan pemilihan unsur pada halaman HTML.

Perbezaan antara atribut class dan atribut id ialah class memilih sekumpulan unsur (walaupun ia diberikan kepada satu unsur - ia kemudiannya boleh diberikan kepada unsur lain), manakala id memilih unsur yang unik (tidak sepatutnya ada unsur lain dengan id tersebut pada halaman laman web, jika tidak akan berlakunya konflik).

Bagaimana untuk memahami, apa yang perlu diberikan kepada unsur - kelas atau id? Kelas diberikan kepada unsur-unsur yang berulang pada halaman laman web (supaya tidak menulis kod CSS yang sama beberapa kali). Walaupun unsur tersebut buat masa ini hanya satu, tetapi anda merasakan bahawa unsur yang serupa mungkin muncul pada masa hadapan - berikan kelas kepada unsur ini. Jika anda yakin, bahawa unsur tersebut adalah unik - maka berikan id kepadanya. Walaupun pada masa kini terdapat kecenderungan untuk memberikan kelas kepada semua unsur, dan meninggalkan id untuk JavaScript, namun ia bukanlah satu amalan yang diterima umum.

Beberapa kelas boleh diberikan kepada unsur, dalam kes ini ia hendaklah disenaraikan dipisahkan oleh ruang.

Nama kelas hendaklah ditaip menggunakan huruf Inggeris, nombor, tanpa ruang (ruang memisahkan kelas antara satu sama lain, sebagai gantinya boleh digunakan garis bawah atau sempang). Kelas tidak sepatutnya bermula dengan nombor (dalam HTML5 sudah boleh, tetapi tidak akan berfungsi dalam pelayar lama).

Nama untuk kelas hendaklah diberikan dalam bahasa Inggeris (bukan bahasa Rusia, hanya menggunakan huruf Inggeris!). Nama hendaklah bermakna, mencerminkan intipati kelas.

Contoh

Mari kita tetapkan warna teks merah kepada semua perenggan dengan kelas test:

<p class="test">Perenggan dengan kelas test.</p>
<p>Perenggan kawalan tanpa kelas.</p>

.test {
	color: red;
}

Contoh . Beberapa kelas untuk unsur

Dan di sini mari kita tetapkan beberapa kelas untuk perenggan pertama - test1 dan test2 (tulis ia dipisahkan oleh ruang). Kelas test1 menetapkan warna teks merah, dan kelas test2 menetapkan saiz font kepada 20px. Perenggan kedua hanya diberikan kelas test1 (perenggan ini akan menjadi merah), dan perenggan ketiga - kelas test2 (perenggan ini akan mempunyai saiz font 20px). Perenggan pertama, yang mempunyai dua kelas, akan mempunyai kedua-dua warna merah dan saiz font 20px secara serentak:

<p class="test1 test2">Perenggan dengan dua kelas test1 dan test2.</p>
<p class="test1">Perenggan dengan kelas test1.</p>
<p class="test2">Perenggan dengan kelas test2.</p>
<p>Perenggan kawalan tanpa kelas.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Lihat juga

atribut id,
yang menetapkan pengecam unik untuk unsur