CSS merosi: inherit, initial, unset, revert va hisoblangan qiymat

Qisqacha: Meros — elementning o'z qiymati bo'lmasa, ba'zi xususiyatlarning otadan bolaga o'tishi. Asosan matnga oid xususiyatlar (color, font-*, line-height) meros bo'ladi, qutiga oidlari (border, padding, margin, background, width) — yo'q. Global kalit so'zlar merosni boshqaradi: inherit — otadan ol, initial — standartdagi boshlang'ich qiymat, unset — meros bo'ladigan bo'lsa inherit, bo'lmasa initial, revert — brauzer uslubiga qaytar. currentColor — elementning joriy matn rangi. Har qiymat bosqichlardan o'tadi: kaskad g'olibi → hisoblangan (2em → 32px) → ishlatilgan (50% → 200px).

Bu darsda

• Qaysi xususiyatlar meros bo'lishini va nega shunday ekanini tushuntirasiz.
• Nega havola va forma tugmasi sahifa rangi va shriftini olmasligini bilasiz.
• inherit, initial, unset, revert va revert-layer farqini ayta olasiz, all: unset xavfini bilasiz.
• currentColor bilan rangni bitta joyda boshqarasiz.
• Qiymat qanday bosqichlardan o'tishini va getComputedStyle nimani qaytarishini bilasiz.

Oldin bilishingiz kerak: Kaskad, Specificity, Asosiy selektorlar va kombinatorlar, Chrome DevTools I.

1. Nega bu kerak?

CSS nima darsida portfoliodagi body ga shrift va rang bergan edik. Paragraflar, ro'yxatlar, sarlavhalar — hammasi ularni oldi. O'shanda "otadan meros oladi" degan edik. Lekin aloqa sahifasini ochsangiz, g'alati narsani ko'rasiz:

<style>
  body {
    font-family: Georgia, serif;
    font-size: 20px;
    color: #2f6b3a;
  }
</style>
<p>Stol band qilish uchun ismingizni yozing:</p>
<p>
  <label for="ism">Ismingiz</label>
  <input id="ism" name="ism" type="text" value="Malika">
  <button type="submit">Yuborish</button>
</p>
<p>
  Savollar:
  <a href="mailto:bahor@example.com">bahor@example.com</a>
</p>

Nimaga qarang: paragraf matni katta, bezakli shriftda va yashil. Maydon va tugma esa kichik, oddiy shriftda va qora. Havola ko'k. Chrome'da tekshirdik: tugma va maydon 20 piksel emas, taxminan 13 piksel va boshqa shriftda chiqdi.

Nega body dagi qoida paragrafga yetib bordi-yu, tugmaga yetmadi? Bu darsda meros qoidalarini bilib olamiz. Keyin bunday "itoatsiz" elementlarni bitta qator bilan tartibga keltirasiz.

2. Meros nima

2.1 Ta'rif

Meros (inheritance) — elementning xususiyati uchun kaskadda hech qanday qiymat topilmasa, uni otasidan olish. Asosiy selektorlar darsidagi DOM oila daraxtini eslang: body → main → article → p → span. Meros shu daraxt bo'ylab pastga tushadi — otadan bolaga, boladan nevaraga.

Oiladagi kabi. Bola otasining familiyasini oladi, agar unga boshqa familiya berilmagan bo'lsa. Lekin otasining bo'yini yoki kiyimini olmaydi — ular har kimniki o'zida. CSS'da ham ba'zi xususiyatlar "familiya" kabi o'tadi, ba'zilari esa har elementda o'zinikidir.

2.2 Qaysilar meros bo'ladi

Oddiy qoida: matn qanday ko'rinishi meros bo'ladi, quti qanday ko'rinishi va joylashishi — yo'q.

Jadvaldagi nomlarning ko'pini keyingi darslarda o'rganamiz. Hozir ularni yodlamang — faqat qaysi ustunda turganiga qarang.

Nega aynan shunday? Tasavvur qiling, border meros bo'lsa. Kartaga ramka bersangiz, uning ichidagi sarlavha, paragraf va narx ham o'z ramkasini olardi — ramka ichida ramka. Rang esa aksincha: kartaning hamma matni bir rangda bo'lishi odatda aynan siz xohlagan narsa.

