Atribut class
Atribut class element (element deganda teg tushuniladi) uchun bir yoki bir nechta
klasslarni belgilaydi.
Bunga sabab, keyinchalik CSS orqali bir xil klass belgilangan elementlar guruhiga murojaat qilish va ularga ma'lum xususiyatlarni qo'llash (masalan, matn rangini, shrift hajmini o'zgartirish va hokazo) uchundir.
Shuningdek, atribut
id mavjud bo'lib, u class atributiga o'xshab
HTML sahifasidagi elementlarni tanlash imkonini beradi.
class atributi bilan atribut
id o'rtasidagi farq shundaki, class elementlar guruhini tanlaydi
(hatto u bitta elementga berilgan bo'lsa ham - keyinchalik uni boshqasiga ham berish mumkin),
id esa noyob elementni tanlaydi (sahifada shu id ga ega bo'lgan yana element bo'lmasligi kerak,
aks holda nizolar kelib chiqadi).
Elementga nima berish kerakligini qanday tushunish kerak - class yoki id? Class sayt sahifalarida takrorlanadigan elementlar uchun beriladi (bir xil CSS kodini bir necha marta yozmaslik uchun). Hozirda sizda bu element bitta bo'lsa ham, lekin siz keyinchalik shunga o'xshash elementlar paydo bo'lishi mumkinligini his qilsangiz - bu elementga class bering. Agar siz bunday element noyob ekanligiga ishonch bo'lsa - unga id bering. Garchi hozirgi vaqtda barcha elementlarga class berish, id ni esa JavaScript uchun qoldirish tendentsiyasi mavjud bo'lsa-da, lekin u hammaga qabul qilingan emas.
Elementga bir nechta klass berish mumkin, bunda ular probel orqali sanab o'tilishi kerak.
Klass nomlari ingliz harflari, raqamlar bilan yozilishi kerak, probelsiz (probel klasslarni bir-biridan ajratadi, uning o'rniga pastki chiziq yoki defis ishlatish mumkin). Klasslar raqamdan boshlanmasligi kerak (HTML5 da endi mumkin, lekin eski brauzerlarda ishlamaydi).
Klasslarga nomlar ingliz tilida berilishi kerak (rus tilida emas, shunchaki ingliz harflari bilan!). Nomlar mazmunli, klassning mohiyatini aks ettirishi kerak.
Misol
Keling, test klassiga ega bo'lgan barcha abzatslarga qizil matn rangini belgilaymiz:
<p class="test">Test klassiga ega abzats.</p>
<p>Klassis nazorat abzatsi.</p>
.test {
color: red;
}
:
Misol . Element uchun bir nechta klasslar
Bu yerda esa birinchi abzatsga bir nechta klass beramiz - test1 va test2 (ularni probel orqali yozamiz). test1 klassi qizil matn rangini belgilaydi, test2 klassi esa shrift hajmini 20px qilib belgilaydi. Ikkinchi abzatsga faqat test1 klassi berilgan (bu abzats qizil bo'ladi), uchinchi abzatsga esa test2 klassi (bu abzats 20px hajmda shriftga ega bo'ladi). Ikki klassga ega bo'lgan birinchi abzats bir vaqtning o'zida ham qizil rangga, ham 20px hajmda shriftga ega bo'ladi:
<p class="test1 test2">Test1 va test2 ikkita klassiga ega abzats.</p>
<p class="test1">Test1 klassiga ega abzats.</p>
<p class="test2">Test2 klassiga ega abzats.</p>
<p>Klassisiz nazorat abzatsi.</p>
.test1 {
color: red;
}
.test2 {
font-size: 20px;
}
:
Shuningdek qarang
-
atribut
id,
bu elementlar uchun noyob identifikatorlarni belgilaydi
