Seriya: CSS Basics Dars 4

CSS Asoslari - 4-dars

CSS'ni qayerga yozish va selector kuchi (specificity) haqida o'rganing. Inline, style tag va external CSS'ning kuchlari va selectorlar o'rtasidagi ustunlik tartibini tushuning.

4-dars

CSS'ni qayerga yozish va Selector kuchi

Bu darsda CSS'ni qayerga yozish kuchliroq bo'lishini va selectorlar o'rtasidagi kuch farqini o'rganamiz.

1. Inline, <style>, external — qaysi biri kuchli?

"CSS'ni qayerga yozsam kuchliroq bo'ladi?"

CSS yozishning 3 ta yo'li bor.

Bir xil developer CSS, lekin joylashuvi boshqa:

1️⃣ External CSS (.css fayl) 2️⃣ <style> tag ichida 3️⃣ Inline style (style="")

1️⃣ External CSS (eng ko'p ishlatiladi)

<link rel="stylesheet" href="style.css">

p {
  color: red;
}

👉 Bu eng toza va professional usul 👉 Katta loyihalarda doim shu ishlatiladi

Lekin ❗

Cascade'da kuch jihatdan eng past.

2️⃣ <style> tag ichidagi CSS

<style>
  p {
    color: blue;
  }
</style>

👉 HTML fayl ichida yoziladi 👉 External CSS'dan kuchliroq

Ko'pincha:

  • test
  • tezkor override
  • kichik sahifalarda

3️⃣ Inline style (eng kuchlisi)

<p style="color: green;">Salom</p>

👉 To'g'ridan-to'g'ri elementning o'ziga yoziladi 👉 Cascade'da eng kuchli (hozircha)

❗ Lekin:

  • o'qish qiyin
  • tartibsiz
  • maintenance yomon

Shuning uchun:

kuchli bo'lsa ham, professional yo'l emas

Kuchlar tartibi (yodlab ol)

Agar selectorlar bir xil bo'lsa 👇

🥉 External CSS

🥈 <style>

🥇 Inline style ✅

📌 Brauzer shunday o'ylaydi:

"Elementning o'ziga yozilgan bo'lsa — eng muhim"

Aniq misol 👇

<head>
  <style>
    p { color: blue; }
  </style>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <p style="color: green;">Salom</p>
</body>

/* style.css */
p {
  color: red;
}

❓ Rang qanaqa bo'ladi?

👉 green

Sababi:

inline > style > external

Muhim joy ⚠️

Ko'p boshlovchilar shunaqa deydi:

"External CSS ishlamayapti"

Aslida:

  • inline bor
  • yoki <style> ustun kelgan

👉 Muammo cascade'da, CSS'da emas.

Qachon qaysi biri ishlatiladi?

✔ External CSS — 99% holat ✔ <style> — vaqtinchalik / test ❌ Inline — faqat majbur bo'lsa

Xulosa

CSS'ni qayerga yozish — kuchni belgilaydi. Professional loyihada external CSS ishlatiladi.

2. Selector kuchi (Specificity) nima?

Specificity — bu nima?

Specificity — bu selectorning qanchalik aniq va kuchli ekanligi.

Oddiy qilib aytganda:

❝ Qaysi selector elementni aniqroq ushlasa — o'sha yutadi ❞

Eng muhim qoida 🧠

❗ Specificity — yozilish tartibidan ham kuchli

Ya'ni:

  • pastda yozilgan bo'lsa ham
  • agar selector kuchsiz bo'lsa
  • yuqoridagi kuchli selector yutadi

Eng oddiy misol 👇

p {
  color: red;
}

.text {
  color: blue;
}

<p class="text">Salom</p>

❓ Rang qanaqa?

👉 blue

❗ Nega?

  • p → umumiy selector
  • .text → aniqroq selector

📌 class > tag

Selectorlar kuchi

Hozircha faqat tartibni bilib olamiz:

🥉 element → p, div, span 🥈 .class → .box, .title 🥇 #id → #header, #main

👉 Kuch yuqoriga qarab oshadi

Yana bir misol 👇

#title {
  color: green;
}

.title {
  color: blue;
}

h1 {
  color: red;
}

<h1 id="title" class="title">Hello</h1>

❓ Rang?

👉 green

Sababi:

#id — eng kuchli

Muhim ⚠️

Ko'p odam shunaqa o'ylaydi:

"Pastda yozsam ishlaydi"

❌ Har doim emas.

Mana misol:

.box {
  color: blue;
}

div {
  color: red;
}

Pastda div bo'lsa ham 👉 .box yutadi

Specificity nimaga kerak?

Agar bilmasang:

  • !important ishlata boshlaysan
  • CSS chalkashadi
  • katta projectda adashasan

Agar bilsang:

  • qaysi style nega ishlaganini tushunasan
  • toza override qilasan
  • professional CSS yozasan

Xulosa

Specificity — selectorlar o'rtasidagi kuch farqi. Kuchli selector har doim yutadi, hatto pastda yozilgan bo'lsa ham.