Ranglar va tipografiya - HTML va CSS

Rang va shrift - dizaynning 80% i. To'g'ri tanlangan ikkita rang va bitta shrift sahifani professional ko'rsatadi.

Rang formatlari #

CSS

.misol {
    /* Nom bo'yicha - 140 ta standart rang */
    color: red;
    color: steelblue;

    /* HEX - eng ko'p ishlatiladigan */
    color: #2563eb;
    color: #fff;              /* qisqartma: #ffffff */
    color: #2563eb80;         /* shaffoflik bilan (80 = 50%) */

    /* RGB */
    color: rgb(37, 99, 235);
    color: rgb(37 99 235 / 50%);      /* zamonaviy sintaksis */

    /* HSL - o'qish va sozlash eng oson */
    color: hsl(221, 83%, 53%);
    color: hsl(221 83% 53% / 50%);
}

HSL da rang oilasini yaratish juda oson - faqat yorug'likni o'zgartiring

HSL nima uchun qulay?

CSS

/* HEX bilan: rang oilasini yaratish qiyin */
--asosiy: #2563eb;
--ochroq: #3b82f6;      /* qanday hisoblangan? noaniq */
--toqroq: #1d4ed8;

/* HSL bilan: faqat yorug'likni o'zgartiring */
--asosiy: hsl(221, 83%, 53%);
--ochroq: hsl(221, 83%, 63%);
--toqroq: hsl(221, 83%, 43%);

Dizayn tizimi qurayotganda HSL ancha tushunarli.

Fon #

CSS

.blok {
    /* Oddiy rang */
    background-color: #f8fafc;

    /* Rasm */
    background-image: url("rasmlar/fon.jpg");
    background-size: cover;          /* butun maydonni qoplaydi */
    background-position: center;
    background-repeat: no-repeat;

    /* Qisqa yozuv */
    background: #f8fafc url("fon.jpg") center / cover no-repeat;
}

