Bu modulda CSS’ning poydevori o’rganildi: selektor turlari, qoidalar to’qnashganda kim g’olib chiqishi (specificity), meros va kombinatorlar.

Selektorlar

To’rt asosiy selektor turi:

p        { color: gray; }      /* teg: barcha <p> */
.card    { padding: 16px; }    /* class: class="card" berilganlar */
#header  { background: white; }/* id: id="header" berilgan yagona element */
*        { margin: 0; }        /* universal: hamma element */

Natija: har bir qoida o’z "nishoniga" qo’llanadi — teg nomi bilan keng, class bilan guruhlangan, id bilan yakka element tanlanadi.

Izohlar

CSS izohi /* ... */ orasiga yoziladi (HTML’dagi <!-- --> bu yerda ishlamaydi):

/* Asosiy menyu uslublari */
.menu { font-size: 14px; }

Katta faylda bo’limlarni izoh bilan ajratish keyin o’z kodingizni tez topishga yordam beradi.

Specificity — kim g’olib

Bitta elementga bir nechta qoida tegsa, brauzer selektorning "og’irligiga" qarab tanlaydi:

p { color: gray; }
.muhim { color: red; }

<p class="muhim">Bu matn qizil.</p>

Natija: ikkala qoida ham tegadi, lekin class kuchliroq — matn qizil.

Og’irligi teng bo’lsa, keyinroq yozilgani g’olib chiqadi.

Tipik xato. Uslub "ishlamayapti" deb yangi qoida yozaverish. Aslida uni kuchliroq selektor bosib turgan bo’ladi — DevTools’da element ustidagi ustidan chizilgan qoidalarni ko’ring: kim kimni yengganini brauzerning o’zi ko’rsatadi.

Meros (inheritance)

Matnga oid xossalar (color, font-family, font-size, line-height) ota elementdan bolalarga "yuqadi"; quti xossalari (margin, padding, border, background) esa yuqmaydi:

body {
  font-family: Verdana, sans-serif;
  color: #222;
}

Natija: butun sahifa matni bitta qoida bilan Verdana va to’q kulrang bo’ladi — har tegga alohida yozish shart emas.

Kombinatorlar

Elementni joylashuviga qarab tanlash:

.card > p { margin: 0; }

Natija: faqat .cardning to’g’ridan-to’g’ri ichidagi xatboshilar margin’siz bo’ladi; ichkariroqdagilar tegilmaydi.

Qo’shma selektorlar

Selektorlarni yonma-yon yopishtirish "va" degani: p.eslatma — eslatma class’li xatboshilar; .katta.qizil — ikkala class ham berilgan elementlar. Probel bilan yozilgan p .eslatmadan farqi katta: probel — ichidagi, probelsiz — o’sha elementning o’zi.

Class yoki ID? !important haqida

Uslub berish uchun deyarli har doim class to’g’ri tanlov: takrorlanadi, birlashtiriladi, specificity’si o’rtacha. id — sahifada yagona belgi (JavaScript va ichki havolalar uchun asqotadi), uslubda kamdan-kam kerak.

qiymat !important yozuvi qoidani hamma narsadan ustun qiladi — va shu bilan kodni boshqarib bo’lmas holga keltiradi: uni faqat boshqa !important yenga oladi. Bu vosita — oxirgi chora; specificity’ni tushungan odam unga muhtoj bo’lmaydi.

Amaliyot

1. Uch xil selektor (teg, class, id) bilan uch qoida yozib, bitta elementga ataylab to’qnashtiring — DevTools’da kim yutganini tekshiring.
2. bodyga shrift va rang berib, meros qanday tarqalishini kuzating; bitta ichki elementga boshqa rang berib merosni "sindiring".
3. Menyu tuzing (ul > li > a) va faqat menyu ichidagi havolalarni kombinator bilan uslublang — sahifadagi boshqa havolalarga tegmasin.
4. p.muhim va p .muhim farqini kichik misolda o’zingizga isbotlang.
5. Bitta qoidaga !important qo’yib, uni yengishga urinib ko’ring — va nima uchun undan qochish kerakligini his qiling.

Modul testini ishlang — keyingi modul: box model, ya’ni har bir element aslida "quti" ekani.