Ranglar, shriftlar va fonlar

Ranglar va shriftlar — sahifaning «kayfiyati». Bir xil matn bir shriftda jiddiy, boshqasida quvnoq ko'rinadi. Bu darsda rang yozishning barcha usullarini, shriftlar va o'lcham birliklarini, fon rasmlari va gradientlarni o'rganamiz — oxirida esa sichqoncha tegsa rangi silliq o'zgaradigan tugma yasaymiz.

Ranglar

CSS'da rang ko'p joyda kerak: matn (color), fon (background-color), chegara (border). Rangni esa bir necha usulda yozish mumkin.

Rang nomlari

Eng oson usul — ingliz tilidagi nom: red, white, teal, crimson, tomato, gold, navy… CSS 140 dan ortiq nomni biladi. Sinab ko'rish uchun qulay, lekin tanlov cheklangan: dizayner bergan aniq rangni nom bilan topib bo'lmaydi.

HEX — o'n oltilik kod

Ekran har bir rangni uchta nurdan — qizil (Red), yashil (Green) va ko'k (Blue) — aralashtirib hosil qiladi. Shuning uchun rang odatda uchta son bilan yoziladi: har bir nur qanchalik yorqin yonishi. HEX (inglizcha hexadecimal — «o'n oltilik») yozuvida # belgisidan keyin har bir nur uchun ikkitadan belgi keladi:

O'n oltilik sanoq sistemasida 0–9 raqamlaridan keyin a, b, c, d, e, f harflari keladi (a = 10, …, f = 15). Hisoblashni bilish shart emas — asosiysi: 00 — nur yo'q, ff — to'liq. Demak, #ff0000 — sof qizil, #000000 — qora (hamma nur o'chiq), #ffffff — oq (hammasi to'liq yonadi).

Har bir juftlikdagi ikki belgi bir xil bo'lsa, qisqa yozuv ishlatish mumkin: #ff0000 → #f00, #ffffff → #fff, #ff8800 → #f80.

rgb() va rgba()

