Tarkibga o'tish

12 β€” O'lchovlar, tipografiya va ranglar

⬅️ Oldingi: 11 β€” Box model Β· 🏠 README Β· Keyingi: 13 β€” Fon, chegara va soyalar ➑️

Bu bobda: CSS o'lchov birliklari (px, em, rem, %, vw/vh va boshqalar), rang modellari (nomli, hex, rgb, hsl, oklch) va matnni boshqaradigan tipografiya xossalari hamda web shriftlarni to'liq, "nega"si bilan o'rganamiz.

12.1 Nega aynan bu uchta mavzu birga?

Bu uch narsa β€” o'lcham, rang va shrift β€” har bir web sahifaning "ko'rinishini" tashkil qiladi. Element qanchalik katta? Qaysi rangda? Matn qanday shriftda va qancha kattalikda? Boshqa hamma narsa (joylashuv, animatsiya, responsiv dizayn) shu uch poydevorga quriladi.

Boshlovchilar ko'pincha shoshib px (piksel) bilan hamma narsani yozadi, ranglarni faqat red/blue deb beradi va font-family ni umuman tegmaydi. Natijada sayt har xil ekranda buziladi, ranglar palitrasi tartibsiz bo'ladi, matn esa "import qilingan" emas, "tashlangandek" ko'rinadi. Bu bob seni shu xatolardan qutqaradi va professional tanlovlar qilishni o'rgatadi.

πŸ“Œ Atamalar tarjimasi: - unit β€” birlik (o'lchov birligi), masalan px, em. - viewport β€” ko'rinish maydoni, ya'ni brauzer oynasining ko'rinadigan qismi. - typography β€” tipografiya, ya'ni matnni bezash va joylashtirish san'ati. - font β€” shrift (harflar uslubi).

Keling, eng asosidan β€” o'lchov birliklaridan boshlaymiz.

12.2 Mutlaq vs nisbiy birliklar

CSS'da o'lchov beradigan har bir joyda (kenglik, balandlik, shrift o'lchami, masofa va h.k.) son yoniga birlik yozasan: 16px, 2em, 50%. Birliklar ikki katta turga bo'linadi:

  • Mutlaq (absolute) birliklar β€” qiymati har doim bir xil, hech narsaga bog'liq emas. Asosiysi: px.
  • Nisbiy (relative) birliklar β€” qiymati boshqa narsaga nisbatan hisoblanadi (ota element shrifti, root shrifti, ekran o'lchami va h.k.). Masalan: em, rem, %, vw.

πŸ’‘ Hayotiy analogiya: "10 metr" β€” mutlaq, qayerda aytsang ham bir xil. "Bo'yimning yarmi" β€” nisbiy, kimning bo'yi ekaniga bog'liq. CSS'da mutlaq birlik aniq va oldindan ma'lum, nisbiy birlik esa moslashuvchan.

Nega nisbiy birliklar muhim? Chunki ular moslashuvchanlik (flexibility) beradi. Foydalanuvchi brauzerda shrift o'lchamini kattalashtirsa yoki sayt katta/kichik ekranda ochilsa, nisbiy birliklar avtomatik moslashadi. Mutlaq px esa qotib qoladi. Shuning uchun zamonaviy CSS'da nisbiy birliklar afzal β€” buni bob davomida bir necha bor ko'ramiz.

12.3 px β€” mutlaq piksel

px (piksel) β€” eng mashhur va eng tushunarli birlik. U ekrandagi bitta nuqtaga (taxminan) teng.

.quti {
  width: 200px;
  height: 100px;
  font-size: 16px;
  border: 1px solid black;
}

Natija: quti aniq 200Γ—100 piksel, matn 16 pikselli, chegara 1 pikselli.

px ning kuchi β€” to'liq nazorat va bashorat qilinishi. "1px chegara" har joyda 1px bo'ladi. Shu sababli ingichka chegaralar, kichik soyalar va aniq joylashuv kerak bo'lganda px ajoyib.

px ning kamchiligi β€” u moslashmaydi. Agar font-size: 16px desang va foydalanuvchi brauzer sozlamalarida "katta shrift" tanlagan bo'lsa (masalan ko'zi xira odam), sening matning baribir 16px qoladi. Bu β€” qulaylik (accessibility) muammosi.

⚠️ Tez-tez xato: matn o'lchamlarini hamma joyda px bilan berish. Bu foydalanuvchining shrift kattalashtirish imkonini buzadi. Matn uchun rem ishlat (pastda ko'ramiz).

πŸ“Œ Eslatma: CSS px β€” bu "CSS pikseli", jismoniy ekran pikseli emas. Yuqori zichlikdagi (Retina) ekranlarda bitta CSS px bir nechta jismoniy pikseldan iborat bo'lishi mumkin β€” brauzer buni o'zi hal qiladi, sen tashvishlanma.

12.4 em β€” ota elementning font-size'iga nisbatan

em β€” bu nisbiy birlik. 1em = element o'zining (yoki ko'p hollarda otasining) font-size qiymatiga teng.

