CSS asoslari: selektor va xususiyat

HTML sahifaning skeletini quradi, lekin u oddiy va rangsiz ko'rinadi. Sahifani «kiyintiradigan» til — CSS. Bu darsda CSS'ni sahifaga ulashni, qoidalar yozishni va kerakli elementni aniq «nishonga olish»ni o'rganamiz.

Bu darsda

CSS nima va u qanday ishlaydi
CSS'ni ulashning uch usuli va eng to'g'risi
Qoidaning tuzilishi: selektor, xususiyat, qiymat
Selektorlar: teg, klass, id, guruh, ichma-ich
Kaskad: qoidalar to'qnashganda qaysi biri yutadi
Meros, izohlar, ko'p uchraydigan xatolar va DevTools

CSS nima?

CSS (inglizcha Cascading Style Sheets — «pog'onali uslublar jadvali») — sahifaning ko'rinishini tasvirlaydigan til. HTML «bu — sarlavha, bu — matn» deydi. CSS esa «sarlavha to'q qizil va markazda bo'lsin, matn kulrang va kattaroq bo'lsin» deydi.

Nomidagi so'zlarning ma'nosi: Style — uslub, ko'rinish; Sheets — varaqlar (CSS odatda alohida faylga yoziladi); Cascading — «sharshara kabi pog'onama-pog'ona»: bir elementga bir nechta qoida tushsa, qaysi biri ustun kelishi aniq tartib bilan hal qilinadi. Bu tartibni dars oxirida ko'ramiz.

Bir xil HTML'ni turli CSS bilan butunlay boshqacha ko'rsatish mumkin — xuddi bitta odamni turli kiyimda ko'rgandek: kostyumda bir xil, sport kiyimida boshqacha. Odamning o'zi (mazmun) o'zgarmaydi, faqat «kiyimi» (ko'rinishi) o'zgaradi.

