About Teletype
Join
Mirjalol
@mirjalol2401
July 24

CSSda kaskad va vorislik

Cascading Style Sheets. Cascade?

CSS bilan ishlash davomida bir nechta qoidalar (stillar) bitta elementga to’g’ri kelib qoladi. Ulardan qaysi biri qo’llaniladi? Bu CSS da Cascade deb nomlangan mexanizm bilan aniqlanadi va vorislik (ba’zi xususiyatlar elementga ota elementidan voris bo’lib olinadi) ham bunga aloqador. Maqola davomida muhimlilik, xususiylik va vorislik qanday ishlashini o’rganib olamiz.

Kaskadlash

CSS - Cascading Style Sheets ning qisqartmasi bo’lib, bu juda muhim ma’noni anglatadi. Selektorlardan qaysi biri ishlashi 3 ta faktorga bog’liq bo’ladi va ular quyidagilar:

  1. Muhimlilik (Importance)
  2. Xususiylik (Specifity)
  3. Tartib

CSS da ma’lum bir qoidaning har doim boshqa qoidalardan ustun bo’lishini ta’minlovchi kalit so’z bor: !important.

Misol

<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all!</p>
#winning {
  background-color: red;
  border: 1px solid black;
}
.better {
  background-color: gray;
  border: none !important;
}
p {
  background-color: blue;
  color: white;
  padding: 5px;
}

Natija:

Natija

Natija qanday hosil bo’lganligini ko’raylik:

  1. Ko’rib turganingizdek uchinchi qoidada e’lon qilingan color va padding xususiyatlari qabul qilingan, lekin background-color ishlamadi. Odata keyin kelgan stillar oldingilarining ustidan yozib ketishi kerak edi.
  2. Lekin birinchi  va ikkinchi qoidalar ishladi. Chunki id va class orqali berilgan qoidalar teg nomi orqali berilgan qoidalarga qaraganda xususiyroq bo’ladi.
  3. Ikkita elementning class atributida better bor, lekin ikkinchi elementda winning deb nomlangan id atributi berilgan. id orqali berilgan qoidalar class orqali berilgan qoidalarga qaraganda ustun turadi. (id bitta element uchun faqat bitta bo’ladi, class esa ko’plab elementlarga berilishi mumkin, shuning uchun id class ga qaraganda xususiyroq hisoblanadi). Shuning uchun ikkinchi elementning orqa foni qizil rangda.
  4. Ikkinchi element qizil fonda, lekin unda chegara yo’q. Nega? Chunki ikkinchi qoidada border xususiyati !important qoidasi orqali e’lon qilingan. !important ni border:none dan  keyin qo’yish orqali bu qoida boshqa qoidalardan ustun turishini belgilayapmiz. Bunda id ning xususiyligi yuqori bo’lsa ham !important orqali berilgan stil ishlaydi.

Eslatma: !important qoidasi orqali berilgan stilni o’zgartirishni yagona usuli xuddi shunday qoidani !important orqali undan pastda yozish.

!important qoidasi bor bo’lsada, uni iloji boricha ishlatmaslik lozim. Faqat ilojsiz bo’lganimizda, biror bir stilni o’zgartirishni iloji bo’lmay qolganda, masalan CMS da ishlayotgan bo’lsangiz va uning ichidagi ba’zi bir stillarini o’zgartirishga to’g’ri kelib qolsa qo’llashingiz mumkin, nima bo’lganda ham !important ni ishlatishdan iloji boricha qochish kerak. !important ni ma’lum stillarni brouzerda testlayotganingizda ishlatishingiz mumkin.

!important ni ishlatmaslikdan sabab kaskadqoidalarini buzishi va CSS kodni o’zgartirishni qiyinlashtirib qo’yadi.

Foydalanuvchilar o’zlarining stillarini brouzer orqali e’lon qilishlari mumkin va bu stillar !important orqali e’lon qilingan bo’lsa dasturchillar yozgan stillardan ustun turadi. Misol uchun, ko'rishi zaif bo'lgan foydalanuvchilar tashrif buyuradigan barcha veb-sahifalar uchun shrift hajmini ikki barobarga oshirib qo’yishi mumkin. Stillar quyidagi tartibda bo’ladi va keyin kelganlari birinchi kelganlarini ustidan yozib ketadi:

  1. Brouzer tomonidan e’lon qiligan stillar.
  2. Foydalanuvchi tomonidan brouzerga berilgan stillar
  3. Dasturchilar (biz) tomonidan berilgan stillar
  4. Dasturchilar (biz) tomonidan !important orqali berilgan stillar
  5. Foydalanuvchilar tomonidan brouzerga !important orqali berilgan stillar