Asosiy qoida: - font-size xossasida em ishlatilsa β†’ u ota elementning font-size'iga nisbatan hisoblanadi. - Boshqa xossalarda (masalan padding, margin, width) em ishlatilsa β†’ u shu elementning font-size'iga nisbatan hisoblanadi.

.ota {
  font-size: 20px;
}
.farzand {
  font-size: 1.5em;   /* 1.5 Γ— 20px = 30px */
  padding: 1em;       /* 1 Γ— 30px = 30px (o'zining font-size'i) */
}

Natija: .farzand matni 30px, ichki bo'shliq (padding) ham 30px.

em ning kuchi β€” komponent ichida hamma narsa shrift o'lchamiga mutanosib o'sadi. Tugmaning font-size'ini o'zgartirsang, uning padding'i ham emda berilgan bo'lsa, avtomatik moslashadi. Bu tugmalar, beyjlar (badge) kabi "ichki nisbat saqlanishi kerak" bo'lgan komponentlar uchun zo'r.

em ning xavfi: ko'payib ketish (kompaundlanish)

em ning eng katta tuzog'i β€” ichma-ich (nested) elementlarda u qatlam-qatlam ko'payib ketadi. Har bir farzand otasining (allaqachon kattalashgan) o'lchamiga nisbatan hisoblaganligi uchun, qiymat tobora o'sib boradi:

<div class="daraja">24px (16Γ—1.5)
  <div class="daraja">36px (24Γ—1.5)
    <div class="daraja">54px (36Γ—1.5)
      <div class="daraja">81px! (54Γ—1.5)</div>
    </div>
  </div>
</div>

html { font-size: 16px; }
.daraja { font-size: 1.5em; }

Natija: har daraja oldingisidan 1.5 baravar katta β€” 24 β†’ 36 β†’ 54 β†’ 81px. Bu deyarli har doim xato β€” sen barcha .darajalarni bir xil kattalikda kutgan eding. Quyidagi diagramma buni rem bilan solishtirib ko'rsatadi:

em ichma-ich elementlarda ko'payib ketadi, rem esa root'ga bog'lanib barqaror qoladi

12.5 rem β€” root font-size'iga nisbatan (va nega afzal)

rem = "root em". U doim bitta narsaga β€” hujjatning ildiz elementi <html> ning font-size'iga nisbatan hisoblanadi. Ota element nima bo'lishidan qat'i nazar.

Brauzerda <html> ning standart font-size'i odatda 16px. Demak:

html { font-size: 16px; }   /* root: 16px (standart) */

h1   { font-size: 2rem;  }  /* 2  Γ— 16 = 32px  */
p    { font-size: 1rem;  }  /* 1  Γ— 16 = 16px  */
small{ font-size: 0.875rem; } /* 0.875 Γ— 16 = 14px */

Natija: bu qiymatlar elementlar qancha chuqur ichma-ich joylashganidan mutlaqo bog'liq emas β€” har doim root'ga nisbatan barqaror. Diagrammada ko'rinib turibdiki, rem da uchala daraja ham bir xil 24px qoladi, emda esa 81px'gacha ko'payib ketadi.

Nega rem shrift uchun afzal:

  1. Bashoratlilik. Hech qachon "ko'payib ketish" yo'q. 1.5rem har joyda bir xil β€” kodni o'qish va boshqarish oson.
  2. Qulaylik (accessibility). Foydalanuvchi brauzerda standart shrift o'lchamini kattalashtirsa, root o'zgaradi va butun sayt mutanosib kattalashadi. px da bu ishlamaydi.
  3. Bitta joydan boshqarish. html { font-size } ni o'zgartirib, butun saytning miqyosini birato'la o'zgartira olasan.

πŸ’‘ Amaliy maslahat β€” "62.5% hiyla": ba'zilar html { font-size: 62.5%; } yozadi. Buning sababi: 62.5% Γ— 16px = 10px. Endi 1rem = 10px bo'ladi va hisob-kitob osonlashadi β€” 1.6rem = 16px, 2.4rem = 24px. Bu mashhur, lekin majburiy emas; faqat hisobni soddalashtirish uchun.

πŸ“Œ Qachon em, qachon rem? - rem β€” global, barqaror narsalar uchun: shrift o'lchamlari, bo'limlar orasidagi masofa, layout o'lchamlari. - em β€” komponent ichida shriftga mutanosib o'sishi kerak bo'lgan narsalar uchun: tugma padding'i, ikonka o'lchami.

12.6 % β€” ota elementga nisbatan foiz

