CSS nima? Brauzer qanday qo'llaydi, Cascade nima

~10 daq · CSS · CSS Asoslari

Muammodan boshlaylik

HTML kursida sahifa yasadingiz: sarlavhalar, paragraflar, ro'yxatlar, jadval. Brauzerda ochasiz — oq fon, qora Times New Roman shrift, hamma narsa chap tomonga yopishgan. Ishlaydi, lekin 1995-yilgi saytga o'xshaydi.

Sarlavhani ko'k qilish, tugmani yumaloq qilish, menyuni gorizontal qilish, telefonda chiroyli ko'rinish — bularning hech biri HTML ning ishi emas. HTML nima ko'rsatilishini aytadi. Qanday ko'rinishini esa CSS aytadi.

CSS — ko'rinish tili

CSS (Cascading Style Sheets — kaskadli uslublar jadvali) — HTML elementlarining ko'rinishini boshqaradigan til: rang, shrift, o'lcham, joylashuv, animatsiya.

HTML  →  tuzilma va ma'no     (bu — sarlavha, bu — tugma)
CSS   →  ko'rinish             (sarlavha — ko'k, 32px; tugma — yumaloq)
JS    →  xatti-harakat         (tugma bosilganda — oyna ochilsin)

Uchalasi alohida — va bu muhim: bitta HTML ga boshqa CSS ulab, saytning dizaynini butunlay o'zgartirish mumkin, kodga tegmasdan.

Birinchi qoida

h1 {
  color: navy;
  font-size: 32px;
}

CSS qoidasi ikki qismdan iborat:

h1 {                    ← selektor: QAYSI elementlarga
  color: navy;          ← e'lon: xususiyat: qiymat;
  font-size: 32px;      ← yana bir e'lon
}
  • Selektor — qaysi elementlarga qo'llanishi (2–4-darslar)
  • Xususiyat (property) — nimani o'zgartirish: color, font-size, margin...
  • Qiymat (value) — qanday: navy, 32px, auto...
  • Har bir e'lon oxirida nuqtali vergul ;

[!WARNING] Eng ko'p uchraydigan xato — nuqtali vergulni yoki yopuvchi } ni unutish. Brauzer xato bermaydi — shunchaki shu qoidani (yoki undan keyingi qismini) jimgina e'tiborsiz qoldiradi. Stil ishlamasa, birinchi navbatda shuni tekshiring.

CSS ni HTML ga ulashning 3 usuli

1. Tashqi fayl — to'g'ri usul

<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

/* style.css */
body {
  font-family: system-ui, sans-serif;
  background: #f8fafc;
}

Barcha sahifalar bitta faylni ishlatadi — dizayn bir joyda o'zgaradi. Brauzer faylni keshlaydi: ikkinchi sahifada qayta yuklamaydi.

2. <style> tegi — sahifa ichida

<head>
  <style>
    h1 { color: navy; }
  </style>
</head>

Faqat shu sahifaga ta'sir qiladi. Kichik sinovlar yoki bitta sahifali loyihalar uchun.

3. style atributi — inline

<h1 style="color: navy; font-size: 32px;">Salom</h1>

Faqat shu bitta elementga. Qayta ishlatib bo'lmaydi, HTML ni ifloslaydi va eng yuqori ustunlikka ega (5-dars) — keyin uni boshqa joydan o'zgartirish qiyin.

Usul Qachon
Tashqi .css fayl Deyarli har doim
<style> Sinov, bitta sahifa, e-mail shablonlari
style="" JavaScript dinamik qiymat qo'yganda; qo'lda — kamdan-kam

Brauzer CSS ni qanday qo'llaydi

Brauzer sahifani shunday quradi:

1. HTML ni o'qiydi       → DOM daraxti (elementlar)
2. CSS ni o'qiydi        → CSSOM (qoidalar)
3. Har bir elementga      → qaysi qoidalar mos keladi?
   qoidalarni moslaydi       ziddiyat bo'lsa — qaysi biri yutadi?
4. Joylashuvni hisoblaydi → layout (o'lcham va o'rinlar)
5. Chizadi               → paint

3-qadam — CSS ning eng muhim va eng ko'p chalkashlik keltiradigan qismi. Bitta elementga bir nechta qoida mos kelishi mumkin:

p { color: black; }
.izoh { color: gray; }
#muhim { color: red; }

