26-dars

O'zing nomla

1. line-height nima?

1️⃣ line-height nima o'zi?

line-height — ikki satr orasidagi masofa.

U quyidagilarni o'z ichiga oladi:

• harflarning balandligi
• harflar usti/osti bo'shliq
• satrlar orasidagi nafas

p {
  font-size: 16px;
  line-height: 24px;
}

📌 Bu yerda:

• font-size = 16px
• line-height = 24px
• 👉 1.5 nisbat

2️⃣ Nega line-height font-size'dan muhimroq?

Ko'pchilik shunday yozadi:

p {
  font-size: 16px;
}

❌ Xato:

• default line-height brauzerga tashlab qo'yiladi
• font almashtirilsa UI buziladi
• o'qish charchatadi

Yahshi practice:

p {
  font-size: 1rem;
  line-height: 1.5;
}

3️⃣ line-height qanday birlikda yoziladi?

❌ px bilan yozish — xavfli

p {
  font-size: 16px;
  line-height: 20px;
}

❌ Agar font-size o'zgarsa — line-height mos kelmay qoladi.

✅ Unit'siz yozish — eng to'g'ri yo'l

p {
  line-height: 1.5;
}

Bu nimani anglatadi?

👉 line-height = font-size × 1.5

📌 Afzallik:

• responsive
• inherit bo'ladi
• font o'zgarsa ham moslashadi

4️⃣ line-height inherit qanday ishlaydi?

body {
  line-height: 1.6;
}

p {
  font-size: 1rem;
}

small {
  font-size: 0.875rem;
}

👉 Har ikkisi ham 1.6 nisbatni saqlaydi.

2. Ranglar

1️⃣ Rang — 3 xil vazifa bajaradi

Har bir rang UI'da bittasini bajarishi kerak:

1. Informatsiya (text, content)
2. E'tibor (CTA, link, highlight)
3. Holat (error, success, disabled)

3. currentColor nima?

👉 currentColor — bu elementning hozirgi color qiymati.

Ya'ni:

color: red;

bo'lsa:

border-color: currentColor;

👉 border ham red bo'ladi.

1️⃣ currentColor nimani bildiradi?

Bu CSS keyword:

• rang emas
• variable emas
• computed color qiymatiga reference

.button {
  color: #4f46e5;
  border: 1px solid currentColor;
}

👉 Text rang o'zgarsa → border ham avtomatik o'zgaradi.

2️⃣ Nega bu juda kuchli?

.button {
  color: #4f46e5;
  border: 1px solid #4f46e5;
}

❌ Takrorlash ❌ Theme o'zgarsa — 2 joyda tuzatish

.button {
  color: var(--accent);
  border: 1px solid currentColor;
}

📌 Bitta source of truth.

3️⃣ Qayerlarda ishlaydi?

currentColor ishlaydi:

• border-color
• outline-color
• box-shadow
• fill (SVG)
• stroke

.icon {
  fill: currentColor;
}

👉 Icon har doim text rangiga mos.

4️⃣ currentColor inherit qilinadimi?

Ha.

Sababi color o'zi inherit qilinadi.

.parent {
  color: red;
}

.child {
  border-color: currentColor;
}

👉 Child ham red bo'ladi.