Foiz (%) ham nisbiy, lekin u ota elementning mos xossasiga nisbatan hisoblanadi. "Mos xossa" qaysi xossani berayotganingga bog'liq:

  • width: 50% β†’ ota elementning kengligining yarmi.
  • height: 50% β†’ ota elementning balandligining yarmi (lekin otaning aniq balandligi bo'lishi kerak).
  • font-size: 150% β†’ ota elementning font-size'ining 1.5 baravari (em kabi).
.ota {
  width: 400px;
}
.farzand {
  width: 50%;    /* 50% Γ— 400px = 200px */
}

Natija: .farzand kengligi 200px. Agar .ota keyinroq 600px bo'lsa, .farzand avtomatik 300px bo'ladi β€” bu % ning moslashuvchanligi.

⚠️ Tez-tez xato: height: 100% ishlamasligi. Foizli balandlik faqat ota elementning aniq balandligi bo'lganda ishlaydi. Aks holda brauzer "100% β€” nimaning 100%i?" deb hisoblay olmaydi va e'tiborsiz qoldiradi.

% asosan layout (joylashuv) β€” kenglik, ustun nisbatlari β€” uchun ishlatiladi. Shrift uchun rem aniqroq.

12.7 Viewport birliklar: vw, vh, vmin, vmax

Bu birliklar to'g'ridan-to'g'ri viewport'ga (brauzer oynasining ko'rinadigan qismiga) nisbatan hisoblanadi β€” ota elementga emas:

Birlik Ma'nosi
1vw viewport kengligining 1%
1vh viewport balandligining 1%
1vmin kenglik va balandlikdan kichigining 1%
1vmax kenglik va balandlikdan kattasining 1%

Masalan, ekran 1000px keng bo'lsa, 50vw = 500px. Agar ekran 800px baland bo'lsa, 100vh = 800px.

.qahramon-bolim {
  width: 100vw;     /* butun ekran kengligi */
  height: 100vh;    /* butun ekran balandligi β€” "to'liq ekran" bo'lim */
}
.katta-sarlavha {
  font-size: 5vw;   /* ekran kengaysa sarlavha ham kattalashadi */
}

Natija: .qahramon-bolim har qanday ekranda to'liq ekranni egallaydi; sarlavha o'lchami ekran kengligiga qarab o'zgaradi. Quyidagi diagramma vw va vhning ekranga nisbatini ko'rsatadi:

Viewport birliklar: vw ekran kengligining foizi, vh balandligining foizi

πŸ’‘ vmin/vmax qachon kerak? Agar element ekran aylantirilganda (portret ↔ landshaft) ham mutanosib qolishini istasang. Masalan kvadrat element: width: 50vmin; height: 50vmin; β€” qaysi tomon kichik bo'lsa, shunga moslashadi va hech qachon ekrandan tashqariga chiqmaydi.

⚠️ Mobil eslatma: mobil brauzerlarda manzil paneli paydo bo'lib-yo'qolgani sababli 100vh ba'zan "sakraydi". Zamonaviy yechim β€” 100dvh (dynamic viewport height) β€” bu nozik mavzu; hozircha vh borligini bilib qo'y.

12.8 ch va ex β€” shriftga bog'liq birliklar

Yana ikkita kam ishlatiladigan, lekin foydali nisbiy birlik bor β€” ular joriy shriftning o'lchamiga bog'liq:

  • ch β€” joriy shriftdagi 0 (nol) raqamining kengligi. Asosan matn ustuni kengligini belgilashda ajoyib: max-width: 60ch taxminan 60 belgilik qator demak β€” bu o'qish uchun ideal kenglik.
  • ex β€” joriy shriftning x-height'i (kichik x harfi balandligi). Juda kam ishlatiladi.
article {
  max-width: 65ch;   /* o'qish uchun qulay qator uzunligi (~65 belgi) */
}

Natija: maqola juda keng ekranda ham bir qatorga ~65 belgidan ko'p sig'maydi β€” bu ko'zga eng qulay o'qish kengligi (tipografiya qoidasi: 45–75 belgi).

πŸ’‘ Nega ch zo'r? Chunki o'lchov belgi sonida beriladi, shrift o'lchami o'zgarsa ham o'qish qulayligi saqlanadi. Bu β€” px bera olmaydigan narsa.

12.9 Ranglar: nomli ranglar

Eng oddiy usul β€” rangni nomi bilan yozish. CSS'da 140 dan ortiq nomli rang bor:

.quti {
  color: white;
  background-color: steelblue;
  border-color: tomato;
}

Natija: matn oq, fon po'lat-ko'k, chegara pomidor-qizil.

