Chapter 5 — Ranglar va Fon

---

5.1 Rang Formatlari

Example

styles.css
CSSNusxalash
01.hex { color: #3b82f6; }
02.rgb { color: rgb(59, 130, 246); }
03.rgba { color: rgba(59, 130, 246, 0.5); } /* 50% shaffof */
04.hsl { color: hsl(217, 91%, 60%); }

5.2 Background Xususiyatlari

Example

styles.css
CSSNusxalash
01.hero {
02  background-image: url('bg.jpg');
03  background-size: cover;
04  background-position: center;
05  background-repeat: no-repeat;
06}
07.gradient {
08  background: linear-gradient(to right, #7c3aed, #3b82f6);
09}

⚠️ Common Mistake
background-size: cover qo'shmasdan fon rasmi ishlatish — natijada rasm asl o'lchamida takrorlanadi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Bitta elementga HEX, boshqasiga RGB, uchinchisiga HSL formatida bir xil ko'k rangni bering.

🟡 Exercise 2 — Medium

Task: linear-gradient yordamida ikki rangli banner yarating, ustiga oq matn qo'yib kontrastni tekshiring.

🔴 Exercise 3 — Hard

Task: Fon rasmi ustiga rgba(0,0,0,0.5) overlay qatlamini qo'shib, ustiga oq matn joylashtiring (position: relative va pseudo-element yordamida).

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.box { background-image: url('photo.jpg'); height: 200px; }

Your Task: Rasm nega kichik va takrorlangan holda ko'rinmoqda?

<details> <summary>Solution</summary> `background-size` va `background-repeat` berilmagan — brauzer standart holatda rasmni asl o'lchamida chap-yuqori burchakdan takrorlab chizadi. Yechim: `background-size: cover; background-repeat: no-repeat;` qo'shish. </details>

---

📌 Chapter Summary

CSS ranglari HEX, RGB(A), HSL(A) formatlarida ifodalanadi — har biri turli qulayliklarga ega. Background xususiyatlari (size, position, repeat) fon rasmini to'g'ri boshqarish uchun birga ishlatiladi.

🎯 Key Takeaways

• RGBA/HSLA — shaffoflik (alpha) kerak bo'lganda
• HSL — rang variatsiyalarini (soyalarni) qo'lda yaratish uchun eng intuitiv
• Fon rasmi uchun cover+center+no-repeat — standart uchlik

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01color: #hex;
02color: rgb(r,g,b);
03color: rgba(r,g,b,a);
04color: hsl(h,s%,l%);
05background: linear-gradient(direction, color1, color2);
06background-size: cover;

---