4.1-dars — Birinchi stillar

HTML — bu sahifaning skeleti. U brauzerga aytadi: "Mana sarlavha, mana abzats, mana havola". Lekin sarlavhani qanday qilib oranj rangga, abzatsni kattaroq, havolani esa ostiga chizmasdan va yashil rangda qilish mumkin? Buning uchun CSS kerak.

CSS (Cascading Style Sheets — kaskadli uslub jadvallari) — hujjatning tashqi ko'rinishini tasvirlash tili. Agar HTML — tuzilma bo'lsa, CSS — dizayn. Uy qurayotganingizni tasavvur qiling: HTML — bu g'ishtlar, devorlar va tom, CSS esa — devorlar rangi, oboylar, parket va yoritish.

Mana misol: CSS siz barcha sarlavhalar qora, matn esa standart Times New Roman shriftida bo'ladi. CSS bilan sarlavhani katta va oranj, matnni Arial shriftida, fonni esa och kulrang qilish mumkin. CSS "zerikarli hujjat"ni "chiroyli sahifa"ga aylantiradi.

CSS ni HTML ga uchta usulda ulash mumkin: inline (to'g'ridan-to'g'ri teg ichida), internal (head ichidagi <style> orqali) va external (alohida .css fayl orqali <link> yordamida). Bu darsda biz inline va internal usullardan foydalanamiz — bu boshlovchilar uchun soddaroq.

Inline-stillar (style atributi)

Stil to'g'ridan-to'g'ri HTML tegiga style atributi orqali yoziladi. Bu eng oddiy usul, lekin faqat bitta element uchun mos.

<p style="color: blue; font-size: 20px;">Katta shriftdagi ko'k matn</p>

Internal-stillar (head ichidagi style tegi)

Stillar <head> bo'limidagi <style> tegi ichida yoziladi. Shunday qilib ma'lum turdagi barcha elementlarni bir vaqtda bezash mumkin.

<head>
  <style>
    h1 { color: #f97316; }
    p { font-size: 18px; }
  </style>
</head>

External-stillar (link tegi)

Stillar alohida styles.css fayliga chiqariladi va <link> orqali ulanadi. Bu katta loyihalar uchun eng yaxshi usul.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Bu darsda internal-stillardan (<style> head ichida) foydalanamiz — o'qitish uchun eng ko'rgazmali usul shu.

color xususiyati matn rangini belgilaydi. Rangni turli usullarda ko'rsatish mumkin:

• Nomi bo'yicha: color: red;, color: blue;, color: tomato;. Jami 148 ta nomlangan rang bor.
• HEX: color: #ff6600; — o'n oltilik kod. #ff6600 — oranj rang. Qisqartirish mumkin: #f60.
• RGB: color: rgb(255, 102, 0); — 0 dan 255 gacha bo'lgan uchta son (qizil, yashil, ko'k).

Boshida rang nomlaridan foydalaning — ularni eslab qolish osonroq. Keyin HEX ga o'ting (ularni grafik muharrirlardan nusxalab olish mumkin).

