Seriya: CSS Basics Dars 6

CSS Asoslari - 6-dars

Qaysi CSS property'lar meros bo'ladiganini va bo'lmaydiganini o'rganing. inherit, initial, unset qiymatlarini va ularning farqlarini tushuning.

6-dars

O'zing nomla

Bu darsda qaysi CSS property'lar meros bo'ladiganini va bo'lmaydiganini, shuningdek inherit, initial, unset qiymatlarini o'rganamiz.

1. Qaysi CSS property'lar meros bo'ladi?

👉 Oldingi darsda bildik: hamma CSS meros bo'lmaydi.

CSS property'lar 2 guruhga bo'linadi:

🧬 1️⃣ Meros bo'ladiganlar (inherit qiladi) 🧱 2️⃣ Meros bo'lmaydiganlar

Brauzer buni oldindan belgilab qo'ygan.

🧬 Meros bo'ladigan property'lar

Bular asosan matn va o'qish bilan bog'liq.

Eng muhimlari 👇

  • color
  • font-family
  • font-size
  • font-weight
  • font-style
  • line-height
  • letter-spacing
  • word-spacing
  • text-align
  • text-transform
  • visibility

Misol 👇

body {
  color: #333;
  font-family: Arial;
}

<body>
  <p>Salom</p>
  <span>World</span>
  <a href="#">Link</a>
</body>

👉 Sen p, span, a ga yozmasang ham 👉 hammasi shu style'da chiqadi

Bu — toza inheritance

🧱 Meros bo'lmaydigan property'lar

Bular box / layout / joylashuv bilan bog'liq.

Eng ko'p uchraydiganlari 👇

  • margin
  • padding
  • border
  • width
  • height
  • background
  • display
  • position
  • top / right / bottom / left
  • flex
  • grid
  • overflow

Misol 👇

div {
  padding: 20px;
}

<div>
  <p>Text</p>
</div>

👉 p padding olmaydi ❌

Sabab: padding meros bo'lmaydi

Ko'p adashiladigan joy ⚠️

background meros bo'ladimi?

❌ Yo'q

div {
  background: red;
}

<div>
  <p>Text</p>
</div>

👉 p qizil bo'lib ko'rinadi, lekin bu inheritance emas.

Bu:

p shaffof

ostidagi div ko'rinib turibdi

📌 Juda muhim farq!

Agar majburan meros qildirmoqchi bo'lsam-chi?

Buni keyingi darsda to'liq ko'ramiz, lekin teaser 👇

p {
  color: inherit;
}

👉 Ota elementdan majbur olib oladi

2. inherit, initial, unset nima?

CSS'da merosni va default holatni QO'LDA boshqarish

1️⃣ inherit — ota'dan majburan ol

Ma'nosi:

"Qanday bo'lsa ham ota elementdan ol"

Misol 👇

div {
  color: red;
}

p {
  color: inherit;
}

<div>
  <p>Text</p>
</div>

👉 color allaqachon meros bo'ladi, lekin bu yerda sen aniq aytyapsan:

"ota'dan ol"

Qiziq joy ⚠️

Meros bo'lmaydigan property'ni ham majbur o'tkazadi:

div {
  border: 2px solid red;
}

p {
  border: inherit;
}

<div>
  <p>Text</p>
</div>

👉 Endi p ham border oladi 😮

📌 Normal holatda bu bo'lmas edi

2️⃣ initial — brauzer default'iga qayt

Ma'nosi:

"Brauzer nimani default deb bilsa, shuni qo'y"

Misol 👇

p {
  color: initial;
}

<div style="color: red;">
  <p>Text</p>
</div>

👉 p rangi:

  • ota'dan ham olmaydi
  • sen yozgan CSS'ni ham unutadi
  • browser defaultga qaytadi

📌 color uchun bu odatda — qora

3️⃣ unset — vaziyatga qarab aqlli qaror

Ma'nosi:

"Agar bu property meros bo'lsa → inherit agar bo'lmasa → initial"

Ya'ni: 👉 aqlli aralash rejim

Misol 👇

p {
  color: unset;
}

<div style="color: red;">
  <p>Text</p>
</div>

color → meros bo'ladi → ota'dan oladi

p {
  margin: unset;
}

margin → meros bo'lmaydi → default (0)

Eng muhim farqlarni jadvalda 🧠

Qiymat Nima qiladi
inherit Har doim ota'dan oladi
initial Har doim browser default
unset Meros bo'lsa → inherit, bo'lmasa → initial

Qachon qaysi biri ishlatiladi?

✔ inherit — dizaynni ota bilan bog'lash uchun ✔ initial — hamma narsani tozalash uchun ✔ unset — xavfsiz reset qilish uchun

Xulosa

CSS property'lar meros bo'ladigan va bo'lmaydiganlarga bo'linadi. inherit, initial, va unset qiymatlari yordamida merosni va default holatni qo'lda boshqarish mumkin.