CSS'da qanday rang formatlari bor va shriftlar hamda matn bilan qanday ishlash kerak?

Savol

CSS'da rangni belgilashning qanday formatlari bor, font-family qanday sozlanadi va matnni qanday xususiyatlar boshqaradi?

Qisqa javob

Rangni hex, rgb()/rgba(), hsl()/hsla() yoki zamonaviy oklch() orqali belgilash mumkin; shriftlar folbek bilan font-family stekiga ulanadi yoki @font-face orqali o'z fayli bilan; tipografika uchun line-height, letter-spacing, text-overflow va shunga o'xshash xususiyatlar javobgar.

Batafsil javob

Rang formatlari:

• hex (#ff0000, #f00) — RGB'ning o'n oltilik ko'rinishdagi ixcham yozuvi, eng keng tarqalgani.
• rgb()/rgba() (rgb(255 0 0), rgba(255, 0, 0, 0.5)) — rang qizil/yashil/ko'k kanallari orqali, a — shaffoflik.
• hsl()/hsla() (hsl(0 100% 50%)) — rang ohang (hue), to'yinganlik (saturation), yorqinlik (lightness) orqali. Palitralarni dasturiy ravishda yaratish uchun qulay (masalan, qorong'ilashtirish/yoritish uchun faqat lightness'ni o'zgartirish).
• oklch() — zamonaviy perseptiv jihatdan bir xil (lightness, chroma, hue) format. HSL'dan farqli o'laroq, lightness'ning bir xil o'zgarishi har qanday rang uchun vizual jihatdan bir xil ko'rinadi, shuningdek kengroq rang diapazonini (P3) qo'llab-quvvatlaydi.

Shriftlar:

font-family vergul bilan ajratilgan ro'yxat sifatida belgilanadi — bu folbek-zanjir: brauzer ro'yxatdagi birinchi mavjud shriftdan foydalanadi, oxirida esa odatda ro'yxatdagilarning hech biri o'rnatilmagan bo'lsa deb umumiy oilani (sans-serif, serif, monospace) ko'rsatishadi.

@font-face tizim shriftlariga tayanish o'rniga o'z shriftingizni fayl orqali (odatda .woff2) ulash imkonini beradi. Muhim tafsilotlar: font-display yuklanish paytidagi xatti-harakatni boshqaradi (swap — matnni darhol folbek-shrift bilan ko'rsatish, yuklangach almashtirish), bir xil font-family, lekin turli font-weight/font-stylega ega bir nechta @font-face esa turli ko'rinishlarga ega bitta oilani hosil qiladi.

Matn xususiyatlari:

• line-height — qator balandligi; birliksiz (1.5) elementning font-sizeidan masshtablanadi, bu esa qat'iy pxdan afzalroq.
• letter-spacing — belgilar orasidagi masofa, kapsda yozilgan sarlavhalar uchun foydali.
• text-overflow: ellipsis — to'lib ketgan matnni ko'p nuqta bilan kesadi, lekin bunga qo'shimcha overflow: hidden va white-space: nowrap talab qiladi, aks holda ishlamaydi.

Misol

:root {
  --brand-color: oklch(65% 0.2 250);
  --brand-color-fallback: hsl(220 90% 55%);
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

body {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
  color: var(--brand-color-fallback);
  color: var(--brand-color);
}

.card-title {
  letter-spacing: 0.02em;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

Qo'shimcha savollar

• Palitralarni dasturiy yaratish uchun oklch() nima bilan hsl()dan yaxshiroq?
• Nega font-display: swap maketning "sakrashi"ga (layout shift) olib kelishi mumkin?
• Ko'p qatorli matn uchun ko'p nuqtani -webkit-line-clamp orqali qanday amalga oshirish mumkin?