Kelas Elemen dalam CSS

Dalam pelajaran sebelumnya, kita memilih elemen halaman berdasarkan nama tag, menetapkan gaya, contohnya, kepada semua perenggan sekaligus. Namun, dalam halaman, mungkin terdapat pelbagai jenis perenggan, yang perlu diterapkan gaya yang berbeza. Untuk menyelesaikan masalah ini, perenggan yang berbeza boleh dikategorikan kepada kelas CSS yang berbeza.

Untuk mengkategorikan tag kepada sesuatu kelas, anda perlu menulis atribut class untuk tag tersebut, dan di dalamnya - nama kelas yang anda cipta, terdiri daripada huruf, nombor, simbol garis bawah dan sengkang.

Mari kita lihat contoh. Mari buat perenggan dengan dua jenis kelas - eee dan zzz:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

Sekarang mari kita arahkan dalam CSS kepada perenggan dengan kelas yang berbeza dan tetapkan beberapa gaya untuk mereka. Sebagai contoh, mari warnakan perenggan dengan kelas zzz dengan warna merah, dan perenggan dengan kelas eee - dengan warna hijau.

Untuk melakukan ini, dalam fail CSS anda perlu mengarahkan kepada kelas kami. Arahan mempunyai sintaks berikut: pertama sekali ialah simbol titik, dan kemudian nama kelas yang kami cipta. Maksudnya, untuk mengarahkan kepada kelas eee, anda perlu menulis .eee, dan untuk kelas zzz - tulis .zzz.

Jadi, mari lakukan seperti yang diterangkan. Mari tambahkan kepada HTML kami juga gaya CSS untuk kelas yang telah kami perkenalkan:

.eee {
	color: green;
}
.zzz {
	color: red;
}

Jika kita menjalankan kod kami, hasilnya akan seperti berikut:

Diberi kod berikut:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

Warnakan elemen dengan kelas odd dengan warna merah dan elemen dengan kelas eve - dengan warna hijau.

Diberi kod berikut:

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Warnakan semua elemen dengan kelas eee dengan warna merah.

Terangkan mengapa dalam tugas sebelumnya, tag li diwarnakan dengan warna merah, walaupun kelas yang menetapkan warna, diberikan kepada tag ul.