CSS’da inheritance borligini bilarmidingiz?

Biz CSS’da inheritance holatiga deyarli har doim duch kelamiz, lekin ko‘pincha buni payqamaymiz.

Keling, avvalo inheritance nima ekanligini, CSS kontekstida tushunib olaylik.

Inheritance, ya’ni me’ros olish - bu bir elementga berilgan uslub(style) uning ichidagi elementlarga ham o’tishini anglatadi. Oddiyroq qilib aytganda, parent elementga berilgan still child elementlarga ham ta’sir qiladi.

Masalan, font-size xususiyatini(property) olaylik. Tasavvur qiling: siz <body> HTML elementiga font-size: 10px degan qiymatini berdingiz va bu qiymat <body> ichidagi barcha elementlarga me’ros bo’lib o’tadi, agar ichki elementlarning birida yangi font-size qiymati ko’rsatilmagan bo’lsa.

HTML

<body>
   Body element ichidagi text
   <div> Div element ichidagi text </div>
</body>

CSS

body {
   font-size: 10px // body elementiga ham, div elementiga ham ta'sir qiladi.
}

Biroq, CSS’dagi xususiyatlarning(properties) hammasi ham inheritance - ya’ni me’ros bo’lib o’tish qobiliyatiga ega emas.

Masalan, padding xususiyatini olaylik. Agar siz <body> elementiga padding: 20px qiymat bersangiz, bu qiymat ichki elementlarga o’tmaydi. Sababi, padding inheritance xususiyatiga ega bo’lmagan property hisoblanadi.

HTML

<body>
   Body element ichidagi text
   <div> Div element ichidagi text </div>
</body>

CSS

body {
   padding: 20px // faqat body elementiga ta'sir qiladi.
}

Shunday qilib, CSS’da barcha xususiyatlar ikki turga bo‘linadi: meros qilinadigan (inherited) va meros qilinmaydigan (non-inherited). Hop, biz buni qanday bilib olamiz? Web tool orqali debugging qilish jarayonida.

Yana bir boshqa misol:

<body style="color: red; border: 2px solid black">
   <div>
       <p>Hello world</p>
   </div>
</body>

image.png

font-size xususiyati aniq va yorqin rangda ko‘rinadi, chunki u meros qilib olingan property hisoblanadi.