3-dars

CSS Cascade va CSS Manbalari

Bu darsda CSS Cascade nima ekanligini va CSS qayerdan kelishini o'rganamiz.

1. CSS Cascade degani nima?

Bu nima?

Cascade — bu brauzerning CSS qoidalarini tanlash tartibi.

Oddiy qilib aytganda:

❝ Bir elementga bir nechta style tegsa, brauzer qaysi birini oxirida qoldirishni hal qiladi ❞

Real hayot misoli 🧠

Tasavvur qil:

• Onang: "Ko'k futbolka kiy"
• Otang: "Oq futbolka kiy"
• O'zing: "Qora futbolka kiyaman"

Savol: qaysi biri kiyiladi?

👉 CSS ham xuddi shunaqa qaror qabul qiladi, lekin qoidalar asosida.

Cascade nimaga qaraydi?

Hozircha faqat umumiy tushuncha, detallar keyingi darslarda 👇

CSS cascade 4 ta narsaga qaraydi:

1. Qayerdan kelgan? (browser defaultmi, usermi, sen yozgan CSSmi)
2. Qanchalik aniq? (selector kuchli yoki kuchsiz)
3. Qaysi biri keyin yozilgan?
4. !important bormi? (keyin alohida dars bo'ladi)

Bugun faqat umumiy mantiqni tushunamiz.

Oddiy misol 👇

p {
  color: red;
}

p {
  color: blue;
}

HTML:

<p>Salom</p>

❓ Savol: rang qanaqa bo'ladi?

👉 blue

❗ Nega?

Chunki:

• selector bir xil (p)
• oxirgisi keyin yozilgan

📌 Cascade: oxirgi kelgan yutadi (agar boshqa kuchli sabab bo'lmasa)

Nima uchun Cascade'ni bilish muhim?

Agar bilmasang:

• "CSS ishlamayapti" deysan
• keraksiz !important qo'shasan
• kod tartibsiz bo'ladi

Agar bilsang:

• qaysi style nega ishlaganini tushunasan
• professional CSS yozasan
• debugging osonlashadi

Xulosa

Cascade — brauzerning CSS qoidalarini tanlash mexanizmi.

2. CSS qayerdan keladi?

Bu nima?

Brauzer ko'rayotgan CSS qayerlardan keladi o'zi?

CSS har doim 3 ta manbadan keladi.

Brauzer elementni chizishdan oldin uchta joyni tekshiradi:

1️⃣ Browser CSS (User Agent Stylesheet) 2️⃣ User CSS 3️⃣ Developer CSS (sen yozgan CSS)

Mana shu origin deyiladi.

1️⃣ Browser CSS (User Agent Stylesheet)

Brauzer o'zi bilan default CSS olib keladi.

Masalan:

• <h1> katta
• <p> blok
• <button> bosiladigan ko'rinishda

❗ Agar brauzer buni bermasa: HTML oddiy text bo'lib ko'rinardi.

📌 Misol:

<h1>Salom</h1>
<p>Matn</p>

Sen hech qanday CSS yozmasang ham:

• h1 katta chiqadi
• p pastga tushadi

👉 Bu — browser CSS

2️⃣ User CSS (foydalanuvchi CSS)

Bu kam ishlatiladi, lekin bilish shart.

Foydalanuvchi:

• brauzer sozlamasida
• yoki extension orqali
• o'ziga CSS qo'shishi mumkin.

Masalan:

• ko'zi ojiz odam barcha textni kattaroq qiladi
• ranglarni o'zgartiradi

📌 Bu CSS:

• browser CSS'dan kuchli
• lekin developer CSS'dan kuchsiz

3️⃣ Developer CSS (sen yozganing)

Bu — eng asosiy va eng ko'p ishlatiladigan qism.

Bularning hammasi shu yerga kiradi:

• <link rel="stylesheet">
• <style>
• inline style

p {
  color: red;
}

👉 Odatda oxirgi qaror shu yerda chiqadi.

Origin bo'yicha ustunlik tartibi (oddiy yodlash)

Agar hammasi bir xil kuchda bo'lsa:

🥉 Browser CSS 🥈 User CSS 🥇 Developer CSS ✅

📌 Shuning uchun:

"Nega mening CSS'im ishladi?"

Javob: chunki u developer CSS

Oddiy real misol 🧠

Browser:

p {
  color: black;
}

Sen:

p {
  color: blue;
}

HTML:

<p>Salom</p>

❓ Qaysi rang?

👉 blue

❗ Sabab: Developer CSS > Browser CSS

Muhim tushuncha ⚠️

Agar sen CSS yozmasang:

• browser CSS ishlaydi

Agar sen yozsang:

• browser CSS chekinadi

👉 Shuning uchun:

"Brauzer default style'ni qayerdan olyapti?" deb hayron bo'lib qolma — User Agent Stylesheet

Xulosa

CSS 3 ta manbadan keladi va ularning o'zaro ustunlik tartibi bor.