CSS nima: uni sahifaga ulash va qoida sintaksisi

Qisqacha: CSS — HTML elementlari qanday ko'rinishini yozadigan til: rang, shrift, o'lcham, joylashuv. CSS qoidasi ikki qismdan iborat: selektor (qaysi elementga) va jingalak qavs ichidagi deklaratsiyalar (nima o'zgarsin), masalan h1 { color: green; }. CSS alohida .css faylga yoziladi va sahifaga head ichidagi <link rel="stylesheet" href="..."> bilan ulanadi. Brauzer tushunmagan qatorni jimgina tashlab ketadi va qolganini qo'llaydi.

Bu darsda

• CSS nima ekanini va u HTML bilan ishni qanday bo'lishishini tushuntira olasiz.
• CSS qoidasining qismlarini nomi bilan ayta olasiz: selektor, deklaratsiya, xususiyat, qiymat.
• CSS'ni sahifaga uch usulda ulashni bilasiz va nega alohida fayl eng yaxshisi ekanini asoslaysiz.
• Izoh yozasiz, qisqa va to'liq yozuvni (shorthand va longhand) farqlaysiz.
• Brauzer xato CSS bilan nima qilishini bilasiz va xatoni qayerdan qidirishni bilasiz.
• Portfoliongizga birinchi CSS faylni ulab, unga rang va shrift berasiz.

Oldin bilishingiz kerak: head anatomiyasi, Ko'p sahifali sayt tuzilmasi, Critical Rendering Path, Yakuniy loyiha: portfolio.

1. Nega bu kerak?

HTML qismini tugatdingiz. Portfoliongiz tayyor va internetda turibdi. Lekin u hozir oq fonda qora matn: to'g'ri, ammo chiroyli emas.

HTML qismida "bu — CSS ishi" degan gapni ko'p eshitdingiz: e'lonni katta va rangli qilish, aksiya matnini qizil qilish, formani chiroyli joylash. O'sha "keyin" keldi. Rang va shrift bugunoq boshlanadi, joylashuv (masalan, forma maydonlarini tartib bilan terish) — Flexbox darsidan.

«Bahor» choyxonasi sahifasidan kichik bo'lak olamiz. Avval — CSS'siz:

<h1>Choyxona «Bahor»</h1>
<p>Har kuni 7:00 dan 23:00 gacha ochiqmiz.</p>
<p><strong>Bugun ko'k choy — 5 000 so'm!</strong></p>

Brauzer uni o'zi bilgancha ko'rsatdi: oq fon, qora matn, oddiy shrift. Endi xuddi shu HTML'ga bir necha qator CSS qo'shamiz:

<style>
  body {
    background-color: #fffaf0;
    color: #1f2a24;
    font-family: system-ui, sans-serif;
  }
  h1 {
    color: #2f6b3a;
    text-align: center;
  }
  strong {
    color: #b4461a;
    font-size: 24px;
  }
</style>
<h1>Choyxona «Bahor»</h1>
<p>Har kuni 7:00 dan 23:00 gacha ochiqmiz.</p>
<p><strong>Bugun ko'k choy — 5 000 so'm!</strong></p>

Nimaga qarang: fon qaymoq rangga kirdi, sarlavha yashil va o'rtada, choy narxi katta va qizg'ish. Teglarda bitta ham harf o'zgarmadi — faqat tepaga <style> bloki qo'shildi. Hozir bu kodni tushunish shart emas — har qatorini pastda birga o'qiymiz.

2. CSS nima?

2.1 Ta'rif

CSS (Cascading Style Sheets) — HTML elementlari qanday ko'rinishini tasvirlaydigan til. Nomi "pog'onali uslublar jadvali" deb tarjima qilinadi. "Pog'onali" (cascading) so'zi bir elementga bir necha qoida to'g'ri kelganda qaysi biri yutishini bildiradi — buni Kaskad darsida ochamiz.

HTML nima darsidagi uy o'xshatishini eslang. HTML — devorlar va xonalar. CSS — bo'yoq, gilam va mebel. Bir xil devorli uyni butunlay boshqacha bezash mumkin — bir xil HTML'ni ham.

Ikki muhim fakt:

• CSS natijani tasvirlaydi. Siz "sarlavha yashil bo'lsin" deysiz, qanday bo'yashni brauzer o'zi hal qiladi. Qadamma-qadam buyruq yozilmaydi — bunday tillar tavsiflovchi (declarative) tillar deb ataladi.
• CSS bitta elementni emas, qoidani yozadi. Siz "hamma h1 larni" bo'yaysiz. Yangi h1 qo'shsangiz, u ham o'z-o'zidan yashil bo'ladi.

Maslahat: Eski maqolalarda "CSS3" nomini uchratasiz. Bugun CSS bo'lak-bo'lak (modullar bilan) yangilanadi, yagona "CSS4" spetsifikatsiyasi yo'q. Yangi imkoniyat qaysi brauzerlarda ishlashini Baseline belgisi aytadi.

2.2 Brauzer CSS'ni qanday qo'llaydi

Critical Rendering Path darsidagi "konveyer"ni eslang:

flowchart LR
  H["index.html"] --> D["DOM daraxti"]
  C["asosiy.css"] --> S["CSSOM daraxti"]
  D --> R["Render tree"]
  S --> R
  R --> E["Ekrandagi sahifa"]

Nimaga qarang: CSS HTML faylni o'zgartirmaydi. Brauzer ikkalasidan alohida daraxt quradi va chizishdan oldin birlashtiradi: har CSS qoidasini DOM'dagi mos elementlarga "kiygizadi".

Renderni nima to'xtatadi darsidan eslang: CSSOM tayyor bo'lmaguncha brauzer sahifani chizmaydi. Shuning uchun CSS fayl head da ulanadi — brauzer uni iloji boricha erta topsin.

2.3 Brauzerning o'z CSS'i

CSS'siz sahifada ham h1 katta va qalin edi, havola esa ko'k va tagi chizilgan. Chunki har brauzerning ichki CSS'i bor — brauzer uslublari (user-agent stylesheet). Siz yozgan qoidalar ularning ustiga yoziladi (CSS reset darsida ularni tekislaymiz).

Diqqat: CSS to'g'ri ishlashi uchun sahifaning birinchi qatori <!DOCTYPE html> bo'lsin. Hujjat skeleti darsidan eslang: usiz brauzer quirks mode'ga o'tadi va ko'p CSS qoidalari boshqacha ishlaydi. CSS "g'alati" ishlasa — avval DOCTYPE'ni tekshiring.

Tekshirib ko'ring: Dizayner "hamma kichik sarlavhalar to'q sariq bo'lsin" dedi. Sahifada 30 ta h2 bor. CSS'da nechta joyni o'zgartirasiz?

3. CSS qoidasi: selektor va deklaratsiyalar

3.1 Qoidaning qismlari

h1 {
  color: #2f6b3a;
  text-align: center;
}

Bu — bitta qoida (rule). Uni choyxonadagi buyurtma kabi o'qing: "birinchi stolga — ikki choynak ko'k choy va bitta non". Avval kimga, keyin nima.

• h1 — selektor (selector): qoida kimga tegishli. Bu yerda — sahifadagi hamma h1.
• { ... } — deklaratsiyalar bloki (declaration block): jingalak qavs ichidagi ko'rsatmalar.
• color: #2f6b3a; — bitta deklaratsiya (declaration): bitta "nima o'zgarsin".
• color — xususiyat (property): nimani o'zgartiramiz. Bu yerda — matn rangi.
• #2f6b3a — qiymat (value): qanday bo'lsin. Bu yerda — «Bahor»ning to'q yashil rangi.

flowchart TD
  Q["Qoida"] --> S["Selektor<br/>h1"]
  Q --> B["Deklaratsiyalar bloki"]
  B --> D1["Deklaratsiya<br/>color: #2f6b3a"]
  B --> D2["Deklaratsiya<br/>text-align: center"]
  D1 --> X["Xususiyat<br/>color"]
  D1 --> V["Qiymat<br/>#2f6b3a"]

Nimaga qarang: qoidada selektor bitta, deklaratsiyalar esa xohlagancha bo'lishi mumkin. Har deklaratsiya — "xususiyat: qiymat" jufti.

3.2 Tinish belgilari — CSS grammatikasi

• : (ikki nuqta) — xususiyat va qiymat orasida: "rang — yashil".
• ; (nuqtali vergul) — har deklaratsiya oxirida, gap oxiridagi nuqta kabi.
• { va } — blokning boshi va oxiri.

Blokdagi oxirgi ; ni tushirib qoldirsangiz ham ishlaydi. Lekin doim yozing. Ertaga ostiga yangi qator qo'shasiz va ; yo'qligini unutasiz — shunda ikki qator birga buziladi (buni pastda, "Xato CSS" bo'limida ko'ramiz).

Bo'sh joy va yangi qatorlar brauzer uchun ahamiyatsiz. Yuqoridagi qoidani bitta qatorda ham yozish mumkin:

h1 { color: #2f6b3a; text-align: center; }

Ko'p qatorli shakl esa o'qishga qulay. Kod uslubi darsidagi Prettier CSS fayllarni ham shunday tekislaydi: har deklaratsiya — alohida qatorda.

3.3 Xususiyat va qiymat qanday yoziladi

Xususiyat nomlari — inglizcha so'zlar. Ular kichik harflar bilan, so'zlar orasida chiziqcha bilan yoziladi: font-size, background-color, text-align. Bu uslub kebab-case deb ataladi — sixga tizilgan kabob bo'laklari kabi.

Qiymatlar bir necha turda bo'ladi:

Hozircha px — ekrandagi nuqta (piksel), #2f6b3a esa rangning kodi ekanini bilish yetadi. Birliklarni O'lcham birliklari, ranglarni Ranglar 1 darsida o'rganamiz. O'lchamda birlik majburiy, faqat 0 birliksiz yoziladi: nol piksel ham, nol santimetr ham — nol. Ba'zi xususiyatlar umuman birliksiz son oladi (masalan, qalinlik font-weight: 700).

CSS xususiyat nomlarida va kalit so'zlarda katta-kichik harfni farqlamaydi: COLOR: RED ham ishlaydi. Lekin hamma kichik harf bilan yozadi — siz ham shunday qiling.

3.4 Selektor: qoida kimga?

Selektorning eng oddiy ikki turi:

• Teg nomi: h1, p, body — shu tegdagi hamma elementlar.
• Nuqta va class nomi: .aksiya — class="aksiya" bo'lgan hamma elementlar.

HTML qismida ko'rgan CSS parchalarini endi o'qiy olasiz. div va span darsidagi kartochka qoidasi:

.taom-karta { border: 1px solid gray; padding: 12px; }

O'qilishi: "class="taom-karta" bo'lgan hamma elementga — 1 piksellik yaxlit (solid) kulrang (gray) ramka va ichida 12 piksel bo'sh joy".

Favicon darsidagi SVG ichidagi .belgi { fill: #2f6b3a; } esa: "belgi class'li shaklni to'q yashilga bo'ya" (fill — SVG shaklining bo'yog'i).

Brauzer mosligi darsida eskirgan center va font teglari o'rniga class="aksiya" qoldirib, "qizil rang va markazlashni CSS'da qaytaramiz" degan edik. Mana:

<style>
  .aksiya {
    color: #b4461a;
    text-align: center;
  }
</style>
<p class="aksiya"><strong>Aksiya!</strong></p>
<p>Osh — 35 000 so'm</p>

Nimaga qarang: faqat class="aksiya" li paragraf qizg'ish va o'rtada, osh narxi esa o'zgarmadi. Selektorlarning qolgan turlarini — id, "ichidagi", "bolasi" — keyingi darsda o'rganamiz.

Tekshirib ko'ring: p { font-size: 18px; } qoidasida selektor — [:p], xususiyat — [:font-size], qiymat — .

4. CSS'ni sahifaga ulashning uch yo'li

4.1 style atributi (inline)

Global atributlar darsida style atributini ko'rgan edik:

<p style="color: #5b6660;">Oshxona 23:00 da yopiladi.</p>

Atribut ichida selektor yo'q — deklaratsiyalar faqat shu bitta elementga tegadi. Kamchiliklari:

• 50 ta kartaga 50 marta yoziladi. Rangni o'zgartirish ham 50 marta.
• Ko'rinish HTML ichiga aralashib ketadi. html-validate uni xato deydi: Inline style is not allowed.
• Ko'p saytlarning xavfsizlik siyosati uni to'sadi — pastda «Bahor» misolida ko'ramiz.

Accessibility'ni tekshirish darsidagi style="color: #bbb" aynan shu usul edi. Kod uslubi darsida esa style o'rniga ma'noli class qo'yib, "rangni CSS qismida beramiz" degan edik. Yuqoridagi .aksiya — o'sha yo'l: HTML'da ma'no, CSS faylda ko'rinish.

4.2 <style> tegi (ichki CSS)

<head>
  <meta charset="utf-8">
  <title>Menyu — Choyxona «Bahor»</title>
  <style>
    h1 { color: #2f6b3a; }
  </style>
</head>

Bu yerda selektorlar ishlaydi, lekin qoida faqat shu sahifaga tegadi. Besh sahifali saytda CSS besh nusxada yashaydi — bittasini tuzatsangiz, to'rttasi eskicha qoladi. <style> bir sahifalik namunada yoki HTML xatlarda (HTML email'larni stillash) ishlatiladi.

4.3 <link rel="stylesheet"> — alohida fayl

Eng to'g'ri usul — CSS'ni alohida faylga yozish. «Bahor»da bu assets/css/asosiy.css:

h1 {
  color: #2f6b3a;
}

Bosh sahifaning head i:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Choyxona «Bahor»</title>
  <link rel="stylesheet" href="assets/css/asosiy.css">
</head>

• rel="stylesheet" — "bu fayl — uslublar jadvali". Usiz brauzer faylni umuman yuklamaydi (Chrome'da tekshirdik).
• href — fayl yo'li, xuddi img dagi src kabi.
• Joyi — head anatomiyasi darsidagi tartib bo'yicha: charset, viewport, title uchligidan keyin.

Nega bu usul eng yaxshi:

• Bitta fayl — butun sayt. Rangni bir joyda o'zgartirasiz, 20 sahifa birdan yangilanadi.
• Kesh. Brauzer faylni bir marta yuklaydi, keyin xotiradan oladi (HTTP kesh).
• Tartib. HTML'da — ma'no, CSS'da — ko'rinish.
• Xavfsizlik. Qat'iy xavfsizlik siyosati ham o'z saytingizdagi faylga ruxsat beradi.

4.4 Fayl nomi va yo'li

head anatomiyasi darsida faylni uslub.css deb atagan edik, Skriptlarni ulash darsida esa /assets/css/asosiy.css. Brauzer uchun nomning farqi yo'q. Kursda bundan buyon bitta nom: assets/css/asosiy.css — Sayt tuzilmasi darsidagi assets/css/ papkasida. O'sha "hozircha bo'sh" asosiy.css endi to'ladi.

Yo'l — nisbiy, rasmlardagi kabi: Birinchi deploy darsidan eslang, / bilan boshlangan yo'l GitHub Pages'dagi loyiha saytida buziladi.

4.5 «Bahor» va CSP: nega faqat fayl

HTML xavfsizligi darsida «Bahor»ga CSP qo'ygan edik: default-src 'self' — "faqat o'z saytimizdagi fayllar". Unda style-src yo'q, demak uslublarga ham shu qoida ishlaydi. Natijada brauzer <style> tegini ham, style="..." atributini ham to'sadi. Faqat o'z saytimizdagi .css fayl ishlaydi. Chrome konsolida shunday xabar chiqadi (uzun kodni ... bilan qisqartirdik):

Applying inline style violates the following Content Security Policy directive 'default-src 'self''. Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback. The action has been blocked.

Tarjimasi: "HTML ichiga yozilgan (inline) uslub CSP'ning default-src 'self' qoidasini buzadi. Ruxsat uchun 'unsafe-inline', hash yoki nonce (maxsus ruxsat belgilari) kerak. style-src alohida yozilmagan, shuning uchun default-src ishlatildi. Amal bloklandi."

Shuning uchun «Bahor»ning haqiqiy CSS'i doim asosiy.css da yashaydi. Darslardagi jonli natija bloklarida esa <style> ni ko'rasiz — bu faqat namoyish, kod va natija bir joyda tursin deb. Natija oynasida «Bahor»ning qat'iy CSP'si yo'q.

Tekshirib ko'ring: «Bahor» saytining 6 ta sahifasi bor. Jasur aka sarlavhalar rangini almashtirmoqchi. Uchala usulda nechta joyni tuzatish kerak?

4.6 @import — va nega undan qochamiz

CSS faylning ichidan boshqa CSS faylni chaqirish ham mumkin:

@import url("menyu.css");

h1 {
  color: #2f6b3a;
}

@ bilan boshlanadigan qoidalar — @-qoidalar (at-rules): brauzerga maxsus ko'rsatma. Boshqalarini keyinroq ko'rasiz, masalan @media ni Media queries darsida.

@import faqat fayl boshida, boshqa qoidalardan oldin ishlaydi. Pastroqda yozilsa, brauzer uni jimgina tashlaydi — Chrome'da tekshirdik.

Asosiy muammo — tezlik:

flowchart LR
  subgraph L["Ikkita link: birdaniga"]
    direction TB
    L1["HTML"] --> L2["asosiy.css"]
    L1 --> L3["menyu.css"]
    L2 --> L4["Chizish"]
    L3 --> L4
  end
  subgraph I["@import: navbat bilan"]
    direction TB
    I1["HTML"] --> I2["asosiy.css"]
    I2 --> I3["menyu.css"]
    I3 --> I4["Chizish"]
  end

Nimaga qarang: @import yo'lida menyu.css birinchi faylni kutadi. Brauzer uning borligini faqat asosiy.css ni yuklab, o'qib bo'lgach biladi. Ikkita link bo'lsa esa Resurs maslahatlari darsidagi oldindan ko'ruvchi skaner ikkalasini HTML'dan birdaniga topadi va parallel yuklaydi. Sekin mobil internetda har kutish sezilarli.

Qoida: bir nechta CSS fayl kerak bo'lsa — bir nechta link. Katta loyihalarda fayllarni oldindan bitta faylga yig'adigan vositalar bor — ularni kursda keyinroq o'rganamiz.

5. Izohlar

/* «Bahor» — asosiy uslublar */
h1 {
  color: #2f6b3a; /* favicon bilan bir xil yashil */
}

/*
  Bir necha qatorli izoh
  ham shunday yoziladi.
*/

CSS'da izohning faqat bitta shakli bor: /* bilan boshlanadi, */ bilan tugaydi. Izoh ichida izoh bo'lmaydi — birinchi uchragan */ izohni yopadi.

VS Code'da Ctrl + / (macOS'da Cmd + /) qatorni izohga oladi (VS Code'da tez tahrirlash). Xato qidirganda bu qulay: deklaratsiyani o'chirmasdan, vaqtincha "o'chirib" qo'yasiz.

Izohga "nima" emas, "nega" yozing. /* rang */ foydasiz — color ning o'zi buni aytib turibdi. /* favicon bilan bir xil yashil */ esa sababni aytadi.

Diqqat: // — CSS'da izoh emas. VS Code darsida Ctrl + / JavaScript'da // qo'yishini ko'rgan edingiz. CSS'da esa brauzer // ni noto'g'ri selektorning boshi deb o'qiydi va undan keyingi butun qoidani tashlab yuboradi.

<style>
  // Sarlavha rangi
  h1 { color: #2f6b3a; }
  p { color: #b4461a; }
</style>
<h1>Choyxona «Bahor»</h1>
<p>Har kuni ochiqmiz</p>

Nimaga qarang: paragraf qizg'ish bo'ldi, sarlavha esa qora qoldi. Brauzer // Sarlavha rangi h1 ni bitta noto'g'ri selektor deb o'qidi va h1 qoidasini butunlay tashladi. VS Code bu qatorni qizil chiziq bilan belgilaydi: at-rule or selector expected — "@-qoida yoki selektor kutilgan edi". Tuzatish: /* Sarlavha rangi */.

6. Qisqa va to'liq yozuv (shorthand va longhand)

6.1 Bir qatorga yig'ish

Kartaga ramka beramiz. Uch xususiyat bilan:

.taom-karta {
  border-width: 2px;
  border-style: solid;
  border-color: #2f6b3a;
}

Xuddi shuni bitta qatorda:

.taom-karta {
  border: 2px solid #2f6b3a;
}

To'liq yozuv (longhand) — bitta narsani o'zgartiradigan xususiyat: border-color faqat ramka rangini. Qisqa yozuv (shorthand) — bir necha to'liq yozuvni bitta qatorga yig'adigan xususiyat. Bozordagi "osh to'plami" kabi: sabzi, piyoz va go'shtni alohida olsangiz ham bo'ladi, bitta to'plam qilib olsangiz ham.

<style>
  .taom-karta {
    border: 2px solid #2f6b3a;
    padding: 12px 16px;
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <p>35 000 so'm</p>
</article>

Nimaga qarang: kartaning atrofida 2 piksellik yashil ramka bor. Matn ramkaga yopishib qolmagan — padding ramka bilan matn orasiga ichki bo'sh joy qo'ydi. Ramkani Chegara va soyalar, ichki bo'sh joyni Box model darsida o'rganamiz.

6.2 Bir necha qiymat — soat mili bo'yicha

padding ham qisqa yozuv: u to'rt tomonni (padding-top, padding-right, padding-bottom, padding-left) birdan beradi. Qiymatlar soni ma'noni o'zgartiradi:

To'rt qiymatli tartibni soat mili bilan eslab qoling: tepadan boshlab, o'ngga, pastga, chapga. margin ham xuddi shunday yoziladi.

6.3 Tuzoq: qisqa yozuv tushirib qoldirilganini "tiklaydi"

Qisqa yozuvda qiymat yozilmagan qism brauzer uchun "bo'sh" emas. U o'sha qismni boshlang'ich qiymatiga qaytaradi:

<style>
  p {
    border-color: #b4461a;
    border: 2px solid;
  }
</style>
<p>Ramka qizg'ish bo'lishi kerak edi.</p>

Nimaga qarang: ramka qizg'ish emas, qora chiqdi. border da rang yozilmagan — u ramka rangini boshlang'ich qiymatga (matn rangiga) qaytardi va yuqoridagi border-color bekor bo'ldi. Bir blok ichida pastdagi deklaratsiya yutadi (Kaskad darsida to'liq).

Qoida: avval qisqa yozuv, keyin uni aniqlashtiradigan to'liq yozuv. Yoki qisqa yozuvning o'zida hamma qiymatni yozing: border: 2px solid #b4461a;.

Tekshirib ko'ring: padding: 10px 20px; da chap tomondagi bo'sh joy necha piksel?

7. Xato CSS: brauzer kechiradi

7.1 Jim tashlab ketish

Brauzer HTML'ni qanday tahlil qiladi darsida HTML parseri xatoni jimgina "tuzatishini" ko'rgan edik. CSS ham jim, lekin u tuzatmaydi: tushunmagan narsasini tashlab ketadi, qolganini qo'llaydi. Buni kechirimli o'qish (forgiving parsing) deyishadi.

To'rtta xatoli qoidani olamiz:

<style>
  h2 { colr: #b4461a; font-size: 28px; }
  p { color: #2f6b3a font-size: 28px; }
  li { font-size: 28; color: #2f6b3a; }
  strong { color: "#b4461a"; }
</style>
<h2>Osh — 35 000 so'm</h2>
<p>Lag'mon — 28 000 so'm</p>
<ul><li>Manti — 30 000 so'm</li></ul>
<p><strong>Ko'k choy — 5 000 so'm</strong></p>

Nimaga qarang:

• Osh kattalashdi, lekin rangi qora. colr degan xususiyat yo'q — faqat shu deklaratsiya tashlandi, font-size ishladi.
• Lag'mon umuman o'zgarmadi. ; unutilgan: brauzer #2f6b3a font-size: 28px ni bitta uzun qiymat deb o'qidi. U noto'g'ri — ikkala deklaratsiya birga tashlandi.
• Manti yashil, lekin kattalashmadi. 28 dan keyin birlik yo'q — brauzer "28 nima?" deb bilmaydi va tashlaydi.
• Choy qora qoldi. Qo'shtirnoq ichidagi "#b4461a" — rang emas, oddiy matn.

Yana ikki holat:

• Selektor noto'g'ri bo'lsa — butun qoida tashlanadi (izohdagi // misolini eslang).
• { yopilmasa — keyingi qoidalar o'sha blok ichiga "yutilib" ketadi va ishlamay qoladi. Chrome'da tekshirdik.

7.2 Nega brauzer bunchalik "kechirimli"?

Kelajak uchun. Har yili CSS'ga yangi xususiyatlar qo'shiladi. Eski brauzer yangi xususiyatni tushunmaydi va tashlab ketadi — lekin sahifaning qolganini chizaveradi. Sayt eski brauzerda soddaroq ko'rinadi, lekin buzilmaydi. Bu Brauzer mosligi darsidagi progressive enhancement g'oyasi.

Kamchiligi bitta: xato qilsangiz, brauzer sizga aytmaydi.

7.3 Xatoni qayerdan qidirish

VS Code ba'zi xatolarni .css faylda to'lqinli chiziq bilan ko'rsatadi. Tekshirdik:

Lekin font-size: 28; va color: "#b4461a"; uchun VS Code jim turadi. Bunday xatolarni DevTools topadi: Elements panelida elementni tanlasangiz, Styles bo'limida xato deklaratsiya ustidan chizilgan bo'ladi. Bu panelni DevTools'da CSS darsida o'rganamiz.

Tekshirib ko'ring: p { color: #2f6b3a; font-size: 18 px; } qoidasidan nima qo'llanadi?

8. Ish qurollari: Emmet, MDN va CodePen

8.1 Emmet CSS qisqartmalari

Emmet darsida "CSS uchun ham qisqartmalar bor" degan edik. .css faylda qisqartmani yozasiz, VS Code taklif ro'yxatini ochadi, Tab yoki Enter bosasiz. VS Code'dagi Emmet bilan tekshirdik:

Qisqartma — xususiyat so'zlarining bosh harflari: bgc — background-color. Keyin qiymat keladi, birlik yozilmasa — px. margin — elementning tashqi bo'sh joyi, uni ham Box model darsida o'rganamiz.

Maslahat: Birinchi haftalarda xususiyatlarni qo'lda, to'liq yozing — nomlar yodda qolsin. Emmet darsidagi qoida: avval tushunish, keyin tezlik.

8.2 MDN: har xususiyatning "pasporti"

Hujjat o'qish darsida so'ragan edik: "Ertaga CSS'ni noldan boshlaysiz — hujjatning qaysi turini ochasiz?" Javob — qo'llanma (guide). MDN'da ikkalasi bor:

• Qo'llanma: "Learn web development" bo'limidagi CSS darslari — ketma-ket o'qish uchun.
• Ma'lumotnoma (reference): har xususiyatning alohida sahifasi — sintaksis, hamma qiymatlar, jonli sinov oynasi va Baseline belgisi. Eng tez yo'l — qidiruvga "mdn text-align" deb yozish (Samarali qidirish).

8.3 CodePen — tez sinash uchun

Yordam so'rash darsida "CSS'ni o'rganganingizda CodePen eng ko'p ishlatadigan vositangiz bo'ladi" degan edik. Unda HTML va CSS panellari bor, natija darhol chiziladi — g'oyani sinash va savol berganda havola ulashish uchun qulay. Darslardagi "Tahrirlab ko'rish" tugmasi ham shunday ishlaydi.

9. Ko'p uchraydigan xatolar

9.1 Ichki sahifada CSS ulanmadi

menyu/index.html da href="assets/css/asosiy.css" yozilgan. Brauzer menyu/assets/css/asosiy.css ni qidiradi, topolmaydi — sahifa oq fonda qora matn bo'lib qoladi. DevTools'ning Network panelida qizil 404 qatori chiqadi (DevTools II). Tuzatish: ../assets/css/asosiy.css.

9.2 rel unutilgan

<link href="assets/css/asosiy.css"> — brauzer faylni yuklamaydi ham, xato ham bermaydi. Tuzatish: rel="stylesheet" qo'shing.

9.3 Birlik yoki qo'shtirnoq xatosi

font-size: 18;, font-size: 18 px; va color: "red"; — uchalasi ham jim tashlanadi, VS Code ham ko'rsatmaydi. Tuzatish: 18px (birlik songa yopishib tursin) va color: red; (qo'shtirnoqsiz). Qo'shtirnoq faqat bo'sh joyli shrift nomlarida va matnli qiymatlarda kerak — keyingi darslarda ko'rasiz.

9.4 Fayl saqlanmagan

VS Code'da fayl yorlig'ida oq nuqta turibdi — o'zgarish hali saqlanmagan, brauzer eski faylni ko'rsatadi. Tuzatish: Ctrl + S. Live Server saqlangan zahoti sahifani yangilaydi.

10. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring: har mashqqa alohida papka, ichida index.html va asosiy.css.

1-mashq (oson): E'lonni ko'zga tashlang

Sarlavhalar va paragraflar darsida "Chegirma" e'lonini h1 emas, oddiy paragraf qilgan edik va "katta va rangli qilish — CSS ishi" degandik:

<h1>Choyxona «Bahor»</h1>
<p>Chegirma 20%!</p>

asosiy.css ga bitta qoida yozing: paragraflar qizg'ish (#b4461a), 28 piksel va o'rtada bo'lsin. Faylni link bilan ulang.

Ishora: uchta xususiyat kerak — color, font-size, text-align.

<link rel="stylesheet" href="asosiy.css">

<style>
  p {
    color: #b4461a;
    font-size: 28px;
    text-align: center;
  }
</style>
<h1>Choyxona «Bahor»</h1>
<p>Chegirma 20%!</p>

2-mashq (o'rta): 2008-yilgi sahifaga ko'rinishni qaytaring

Brauzer mosligi darsidagi eski sahifada <center><big> sarlavhani katta va o'rtada qilardi, <font color="green"> esa "Har kuni ochiqmiz!" ni yashil qilardi. Biz ularni olib tashlab, toza HTML qoldirgan edik:

<h1>Choyxona «Bahor»</h1>
<p>Har kuni ochiqmiz!</p>
<p><strong>Yangi taom:</strong> tandir go'sht</p>

asosiy.css yozing:

1. Sarlavha o'rtada va to'q yashil (#2f6b3a).
2. Paragraflar yashil (#2f6b3a).
3. "Yangi taom:" qizg'ish (#b4461a).
4. Butun sahifa foni qaymoq rang (#fffaf0).

Ishora: 3-band uchun strong tegining o'zini selektor qiling. Fon butun sahifaga — body ga beriladi.

/* Eski <center>, <big> va <font> o'rniga */
body {
  background-color: #fffaf0;
}

h1 {
  color: #2f6b3a;
  text-align: center;
}

p {
  color: #2f6b3a;
}

strong {
  color: #b4461a;
}

3-mashq (qiyin): Buzilgan CSS'ni tuzating

Stajyor menyu sahifasi uchun shunday CSS yozdi:

// Menyu sahifasi
body {
  background-color: #fffaf0
  color: #1f2a24;
}
h1 {
  colour: #2f6b3a;
  font-size: 36 px;
}
p { color = #5b6660; }

1. Hech narsani tuzatmasdan: brauzer qaysi deklaratsiyalarni qo'llaydi?
2. Har bir xatoni toping va tuzating.
3. Qaysi xatoni VS Code ko'rsatmaydi?

Ishora: "Xato CSS" bo'limidagi to'rt holatni eslang — noto'g'ri deklaratsiya, unutilgan ;, noto'g'ri selektor va birlik.

/* Menyu sahifasi */
body {
  background-color: #fffaf0;
  color: #1f2a24;
}
h1 {
  color: #2f6b3a;
  font-size: 36px;
}
p {
  color: #5b6660;
}

4-mashq: Portfolio qadami — birinchi CSS fayl

04-qism oxirida qurgan portfoliongizga birinchi rang va shriftni beramiz. HTML'ga faqat link qatori qo'shiladi.

1. sayt/assets/css/asosiy.css faylini yarating.
2. Uni portfolioning hamma sahifasiga ulang: title dan keyingi qatorga link qo'ying. Yo'lni har sahifaning papkasiga qarab yozing. 404.html ga alohida e'tibor bering: portfolio darsida u yerdagi hamma yo'llar / bilan boshlangan edi — nega?
3. asosiy.css ga yozing:
   • body — shrift system-ui, sans-serif, matn rangi #1f2a24, fon #f7faf8;
   • h1 va h2 — portfolio rangingiz. Namuna — favicon'dagi #1f6f4a. O'zingiz boshqa rang tanlasangiz, u och fonda yaxshi o'qilsin.
4. Live Server'da har sahifani oching. DevTools → Network'da asosiy.css qatori 200 bo'lsin. So'ng npm run format va npm run check — Prettier endi CSS faylni ham tekislaydi va tekshiradi.
5. npm run check har link qatorida bitta xato beradi — require-sri. Uni .htmlvalidate.json dagi bitta qoida bilan tuzating (yechimda).

Ishora: system-ui — telefon yoki kompyuterning o'z tizim shrifti, sans-serif — u topilmasa zaxira. Shrift ro'yxatlarini Shrift asoslari darsida to'liq o'rganamiz. Nisbiy yo'llar — Sayt tuzilmasi darsidagi qoida bo'yicha.

mkdir -p sayt/assets/css
touch sayt/assets/css/asosiy.css

mkdir sayt/assets/css
New-Item sayt/assets/css/asosiy.css

<title>Aziz Karimov — boshlovchi frontend dasturchi</title>
<link rel="stylesheet" href="assets/css/asosiy.css">

/* Portfolio — asosiy uslublar */
body {
  font-family: system-ui, sans-serif;
  color: #1f2a24;
  background-color: #f7faf8;
}

h1 {
  color: #1f6f4a;
}

h2 {
  color: #1f6f4a;
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  h1 { color: #1f6f4a; }
  h2 { color: #1f6f4a; }
</style>
<a href="#asosiy">Asosiy kontentga o'tish</a>
<header>
  <p><a href="./">Aziz Karimov</a></p>
</header>
<main id="asosiy">
  <h1>Salom, men Aziz — boshlovchi frontend dasturchiman</h1>
  <p>Veb-saytlarni noldan o'rganyapman. Keyingi qadam — CSS.</p>
  <h2>So'nggi loyihalar</h2>
</main>

error  SRI "integrity" attribute is required on <link> element  require-sri

{
  "rules": {
    "id-pattern": ["error", { "pattern": "kebabcase" }],
    "class-pattern": ["error", { "pattern": "kebabcase" }],
    "require-sri": ["error", { "target": "crossorigin" }]
  }
}

11. Real ishda

• Har bir sayt shunday qurilgan. Istalgan saytda DevTools → Network panelini oching va CSS filtrini tanlang — sayt ulagan hamma .css fayllarni ko'rasiz. Katta saytlarda nomlar g'alati (main.3f9a2c.css): bu kesh uchun yig'uvchi vositalar qo'yadigan belgi.
• CSS Zen Garden (csszengarden.com) — 2003-yildan beri bitta HTML sahifa va yuzlab turli CSS dizayn. HTML va CSS ajratilishining eng yaxshi isboti.
• Xavfsizlik. Jiddiy kompaniyalarda CSP odatiy narsa: inline stil to'siladi, CSS alohida fayllarda yuradi.
• Intervyuda so'raladi: "CSS'ni ulashning qanday usullari bor va qaysi biri yaxshi?", "@import nega sekin?", "Brauzer noto'g'ri CSS'ni ko'rsa nima qiladi?". Endi uchalasiga ham javob bera olasiz.

Xulosa

• CSS — ko'rinish tili, HTML — ma'no tili. Brauzer DOM va CSSOM'ni birlashtirib chizadi.
• Qoida = selektor + { xususiyat: qiymat; }. Har deklaratsiya ; bilan tugaydi.
• Eng yaxshi ulash — head da <link rel="stylesheet" href="assets/css/asosiy.css">, nisbiy yo'l bilan.
• @import fayllarni navbatga qo'yadi — bir nechta link tezroq.
• Izoh — faqat /* ... */; // keyingi qoidani buzadi.
• Qisqa yozuv tushirib qoldirilgan qismlarni boshlang'ich qiymatga qaytaradi.
• Xato deklaratsiya jim tashlanadi — VS Code va DevTools bilan tekshiring.

Keyingi dars: Asosiy selektorlar va kombinatorlar — teg, class va id bo'yicha, shuningdek "ichidagi", "bolasi" va "qo'shnisi" bo'yicha aniq tanlashni o'rganamiz.

Manbalar

• MDN: "CSS: Cascading Style Sheets", "CSS syntax", "@import", "Shorthand properties" — developer.mozilla.org
• W3C: "CSS Syntax Module Level 3" (xatoni qayta ishlash qoidalari) — w3.org/TR/css-syntax-3
• web.dev: "Learn CSS" — web.dev/learn/css
• Emmet: "Cheat Sheet" — docs.emmet.io/cheat-sheet