Style sheet nima va u nimani hal qiladi
Style sheet (CSS) — veb-sahifadagi matn, rang, oraliqlar, joylashuv kabi ko‘rinish parametrlarini alohida fayl yoki bloklarda saqlash usuli. U HTML strukturasini (mazmun tuzilmasi) ko‘rinishdan (styling) ajratib, bir xil dizaynni ko‘p sahifalarda qayta ishlatishga yordam beradi.
CSS bo‘lmasa ham sahifa ishlaydi, lekin dizaynni o‘zgartirish HTML ichida ko‘plab joylarga tegishli bo‘lib qoladi. Natijada o‘zgarishlar xatoga olib kelishi va ko‘lam kattalashganda boshqarish qiyinlashadi.
CSS qaysi formatlarda ishlaydi (va qaysi birini tanlash kerak)
CSS uchta asosiy yo‘lda ulanishi mumkin: tashqi fayl orqali (.css), HTML ichida <style> bloki orqali, yoki alohida elementga style atributi bilan. Amaliyotda eng ko‘p ishlatiladigani tashqi fayl bo‘lib, loyihada dizaynni markazlashgan holda boshqarish oson.
Quyida tashqi CSS faylni ulash misoli keltirilgan. Brauzer HTMLni o‘qish jarayonida CSSni ham yuklab, keyin uslublarni qo‘llaydi.
<link rel="stylesheet" href="/styles/main.css">
CSS ishlash mexanizmi: brauzer qanday qo‘llaydi
Brauzer HTMLni ko‘rib, avval DOM daraxtini (hujjat tuzilmasi) hosil qiladi, keyin CSS selektorlari orqali elementlarga qaysi qoidalar mos kelishini hisoblaydi. Bu jarayon “style” hisoblash bosqichi bilan bog‘liq: har bir element uchun yakuniy stil qiymatlari tanlanadi.
CSS qoidalari mos kelishi bilan yakuniy natija “kaskad” (cascade) qoidalari orqali aniqlanadi. Kaskad bir necha omilga tayanadi: manba ustuvorligi (inline, ichki <style>, tashqi fayl), selektor spetsifikligi (specificity) va oxirgi yozilgan qoidaning ustunligi (source order).
Spetsifiklik (specificity) qanday ishlaydi
Spetsifiklik — qaysi selektor kuchliroq ekanini belgilaydigan hisob mexanizmi. Masalan, #id selektori odatda .classdan kuchliroq, u esa element selektoridan kuchliroq bo‘ladi. Agar bir nechta qoidalar bir elementga mos kelsa, eng yuqori spetsifiklik g‘alaba qiladi; teng bo‘lsa, keyinroq yozilgani ustun bo‘ladi.
Misol:
#menu { color: red; }
.item { color: blue; }
Agar elementda id="menu" va u class="item" bo‘lsa, #menudagi rang (red) ustun bo‘ladi.
Qoidalar tartibi (source order) nega ahamiyatli
Bir xil spetsifiklikka ega ikkita qoidada, qaysi biri keyinroq yozilgan bo‘lsa, o‘sha ustun chiqadi. Shu sababli fayllar ulanish ketma-ketligi va importlari (agar ishlatilsa) dizayn natijasiga bevosita ta’sir qiladi.
CSS ishlatilishiga misol: selektor, xususiyat va qiymat
CSS qoidasi odatda “selektor + deklaratsiya” ko‘rinishida bo‘ladi: selektor elementni tanlaydi, deklaratsiya ichida esa xususiyat va qiymat bo‘ladi. Masalan, color — rang xususiyati, #333 esa qiymat.
p { color: #333; line-height: 1.5; }
Bu qoida barcha <p> elementlariga tegishli bo‘ladi. Agar faqat bitta paragraf kerak bo‘lsa, selektorni toraytirish kerak: sinf yoki ID orqali.
article p { margin: 0; }
TARIX: style sheet g‘oyasi qachon paydo bo‘lgan
Veb-sahifalarda uslubni boshqarish g‘oyasi HTML paydo bo‘lgandan keyin kuchaydi, ammo dastlab ko‘rinish odatda HTML atributlari bilan boshqarilgan. Masalan, matn rangini yoki o‘lchamini o‘zgartirish uchun turli atributlar va “taglar” ishlatilgan.
Keyinchalik veb-standartlar rivojlanishi bilan CSS konsepti shakllandi va 1990-yillar oxiri — 2000-yillar boshida dizaynni ajratish amaliyoti keng yoyildi. CSS World Wide Web Consortium (W3C) atrofida standartlash jarayoniga kirgan va bugun u vebning asosiy texnologiyalaridan biri hisoblanadi.
Shuni ham ta’kidlash kerak: CSS faqat “dizayn” uchun emas, balki qayta ishlash, texnik izchillik va turli qurilmalarda (ekran o‘lchami, brauzer farqlari) ko‘rinishni boshqarish uchun ishlatiladi.
Amaliy sozlash va tanlash: qaysi usul qachon
Proyektda CSS ni to‘g‘ri joylashtirish texnik qaror bo‘lib, kodni saqlashni osonlashtiradi. Tashqi fayl (.css) odatda: ko‘p sahifali sayt, bir nechta dizayn komponenti, yoki bir xil uslubni qayta ishlatish kerak bo‘lganda eng yaxshi tanlov.
Inline uslub esa odatda cheklangan hollarda ishlatiladi: masalan, eksperiment uchun tezkor o‘zgarish, yoki juda kichik komponent uchun. <style> bloki esa HTMLga yaqin, lekin hali tashqi faylga ko‘chirilmagan vaqtinchalik variant bo‘lishi mumkin.
Tipik xatolar va ularni qanday tuzatish
- Ustuvorlik chalkashuvi: bir selektor boshqasini “yengayotgani” sababli stil kutilganidek ko‘rinmasligi mumkin. Bu holda spetsifiklikni tekshirish va qoidalar tartibini moslashtirish kerak.
- Selektor haddan tashqari keng: masalan,
pselektori butun sahifada paragrafga ta’sir qiladi. Kerak bo‘lsaarticle pyoki.class pbilan toraytiring. - Ortiqcha qayta yozish: turli fayllarda bir xil xususiyat tez-tez o‘zgartirilsa, debugging qiyinlashadi. Bir komponent dizaynini bitta joyda saqlash foydali.
Taqqoslash: inline, ichki va tashqi CSS
| Joylashuv usuli | Qayerda yoziladi | Qachon qulay | Asosiy kamchiligi |
|---|---|---|---|
| Inline | style atributi |
Tez sinov yoki juda kichik o‘zgarish | Saqlash qiyinlashadi, qayta ishlatish past |
| Ichki (embedded) | <style> bloki |
Bitta HTML fayl uchun tezkor stil | Katta loyihada boshqarish og‘irlashadi |
| Tashqi | <link rel="stylesheet"> orqali |
Ko‘p sahifali sayt va dizaynni markazlash | Kerak bo‘lsa HTTP so‘rovlari soni oshishi mumkin (cache ishlasa yengillashadi) |
FAQ
CSS style sheet deganda aynan nimani tushuniladi?
Veb rivojlanishida “style sheet” odatda CSS (Cascading Style Sheets)ni anglatadi. U HTML kabi hujjatni qanday ko‘rinishda aks ettirish kerakligini belgilaydigan qoidalar to‘plamidir.
Nega kaskad (cascade) brauzer natijasiga ta’sir qiladi?
Chunki bir element bir nechta qoidalar bilan mos kelishi mumkin. Brauzer qoidalarni manba ustuvorligi, selektor spetsifikligi va yozilish tartibi bo‘yicha solishtirib, yakuniy qiymatni tanlaydi.
Spetsifiklikda #id va .class qachon farq qiladi?
Agar bir elementga #menu va .item kabi selektorlar mos kelsa, odatda #menudagi qoida ustun chiqadi. Tabiiy natija qoidalar teng mos kelsa, oxirgi yozilganiga ham bog‘liq bo‘lishi mumkin.
CSS ni faqat HTML ichiga yozib yuborsam bo‘ladimi?
Bo‘ladi, lekin amaliy jihatdan katta sayt yoki komponentlar ko‘payganda ichki yoki inline yondashuv boshqarishni qiyinlashtiradi. Shuning uchun ko‘pincha tashqi .css fayllar bilan ajratish tanlanadi.
Stil umuman qo‘llanmasa, eng ko‘p uchraydigan sabablar nima?
Ko‘pincha CSS fayl noto‘g‘ri yo‘l bilan ulangan bo‘ladi (href xato), selektor mos kelmaydi (sinf/ID nomi farq qiladi), yoki kutilgan qiymat boshqa qoida (spetsifiklik/source order) bilan ustidan yozib yuborilgan bo‘ladi.
Media so‘rovlari (responsive dizayn) CSS tarkibiga kiradimi?
Ha. Responsive yondashuvlarda CSS @media qoidasidan foydalaniladi, masalan ekran kengligi ma’lum chegaradan oshganda yoki kamayganda boshqa xususiyatlar qo‘llanadi. Bu usul brauzerga sharoitga mos qoidani tanlash imkonini beradi.
Xulosa
Style sheet (CSS) — veb-sahifaning ko‘rinishini boshqaradigan qoidalar to‘plami bo‘lib, HTML strukturasidan ajralgan holda ishlaganda dizaynni qayta ishlatish va saqlashni ancha osonlashtiradi.
CSS ning natijasi brauzerda kaskad, spetsifiklik va qoidalar tartibi asosida shakllanadi. Shu mexanizmni tushunsangiz, “nima uchun stil o‘zgarmayapti?” degan savollarga tizimli javob topasiz.
