Oldingi darslarda biz sahifaning elementlarini teg nomi bilan tanladik, stillarni o'rnatdik, masalan, bir vaqtning o'zida barcha paragraflarga. Biroq, sahifada turli xil stillarni qo'llash kerak bo'lgan har xil turdagi paragraflar bo'lishi mumkin. Ushbu muammoni hal qilish uchun turli xil paragraflarni CSS classlarga tayinlash mumkin.
Har qanday tegga class belgilash uchun siz ushbu tegga class atributini va unda - harflar, raqamlar, pastki chiziq va defislardan iborat o'zingiz o'ylab topgan class nomini yozishingiz kerak.
Keling, bir misolni ko'rib chiqaylik. Ikki turdagi sinflar - eee va zzz bilan paragraflar yarataylik.
<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>
CSS-da turli classlarga ega paragraflarga murojaat qilaylik va ularga ba'zi stillarni o'rnatamiz. Masalan, biz zzz classidagi paragraflarni qizil rangga, eee classiga ega paragraflarni esa yashil rangga bo'yaymiz.
Buning uchun siz CSS faylida classarimizga murojaat qilishingiz kerak. classga ulanish quyidagi sintaksisga ega. avval nuqta belgisi, keyin esa class nomi yoziladi. Ya'ni eee classi uchun .eee, zzz classi uchun esa .zzz yozish kerak.
Shunday qilib qilib yuqoridagilarni bajaramiz. HTMLimzga Biz kirgan classlar uchun CSS stillarni qo'shamiz.
.eee {
color: green;
}
.zzz {
color: red;
}