Xususiylik (Specifity, Специфичность)

Xususiylik selektorning qancha elementga ta’sir o’tkaza olishini anglatadi. Oldingiz misollarimizda ko’rganimizdek, teg nomi orqali berilgan selektorlarda (tip selektorlari ) xususiylik juda  past bo’ladi. Klas selektorlarida esa tip selektorlariga qaraganda yuqoriroq, ID selektorida esa undanda yuqori va u klas selektoridan ustun turadi. ID selektorini yengishning yagona yo’li !important dan foydalanishdir.

Xususiylikning qiymatini 4ta har xil qiymatlar, minglik (1000), yuzlik (100) , o’nlik (10) va birlik(1) qiymatlarni jadvalga qo’yish orqali aniqlaymiz.

  1. Minglar ustuni: Agar selektor <style> tegining ichida bo’lsa yoki stil style atributida berilgan bo’lsa minglar ustuniga 1 qo’yamiz
  2. Yuzlar ustuni: Har bir ID selektori uchun 1ni qo’shamiz
  3. O’nlar ustuni: Har bir klass, atribut va psevdo klass selektorlar uchun 1ni qo’shamiz.
  4. Birlar ustuni: Har bir tip  selektori yoki psevdo element selektori uchun 1ni qo’shamiz
Eslatma: Universal selektor(*), kombinatorlar(+, >, ~, ' ') va inkor psevdo klasi(:not) xususiylikka ta’sir qilmaydi.
Xususiylik jadvali
Eslatma: Agar bir qancha selektorlar bir xil xususiylik va muhimlikka ega bo’lsa, tartib bo’yicha keyin kelgan selektor ishlaydi!

Misol

Quyidagi misolni ko’raylik

<div id="outer" class="container">
  <div id="inner" class="container">
    <ul>
      <li class="nav"><a href="#">One</a></li>
      <li class="nav"><a href="#">Two</a></li>
    </ul>
  </div>
</div>

/* xususiylik: 0101 */
#outer a {
  background-color: red;
}

/* xususiylik: 0201 */
#outer #inner a {
  background-color: blue;
}

/* xususiylik: 0104 */
#outer div ul li a {
  color: yellow;
}

/* xususiylik: 0113 */
#outer div ul .nav a {
  color: white;
}

/* xususiylik: 0024 */
div div li:nth-child(2) a:hover {
  border: 10px solid black;
}

/* xususiylik: 0023 */
div li:nth-child(2) a:hover {
  border: 10px dashed black;
}

/* xususiylik: 0033 */
div div .nav:nth-child(2) a:hover {
  border: 10px double black;
}

a {
  display: inline-block;
  line-height: 40px;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
  width: 200px;
  margin-bottom: 10px;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
}

Keling endi misolimizdagi stillarni tahlil qilib chiqaylik, bizni birinchi kelgan 7 ta selekor qiziqtiradi.

  • Birinchi 2 ta selektor fonning rangini o’zgartirmoqchi, bunda ikkinchi selektor g’olib bo’ladi, chunki unda id selektrori 2ta. 201 > 101
  • Uchinchi va to’rtinchi selektorlar linkn matnining rangini o’zgartirmoqchi. Bu yerda to’rtinchi selektor g’olib bo’ladi, unda selektorlar soni kam, lekin unda bitta klass  selektori bor, bu degani 10 taga ko’p degani. Shunday qilib to’rtinchi selektor uchinchi selektorni 113 > 104 hisobida yengadi.
  • 5-6-7 - selektorlar linkni ustiga sichqoncha kelganda elementga chegara bermoqda. Oltinchi selektor beshinchi selektorga 23<24 hisobiga mag’lub bo’ladi. Yettinchi selektor esa beshinchi va oltinchi selektorlarning ikklasini ham yengadi. Yettinchi selektorda selektorlar soni beshinchidagi bilan bir xil, lekin yettinchi selektorda bitta klass selektori bor, shuning hisobiga ustunroq bo’ladi. Shunday qilib 33>24>23 hisobida yettinchi selektor ustun keladi.

Selektorlar tartibi

Agar muhimliligi va xususiyligi bir xil bo’lgan bir nechta selektorlar bo’lsa, oxirgi kelgani ishlaydi.

p {
  color: blue;
}

/* Bu qoida ishlaydi */
p {
  color: red;
}

Bu misolimizda esa birinchi qoida ustun keladi, chunki xususiyligi yuqori bo’lganligi uchun selektorlarning tartibi ahamiyat kasb etmayapti:

/* Bu qoida ustun keladi */
.footnote {
  color: blue;
}
p {
  color: red;
}