<style>
  body { font-family: sans-serif; background: #fdf6e3; }
  h1   { color: #b3361f; text-align: center; }
  p    { color: #4a5770; font-size: 18px; }
</style>

<h1>Samarqand</h1>
<p>Registon maydoni — Samarqandning yuragi.</p>
<p>Uni har yili minglab sayyohlar ziyorat qiladi.</p>

Endi <style> … </style> qismini butunlay o'chirib ko'ring — sahifa «yalang'och» HTML holiga qaytadi. Keyin «Asl holiga qaytarish» tugmasini bosing.

CSS'ni sahifaga ulashning uch usuli

1. `style` atributi

CSS'ni to'g'ridan-to'g'ri tegning style atributiga yozish mumkin:

<p style="color: red; font-size: 20px;">Bu matn qizil va katta.</p>

Bu uslub faqat shu bitta elementga ta'sir qiladi. Tezda sinab ko'rish uchun qulay, lekin 50 ta xatboshini qizil qilish uchun 50 marta yozishga to'g'ri keladi. Shuning uchun undan kam foydalaniladi.

2. `<style>` tegi

CSS qoidalarini sahifaning <head> qismidagi <style> tegi ichiga yozish mumkin. Ular butun sahifaga ta'sir qiladi:

<head>
    <meta charset="UTF-8">
    <title>Mening saytim</title>
    <style>
        p { color: red; }
    </style>
</head>

Darslardagi jonli muharrirlarda aynan shu usuldan foydalanamiz — hamma narsa bir joyda ko'rinib tursin deb. Lekin bu qoidalar faqat shu bitta sahifaga tegishli.

3. Tashqi CSS fayli (tavsiya etiladi)

Haqiqiy saytlarda CSS alohida faylga — odatda style.css ga — yoziladi va HTML'ga <link> tegi bilan ulanadi. Papka tuzilishi:

veb-sayt/
├── index.html
└── style.css

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mening saytim</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Salom, CSS!</h1>
    <p>Bu sahifaning ko'rinishi style.css faylida yozilgan.</p>
</body>
</html>

body {
  font-family: sans-serif;
  background: #f0f6ff;
}

h1 {
  color: #1f4fa8;
}

rel="stylesheet" — «bu uslublar fayli» degani, href esa fayl manzili (xuddi havola va rasmlardagi kabi). VS Code'da shunday qiling:

veb-sayt papkasida yangi fayl yarating: style.css.
Unga yuqoridagi qoidalarni yozing.
index.html ning <head> qismiga <link rel="stylesheet" href="style.css"> qatorini qo'shing. Emmet bu yerda ham yordam beradi: link:css deb yozib, Tab ni bossangiz, tayyor qator paydo bo'ladi.
Ikkala faylni saqlang va sahifani Live Server'da oching (2-dars).

Nega bu usul eng yaxshisi?

Bitta style.css faylini saytning hamma sahifalari ulaydi. Rangni bir joyda o'zgartirsangiz — barcha sahifalarda o'zgaradi.
HTML toza qoladi: mazmun — bir faylda, ko'rinish — boshqasida.
Brauzer CSS faylini bir marta yuklab, eslab qoladi (buni kesh deyiladi) — keyingi sahifalar tezroq ochiladi.

CSS ishlamayotgan bo'lsa, birinchi navbatda href yo'lini tekshiring. Fayl css papkasi ichida bo'lsa, yo'l href="css/style.css" bo'ladi. Nomda bitta harf xato bo'lsa ham brauzer faylni topa olmaydi va sahifani jimgina CSS'siz ko'rsataveradi. Bunday paytda DevTools'ning Console bo'limida «Failed to load resource» yoki «404» degan qizil xabar chiqadi.

Usul	Qayerda yoziladi	Qachon ishlatiladi
`style` atributi	Tegning o'zida	Bir martalik tezkor sinov
`<style>` tegi	`<head>` ichida	Bitta sahifali kichik loyiha, mashqlar
Tashqi fayl	Alohida `style.css`, `<link>` bilan ulanadi	Haqiqiy saytlar — doim shu usul

CSS qoidasining tuzilishi

CSS — qoidalar to'plami. Har bir qoida (inglizcha rule) ikki qismdan iborat: kimni bezash (selektor) va qanday bezash (figurali qavslar ichidagi e'lonlar).

CSS qoidasining qismlari.

Selektor (inglizcha selector — «tanlovchi») — qaysi elementlarga ta'sir qilishni ko'rsatadi. Bu yerda — sahifadagi barcha <h1>'lar.
Xususiyat (inglizcha property) — nimani o'zgartirish: rang, o'lcham, shrift…
Qiymat (inglizcha value) — qanday qilib: teal, 20px, center…
Xususiyat va qiymat birgalikda e'lon (inglizcha declaration) deyiladi. Ular ikki nuqta : bilan ajratiladi, oxiriga nuqta-vergul ; qo'yiladi.
Barcha e'lonlar figurali qavslar { } ichida yoziladi.

Bitta qoidada istalgancha e'lon bo'lishi mumkin. O'qish oson bo'lsin deb, har bir e'lonni alohida qatorga, biroz ichkariroq surib yozish odat tusiga kirgan:

h1 {
  color: teal;
  font-size: 32px;
  text-align: center;
}

Boshlash uchun bir nechta xususiyat bilan tanishib qo'ying — keyingi darslarda ularni batafsil o'rganamiz:

Xususiyat	Nima qiladi	Misol
`color`	Matn rangi	`color: crimson;`
`background-color`	Fon rangi	`background-color: #f0f6ff;`
`font-size`	Harf kattaligi	`font-size: 20px;`
`font-family`	Shrift turi	`font-family: sans-serif;`
`text-align`	Matnni tekislash: `left`, `center`, `right`	`text-align: center;`
`border`	Chegara: qalinlik, turi, rangi	`border: 2px solid teal;`

Selektorlar: kimni bezaymiz?

Selektor — CSS'ning «nishoni». U qanchalik aniq bo'lsa, shunchalik aynan kerakli elementga tegasiz.

Teg selektori

Teg nomi yoziladi — sahifadagi shu tegning hammasi tanlanadi: p { … } — barcha xatboshilar.

Klass selektori

Nuqta va klass nomi: .muhim { … } — class="muhim" bo'lgan barcha elementlar, qaysi teg bo'lishidan qat'i nazar. Diqqat: nuqta faqat CSS'da yoziladi, HTML'da esa nuqtasiz: class="muhim". Elementda bir nechta klass bo'lsa (class="muhim katta"), u har ikkala klass qoidasini oladi.

id selektori

Panjara belgisi va id: #asosiy-sarlavha { … } — id="asosiy-sarlavha" bo'lgan yagona element.

<style>
  body { font-family: sans-serif; }
  p { color: #4a5770; }                 /* barcha p */
  .muhim { background: #fff4d6; }       /* class="muhim" */
  .katta { font-size: 22px; }           /* class="katta" */
  #asosiy-sarlavha { color: #1f4fa8; }  /* id="asosiy-sarlavha" */
</style>

<h1 id="asosiy-sarlavha">Bugungi rejalar</h1>
<p>Ertalab badantarbiya qilish.</p>
<p class="muhim">CSS darsini tugatish.</p>
<p class="muhim katta">Onamga qo'ng'iroq qilish!</p>
<p>Kitob o'qish.</p>

Uchinchi xatboshida ikkita klass bor — u ham sariq fonni, ham katta harfni oldi. Muharrirda birinchi <p> ga ham class="muhim" qo'shib ko'ring.

Guruhlash

Bir nechta selektorga bir xil uslub kerak bo'lsa, ularni vergul bilan ajratib yozing: h1, h2, h3 { color: teal; }. Har biri uchun alohida qoida yozish shart emas.

Ichma-ich selektor

Bo'sh joy bilan ajratilgan selektorlar «ichida» degan ma'noni beradi: nav a { … } — faqat nav ichidagi havolalar. Sahifaning boshqa joyidagi havolalarga bu qoida tegmaydi. Bunday selektor avlod selektori (inglizcha descendant) deyiladi: ichidagi element qanchalik chuqurda bo'lmasin, baribir tanlanadi.

Universal selektor

Yulduzcha * — «hamma elementlar». Odatda butun sahifa uchun umumiy sozlamalarda ishlatiladi (10-darsda ko'rasiz).

`:hover` — sichqoncha ustida

Selektorga :hover qo'shilsa, qoida faqat sichqoncha element ustida turganda ishlaydi. Bunday qo'shimchalar psevdoklass (inglizcha pseudo-class) deyiladi. Batafsil — keyingi darsda.

<style>
  * { font-family: sans-serif; }
  h1, h2 { color: #0a7c77; }
  nav a { color: white; background: #0a7c77; padding: 4px 8px; }
  nav a:hover { background: #1f4fa8; }
</style>

<nav>
  <a href="#">Bosh sahifa</a>
  <a href="#">Darslar</a>
</nav>
<h1>Sarlavha</h1>
<h2>Kichik sarlavha</h2>
<p>Bu <a href="#">oddiy havola</a> — u nav ichida emas.</p>

Menyudagi havolalar ustiga sichqonchani olib boring — fon rangi o'zgaradi. Pastdagi oddiy havolaga esa nav a qoidasi umuman tegmadi.

Selektor	Misol	Nimani tanlaydi
Teg	`p`	Barcha `<p>` elementlar
Klass	`.muhim`	`class="muhim"` bo'lgan barcha elementlar
id	`#menyu`	`id="menyu"` bo'lgan yagona element
Guruh	`h1, h2`	Barcha `h1` va barcha `h2`
Ichma-ich	`nav a`	`nav` ichidagi barcha havolalar
Universal	`*`	Hamma elementlar
Psevdoklass	`a:hover`	Sichqoncha ustida turgan havola

Kaskad: qoidalar to'qnashsa, kim yutadi?

Ko'pincha bitta elementga bir nechta qoida «da'vo qiladi». Masalan, bir qoida «barcha p — yashil», boshqasi «.matn — ko'k» deydi. Unda <p class="matn"> qaysi rangda bo'ladi? Brauzer buni ma'lum tartib bilan hal qiladi — CSS nomidagi «kaskad» aynan shu.

1. Aniqroq selektor yutadi

Har bir selektorning aniqlik darajasi (inglizcha specificity) bor. Qisqa qoida: id > klass > teg.

Maktabdagi buyruqlarni eslang. Umumiy buyruq: «Hamma o'quvchilar forma kiyadi» (teg kabi — hammaga). Sinf rahbari: «9-B sinfi ertaga sport kiyimida keladi» (klass kabi — bir guruhga). Direktor: «Aziz ertaga musobaqaga ketadi» (id kabi — bitta odamga). Aziz qaysi buyruqqa amal qiladi? Eng aniq buyruqqa.

Aniqroq aytganda, brauzer selektordagi id'lar, klasslar va teglarni sanab, uchta raqam hosil qiladi. Avval id'lar soni solishtiriladi; teng bo'lsa — klasslar soni; u ham teng bo'lsa — teglar soni:

Selektor	id	klass	teg	Kuchi
`p`	0	0	1	0-0-1
`nav a`	0	0	2	0-0-2
`.matn`	0	1	0	0-1-0
`nav .faol`	0	1	1	0-1-1
`#bosh`	1	0	0	1-0-0
`#yangiliklar p`	1	0	1	1-0-1

Masalan, bitta klassli .matn (0-1-0) o'nta tegdan iborat selektordan ham kuchliroq. style atributidagi uslub esa bularning hammasidan kuchli.

2. Kuchi teng bo'lsa — keyin yozilgani yutadi

Ikki qoidaning aniqlik darajasi bir xil bo'lsa, CSS'da pastroqda (keyinroq) yozilgani ustun keladi.

<style>
  body { font-family: sans-serif; font-size: 18px; }
  #maxsus { color: crimson; }    /* id — eng kuchli */
  .matn   { color: royalblue; }  /* klass */
  p       { color: seagreen; }   /* teg */
  p       { color: orange; }     /* teg, lekin keyinroq yozilgan */
</style>

<p>1. Faqat teg: oxirgi p qoidasi yutdi — to'q sariq.</p>
<p class="matn">2. Klass tegdan kuchli — ko'k.</p>
<p class="matn" id="maxsus">3. id hammasidan kuchli — qizil.</p>

Tajriba qiling: #maxsus qoidasini eng pastga ko'chiring — hech narsa o'zgarmaydi, chunki id baribir kuchliroq. Endi uni butunlay o'chiring — uchinchi qator ko'k bo'ladi. Ikki p qoidasining o'rnini almashtirsangiz-chi?

Internetdagi misollarda ba'zan color: red !important; ni ko'rasiz. !important — «hamma qoidalarni bosib o't» degan favqulodda belgi. U muammoni hal qilgandek tuyuladi, lekin keyin uni bosish uchun yana !important kerak bo'ladi va CSS chalkashib ketadi. Boshlovchilar uchun qoida: !important ishlatmang — selektorni aniqroq qiling.

3. Meros

Ba'zi xususiyatlar ota elementdan ichidagi (bola) elementlarga o'z-o'zidan o'tadi. Bu meros (inglizcha inheritance) deyiladi. Masalan, body ga font-family va color bersangiz, ichidagi barcha matnlar shu shrift va rangni oladi. Shuning uchun umumiy shriftni har bir tegga alohida yozmaymiz.

Lekin hamma xususiyat ham meros o'tmaydi. Asosan matnga oid xususiyatlar (color, font-family, font-size, line-height, text-align) o'tadi. Qutiga oid xususiyatlar (border, padding, margin, background, width) esa o'tmaydi — aks holda ota elementning chegarasi ichidagi har bir elementda takrorlanib ketardi.

<style>
  section {
    color: #0a7c77;             /* meros o'tadi */
    font-family: sans-serif;    /* meros o'tadi */
    border: 2px solid #0a7c77;  /* meros o'tmaydi */
    padding: 4px 12px;
  }
</style>

<section>
  <h2>Section ichidagi sarlavha</h2>
  <p>Xatboshi ham rang va shriftni oldi, lekin chegarani emas.</p>
  <ul><li>Ro'yxat bandi ham shunday.</li></ul>
</section>
<p>Bu xatboshi section'dan tashqarida — unga hech narsa o'tmadi.</p>

CSS'dagi izohlar

CSS'da izoh /* va */ orasiga yoziladi — brauzer ularni o'qimaydi. Izohlar kodni bo'limlarga ajratish yoki biror e'lonni vaqtincha «o'chirib» turish uchun qulay. VS Code'da qatorni tanlab, Ctrl + / bossangiz, u izohga aylanadi (yana bossangiz — qaytadi).

/* ===== Sarlavhalar ===== */
h1 {
  color: teal;
  /* font-size: 40px; — vaqtincha o'chirib qo'yildi */
}

HTML'dagi  yoki JavaScript'dagi // CSS'da ishlamaydi va hatto keyingi qoidani buzib qo'yishi mumkin. CSS faqat /* */ ni tushunadi.

Ko'p uchraydigan xatolar

CSS xato haqida hech qachon «baqirmaydi»: tushunmagan qismini indamay o'tkazib yuboradi. Shuning uchun xato odatda «hech narsa o'zgarmayapti» ko'rinishida namoyon bo'ladi. Eng ko'p uchraydiganlari:

Xato	Noto'g'ri	To'g'ri
Nuqta-vergul unutilgan — ikkala e'lon ham ishlamaydi	`color: red font-size: 20px;`	`color: red; font-size: 20px;`
Figurali qavs yopilmagan — keyingi qoidalar buziladi	`h1 { color: red;`	`h1 { color: red; }`
HTML'da klass nomi nuqta bilan yozilgan	`class=".muhim"`	`class="muhim"`
Xususiyat nomida xato	`colr: red;`	`color: red;`
O'lcham birliksiz yozilgan	`font-size: 20;`	`font-size: 20px;`
Nomlar mos emas (katta-kichik harf ham muhim)	CSS'da `.Karta`, HTML'da `class="karta"`	Ikkala joyda ham `karta`

DevTools: CSS bilan jonli tajriba

Brauzerning dasturchi vositalari CSS bilan ishlashda eng yaqin do'stingiz bo'ladi:

Sahifadagi kerakli element ustida sichqonchaning o'ng tugmasini bosib, Inspect («Tekshirish») ni tanlang (yoki F12).
Elements bo'limida element belgilanadi, yonida esa Styles paneli ochiladi. Unda shu elementga tushgan barcha CSS qoidalari ko'rinadi — eng kuchlisi eng tepada.
Ustidan chizilgan e'lon — uni boshqa, kuchliroq qoida bosib ketgan degani. Kaskadni shu yerda o'z ko'zingiz bilan ko'rasiz.
E'lon yonidagi belgichani (checkbox) olib tashlab, uni vaqtincha o'chirish mumkin. Qiymatni bosib o'zgartirsangiz, natija darhol sahifada ko'rinadi.
Xususiyat nomi xato yozilgan bo'lsa, Styles paneli uni ustidan chizib, yoniga sariq ogohlantirish belgisini qo'yadi.

Styles paneli: <p class="matn"> elementiga tushgan qoidalar.

DevTools'dagi o'zgarishlar faqat sizning ekraningizda va sahifa yangilanguncha saqlanadi. Yoqqan qiymatni topgach, uni VS Code'dagi style.css fayliga ko'chirib yozing.

Mashqlar

1-mashq Muhim rejalar va markazdagi sarlavha

<style> ichiga ikkita qoida yozing: class="muhim" bo'lgan xatboshilar qizil (red) bo'lsin, qolgan xatboshilar esa o'zgarmasin; id="asosiy-sarlavha" bo'lgan sarlavha markazda tursin (text-align: center). HTML qismini o'zgartirmang.

<style>
  body { font-family: sans-serif; }
  /* Qoidalaringizni shu yerga yozing */

</style>

<h1 id="asosiy-sarlavha">Haftalik rejam</h1>
<p>Dushanba: HTML'ni takrorlash.</p>
<p class="muhim">Seshanba: CSS mashqlari — albatta!</p>
<p>Chorshanba: dam olish.</p>
<p class="muhim">Payshanba: portfolio sahifasi!</p>

Yechimni ko'rish

<style>
  body { font-family: sans-serif; }
  .muhim { color: red; }
  #asosiy-sarlavha { text-align: center; }
</style>

<h1 id="asosiy-sarlavha">Haftalik rejam</h1>
<p>Dushanba: HTML'ni takrorlash.</p>
<p class="muhim">Seshanba: CSS mashqlari — albatta!</p>
<p>Chorshanba: dam olish.</p>
<p class="muhim">Payshanba: portfolio sahifasi!</p>

p { color: red; } yozsangiz, barcha xatboshilar qizil bo'lib qoladi — shuning uchun bu yerda klass selektori kerak.

2-mashq Nega yashil emas?

Tanlangan yangilik yashil (green) bo'lishi kerak edi, lekin u kulrang. Sababini toping va CSS'ni tuzating: tanlangan yangilik yashil bo'lsin, qolganlari kulrang qolsin. HTML'ni o'zgartirmang va !important ishlatmang.

<style>
  body { font-family: sans-serif; }
  #yangiliklar p { color: gray; }
  .tanlangan { color: green; font-weight: bold; }
</style>

<section id="yangiliklar">
  <h2>Yangiliklar</h2>
  <p>Toshkentda yangi bog' ochildi.</p>
  <p class="tanlangan">Maktabimiz olimpiadada g'olib bo'ldi!</p>
  <p>Ertaga havo bulutli bo'ladi.</p>
</section>

Ishora

#yangiliklar p da bitta id bor, .tanlangan da esa id yo'q — shuning uchun birinchisi yutyapti, garchi ikkinchisi keyinroq yozilgan bo'lsa ham. Ikkinchi selektorga ham id qo'shsangiz, kuchlar tenglashadi va klass hal qiluvchi bo'ladi.

Yechimni ko'rish

<style>
  body { font-family: sans-serif; }
  #yangiliklar p { color: gray; }
  #yangiliklar .tanlangan { color: green; font-weight: bold; }
</style>

<section id="yangiliklar">
  <h2>Yangiliklar</h2>
  <p>Toshkentda yangi bog' ochildi.</p>
  <p class="tanlangan">Maktabimiz olimpiadada g'olib bo'ldi!</p>
  <p>Ertaga havo bulutli bo'ladi.</p>
</section>

#yangiliklar .tanlangan ning kuchi 1-1-0, #yangiliklar p niki esa 1-0-1. id'lar soni teng, klasslar sonida esa birinchisi yutadi.

3-mashq To'rtta xatoni toping

Bu kodda to'rtta xato bor, shuning uchun sarlavha va izohning uslublari ishlamayapti. Ularni tuzating: sarlavha to'q ko'k (navy) va 36px kattalikda, izoh kulrang (gray) va 18px kattalikda bo'lishi kerak. Ishora: yuqoridagi «Ko'p uchraydigan xatolar» jadvaliga qarang.

<style>
  body { font-family: sans-serif; }
  h1 { color: navy font-size: 36px; }
  .izoh { colr: gray; }
  p { font-size: 18 }
</style>

<h1>Mening sahifam</h1>
<p class=".izoh">Bu kichik izoh.</p>

Yechimni ko'rish

<style>
  body { font-family: sans-serif; }
  h1 { color: navy; font-size: 36px; }
  .izoh { color: gray; }
  p { font-size: 18px; }
</style>

<h1>Mening sahifam</h1>
<p class="izoh">Bu kichik izoh.</p>

Xatolar: navy dan keyin nuqta-vergul yo'q edi; colr — xususiyat nomi xato; 18 — birlik (px) yo'q; HTML'da class=".izoh" — nuqta ortiqcha.

O'zingizni sinang

Haqiqiy saytlarda CSS'ni ulashning tavsiya etiladigan usuli qaysi?

Har bir tegga style atributi yozish
Har bir sahifaga <style> tegi qo'yish
Alohida style.css faylini <link> bilan ulash
CSS'ni <body> ichiga oddiy matn sifatida yozish

To'g'ri. Bitta fayl barcha sahifalarga xizmat qiladi va HTML toza qoladi.

.karta { … } selektori nimani tanlaydi?

class="karta" bo'lgan barcha elementlar
Faqat <karta> teglarini
id="karta" bo'lgan elementni
Sahifadagi birinchi elementni

To'g'ri. Nuqta — klass, panjara # — id belgisi.

Quyidagi CSS'dan keyin <p id="a" class="b">Matn</p> qaysi rangda bo'ladi?

#a { color: blue; }
.b { color: green; }
p  { color: red; }

Qizil — chunki oxirida yozilgan
Yashil — chunki klass
Uchala rang aralashadi
Ko'k — chunki id eng aniq selektor

To'g'ri. «Keyin yozilgani yutadi» qoidasi faqat kuchi teng selektorlar orasida ishlaydi.

colr: red; deb xato yozsangiz nima bo'ladi?

Brauzer xato oynasini chiqaradi
CSS bu e'lonni indamay o'tkazib yuboradi
Butun sahifa ochilmay qoladi
Brauzer xatoni o'zi tuzatadi

To'g'ri. CSS tushunmagan e'lonini jimgina tashlab ketadi. Bunday xatolarni DevTools'ning Styles panelida topish oson.

Qaysi xususiyat ota elementdan ichidagi elementlarga meros o'tmaydi?

color
font-family
border
line-height

To'g'ri. Qutiga oid xususiyatlar (border, padding, margin) meros o'tmaydi, matnga oidlari esa o'tadi.

Xulosa

CSS — sahifaning ko'rinishini tasvirlaydigan til. Haqiqiy saytda u alohida style.css fayliga yoziladi va <link rel="stylesheet" href="style.css"> bilan ulanadi.
Qoida = selektor + { xususiyat: qiymat; }. Nuqta-vergul va figurali qavslarni unutmang.
Selektorlar: teg (p), klass (.muhim), id (#bosh), guruh (h1, h2), ichma-ich (nav a), universal (*).
Kaskad: aniqroq selektor yutadi (id > klass > teg); kuchi teng bo'lsa — keyin yozilgani.
Matnga oid xususiyatlar meros o'tadi, qutiga oidlari — yo'q.
CSS xatolarni indamay o'tkazib yuboradi — DevTools'ning Styles panelida tekshiring va tajriba qiling.

CSS asoslari: selektor va xususiyat

Bu darsda

CSS nima?

CSS'ni sahifaga ulashning uch usuli

1. style atributi

2. <style> tegi

3. Tashqi CSS fayli (tavsiya etiladi)

CSS qoidasining tuzilishi

Selektorlar: kimni bezaymiz?

Teg selektori

Klass selektori

id selektori

Guruhlash

Ichma-ich selektor

Universal selektor

:hover — sichqoncha ustida

Kaskad: qoidalar to'qnashsa, kim yutadi?

1. Aniqroq selektor yutadi

2. Kuchi teng bo'lsa — keyin yozilgani yutadi

3. Meros

CSS'dagi izohlar

Ko'p uchraydigan xatolar

DevTools: CSS bilan jonli tajriba

Mashqlar

1-mashq Muhim rejalar va markazdagi sarlavha

2-mashq Nega yashil emas?

3-mashq To'rtta xatoni toping

O'zingizni sinang

Xulosa

1. `style` atributi

2. `<style>` tegi

`:hover` — sichqoncha ustida