<style>
  .example-1 { color: red; }
  .example-2 { color: #f97316; }
  .example-3 { color: rgb(59, 130, 246); }
  .example-4 { color: green; }
</style>

<p class="example-1">Qizil matn</p>
<p class="example-2">Oranj matn (HEX)</p>
<p class="example-3">Ko'k matn (RGB)</p>
<p class="example-4">Yashil matn</p>

font-size xususiyati matn o'lchamini belgilaydi. Eng mashhur o'lchov birligi — pikseller (px). 16px — brauzerdagi standart o'lcham.

<style>
  .small { font-size: 12px; }
  .normal { font-size: 16px; }
  .big { font-size: 24px; }
  .huge { font-size: 36px; }
</style>

<p class="small">Kichik matn (12px)</p>
<p class="normal">Oddiy matn (16px)</p>
<p class="big">Katta matn (24px)</p>
<p class="huge">Ulkan matn (36px)</p>

Vebdagi matn o'lchamlari odatda 12px dan (minimal o'qish mumkin bo'lgan) 48px gacha (ulkan sarlavhalar) bo'ladi. Matnni 12px dan kichik qilmang — uni o'qish qiyin bo'ladi. Oddiy matn uchun 16–18px, sarlavhalar uchun — 24–36px dan foydalaning.

Boshqa o'lchov birliklari ham bor: em (ota-elementga nisbatan), rem (ildiz elementga nisbatan), % (foizlar). Lekin boshida px yetarli.

background-color xususiyati elementning fonini ko'rsatilgan rangga bo'yaydi. Butun sahifa uchun ham fon berish mumkin — body selektoriga background-color qo'llash yetarli.

Fon rangi color bilan bir xil usullarda belgilanadi: nomlar, HEX, RGB.

<style>
  body { background-color: #fef3c7; } /* Sahifaning och sariq foni */

  .card {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
  }

  .highlight {
    background-color: #f97316;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
  }
</style>

<div class="card">
  <p>Bu sariq fondagi oq kartochka.</p>
  <p><span class="highlight">Muhim!</span> Matn mana shunday ajratiladi.</p>
</div>

padding: 20px; ga e'tibor bering — bu element ichidagi bo'shliq (matn chetlariga yopishmaydi). border-radius: 8px; burchaklarni yumaloqlaydi. Bu xususiyatlarni keyingi darslarda batafsil o'rganamiz.

text-align xususiyati matnni gorizontal bo'yicha tekislaydi. Mumkin bo'lgan qiymatlar:

• left — chap chetga (standart qiymat)
• center — markazga
• right — o'ng chetga
• justify — kenglik bo'yicha (gazetalardagi kabi)

<style>
  .left { text-align: left; }
  .center { text-align: center; }
  .right { text-align: right; }
  .justify { text-align: justify; }
</style>

<p class="left">Chapdagi matn. Standart bo'yicha barcha abzatslar chapga tekislangan.</p>
<p class="center">Markazdagi matn. Odatda sarlavhalar shunday tekislanadi.</p>
<p class="right">O'ngdagi matn. Kam qo'llaniladi.</p>
<p class="justify">Kenglik bo'yicha matn. Brauzer so'zlar orasiga bo'shliqlar qo'shadi, shunda matn ikkala tomondan ham tekis bo'ladi. Kitob va gazetalarda qo'llaniladi, lekin vebda unchalik qulay emas.</p>

text-align: center — sarlavhalar uchun eng ommabop variant. text-align: justify vebda kamdan-kam ishlatiladi, chunki tor ekranlarda so'zlar orasida katta bo'shliqlar paydo bo'lishi mumkin.

3.1-darsdagi "O'zim haqimda" sahifasini olib, unga stillar qo'shamiz. styled-about.html faylini yarating va quyidagi kodni qo'shing:

<html lang="uz">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS bilan mening sahifam</title>
  <style>
    body {
      background-color: #fef3c7;
      font-family: Arial, sans-serif;
      margin: 40px;
    }

    h1 {
      color: #c2410c;
      font-size: 36px;
      text-align: center;
    }

    h2 {
      color: #ea580c;
      font-size: 24px;
    }

    p {
      font-size: 18px;
      line-height: 1.6;
      color: #333;
    }

    ul, ol {
      font-size: 18px;
      line-height: 1.8;
      color: #444;
    }

    a {
      color: #f97316;
    }

    .card {
      background-color: white;
      padding: 20px;
      border-radius: 12px;
      max-width: 700px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>Salom! Mening ismim Aleksey</h1>
    <p>Men boshlovchi veb-dasturchiman. Chiroyli saytlar yaratish uchun HTML va CSS ni o'rganyapman.</p>

    <h2>Mening qiziqishlarim</h2>
    <ul>
      <li>Dasturlash</li>
      <li>Musiqa</li>
      <li>Kitob o'qish</li>
    </ul>

    <h2>Mening maqsadlarim</h2>
    <ol>
      <li>Vyorstka qilishni o'rganish</li>
      <li>CSS ni o'rganish</li>
      <li>JavaScript ni o'rganish</li>
    </ol>

    <p>Mening sevimli saytim — <a href="https://developer.mozilla.org/ru/">MDN Web Docs</a>.</p>
  </div>
</body>
</html>

Keling, bu yerda nima sodir bo'layotganini tahlil qilamiz:

• body { background-color: #fef3c7; } — sahifaning foni och sariq
• body { font-family: Arial; } — Arial shrifti (serifsiz, toza)
• body { margin: 40px; } — sahifa chetlaridan bo'shliq
• h1 { color: #c2410c; font-size: 36px; text-align: center; } — markazdagi oranj sarlavha
• p { font-size: 18px; line-height: 1.6; color: #333; } — 18px matn, 1.6 satrlararo interval
• .card { background: white; padding: 20px; border-radius: 12px; max-width: 700px; margin: 0 auto; } — yumaloqlangan burchakli oq kartochka, max-width kenglikni cheklaydi, margin: 0 auto gorizontal bo'yicha markazlaydi
• a { color: #f97316; } — havolalar oranj rangda (standart ko'k o'rniga)

Bu sahifani brauzerda ochib ko'ring. U endi oq fonda qora matndan iborat "zerikarli" sahifaga umuman o'xshamaydi! Endi tajriba o'tkazing:

• Sahifaning background-color ini boshqa rangga o'zgartiring (masalan, #e0f2fe — nozik ko'k)
• Sarlavhalarning font-size ini o'zgartiring
• h2 uchun text-align: center ni sinab ko'ring
• Havolalarning color ini #2563eb ga (ko'k) o'zgartiring
• Qo'shimcha ma'lumot bilan yana bir "card" klassli div qo'shing

Mana har kuni kerak bo'ladigan asosiy CSS xususiyatlari jadvali:

Hammasini bir vaqtda yodlashga urinmang. Shunchaki bu xususiyatlar mavjudligini bilib qo'ying va kerak bo'lganda jadvalga qaytib ko'ring.

Nuqtali vergulni unutish. Xususiyatdan keyin ; bo'lmasa, CSS buziladi. Brauzer bir qoida qayerda tugashini tushunmaydi va keyingi qoidalarni e'tiborsiz qoldirishi mumkin.

Rang nomining noto'g'ri yozilishi. color: orrange; ishlamaydi. Rang nomlarini aniq yozish kerak: orange, tomato, dodgerblue.

HEX da panjarani (#) tushirib qoldirish. color: ff6600; ishlamaydi. HEX doim # bilan: #ff6600.

Stil body da, head da emas. Internal-stillar (<style> tegi) <head> ichida bo'lishi kerak, <body> ichida emas. Texnik jihatdan body ichida ham ishlaydi, lekin har doim head ichiga yozgan ma'qul.

style tegini yopmaslik. </style> ni unutdingizmi? Qolgan barcha HTML CSS sifatida qabul qilinadi va ko'rsatilmaydi. Tekshirib ko'ring!

• CSS — sahifaning tashqi ko'rinishi uchun javobgar stillar tili
• Ulashning uchta usuli: inline (style=""), internal (<style>), external (<link>)
• color — matn rangi (red, #f97316, rgb(255,102,0))
• font-size — shrift o'lchami pikselda (px)
• background-color — element fonining rangi
• text-align — matnni tekislash (left, center, right)
• CSS qoidasi xususiyat: qiymat; shaklida yoziladi

Mashq qiling: o'zingizning istalgan sahifangizni olib, unga stillar qo'shing. Chiroyli fon yasang, shriftlarni sozlang, sarlavhalarni ranglang. Tajriba o'tkazing — bu CSS ni o'rganishning eng yaxshi usuli! Keyingi darsda — selektorlar (bezash uchun elementlarni qanday tanlash kerak).