Xuddi o'sha uch nur, lekin oddiy o'nlik sonlarda (0–255): rgb(255, 0, 0) — qizil, rgb(31, 79, 168) — yuqoridagi to'q ko'k. rgba() da to'rtinchi son ham bor — alfa, ya'ni shaffoflik: 0 — butunlay shaffof (ko'rinmaydi), 1 — butunlay to'liq, 0.5 — yarim shaffof.

hsl() — inson uchun qulay yozuv

hsl(200, 70%, 40%) uchta qismdan iborat: rang tusi (hue) — rang doirasidagi burchak, 0 dan 360 gacha (0 — qizil, 120 — yashil, 240 — ko'k); to'yinganlik (saturation) — 0% kulrang, 100% eng yorqin; yorug'lik (lightness) — 0% qora, 50% oddiy, 100% oq. Bir rangning ochroq yoki to'qroq variantini olish juda oson: faqat oxirgi sonni o'zgartirasiz.

<style>
  body { font-family: sans-serif; }
  div { display: inline-block; width: 200px; padding: 26px 4px;
        margin: 3px; color: white; text-align: center;
        border-radius: 8px; font-family: monospace; }
  .r1 { background: tomato; }
  .r2 { background: #1f4fa8; }
  .r3 { background: #f80; }
  .r4 { background: rgb(10, 124, 119); }
  .r5 { background: rgba(10, 124, 119, 0.4); color: black; }
  .r6 { background: hsl(280, 60%, 50%); }
</style>

<div class="r1">tomato</div>
<div class="r2">#1f4fa8</div>
<div class="r3">#f80</div>
<div class="r4">rgb(10, 124, 119)</div>
<div class="r5">rgba(10, 124, 119, 0.4)</div>
<div class="r6">hsl(280, 60%, 50%)</div>

Qiymatlarni o'zgartirib ko'ring: #f80 ni #08f ga, hsl dagi 280 ni 30 ga almashtiring. To'rtinchi va beshinchi qutilar bir xil rangda, faqat beshinchisi shaffof — oq fon orqasidan ko'rinib turibdi.

hsl() ning kuchi — palitra yasashda. Quyida rang tusi bir xil, faqat yorug'lik o'zgaryapti. Birinchi sonni (200) istalgan boshqa songa almashtiring — butun palitra yangi rangga o'tadi:

<style>
  div { display: inline-block; width: 80px; height: 60px; }
  .q1 { background: hsl(200, 70%, 20%); }
  .q2 { background: hsl(200, 70%, 40%); }
  .q3 { background: hsl(200, 70%, 60%); }
  .q4 { background: hsl(200, 70%, 80%); }
  .q5 { background: hsl(200, 70%, 95%); }
</style>

<div class="q1"></div>
<div class="q2"></div>
<div class="q3"></div>
<div class="q4"></div>
<div class="q5"></div>

Shaffoflik: rgba yoki opacity?

Elementni shaffof qilishning ikki yo'li bor va ular farq qiladi. rgba() bilan berilgan fon rangi shaffof bo'ladi, ichidagi matn esa aniq qoladi. opacity: 0.6; xususiyati esa butun elementni — foni, matni va ichidagi hamma narsasi bilan — shaffof qiladi:

<style>
  body { font-family: sans-serif; }
  .manzara { background-image: url(../assets/rasmlar/tog.svg);
             background-size: cover; background-position: bottom;
             padding: 16px; }
  .quti { padding: 12px; margin: 8px 0; font-weight: bold; }
  .rgba    { background: rgba(255, 255, 255, 0.6); }
  .opacity { background: white; opacity: 0.6; }
</style>

<div class="manzara">
  <div class="quti rgba">rgba: faqat fon shaffof, matn aniq</div>
  <div class="quti opacity">opacity: butun quti shaffof</div>
</div>

Rangni qanday tanlash kerak?

• VS Code'da CSS faylidagi har bir rang yonida kichik rangli kvadratcha paydo bo'ladi. Sichqonchani uning ustiga olib borsangiz, rang tanlagich (inglizcha color picker) ochiladi: rangni sichqoncha bilan tanlaysiz, tepadagi yozuvni bossangiz, yozuv turi (HEX, rgb, hsl) almashadi.
• DevTools'da Styles panelidagi rang kvadratchasini bosing — xuddi shunday tanlagich chiqadi. Undagi pipetka belgisi bilan sahifaning istalgan nuqtasidagi rangni «olish» mumkin.

Shriftlar

font-family va zaxira shriftlar

font-family — shrift turi. Muhim nuqta: shrift foydalanuvchining kompyuterida o'rnatilgan bo'lishi kerak. Siz tanlagan shrift kimdadir bo'lmasligi mumkin, shuning uchun bir nechta shrift vergul bilan yoziladi — brauzer chapdan o'ngga qarab birinchi topganini ishlatadi:

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

Nomida bo'sh joy bo'lgan shriftlar qo'shtirnoqda yoziladi. Ro'yxat oxirida doim umumiy oila nomi tursin — u har qanday kompyuterda bor:

• serif — harf uchlarida «quyruqchalar» bor (Times New Roman, Georgia). Kitob va gazetalarga xos.
• sans-serif — quyruqchasiz, toza harflar (Arial, Helvetica). Ekranda o'qish uchun eng ko'p ishlatiladi.
• monospace — barcha harflar bir xil kenglikda (Courier New, Consolas). Kod yozish uchun.

Shriftning boshqa xususiyatlari

<style>
  .serif { font-family: Georgia, "Times New Roman", serif; }
  .sans  { font-family: Arial, Helvetica, sans-serif; }
  .mono  { font-family: "Courier New", monospace; }
  .katta { font-size: 26px; font-weight: 700; letter-spacing: 2px; }
  .zich, .keng { font-family: sans-serif; max-width: 380px; }
  .zich { line-height: 1; }
  .keng { line-height: 1.7; font-style: italic; }
</style>

<p class="serif">Serif: harf uchlarida quyruqchalar bor.</p>
<p class="sans">Sans-serif: quyruqchasiz, toza harflar.</p>
<p class="mono">Monospace: hamma harf bir xil kenglikda.</p>
<p class="sans katta">QALIN VA KENG</p>
<p class="zich">line-height: 1 — qatorlar bir-biriga yopishib
qolgan. Uzun matnni bunday o'qish qiyin, ko'z qatordan
qatorga o'tishda adashadi.</p>
<p class="keng">line-height: 1.7 — qatorlar orasi keng. Uzun matnni
bunday o'qish ancha yengil va yoqimli. Bu xatboshi yana kursivda.</p>

Asosiy matn uchun line-height ni 1.5–1.7 atrofida berish tavsiya etiladi — o'qish ancha yengillashadi.

Google Fonts: chiroyli shriftlarni ulash

Kompyuterdagi standart shriftlar cheklangan. Google Fonts saytida esa minglab bepul shrift bor va ularni istalgan saytga ulash mumkin:

1. Saytni oching va shrift tanlang (masalan, Nunito yoki Roboto). Qidiruv maydoniga o'zbekcha gap yozib, harflar qanday ko'rinishini sinab ko'ring.
2. Get font, keyin Get embed code tugmasini bosing.
3. Ko'rsatilgan <link> qatorlarini nusxalab, index.html ning <head> qismiga — style.css ulanishidan oldin — qo'ying.
4. CSS'da shrift nomini zaxira shriftlar bilan birga yozing.

<head>
    <meta charset="UTF-8">
    <title>Mening saytim</title>
    <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=Nunito:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

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

O'lcham birliklari

CSS'da o'lchamlar faqat piksel bilan yozilmaydi. Har bir birlikning o'z vazifasi bor:

Nega shrift uchun rem? Ko'rishi zaif odamlar ko'pincha brauzer sozlamalarida standart shrift kattaligini oshirib qo'yadi. rem da yozilgan o'lchamlar bu sozlamaga moslashadi, px esa yo'q. Hisoblash oson: 1.5rem = 1,5 × 16 = 24px.

em ning bir xususiyatini bilib qo'ying: u ota elementga nisbatan hisoblanadi, shuning uchun ichma-ich joylashganda ko'payib ketadi. rem esa doim bitta asosga tayanadi:

<style>
  body { font-family: sans-serif; }
  .em  { font-size: 1.2em; }
  .rem { font-size: 1.2rem; }
</style>

<div class="em">1.2em
  <div class="em">ichida yana 1.2em
    <div class="em">yana ichida 1.2em — kattalashib ketdi!</div>
  </div>
</div>
<hr>
<div class="rem">1.2rem
  <div class="rem">ichida yana 1.2rem
    <div class="rem">yana ichida 1.2rem — o'zgarmadi</div>
  </div>
</div>

Matnni bezash

<style>
  body { font-family: sans-serif; }
  h1 { text-align: center; text-transform: uppercase;
       letter-spacing: 3px; color: #b3361f;
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
  .eski { text-decoration: line-through; color: gray; }
  a { color: #0a7c77; font-weight: bold; text-decoration: none; }
  a:hover { text-decoration: underline; }
</style>

<h1>Kuzgi chegirma</h1>
<p>Narxi: <span class="eski">120 000 so'm</span> <b>90 000 so'm</b></p>
<p><a href="#">Batafsil o'qish →</a></p>

Havola tagidagi chiziq olib tashlandi, lekin sichqoncha ustiga kelganda qaytadi — foydalanuvchi bu havola ekanini baribir sezadi. HTML'da sarlavha oddiy harflarda yozilgan, katta harflarni CSS qildi.

Fonlar

Fon rangini background-color beradi. Fonga rasm ham qo'yish mumkin:

<style>
  body { font-family: sans-serif; }
  .quti { display: inline-block; width: 200px; height: 110px;
          margin: 4px; border: 2px solid #9aa5b8;
          background-color: #f4f6fa;
          background-image: url(../assets/rasmlar/olma.svg); }
  .cover   { background-size: cover; background-position: center; }
  .contain { background-size: contain; background-repeat: no-repeat;
             background-position: center; }
  .takror  { background-size: 50px; }
  b { background: white; padding: 2px 6px; }
</style>

<div class="quti cover"><b>cover</b></div>
<div class="quti contain"><b>contain</b></div>
<div class="quti takror"><b>50px, repeat</b></div>

Gradient — rangdan rangga silliq o'tish

Gradient — bir rangdan boshqasiga silliq o'tuvchi fon. CSS uchun bu rasm hisoblanadi, shuning uchun background-image yoki qisqa background xususiyatiga yoziladi:

• linear-gradient(#1f4fa8, #0a7c77) — yuqoridan pastga;
• linear-gradient(to right, …) — chapdan o'ngga; 135deg kabi burchak ham yozish mumkin;
• radial-gradient(…) — markazdan chetlarga, doira bo'lib.

<style>
  body { font-family: sans-serif; color: white; }
  div { padding: 22px; margin: 6px 0; border-radius: 8px;
        font-weight: bold; }
  .g1 { background: linear-gradient(#1f4fa8, #0a7c77); }
  .g2 { background: linear-gradient(to right, #ff9a3c, #d93a2b); }
  .g3 { background: linear-gradient(135deg, #8e2de2, #00c6ff); }
  .g4 { background: radial-gradient(circle, #ff9a3c, #b3361f); }
</style>

<div class="g1">Standart: yuqoridan pastga</div>
<div class="g2">to right — chapdan o'ngga</div>
<div class="g3">135deg — qiya burchak ostida</div>
<div class="g4">radial — markazdan chetga</div>

Jonli tugma: :hover va transition

O'tgan darsda :hover bilan tanishgan edik — sichqoncha ustida turganda ishlaydigan qoida. Unga transition (inglizcha «o'tish») qo'shilsa, o'zgarish birdaniga emas, silliq sodir bo'ladi: transition: background-color 0.3s; — «fon rangi o'zgarsa, 0,3 soniya davomida silliq o'zgarsin». s — soniya (inglizcha second).

<style>
  body { font-family: sans-serif; padding: 20px; }
  .tugma {
    background-color: #1f4fa8;
    color: white;
    font-size: 1rem;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;      /* sichqoncha «qo'l» belgisiga aylanadi */
    transition: background-color 0.3s;
  }
  .tugma:hover {
    background-color: #0a7c77;
  }
</style>

<button class="tugma">Ro'yxatdan o'tish</button>

Sichqonchani tugma ustiga olib boring va qaytaring. Endi transition qatorini o'chirib, farqini ko'ring: rang birdan «sakraydi». 0.3s ni 2s ga o'zgartirsangiz-chi?

Mashqlar

<style>
  .karta { padding: 12px 20px; }
</style>

<div class="karta">
  <h2>Toshkent, bugun</h2>
  <p>Quyoshli, +24°. Kechqurun salqin shamol esadi.</p>
</div>

<style>
  .karta {
    padding: 12px 20px;
    background-color: #e2eafa;
    font-family: Arial, sans-serif;
  }
  .karta h2 { color: #1f4fa8; }
  .karta p  { font-size: 1.125rem; }
</style>

<div class="karta">
  <h2>Toshkent, bugun</h2>
  <p>Quyoshli, +24°. Kechqurun salqin shamol esadi.</p>
</div>

<style>
  body { font-family: sans-serif; padding: 20px; }
  .tugma {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
  }
</style>

<a class="tugma" href="#">Kursga yozilish</a>

<style>
  body { font-family: sans-serif; padding: 20px; }
  .tugma {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    background-color: #0a7c77;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
  }
  .tugma:hover {
    background-color: #1f4fa8;
  }
</style>

<a class="tugma" href="#">Kursga yozilish</a>

<style>
  body { font-family: sans-serif; padding: 16px; }
  .vizitka {
    padding: 20px 24px;
    border-radius: 12px;
    /* shu yerdan davom eting */
  }
</style>

<div class="vizitka">
  <h2>Aziza Karimova</h2>
  <p class="kasb">Veb-dasturchi</p>
  <p>Tel: +998 90 123 45 67<br>Email: aziza@example.com</p>
</div>

<style>
  body { font-family: sans-serif; padding: 16px; }
  .vizitka {
    padding: 20px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1f4fa8, #0a7c77);
    color: white;
  }
  .vizitka h2 {
    font-family: Georgia, serif;
    font-size: 1.75rem;
    margin: 0;
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.35);
  }
  .kasb {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.8rem;
    color: hsl(45, 100%, 75%);
  }
  .vizitka p { line-height: 1.6; font-size: 1rem; }
</style>

<div class="vizitka">
  <h2>Aziza Karimova</h2>
  <p class="kasb">Veb-dasturchi</p>
  <p>Tel: +998 90 123 45 67<br>Email: aziza@example.com</p>
</div>

O'zingizni sinang