<style>
  article {
    color: #2f6b3a;
    text-align: center;
    border: 2px solid #b4461a;
    padding: 8px;
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <p>Narxi: <strong>35 000 so'm</strong></p>
</article>

Nimaga qarang: sarlavha, paragraf va narx yashil va o'rtada — color va text-align meros bo'ldi. Ramka esa bitta, kartaning atrofida. Ichki elementlar ramkani ham, ichki bo'sh joyni ham olmadi.

Aniq xususiyat haqida shubha bo'lsa, MDN'dagi sahifasini oching. Pastdagi "Formal definition" jadvalida "Inherited" qatori bor: "yes" — meros bo'ladi, "no" — yo'q.

Tekshirib ko'ring: footer ga color: #5b6660; padding: 16px; berildi. Uning ichidagi paragraf nimani oladi?

2.3 Meros — eng kuchsiz

Muhim qoida: meros faqat elementning o'z qiymati bo'lmaganda ishlaydi. Elementga to'g'ridan-to'g'ri tushgan har qanday qoida merosdan kuchli. Hatto brauzer qoidasi ham.

«Nega bu kerak?» bo'limidagi "itoatsizlar" shu sabab:

• Havola. Brauzer uslublarida a uchun alohida rang bor (ko'k). Bu qoida havolaning o'ziga tushadi, shuning uchun otadan kelgan yashil rang ishlatilmaydi.
• Tugma, maydon, textarea, select. Brauzer ularga o'z shrifti, o'lchami va rangini beradi. Chrome'da tekshirdik: tugma va select — Arial, textarea — monospace (bir xil kenglikdagi harflar), hammasi taxminan 13 piksel.
• Sarlavhalar esa rangni oladi. Brauzer h1 ga kattalik va qalinlik beradi, lekin rang bermaydi. Shuning uchun o'z rangi berilmagan sarlavha body rangini meros qilib oladi.

Specificity darsida ko'rganimizdek, merosning og'irligi umuman yo'q. * (0,0,0) ham uni yengadi.

3. Global kalit so'zlar

Merosni o'zingiz boshqarishingiz mumkin. Buning uchun CSS'da beshta maxsus qiymat bor. Ular istalgan xususiyatda ishlaydi, shuning uchun global kalit so'zlar (CSS-wide keywords) deb ataladi.

3.1 inherit — otadan ol

inherit xususiyatni majburan otadan oladi. U "itoatsiz" elementlarni tartibga keltiradi:

<style>
  body {
    font-family: Georgia, serif;
    font-size: 20px;
    color: #2f6b3a;
  }
  footer {
    color: #5b6660;
  }
  footer a {
    color: inherit;
  }
  button,
  input {
    font: inherit;
  }
</style>
<p>
  <label for="ism">Ismingiz</label>
  <input id="ism" name="ism" type="text" value="Malika">
  <button type="submit">Yuborish</button>
</p>
<footer>
  <p>
    Savollar:
    <a href="mailto:bahor@example.com">bahor@example.com</a>
  </p>
</footer>

Nimaga qarang: maydon va tugma endi sahifa shriftida va kattaligida. Footer'dagi havola matn bilan bir xil kulrang, tagi chizilganligicha qoldi.

Bu yerdagi font — shriftga oid hamma xususiyatlarni (oila, o'lcham, qalinlik) birdan beradigan qisqa yozuv, uni Shrift asoslari darsida to'liq ko'rasiz. Demak, font: inherit — "shriftning hammasini otadan ol".

inherit meros bo'lmaydigan xususiyatlarda ham ishlaydi. border: inherit yozsangiz, element otasining ramkasini oladi. Kamdan-kam kerak bo'ladi, lekin bilib qo'ying: inherit "meros bo'lish-bo'lmasligidan qat'i nazar, otadan ol" degani.

3.2 initial — standartdagi boshlang'ich qiymat

Har xususiyatning CSS standartida yozilgan boshlang'ich qiymati (initial value) bor. initial shuni beradi. Tuzoq shundaki, bu brauzer uslubi emas:

• display: initial — inline. div ga yozsangiz, u blok bo'lishni to'xtatadi va satr ichiga tushadi.
• color: initial — qora. Ota rangi e'tiborga olinmaydi.
• font-size: initial — medium, ya'ni odatda 16 piksel, otasi qanchalik katta bo'lmasin.

Chrome'da uchalasini ham tekshirdik. Boshlang'ich qiymat har xususiyatning MDN sahifasida, o'sha "Formal definition" jadvalida yozilgan.

3.3 unset — "tabiiy holatga qaytar"

unset xususiyat turiga qarab ishlaydi:

• meros bo'ladigan xususiyatda — inherit kabi;
• meros bo'lmaydiganida — initial kabi.

Ya'ni unset elementni "hech qanday qoida yozilmagandek" holatga qaytaradi — brauzer uslublarisiz. color: unset — otaning rangi, margin: unset — nol.

3.4 revert — brauzer uslubiga qaytar

revert kaskadni bir manba orqaga qaytaradi. Sizning (muallif) qoidangizda yozilsa, brauzer uslubidagi qiymat olinadi. div uchun display: revert — block, havola uchun color: revert — yana brauzerning ko'k rangi.

To'rtalasini div larda solishtiramiz. Namoyish uchun qiymat style atributida yozildi:

<style>
  div {
    border: 2px solid #2f6b3a;
    margin: 4px;
  }
</style>
<section>
  <div>oddiy div</div>
  <div style="display: initial;">initial</div>
  <div style="display: unset;">unset</div>
  <div style="display: revert;">revert</div>
</section>

Nimaga qarang: birinchi va oxirgi div butun enni egallagan bloklar. O'rtadagi ikkitasi satr ichidagi kichik qutilarga aylandi — display ning standart boshlang'ich qiymati inline. revert esa brauzer bergan block ni qaytardi.

Jadvaldagi hamma qiymatni Chrome'da tekshirdik.

Tekshirib ko'ring: Stajyor brauzerning h1 uchun bergan kattaligini qaytarmoqchi: h1 { font-size: initial; }. U kutgan natijani oladimi?

3.5 revert-layer — oldingi qatlamga qaytar

Beshinchi kalit so'z Kaskad darsidagi kaskad qatlamlari bilan bog'liq. revert-layer qiymatni oldingi qatlamdagi qiymatga qaytaradi. Qatlamdan tashqarida esa revert kabi ishlaydi. Uni @layer bilan birga Kaskadni boshqarish darsida ishlatamiz.

3.6 all — hammasini birdan

all — deyarli hamma xususiyatlarni birdan o'zgartiradigan qisqa yozuv. U faqat global kalit so'zlarni oladi. Eng ko'p uchraydigani — all: unset: element brauzer bergan hamma bezakdan tozalanadi.

Masalan, tugmani oddiy matnli havolaga o'xshatish kerak. all: unset tugmaning ramkasini, fonini, ichki bo'sh joyini olib tashlaydi, shriftni esa otadan oladi:

<style>
  body {
    font-family: Georgia, serif;
  }
  button {
    all: unset;
    color: #2f6b3a;
    text-decoration: underline;
    cursor: pointer;
  }
  button:focus-visible {
    outline: 3px solid #1a5d1a;
    outline-offset: 2px;
  }
</style>
<p>Bron bekor qilindi. <button type="button">Qaytarish</button></p>

Nimaga qarang: tugma matn ichidagi havolaga o'xshaydi. Natija oynasini bosing va Tab tugmasini bosing — "Qaytarish" atrofida yashil fokus halqasi chiqadi.

cursor: pointer — sichqoncha ko'rsatkichini "qo'l"ga aylantiradi. Bu qiymat Baseline emas: iPhone'dagi Safari'da yo'q. Sababi oddiy — telefonda sichqoncha kursori umuman bo'lmaydi. U yerda qoida shunchaki ta'sirsiz qoladi, zarari yo'q, zaxira ham kerak emas.

Diqqat: all: unset fokus halqasini ham o'chiradi. Chrome'da tekshirdik: :focus-visible qoidasisiz Tab bilan kelingan tugmada halqa umuman chiqmadi. Klaviatura foydalanuvchisi — «Bahor»dagi Bobur — fokus qayerdaligini ko'rmay qoladi. Klaviatura va fokus darsidagi eng katta xato aynan shu edi. Shuning uchun all: unset dan keyin :focus-visible uslubini (Holat pseudo-klasslari) albatta qaytaring. cursor: pointer ham yo'qoladi — uni ham qo'lda yozing.

Yaxshi tomoni: all: unset elementning ma'nosini o'zgartirmaydi. Tugma tugmaligicha qoladi: Tab bilan fokus oladi, Enter bilan bosiladi, ekran o'quvchi uni "button" deb e'lon qiladi. CSS faqat ko'rinishni o'zgartiradi.

4. currentColor — joriy rang

4.1 Rangni bitta joyda boshqarish

CSS nima darsida border: 2px solid; yozganimizda ramka matn rangida chiqqan edi. Endi bu hodisaning nomini aytamiz. currentColor — elementning joriy color qiymatini bildiradigan kalit so'z. border-color, outline-color va matn chizig'ining rangi yozilmasa, ular aynan currentColor ni oladi. Chrome'da uchalasini tekshirdik.

currentColor ni o'zingiz ham yozishingiz mumkin. Masalan, «Bahor»ning tugma ko'rinishidagi bron havolasi:

<style>
  .bron-havola {
    color: #2f6b3a;
    border: 2px solid currentColor;
    padding: 4px 12px;
    text-decoration: none;
  }
  footer .bron-havola {
    color: #b4461a;
  }
</style>
<p>
  <a class="bron-havola" href="bron/">
    <svg width="12" height="12" viewBox="0 0 12 12"
         aria-hidden="true">
      <circle cx="6" cy="6" r="5" fill="currentColor"/>
    </svg>
    Stolni band qilish
  </a>
</p>
<footer>
  <p>
    <a class="bron-havola" href="bron/">
      <svg width="12" height="12" viewBox="0 0 12 12"
           aria-hidden="true">
        <circle cx="6" cy="6" r="5" fill="currentColor"/>
      </svg>
      Stolni band qilish
    </a>
  </p>
</footer>

Nimaga qarang: tepadagi havolaning matni, ramkasi va doiracha belgisi — uchalasi yashil. Pastdagi havolada faqat color o'zgartirildi, lekin ramka ham, belgi ham qizg'ish bo'ldi. Rang faqat bitta joyda yozilgan. text-decoration: none — havola tagidagi chiziqni olib tashlaydi (Matn bezagi). SVG ichidagi fill="currentColor" — SVG va ikonkalar darsidagi belgini havola rangiga bog'laydi.

4.2 currentColor qanday meros bo'ladi

Nozik joy bor. Ota border-color: currentColor oldi, bola esa border-color: inherit va o'zining boshqa color iga ega. Bolaning ramkasi qaysi rangda? Otaning rangidami yoki o'zinikidami?

Bolaning o'z rangida. Chrome'da tekshirdik. currentColor meros bo'lganda uning rangi emas, kalit so'zning o'zi o'tadi: "o'zingning joriy rangingni ol". Har element uni o'z color i bilan to'ldiradi.

Tekshirib ko'ring: .taom-karta ga color: #2f6b3a; border: 1px solid; berildi. Keyin dizayner "karta rangi qizg'ish bo'lsin" dedi va siz faqat color ni #b4461a ga o'zgartirdingiz. Ramka qaysi rangda bo'ladi?

5. Qiymat qanday hisoblanadi

5.1 Bosqichlar

Siz CSS'da font-size: 2em yoki width: 50% yozasiz. Ekranga esa aniq piksellar chiziladi. Yozilgan qiymat bir necha bosqichdan o'tib, sonli qiymatga aylanadi:

flowchart LR
  A["E'lon qilingan"] --> B["Kaskad g'olibi"]
  B --> C["Belgilangan"]
  C --> D["Hisoblangan"]
  D --> E["Ishlatilgan"]
  E --> F["Haqiqiy"]

Nimaga qarang: meros va kaskad chapdagi bosqichlarda ishlaydi. Pikselga aylanish — o'ngdagilarda.

Oltita nom ko'p tuyulishi tabiiy. Hammasini yodlash shart emas. Amalda uchtasi kerak bo'ladi: kaskad g'olibi, hisoblangan va ishlatilgan qiymat. Qolganlari — ular orasidagi oraliq qadamlar. Har bosqichni section { width: 400px; } ichidagi h2 { font-size: 2em; } va p { width: 50%; } misolida ko'ramiz:

1. E'lon qilingan qiymatlar (declared values) — elementga tushgan hamma deklaratsiyalar. h2 uchun — sizning 2em va brauzerning 1.5em i.
2. Kaskad g'olibi (cascaded value) — Kaskad tanlagan bitta qiymat: 2em. Ba'zan umuman bo'lmaydi — hech bir qoida tushmagan.
3. Belgilangan qiymat (specified value) — g'olib bo'lsa, o'sha. Bo'lmasa, meros bo'ladigan xususiyatda — otadan, bo'lmaydiganida — boshlang'ich qiymat. Global kalit so'zlar ham shu yerda hal bo'ladi.
4. Hisoblangan qiymat (computed value) — nisbiy qiymat imkon qadar aniqlanadi. 2em → 32px: buning uchun otaning shrifti kifoya. Lekin 50% hali 50%: uni pikselga aylantirish uchun sahifa joylashuvi kerak.
5. Ishlatilgan qiymat (used value) — joylashuv (layout) hisoblangandan keyingi aniq son. Joylashuv — brauzer har elementning ekrandagi o'rni va o'lchamini hisoblaydigan qadam (Critical Rendering Path darsidan). Endi 50% → 200px.
6. Haqiqiy qiymat (actual value) — qurilma cheklovlaridan keyin: masalan, yarim piksel ekranga moslab yaxlitlanadi.

5.2 Bolaga hisoblangan qiymat o'tadi

Meros bo'lganda bolaga otaning hisoblangan qiymati o'tadi, yozilgan matni emas. section ga font-size: 2em bersangiz va u 32 piksel bo'lsa, ichidagi paragraf "2em" ni emas, tayyor 32px ni oladi. Chrome'da tekshirdik: paragraf 32 piksel, 64 emas.

Bu keyingi darslar uchun muhim. O'lchamdagi em birliklari ichma-ich qo'llanganda nega "o'sib" ketishini O'lcham birliklari darsida, qator balandligining meros bilan bog'liq tuzog'ini Qator balandligi darsida ko'rasiz. CSS o'zgaruvchilari ham meros orqali tarqaladi.

5.3 Qiymatni brauzerdan so'rash

Yakuniy qiymatni ikki joyda ko'rasiz. Birinchisi — Chrome DevTools I darsidagi Computed yorlig'i. Ikkinchisi — Console. Elements'da elementni tanlang — u Console'da $0 nomini oladi. Yuqoridagi section misolida h2 ni tanlab birinchi qatorni, p ni tanlab ikkinchisini yozing:

getComputedStyle($0).fontSize; // "32px"
getComputedStyle($0).width; // "200px"

Bu JavaScript. getComputedStyle — "hisoblangan uslubni ber" degan brauzer funksiyasi. JavaScript'ni 08-qismdan o'rganasiz, bu funksiyani esa Stillarni JS'dan boshqarish darsida to'liq ishlatasiz. Hozir uni Console'ga yozib ko'rish yetarli.

Bitta qiziq tomoni bor. Nomida "computed" bo'lsa ham, width uchun u 50% ni emas, 200px ni — ishlatilgan qiymatni qaytaradi. Brauzer har xususiyat uchun eng foydali bosqichni tanlaydi. Standartda bu hal qilingan qiymat (resolved value) deb ataladi.

Tekshirib ko'ring: main { width: 600px; } ichida article { width: 50%; }. Article'ning hisoblangan va ishlatilgan kengligi qancha?

6. Ko'p uchraydigan xatolar

6.1 initial ni brauzer standarti deb o'ylash

div { display: initial; } — div satr ichiga tushib qoladi. Tuzatish: brauzer qiymati kerak bo'lsa — revert.

6.2 Forma elementlari shriftni olmaydi

Butun sayt bir shriftda, tugmalar va maydonlar — boshqasida. Tuzatish: button, input, textarea, select { font: inherit; }.

6.3 * bilan rang yoki shrift berish

* { color: #1f2a24; } — endi merosni ishlatib bo'lmaydi: footer ga bergan kulrang rang uning paragraflariga yetmaydi, chunki * ularga to'g'ridan-to'g'ri tushgan. Tuzatish: matnga oid qiymatlarni body ga bering.

6.4 all: unset dan keyin fokus yo'q

Tugma chiroyli, lekin klaviaturada qayerdaligini ko'rib bo'lmaydi. Tuzatish: :focus-visible uslubini qaytaring va Tab bilan sinang.

6.5 Rangni har elementga yozish

h2, p, li ga bir xil rang alohida-alohida yozilgan. Tuzatish: umumiy otaga bir marta — qolganini meros qiladi.

7. Mashqlar

1-mashq (oson): Meros bo'ladimi?

Har xususiyat uchun "ha" yoki "yo'q" deb yozing:

• color —
• padding —
• font-weight —
• border —
• text-align —
• background-color —
• line-height —
• width —

Ishora: "bu matnnimi yoki qutinimi bezaydi?" deb so'rang.

2-mashq (o'rta): Qiymatlarni oldindan ayting

<main>
  <h2>Menyu</h2>
  <p>Osh <a href="menyu/osh/">batafsil</a> <span>35 000</span></p>
</main>

main {
  color: #2f6b3a;
  font-size: 20px;
  border: 1px solid #5b6660;
}
h2 {
  color: initial;
}
p {
  border: inherit;
  font-size: unset;
}
a {
  color: unset;
}
span {
  color: revert;
}

1. h2 qaysi rangda?
2. Paragrafda ramka bormi?
3. Paragraf shrifti necha piksel?
4. Havola qaysi rangda?
5. span qaysi rangda?

Ishora: 5-savol eng qiyini. revert brauzer uslubiga qaytaradi — brauzer span ga rang beradimi? Bermasa, nima qoladi?

<style>
  main {
    color: #2f6b3a;
    font-size: 20px;
    border: 1px solid #5b6660;
  }
  h2 { color: initial; }
  p {
    border: inherit;
    font-size: unset;
  }
  a { color: unset; }
  span { color: revert; }
</style>
<main>
  <h2>Menyu</h2>
  <p>Osh <a href="menyu/osh/">batafsil</a> <span>35 000</span></p>
</main>

3-mashq (qiyin): "Tozalash" tugmasi

«Bahor» bron formasining oxiriga "Tozalash" tugmasi qo'shildi: <button type="reset">Tozalash</button>. Dizayner uni "Yuborish" tugmasi yonida kichik matnli havola kabi ko'rmoqchi: kulrang (#5b6660), tagi chizilgan, sahifa shriftida. Talablar:

1. class qo'shmang — tugmani type atributi bo'yicha tanlang (Atribut selektorlari).
2. Klaviaturada fokus aniq ko'rinsin.
3. Sichqoncha ustiga kelganda kursor "qo'l" bo'lsin.

So'ng javob bering: ekran o'quvchi bu elementni nima deb e'lon qiladi? Tab bilan unga yetib borish mumkinmi?

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
  }
  button[type="reset"] {
    all: unset;
    color: #5b6660;
    text-decoration: underline;
    cursor: pointer;
  }
  button[type="reset"]:focus-visible {
    outline: 3px solid #1a5d1a;
    outline-offset: 2px;
  }
</style>
<form action="https://example.com/bron" method="post">
  <p>
    <label for="ism">Ismingiz</label>
    <input id="ism" name="ism" type="text" required>
  </p>
  <p>
    <button type="submit">Yuborish</button>
    <button type="reset">Tozalash</button>
  </p>
</form>

4-mashq: Portfolio qadami — merosni ishga soling

1. O'tgan darsda footer havolalari uchun footer a { color: #5b6660; } yozgan edingiz — rang ikki joyda takrorlandi. Uni shunday o'zgartiringki, rang faqat footer qoidasida qolsin.
2. Aloqa sahifasidagi maydonlar, textarea va "Yuborish" tugmasi sayt shriftida bo'lsin. Bitta qoida yozing va uni faylning "Umumiy" bo'limiga qo'ying.
3. DevTools'da tugmani tanlang va Computed yorlig'ida font-family qiymatini tekshiring. O'zgartirishdan oldin qanday edi?
4. O'ylab ko'ring: nega 2-band uchun * { font-family: inherit; } yozish yomon fikr?

Ishora: 1-band uchun inherit, 2-band uchun font: inherit va vergul bilan guruhlash.

/* ===== 1. Umumiy ===== */
/* Forma elementlari brauzer shriftini emas, sayt shriftini olsin */
button,
input,
textarea {
  font: inherit;
}

/* ===== 2. Sahifa qismlari ===== */
footer {
  color: #5b6660;
}

/* (0,0,2) — rang footer'dan meros olinadi */
footer a {
  color: inherit;
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  button,
  input,
  textarea {
    font: inherit;
  }
</style>
<form action="https://example.com/aloqa" method="post">
  <p>
    <label for="ism">Ismingiz</label>
    <input id="ism" name="ism" type="text" autocomplete="name">
  </p>
  <p>
    <label for="xabar">Xabar</label>
    <textarea id="xabar" name="xabar" rows="3"></textarea>
  </p>
  <button type="submit">Yuborish</button>
</form>

8. Real ishda

• CSS reset. Deyarli har bir zamonaviy boshlang'ich CSS to'plamida forma elementlari uchun font: inherit qatori bor. Buni CSS reset darsida ko'rasiz.
• Ikonkalar. Ko'p ikonka to'plamlarida SVG rangi currentColor bilan yozilgan — ikonka o'zi turgan matn rangini oladi (SVG va ikonkalar).
• Dizayn tizimlari. Rang va shrift eng yuqori elementga bir marta beriladi, qolgani meros bilan tarqaladi. CSS o'zgaruvchilari ham shu yo'l bilan ishlaydi (CSS o'zgaruvchilari).
• Intervyuda so'raladi: "Qaysi xususiyatlar meros bo'ladi?", "initial va revert farqi nima?", "Computed va used value farqi?", "all: unset ning xavfi?".

Xulosa

• Meros — o'z qiymati bo'lmagan elementning qiymatni otadan olishi. Matnga oid xususiyatlar meros bo'ladi, qutiga oidlari — yo'q.
• Meros eng kuchsiz: elementga tushgan har qanday qoida, hatto brauzer qoidasi ham, undan kuchli. Shuning uchun havola va forma elementlari "itoatsiz".
• inherit — otadan ol; initial — standart boshlang'ich (brauzer emas!); unset — tabiiy holat; revert — brauzer uslubi; revert-layer — oldingi qatlam.
• all: unset hamma bezakni tozalaydi, lekin fokus halqasini ham — :focus-visible ni qaytaring.
• currentColor — joriy matn rangi; ramka, chiziq va ikonkani bitta color ga bog'laydi.
• Qiymat bosqichlari: e'lon qilingan → kaskad g'olibi → belgilangan → hisoblangan → ishlatilgan → haqiqiy. Bolaga hisoblangan qiymat o'tadi.

Keyingi dars: DevTools'da CSS bilan ishlash asoslari — kaskad, og'irlik va merosni DevTools'da ko'rishni, CSS'ni jonli tahrirlab, o'zgarishlarni faylga ko'chirishni o'rganamiz.

Manbalar

• MDN: "Inheritance", "inherit", "initial", "unset", "revert", "all", "currentColor", "getComputedStyle()" — developer.mozilla.org
• W3C: "CSS Cascading and Inheritance Level 5" (qiymat bosqichlari, meros va global kalit so'zlar bo'limlari) — w3.org/TR/css-cascade-5
• web.dev: "Learn CSS — Inheritance" — web.dev/learn/css/inheritance