`background-size`	Ma'nosi
`cover`	Maydonni to'la qoplaydi (chetlari kesiladi)
`contain`	To'liq sig'adi (bo'sh joy qolishi mumkin)
`100% 100%`	Cho'zadi (nisbat buziladi)
`300px 200px`	Aniq o'lcham

Gradientlar #

CSS

/* Chiziqli */
.gradient-1 {
    background: linear-gradient(to right, #2563eb, #7c3aed);
}

.gradient-2 {
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 50%, #16a34a 100%);
}

/* Radial */
.gradient-3 {
    background: radial-gradient(circle at top left, #dbeafe, #ffffff);
}

/* Matn ustida o'qilishi uchun qoraytirish */
.qahramon {
    background:
        linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
        url("rasmlar/fon.jpg") center / cover;
    color: #ffffff;
}

Rasm ustidagi matn

Rasm ustiga matn qo'yganda u ko'pincha o'qilmaydi. Yechim - rasm bilan matn orasiga yarim shaffof qatlam qo'yish. Yuqoridagi .qahramon misolidagi kabi ikkita fonni birga yozish eng oddiy usul.

Shriftlar #

CSS

body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Shrift zanjiri (fallback) majburiy

Brauzer ro'yxatni chapdan o'ngga tekshiradi va topilgan birinchisini ishlatadi. Oxirida har doim umumiy oila (sans-serif, serif, monospace) bo'lishi kerak - aks holda foydalanuvchida shrift bo'lmasa, brauzer standarti (odatda Times New Roman) qo'llanadi.

Oila	Ko'rinishi	Qachon
`sans-serif`	Chiziqchasiz	Interfeys, ekran uchun
`serif`	Chiziqchali	Uzun matn, kitob
`monospace`	Bir xil kenglik	Kod
`cursive`	Qo'l yozuvi	Bezak
`system-ui`	Tizim shrifti	Tez yuklanadi

Tizim shrifti to'plami #

Eng tez yechim - foydalanuvchi qurilmasidagi shriftni ishlatish:

CSS

body {
    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;
}

Hech narsa yuklanmaydi, sahifa darhol ko'rinadi va har bir tizimda "o'ziniki" bo'lib tuyuladi.

Google Fonts #

HTML

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

CSS

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

Shriftlar sahifani sekinlashtiradi

Har bir shrift og'irligi (400, 600, 700) alohida fayl. Uchtasi ~150 KB.

Qoidalar:

Ko'pi bilan ikkita shrift oilasi ishlating
Faqat kerakli og'irliklarni yuklang
display=swap qo'shing - matn shrift yuklanguncha ko'rinadi
O'zbekcha harflar (o', g') qo'llab-quvvatlanishini tekshiring

O'lchov birliklari #

Birlik	Nimaga nisbatan	Qachon
`px`	Mutlaq piksel	Chegara, soya
`rem`	Ildiz shrift o'lchamiga	Shrift, masofa
`em`	Ota shrift o'lchamiga	Element ichidagi masofa
`%`	Ota elementga	Kenglik
`vw` / `vh`	Ekran kengligi/balandligi	To'liq ekranli bloklar
`ch`	"0" belgisi kengligiga	Matn qatori kengligi
`fr`	Bo'sh joy ulushi	Grid

CSS

html { font-size: 16px; }        /* 1rem = 16px */

h1   { font-size: 2.5rem; }      /* 40px */
p    { font-size: 1rem; }        /* 16px */
small{ font-size: 0.875rem; }    /* 14px */

.karta {
    padding: 1.5rem;             /* 24px */
    border-radius: 0.75rem;      /* 12px */
    max-width: 65ch;             /* ~65 ta belgi - o'qish uchun ideal */
}

Nima uchun rem?

Foydalanuvchi brauzer sozlamalarida shrift o'lchamini kattalashtirsa (ko'zi zaif odamlar buni tez-tez qiladi), rem bilan yozilgan butun sahifa mutanosib kattalashadi. px bilan yozilgan matn esa o'zgarmaydi.

Qoida: shrift va masofa uchun rem, chegara va soya uchun px.

Matn xossalari #

CSS

.matn {
    font-size: 1rem;
    font-weight: 600;              /* 100-900 yoki normal/bold */
    font-style: italic;
    line-height: 1.6;              /* birliksiz - eng to'g'ri usul */
    letter-spacing: 0.02em;        /* harflar orasi */
    word-spacing: 0.1em;           /* so'zlar orasi */

    text-align: left;              /* left, right, center, justify */
    text-transform: uppercase;     /* uppercase, lowercase, capitalize */
    text-decoration: underline;    /* none, underline, line-through */
    text-indent: 2rem;             /* birinchi satr chekinishi */

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    white-space: nowrap;           /* satr ko'chirmaslik */
    word-break: break-word;        /* uzun so'zni bo'lish */
}

`line-height` - eng muhim xossa #

CSS

/* Yomon: matn siqilgan */
p { line-height: 1.1; }

/* Yaxshi: o'qish qulay */
p { line-height: 1.6; }

/* Sarlavhalar uchun kichikroq */
h1 { line-height: 1.2; }

line-height ni birliksiz yozing

CSS

/* Yomon: bolalar 24px ni meros oladi */
body { font-size: 16px; line-height: 24px; }

/* Yaxshi: bolalar 1.5 koeffitsientini meros oladi */
body { font-size: 16px; line-height: 1.5; }

Ikkinchi holatda h1 (32px) uchun line-height avtomatik 48px bo'ladi.

Matnni kesish #

CSS

/* Bir satrda kesish */
.bir-satr {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Uch satrdan keyin kesish */
.uch-satr {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Kontrast va o'qilishi #

Kontrastni tekshiring

Matn va fon orasidagi kontrast yetarli bo'lishi kerak:

Matn turi	Minimal kontrast (WCAG AA)
Oddiy matn	4.5:1
Katta matn (18pt+)	3:1
Interfeys elementlari	3:1

CSS

/* Yomon: kontrast 2.1:1 - o'qib bo'lmaydi */
.yomon { color: #94a3b8; background: #f1f5f9; }

/* Yaxshi: kontrast 8.6:1 */
.yaxshi { color: #334155; background: #ffffff; }

Tekshirish: Chrome DevTools da elementni tanlab, color xossasi yonidagi kvadratchani bosing - kontrast ko'rsatkichi chiqadi.

Amaliy misol: tipografiya tizimi #

CSS

:root {
    /* Ranglar */
    --asosiy: hsl(221, 83%, 53%);
    --asosiy-toq: hsl(221, 83%, 43%);
    --asosiy-och: hsl(221, 83%, 95%);

    --matn: hsl(215, 25%, 27%);
    --matn-och: hsl(215, 16%, 47%);
    --sarlavha: hsl(222, 47%, 11%);

    --fon: hsl(0, 0%, 100%);
    --fon-yumshoq: hsl(210, 40%, 98%);
    --chegara: hsl(214, 32%, 91%);
}

html {
    font-size: 16px;
}

body {
    font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--matn);
    background: var(--fon);
    -webkit-font-smoothing: antialiased;
}

/* Sarlavhalar */
h1, h2, h3, h4 {
    color: var(--sarlavha);
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 0.5em;
    letter-spacing: -0.015em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

/* Matn */
p {
    margin: 0 0 1.2em;
    max-width: 68ch;              /* o'qish uchun optimal kenglik */
}

.yetakchi {
    font-size: 1.15rem;
    color: var(--matn-och);
}

small, .kichik {
    font-size: 0.875rem;
    color: var(--matn-och);
}

/* Havolalar */
a {
    color: var(--asosiy);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Kod */
code {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 0.9em;
    background: var(--fon-yumshoq);
    border: 1px solid var(--chegara);
    border-radius: 4px;
    padding: 0.1em 0.35em;
    color: hsl(330, 81%, 40%);
}

Matn qatori kengligi

Bir qatorda 50-75 ta belgi bo'lishi o'qish uchun eng qulay deb hisoblanadi. Juda uzun qatorda ko'z keyingi satr boshini topa olmaydi, juda qisqada esa tez-tez tashlashga to'g'ri keladi.

max-width: 68ch aynan shuni ta'minlaydi - ch birligi shriftga moslashadi.

Amaliy topshiriq

:root da o'z rang palitrangizni yarating (HSL formatida, kamida 6 ta rang).
Bitta asosiy rangdan uchta variant hosil qiling - faqat L ni o'zgartirib.
Sarlavhalar uchun rem da o'lchamlar shkalasini tuzing (h1 dan h4 gacha).
line-height ni 1.2, 1.6 va 2.0 qilib sinab ko'ring - qaysi biri qulayroq?
Rasm ustiga matn qo'ying va gradient qatlam bilan o'qiladigan qiling.
DevTools da kontrastni tekshiring - barcha matn 4.5:1 dan yuqori bo'lsin.
max-width: 65ch qo'shib, matn kengligi qanday o'zgarishini kuzating.

Xulosa #

Rang formatlari: HEX (#2563eb), RGB, HSL. HSL rang oilasi yaratishda qulay.
background bir nechta qatlamni birga qabul qiladi - rasm ustiga gradient qo'yish shunday ishlaydi.
Shrift ro'yxati oxirida har doim umumiy oila (sans-serif) bo'lsin.
Tizim shriftlari eng tez yechim; Google Fonts ishlatsangiz display=swap qo'shing.
Shrift va masofa uchun rem, chegara uchun px ishlating.
line-height ni birliksiz yozing (1.6, 24px emas).
Matn kontrasti kamida 4.5:1 bo'lishi kerak.
Matn qatori kengligini 65-70ch bilan cheklang.

Keyingi bo'limda CSS ning eng muhim tushunchasi - box model bilan tanishamiz.