<p class="izoh" id="muhim">Bu qanday rangda?</p>

Uchala qoida ham shu paragrafga tegishli. Qaysi biri yutadi? Javob — Cascade.

Cascade — "kaskad"

CSS nomidagi "C" — Cascade. Bu ziddiyatlarni hal qilish qoidalari. Brauzer tartib bilan tekshiradi:

1. Muhimlik va manba

  • !important bilan belgilangan e'lonlar (ehtiyot bo'ling — 5-dars)
  • Sizning CSS ingiz brauzerning standart stillaridan ustun

2. Specificity (aniqlik) — qaysi selektor aniqroq:

#muhim   (id)     >   .izoh   (class)   >   p   (teg)

Yuqoridagi misolda — qizil, chunki id eng aniq. Batafsil — 5-dars.

3. Tartib — aniqlik teng bo'lsa, keyinroq yozilgani yutadi:

p { color: black; }
p { color: green; }   /* ← bu yutadi */

Meros (inheritance)

Ba'zi xususiyatlar ota elementdan bolalarga meros o'tadi:

body {
  color: #1e293b;
  font-family: system-ui, sans-serif;
}

Endi sahifadagi barcha matn shu rang va shriftda — har bir p, li, span uchun alohida yozish shart emas.

Meros o'tadi Meros o'tmaydi
color, font-*, line-height, text-align margin, padding, border, width, background

Mantiq oddiy: matn uslubi bolalarga o'tishi tabiiy; har bir bolaga ota ning chegarasi va foni chizilsa — tartibsizlik bo'lardi.

Brauzerning standart stillari

CSS yozmasangiz ham sahifada ba'zi stillar bor: h1 katta va qalin, havolalar ko'k va tagiga chizilgan, body atrofida 8px bo'shliq. Bular — brauzerning user agent stylesheet i. Har bir brauzerda biroz farq qiladi.

Shuning uchun ko'p loyihalar CSS faylining boshida kichik "reset" qiladi:

*,
*::before,
*::after {
  box-sizing: border-box;   /* 8-dars */
}

body {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

DevTools — CSS ni ko'rish

Brauzerda istalgan elementga o'ng tugma → Inspect (yoki F12). Styles panelida:

  • Elementga qaysi qoidalar qo'llanganini
  • Qaysilari chizib tashlangan (boshqa qoida yutgan) ekanini
  • Qiymatlarni jonli o'zgartirishni

ko'rasiz. CSS o'rganishning eng tez usuli — DevTools da tajriba qilish. "Nega stilim ishlamayapti?" savolining javobi deyarli har doim shu yerda: chizilgan qatorni ko'rasiz va uni qaysi qoida yutganini bilasiz.

Nima uchun shunday?

Nima uchun CSS "kaskad" qilib yaratilgan — har bir elementga bitta aniq stil bersak bo'lmaydimi?

Chunki stil bir nechta manbadan keladi va ularni birlashtirish kerak: brauzer standarti, sayt dizayni, alohida sahifa sozlamasi, foydalanuvchining o'zi (masalan, ko'rish qobiliyati past odam shriftni kattalashtiradi). Kaskad bularning hammasini aniq qoidalar bilan birlashtiradi: umumiy qoida (p — qora) va xususiy istisno (.izoh — kulrang) yonma-yon yashaydi. Bu sizga kam kod yozish imkonini beradi: avval umumiy uslub, keyin faqat farqlar. Kaskadni tushunmasangiz, CSS "tasodifiy" tuyuladi; tushunsangiz — har bir natija mantiqiy bo'ladi.

Xulosa

Eslab qoling:

  • HTML — tuzilma, CSS — ko'rinish, JS — xatti-harakat
  • Qoida: selektor { xususiyat: qiymat; } — nuqtali vergulni unutmang
  • Ulash: tashqi fayl (<link rel="stylesheet">) — asosiy usul
  • Ziddiyat: muhimlik → specificity (id > class > teg) → tartib (keyingisi yutadi)
  • Meros: color, font bolalarga o'tadi; margin, border — yo'q
  • Brauzerning standart stillari bor — reset bilan tekislanadi
  • DevTools (F12 → Styles) — CSS ni tushunishning eng yaxshi vositasi

Keyingi dars

2-dars: Selektorlar — element, class, id, universal