Stillarning qo'llanilishi to'g'risidagi eslatma

Ko’rgan misollarimizda xususiylik va muhimlik faqat bir xil bo’lgan xususiyatlar uchun bo’ladi, qolgan xususiyatlar elementga berilaveradi.

<p>I'm <strong>important</strong></p>
/* xususiylik: 0002 */
p strong {
  background-color: khaki;
  color: green;
}
/* xususiylik: 0001 */
strong {
  text-decoration: underline;
  color: red;
}

Bu misolimizda birinchi selektorda xususiylik yuqori bo’lganligi uchun color xususiyati yashil rangni oladi. Lekin birinchi selektordagi background-color va ikkichi selektoradgi text-decoration qoidalari qabul qilinadi.

Vorislik (CSS Inheritance)

Elementning ba'zi xususiyatlari uning avlodlariga  qo'llaniladi, boshqalari esa yo'q.

Masalan, font-family va color xususiyatlarining vorislik orqali bola elementlarga o’tishida ma’no bor, chunki saytning boshlang’ich fonti va shriftini bitta body elementiga yozish orqali barcha elementlarga ta’sir o’tkazishimiz mumkin. Agar vorislik bo’lmaganda har bir element uchun alohida stil yozib chiqishimiz kerak bo’lardi.

Ammo margin, padding va background-image xususiyatlarining vorislik orqali o’tishi noto’g’ri bo’lardi, chunki bitta ota elementga chegara berib, qolgan bola elementlardan bu chegarani o’chirib chiqishimizga to’g’ri kelardi.

Qaysi xususiyatlar vorislik orqali olinishi va qaysilari vorislik orqali o’tmasligini sog’lom fikrlarydigan odam fikrlab bilib olishi ham mumkin. Yanada to’liq ishonch hosil qilish uchun onlayn qo’llanmalarni ko’rshingiz mumkin.

Vorislikni boshqarish

CSS da vorislikni boshqarish uchun 3ta qiymat mavjud:

  • inherit: Bu qiymat xususiyatni otasida qanday bo’lsa xuddi shu qiymatni o’rnatadi.
  • initial: Bu qiymat xususiyatga brouzer tomonidan berilgan boshlang’ich qiymatni beradi. Agar brouzerda bu xususiyatga qiymat berilmagan bo’lsa va bu xususiyat vorislik orqali o’tadigan xususiyat bo’lsa inherit qiymati beriladi
  • unset: Bu qiymat xususiyatni boshlang’ich qiymatiga qaytaradi, agar xususiyat vorislik orqali o’tadigan bo’lsa inherit kabi ishlaydi, aks holda initial kabi

inherit

inherit qiymati orqali xususiyatlarni ota elementdan olishimiz mumkin:

<ul>
  <li>Default <a href="#">link</a> color</li>
  <li class="inherit">Inherit the <a href="#">link</a> color</li>
  <li class="initial">Reset the <a href="#">link</a> color</li>
  <li class="unset">Unset the <a href="#">link</a> color</li>
</ul>
body {
  color: green;
}

.inherit a {
  color: inherit;
}

.initial a {
  color: initial
}

.unset a {
  color: unset;
}
  • Birinchi bo’lib body elementinig color xususiyatiga green (yashil) qiymatini berayapmiz.
  • color xususiyati vorislik orqali o’tgani uchun, body elementining barcha avlodlari ham yashil rangda bo’ladi. Ammo brouzer linklarga ko’k rang beradi va bu rang vorislik orqali olingan rangdan ustun keladi. Shuning uchun misolimizdagi birinchi link ko’k rangda bo’ladi.
  • Ikkinchi qoida inherit klassi berilgan elementlar rangni o’z otasidan olishi kerakligini belgilayapti, ya’ni <li> elementidan, o’z navbatida <li> elementi rangni <ul> elementidan oladi va <ul> elementi <body> elementidan oladi va natijada inherit klassi berilgan linklar yashil rangda bo’ladi.
  • Uchinchi qoidada initial klassi berilgan elementlarda color xususiyatiga initial qiymatini beryapti. Brouzer matnga qora rang bergani uchun link rangi qora rangda bo’ladi.
  • Oxirgi yozilgan qoida esa unset klassi berilgan elementlardan color xususiyatiga unset qiymatini bermoqda, bunda color xususiyati vorislik orqali o’tgani uchun link rangi yaxshil bo’ladi.

E'tiboringiz uchun rahmat! Shu kabi maqolalarni o'tkazib yubormaslik uchun telegram kanalimga obuna bo'lishni unutmang: https://t.me/mirjalol_norkulov
Mirjalol
July 24, 07:29
6 reactions
0 views