CSS vorislik
CSS merosxo‘rligi (inheritance)
CSS meros olish — elementda xossa uchun qiymat ko‘rsatilmagan bo‘lsa nima bo‘lishi haqidadir.
Xossa uchun qiymat ko‘rsatilmagan bo‘lsa, qiymat yoki ota elementdan meros olinadi, yoki boshlang‘ich (standart) qiymatiga o‘rnatiladi.
CSS meros olishida xossalar ikki turga ajratiladi:
- CSS Inherited xossalari
- CSS Non-inherited xossalari
CSS Inherited xossalari
Meros olinadigan xossalar standart holda ota elementning hisoblangan qiymatiga o‘rnatiladi.
color, font-family, font-size, line-height va text-align kabi matn bilan bog‘liq xossalar odatda meros olinadi. Bu hujjat bo‘ylab bir xil matn uslublashini ta’minlaydi.
Quyidagi misolda <strong> elementi ichidagi matn 20px va ko‘k rangda ko‘rinadi, chunki <strong> elementi ota (<p>) elementdan color va font-size qiymatini meros qilib oladi.
Misol
color va font-size xossalari meros olinadi:
<style>
p {
color: blue;
font-size: 20px;
}
</style>
<body>
<p>This
is a paragraph with some <strong>important</strong> text.</p>
</body>
CSS Non-inherited xossalari
Meros olinmaydigan xossa uchun qiymat o‘rnatilmagan bo‘lsa, qiymat shu xossaning boshlang‘ich (standart) qiymatiga o‘rnatiladi.
border, background, margin, padding, width va height kabi quti modeli yoki maket bilan bog‘liq xossalar odatda meros olinmaydi.
Quyidagi misolda <p> elementi ichidagi <strong> elementida qo‘shimcha chegara bo‘lmaydi (chunki border-style xossasining boshlang‘ich qiymati none).
Misol
border xossasi meros olinmaydi:
<style>
p {
border: 1px solid red;
}
</style>
<body>
<p>This
is a paragraph with some <strong>important</strong> text.</p>
</body>
inherit kalit so‘zi
inherit kalit so‘zi meros olishni aniq ko‘rsatish uchun ishlatiladi. U meros olinadigan va olinmaydigan xossalarning ikkalasida ham ishlaydi.
Quyidagi misolda <p> elementi ichidagi <strong> elementida qo‘shimcha chegara bo‘ladi, chunki inherit kalit so‘zidan foydalanib chegara qiymati meros qilib olinishi kerakligini aniq ko‘rsatdik.
Misol
Meros olishni inherit kalit so‘zi bilan aniq belgilash:
<style>
p {
border: 1px solid red;
}
strong {
border: inherit;
}
</style>
<body>
<p>This
is a paragraph with some <strong>strong</strong> text.</p>
</body>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!