Mashhur nomlar: black, white, red, green, blue, gray, orange, purple, tomato, steelblue, gold. Maxsus qiymat β€” transparent (to'liq shaffof).

Nomli ranglar o'rganish va tez prototip qilish uchun qulay, lekin amaliy loyihalarda kamroq ishlatiladi β€” chunki ular cheklangan va aniq brend ranglarini bermaydi. Professional kod hex yoki hsl ishlatadi.

πŸ“Œ Eslatma: currentColor β€” alohida foydali kalit so'z. U "joriy color qiymati" degani. Masalan border: 1px solid currentColor; chegarani matn rangiga moslab beradi β€” matn rangi o'zgarsa, chegara ham o'zgaradi.

12.10 hex (o'n oltilik) ranglar

Hex (hexadecimal, o'n oltilik) β€” eng keng tarqalgan rang yozuvi. U # belgisi va 6 ta belgidan iborat: #rrggbb, bunda har juftlik qizil (R), yashil (G) va ko'k (B) miqdorini bildiradi.

Har juftlik 00 dan ff gacha (o'nlik tizimda 0–255):

.quti {
  color: #ffffff;        /* oq: R=255, G=255, B=255 */
  background: #2563eb;   /* ko'k: R=37,  G=99,  B=235 */
  border-color: #000000; /* qora */
}

Natija: oq matn, ko'k fon, qora chegara.

Qisqa #rgb yozuvi

Agar har juftlikning ikki belgisi bir xil bo'lsa, hex'ni uch belgiga qisqartirish mumkin β€” har belgi ikki marta takrorlangandek o'qiladi:

.q { color: #f00; }    /* = #ff0000 (sof qizil) */
.w { color: #fff; }    /* = #ffffff (oq) */
.g { color: #36c; }    /* = #3366cc */

Natija: #f00 to'liq #ff0000 bilan bir xil β€” shunchaki qisqaroq yozuv.

πŸ’‘ O'n oltilik nega? Kompyuterlar ranglarni 0–255 oralig'ida saqlaydi va 255 o'n oltilik tizimda aniq ff (ikki belgi). Shuning uchun har kanal aniq ikki belgiga sig'adi β€” ixcham va aniq. Hex dizayn dasturlaridan (Figma, Photoshop) nusxa olish uchun ham qulay.

⚠️ Tez-tez xato: # ni unutish (color: 2563eb; ishlamaydi) yoki noto'g'ri belgi soni (5 yoki 7 belgi). Faqat 3, 6 (yoki alfa bilan 4, 8) belgi to'g'ri.

12.11 rgb() va rgba()

rgb() rangni uch son bilan beradi β€” qizil, yashil, ko'k miqdori (har biri 0–255). Bu hex bilan aynan bir xil model, faqat o'qish osonroq:

.quti {
  color: rgb(255, 255, 255);   /* oq */
  background: rgb(37, 99, 235); /* #2563eb bilan bir xil ko'k */
}

Alfa kanal β€” shaffoflik

rgba() to'rtinchi qiymat β€” alfa (shaffoflik) qo'shadi. Alfa 0 (to'liq shaffof) dan 1 (to'liq qiyuq β€” noshaffof) gacha:

.yarim-shaffof {
  background: rgba(0, 0, 0, 0.5);   /* 50% shaffof qora */
}
.deyarli-korinmas {
  background: rgba(37, 99, 235, 0.1); /* 10% β€” ozgina ko'k tus */
}

Natija: birinchi fon orqali ortidagi narsa yarim ko'rinadi; ikkinchisi juda yengil ko'k pardadek.

πŸ“Œ Zamonaviy sintaksis: yangi brauzerlarda vergulsiz va birlashgan yozuv ham ishlaydi: rgb(37 99 235 / 50%). Bunda alfa / dan keyin foiz yoki son bilan beriladi. rgb() va rgba() endi bir xil ishlaydi β€” rgb() ga ham alfa berish mumkin.

πŸ’‘ Alfa nega kerak? Soyalar, qoplama (overlay), hover effektlari uchun. Masalan rasm ustiga rgba(0,0,0,0.4) qo'ysang, matn rasm fonida ham o'qiladigan bo'ladi.

12.12 hsl() va hsla() β€” eng inson-do'st model

hsl() rangni mutlaqo boshqacha tasvirlaydi β€” kompyuter emas, odam o'ylaydigandek:

  • H β€” Hue (tus): rang g'ildiragidagi burchak, 0–360 daraja. 0/360 = qizil, 120 = yashil, 240 = ko'k.
  • S β€” Saturation (to'yinganlik): rang qanchalik jonli, 0% (kulrang) dan 100% (to'liq jonli) gacha.
  • L β€” Lightness (yorqinlik): 0% (qora) dan 100% (oq) gacha; 50% β€” sof rang.
.q { color: hsl(221, 83%, 53%); }   /* #2563eb bilan bir xil ko'k */
.qizil  { color: hsl(0,   100%, 50%); }
.yashil { color: hsl(120, 100%, 50%); }
.kulrang{ color: hsl(0,   0%,   60%); }  /* to'yinganlik 0 β†’ kulrang */

Natija: birinchi qiymat aynan oldingi hex/rgb ko'k bilan bir xil. Quyidagi diagramma bir rangning uchala yozuvda bir xil ekanini ko'rsatadi:

Bitta ko'k rang hex, rgb va hsl yozuvlarida bir xil natija beradi

Nega HSL afzal?

HSL'ning ustunligi β€” uni qo'lda o'zgartirish intuitiv:

  • Rangni to'qroq qilmoqchimisan? Faqat L ni kamaytir: hsl(221, 83%, 40%).
  • Och variant kerakmi (masalan hover yoki fon)? L ni oshir: hsl(221, 83%, 90%).
  • Bir tonli palitra quryapsanmi? H ni saqlab, faqat S va L ni o'zgartir.

Hex'da #2563eb ni "10% to'qroq" qilish uchun matematika kerak. HSL'da esa bitta sonni o'zgartirasan. Shuning uchun dizayn tizimlari ko'pincha HSL'da quriladi.

hsla() ham rgba() kabi alfa qo'shadi: hsla(221, 83%, 53%, 0.5). Zamonaviy yozuvda: hsl(221 83% 53% / 50%).

12.13 Zamonaviy ranglar: oklch (qisqacha)

So'nggi yillarda yangi, kuchliroq rang modeli paydo bo'ldi β€” oklch(). U inson ko'zining rangni qanday idrok etishiga yaqinroq tuzilgan:

.q { color: oklch(0.6 0.2 250); }
  • Birinchi son β€” yorqinlik (L), 0–1.
  • Ikkinchi β€” chroma (rang to'qligi).
  • Uchinchi β€” hue (tus), daraja.

Nega muhim? HSL'da Lni o'zgartirsang, ranglar idrok darajasida notekis yorishadi (sariq ko'kdan ko'ra yorqinroq ko'rinadi). OKLCH bu muammoni hal qiladi β€” L ni teng o'zgartirsang, idrokda ham teng yorishadi. Bu mukammal palitralar qurish uchun zo'r.

πŸ“Œ Hozircha: oklch() zamonaviy brauzerlarda ishlaydi, lekin yangi. Boshlovchi sifatida hsl ni o'zlashtir; oklch borligini bilib qo'y va kerak bo'lganda o'rganasan.

πŸ’‘ Qaysi modelni tanlash? Amaliy maslahat: kundalik ish uchun hex (nusxa-ulash oson) yoki hsl (qo'lda sozlash oson). Shaffoflik kerak bo'lsa alfa bilan rgb/hsl. Kelajak uchun β€” oklch.

12.14 Tipografiya: font-family va shrift steki

Endi matnga o'tamiz. font-family matn qaysi shrift bilan ko'rsatilishini belgilaydi. Lekin sen bir emas, ro'yxat berasan β€” buni "shrift steki" (font stack) deyiladi:

body {
  font-family: "Inter", Arial, sans-serif;
}

Brauzer ro'yxatni chapdan o'ngga sinaydi va birinchi mavjud shriftni ishlatadi. "Inter" o'rnatilmagan bo'lsa, Arialga o'tadi; u ham yo'q bo'lsa, tizimning umumiy sans-serif shriftiga. Quyidagi diagramma bu zanjirni ko'rsatadi:

Brauzer shrift stekini navbatma-navbat sinab, birinchi mavjudini ishlatadi

Qoidalar: - Nomida bo'sh joy bo'lgan shrift qo'shtirnoqda: "Times New Roman". - Ro'yxat oxirida doim umumiy oila (generic family) yoz β€” bu kafolatli zaxira.

Umumiy oilalar (generic families):

Oila Tavsifi Misol
serif Harf uchlarida "oyoqchalar" bor Times, Georgia
sans-serif Oyoqchasiz, toza Arial, Helvetica
monospace Har harf bir xil kenglikda Courier, kod uchun
cursive Yozma uslub β€”
system-ui Foydalanuvchi tizimining standart shrifti β€”

⚠️ Tez-tez xato: umumiy oilani tashlab ketish (font-family: "Inter";). Agar shu shrift bo'lmasa, brauzer o'zining standartiga qaytadi β€” bu sening dizayningga to'g'ri kelmasligi mumkin. Har doim sans-serif yoki serif bilan tugat.

πŸ’‘ "System font stack": ko'p saytlar hech qanday shriftni yuklamasdan, har qurilmaning o'z chiroyli shriftidan foydalanadi: font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;. Bu tez (yuklash yo'q) va har platformada tabiiy ko'rinadi.

12.15 font-size, font-weight, font-style

Bu uchta xossa shriftning asosiy ko'rinishini boshqaradi.

font-size β€” o'lcham

h1 { font-size: 2rem;   }   /* 32px (root 16px bo'lsa) */
p  { font-size: 1rem;   }   /* 16px */
small { font-size: 0.875rem; } /* 14px */

Natija: sarlavha katta, oddiy matn standart, mayda matn kichik. (12.5'da nega rem afzalligini ko'rgan eding.)

font-weight β€” qalinlik

Harf qalinligini belgilaydi. Kalit so'z yoki son (100–900) bilan:

.yengil  { font-weight: 300; }
.oddiy   { font-weight: 400; }   /* = normal */
.yarim   { font-weight: 500; }
.qalin   { font-weight: 700; }   /* = bold */

Natija: son qancha katta bo'lsa, harflar shuncha qalin. normal = 400, bold = 700.

⚠️ Eslatma: shrift faqat o'zida bor qalinliklarni ko'rsata oladi. Agar shrift faqat 400 va 700'ga ega bo'lsa, font-weight: 500 so'rasang, brauzer eng yaqinini (yoki sun'iy qalinligini) ishlatadi β€” natija kutilganidek bo'lmasligi mumkin.

font-style β€” uslub

.qiya  { font-style: italic; }   /* qiya (kursiv) */
.tik   { font-style: normal; }   /* tik (standart) */

Natija: italic matnni qiyalashtiradi β€” ta'kid yoki sitatalarda ishlatiladi.

12.16 line-height β€” qator balandligi (va nega unitsiz)

line-height matn qatorlari orasidagi vertikal masofani β€” har qatorning balandligini β€” belgilaydi. To'g'ri line-height matnni o'qishni osonlashtiradigan eng muhim xossalardan biri.

p {
  font-size: 16px;
  line-height: 1.5;   /* 1.5 Γ— 16 = 24px qator balandligi */
}

Natija: har qator 24px balandlikda β€” qatorlar orasida nafas oladigan bo'shliq paydo bo'ladi, matn zich (siqiq) emas.

Nega unitsiz (sonli) qiymat afzal?

line-height ni uch xil berish mumkin: 1.5 (unitsiz), 24px, yoki 150%. Unitsiz afzal β€” mana nega:

  • Unitsiz 1.5 β€” bu "joriy element font-size'ining 1.5 baravari" degani va u har farzandga to'g'ri tarzda meros bo'ladi: har farzand o'z font-size'iga ko'paytiradi.
  • 150% yoki 24px β€” hisoblangan qiymat meros bo'ladi. Ya'ni ota 16px bo'lsa, 150% β†’ 24px hisoblanadi va aynan 24px farzandga o'tadi β€” farzand 30px bo'lsa ham, qatori baribir 24px qoladi va matn ustma-ust tushib qolishi mumkin.
/* Yaxshi β€” har farzand o'z o'lchamiga moslab hisoblaydi */
body { line-height: 1.5; }

/* Xavfli β€” hisoblangan 24px hamma farzandga qotib o'tadi */
body { line-height: 24px; }

πŸ’‘ Oltin qoida: asosiy matn uchun line-height: 1.5 atrofida tut (1.4–1.6 oralig'i ideal). Sarlavhalar uchun kichikroq (1.1–1.3), chunki ular kam qatorli.

line-height tipografiya anatomiyasining bir qismi β€” quyidagi diagramma line-heightni baseline, x-height va boshqa chiziqlar bilan ko'rsatadi:

Tipografiya anatomiyasi: baseline, x-height, ascender, descender va line-height

12.17 letter-spacing, text-align, text-decoration

Bu xossalar matnning nozik ko'rinishini sozlaydi.

letter-spacing β€” harflar orasidagi masofa

.kichik-sarlavha {
  text-transform: uppercase;
  letter-spacing: 0.1em;   /* harflar orasini ozgina kengaytir */
}

Natija: harflar orasida qo'shimcha bo'shliq β€” KATTA HARFLI sarlavhalarni ko'proq "nafas oladigan" qiladi. emda berish afzal (shriftga mutanosib).

text-align β€” gorizontal tekislash

.chap   { text-align: left;    }   /* standart (chapdan-o'ngga tillarda) */
.markaz { text-align: center;  }
.ong    { text-align: right;   }
.tekis  { text-align: justify; }   /* ikkala chetni tekislaydi */

Natija: matn mos ravishda chapga, markazga, o'ngga yoki ikki tomonga tekislanadi.

⚠️ Eslatma: justify ni uzun matnda ehtiyot ishlatish kerak β€” u so'zlar orasida notekis bo'shliq ("daryo"lar) hosil qilishi va o'qishni qiyinlashtirishi mumkin.

text-decoration β€” chiziqlar

a { text-decoration: none; }                    /* havoladagi tag chizig'ini olib tashlash */
.muhim { text-decoration: underline; }           /* tagiga chizish */
.eski  { text-decoration: line-through; }         /* ustidan chizish (o'chirilgan narx) */
.boy   { text-decoration: underline wavy #dc2626; } /* to'lqinli, rangli tag chizig'i */

Natija: havoladan chiziq olib tashlanadi; boshqa matnlar tagidan/ustidan chiziladi. To'liq yozuvda chiziq turi, uslubi va rangini belgilash mumkin.

12.18 text-transform va white-space

text-transform β€” harf registri

Matnni HTML'ni o'zgartirmasdan, faqat ko'rinishda katta/kichik harfga aylantiradi:

.katta  { text-transform: uppercase;   }  /* HAMMASI KATTA */
.kichik { text-transform: lowercase;   }  /* hammasi kichik */
.bosh   { text-transform: capitalize;  }  /* Har So'z Bosh Harf */

Natija: matn ko'rinishi o'zgaradi, lekin HTML'dagi haqiqiy matn (va nusxa olganingda olinadigan matn) o'zgarmaydi.

πŸ’‘ Nega vizual? Agar sarlavhani HTML'da KATTA HARFLI yozsang, skrinrider (screen reader) uni harf-harf o'qishi yoki "qichqirayotgandek" talqin qilishi mumkin. text-transform: uppercase esa faqat ko'rinishni o'zgartiradi β€” HTML toza qoladi, qulaylik saqlanadi.

white-space β€” bo'sh joy va qator uzilishi

white-space matndagi probel va qator uzilishlarining qanday ishlanishini boshqaradi:

Qiymat Bo'sh joylar Qator uzilishi
normal Birlashtiradi Avtomatik o'raydi
nowrap Birlashtiradi O'ramaydi (bir qatorda)
pre Saqlaydi Faqat sen yozgan joyda
pre-wrap Saqlaydi Saqlaydi + avtomatik o'raydi 
.bir-qatorda {
  white-space: nowrap;   /* matn o'ralmaydi, bir qatorda qoladi */
  overflow: hidden;
  text-overflow: ellipsis;  /* sig'magani "..." bo'lib ko'rsatiladi */
}

Natija: uzun matn o'ralmasdan bir qatorda qoladi va sig'magan qismi ... bilan kesiladi β€” kartochkalardagi sarlavhalar uchun mashhur usul.

πŸ“Œ pre kod ko'rsatishda foydali β€” u sening probel va qatorlaringni aynan saqlaydi (<pre> tegi ham shuni qiladi).

12.19 Web shriftlar: @font-face, Google Fonts, font-display

Tizim shriftlari cheklangan. Brendga mos maxsus shrift kerak bo'lsa, uni saytga yuklash mumkin β€” buni "web font" deyiladi.

@font-face β€” shriftni qo'lda ulash

@font-face qoidasi brauzerga shrift faylini qayerdan olishni va qanday nomlashni aytadi:

@font-face {
  font-family: "MeningShriftim";
  src: url("/shriftlar/mening-shrift.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: "MeningShriftim", sans-serif;
}

Natija: brauzer shriftni yuklaydi va body matnini shu shrift bilan ko'rsatadi. .woff2 β€” eng zamonaviy, eng kichik hajmli format (afzal).

Google Fonts β€” eng oson yo'l

O'zing fayl bilan ovora bo'lmasdan, tayyor bepul shriftlardan foydalanish mumkin. <head> ga bitta <link> qo'shasan:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>

body {
  font-family: "Inter", sans-serif;
}

Natija: "Inter" shrifti Google serveridan yuklanadi va ishlatiladi. URL'dagi display=swap β€” bu keyingi muhim mavzu.

font-display β€” yuklanayotganda nima ko'rsatiladi?

Shrift yuklanguncha bir necha yuz millisekund o'tishi mumkin. font-display shu paytda nima bo'lishini hal qiladi:

Qiymat Yuklangunicha Nega
swap Zaxira shriftni ko'rsat, tayyor bo'lgach almashtir Matn darhol o'qiladi β€” eng ko'p tavsiya etiladigan
block Qisqa vaqt bo'sh (matn ko'rinmaydi), keyin ko'rsat Matn kechikadi β€” qochish kerak
fallback Qisqa block, keyin swap Aralash
optional Tez bo'lsa ishlat, bo'lmasa zaxirada qol Sekin internet uchun

πŸ’‘ Amaliy tavsiya: deyarli har doim font-display: swap ishlat. Bu "ko'rinmas matn" (FOIT β€” Flash of Invisible Text) muammosini oldini oladi: foydalanuvchi matnni darhol o'qiy boshlaydi, shrift esa fonda yuklanib, tayyor bo'lgach almashadi.

⚠️ Ishlash (performance) eslatmasi: har bir web shrift β€” qo'shimcha yuklab olinadigan fayl. Faqat kerakli qalinliklarni yukla (masalan 400 va 700, hammasini emas) va .woff2 formatidan foydalan β€” sayt tez ochiladi.

12.20 Hammasini birga: amaliy misol

Mana shu bobning bilimlarini birlashtirgan kichik, real komponent:

:root {
  /* Ranglar HSL'da β€” sozlash oson */
  --asosiy: hsl(221, 83%, 53%);
  --asosiy-toq: hsl(221, 83%, 43%);
  --matn: hsl(222, 47%, 11%);
}

html { font-size: 16px; }   /* root β€” rem shu yerga bog'lanadi */

.karta {
  max-width: 60ch;            /* o'qish uchun qulay kenglik */
  padding: 1.5rem;            /* barqaror bo'shliq */
  color: var(--matn);
  font-family: system-ui, "Segoe UI", sans-serif;
  line-height: 1.6;           /* unitsiz β€” to'g'ri meros bo'ladi */
}
.karta h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.karta .tugma {
  padding: 0.6em 1.2em;       /* em β€” tugma shriftiga mutanosib */
  background: var(--asosiy);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
}
.karta .tugma:hover {
  background: var(--asosiy-toq);  /* faqat L kamaydi β†’ to'qroq */
}

<article class="karta">
  <h2>O'lchov va ranglar amalda</h2>
  <p>Bu kartochka rem, em, ch, hsl va to'g'ri line-height'ni birlashtiradi.</p>
  <button class="tugma">Bosing</button>
</article>

Natija: moslashuvchan, o'qishga qulay va oson sozlanadigan kartochka β€” har bir o'lchov va rang tanlovi ortida sabab bor. Ranglar HSL o'zgaruvchilarida, shriftlar remda, tugma padding'i emda, qator uzunligi chda β€” bu professional CSS'ning poydevori.

Mashqlar

Quyidagi mashqlarni brauzerda (yoki Chrome DevTools'da) sinab ko'r. Avval o'zing javob ber, keyin yechimni och.

Mashq 1 β€” em hisobi

html { font-size: 16px } bo'lsa va quyidagi struktura berilsa, eng ichki <span> matni necha piksel bo'ladi?

.a { font-size: 1.25em; }
.b { font-size: 1.25em; }

<div class="a"><div class="b"><span>matn</span></div></div>

Yechim

25px.

  • .a = 1.25 Γ— 16 = 20px
  • .b = 1.25 Γ— 20 = 25px (otasi .a ning 20px'iga nisbatan)
  • <span> o'zining font-size'i yo'q, shuning uchun otasi .b'dan 25px meros oladi.

Bu β€” emning ko'payib ketishi. Agar .a va .b da rem ishlatilganida, ikkalasi ham 1.25 Γ— 16 = 20px bo'lar edi.

Mashq 2 β€” Bir rangni uch xil yozish

rgb(255, 165, 0) (orange) rangini hex yozuvida yoz. Keyin tushuntir: nega HSL'da uni to'qroq qilish osonroq?

Yechim

Hex: #ffa500 (255 = ff, 165 = a5, 0 = 00).

HSL'da bu rang taxminan hsl(39, 100%, 50%). Uni to'qroq qilish uchun faqat yorqinlikni kamaytirasan: hsl(39, 100%, 35%). Hex yoki rgb'da esa uchala kanalni qayta hisoblash kerak bo'lardi β€” shuning uchun HSL sozlash uchun qulay.

Mashq 3 β€” line-height tuzog'i

Nega quyidagi kod muammoli? Tuzat.

body {
  font-size: 16px;
  line-height: 20px;
}
h1 { font-size: 40px; }
Yechim

Muammo: line-height: 20px hisoblangan 20px sifatida <h1>'ga meros bo'ladi. Lekin <h1> 40px shriftda β€” 40px harf 20px balandlikdagi qatorga sig'maydi, qatorlar ustma-ust tushadi.

Tuzatish β€” unitsiz qiymat ishlat:

body {
  font-size: 16px;
  line-height: 1.5;   /* har element o'z font-size'iga ko'paytiradi */
}
h1 { font-size: 40px; }   /* qatori avtomatik 60px bo'ladi */

Mashq 4 β€” To'g'ri shrift steki

Quyidagi font-family'da ikkita xato bor. Toping va tuzating.

body {
  font-family: Times New Roman, Inter;
}
Yechim

Ikki xato: 1. Times New Roman bo'sh joyli nom β€” qo'shtirnoqda bo'lishi kerak. 2. Oxirida umumiy oila (generic family) yo'q β€” zaxira kafolati yo'q.

Tuzatilgan (mantiqan Inter birinchi bo'lishi kerak, keyin zaxiralar):

body {
  font-family: "Inter", "Times New Roman", serif;
}

Mashq 5 β€” Viewport birliklar

"Qahramon bo'lim" (hero) yarataylik: u har qanday ekranda to'liq ekran balandligini egallasin va kengligi viewport'ning to'liq enini olsin. CSS yoz.

Yechim 
.qahramon {
  width: 100vw;     /* viewport kengligi 100% */
  height: 100vh;    /* viewport balandligi 100% */
  display: flex;
  align-items: center;
  justify-content: center;
}

100vh ekran balandligiga, 100vw kengligiga bog'lanadi β€” ekran o'lchami qanday bo'lishidan qat'i nazar to'liq ekranni egallaydi.

Mashq 6 β€” currentColor

.tugma ning matn rangi hsl(221, 83%, 53%) bo'lsin va chegarasi aynan shu rangda bo'lsin β€” lekin rangni faqat bir marta yoz. Qanday qilasan?

Yechim 
.tugma {
  color: hsl(221, 83%, 53%);
  border: 2px solid currentColor;   /* "joriy color qiymati" */
  background: transparent;
}

currentColor joriy color qiymatini oladi. Endi color ni o'zgartirsang, chegara ham avtomatik o'zgaradi β€” takror yozish shart emas.

Mashq 7 β€” rem bilan miqyoslash

html { font-size: 16px } va barcha matnlar remda. Butun saytdagi matnni 12.5% kattalashtirish uchun bitta qator o'zgartirish yoz.

Yechim 
html { font-size: 18px; }   /* 16 Γ— 1.125 = 18px */

Hamma rem qiymatlar root'ga bog'langani uchun, faqat root'ni o'zgartirish butun saytni mutanosib kattalashtiradi. Aynan shu β€” remning eng katta afzalligi (12.5'da ko'rgan eding). pxda har bir o'lchamni alohida o'zgartirishga to'g'ri kelar edi.

Mashq 8 β€” Matn kesish

Kartochka sarlavhasi uzun bo'lsa, bir qatorda qolib, sig'magani ... bilan kesilsin. CSS yoz.

Yechim 
.karta__sarlavha {
  white-space: nowrap;        /* o'ramaslik β€” bir qatorda */
  overflow: hidden;           /* sig'magan qism yashiriladi */
  text-overflow: ellipsis;    /* yashiringan qism "..." bo'ladi */
}

Uchala xossa birga ishlaydi: nowrap matnni bir qatorga majburlaydi, overflow: hidden ortiqchasini kesadi, text-overflow: ellipsis esa kesilgan joyni ... bilan belgilaydi.

⬅️ Oldingi: 11 β€” Box model Β· 🏠 README Β· Keyingi: 13 β€” Fon, chegara va soyalar ➑️