CSS

CSS nima?

CSS (Cascading Style Sheets — "kaskadli uslublar jadvali") — veb-sahifaning tashqi ko'rinishini boshqaradigan til. Agar HTML sahifaning "skeleti" (matn, tugmalar, rasmlar) bo'lsa, CSS uning "kiyimi" — ranglar, shriftlar, joylashuv, masofalar va animatsiyalar. Ushbu darsda CSS nima ekanligini, u qanday yozilishini va HTML bilan qanday bog'lanishini noldan o'rganamiz.

Bu bob — brauzer muhitiga oid. Bu yerdagi barcha misollar HTML va CSS kodidan iborat. Ularni tushunib o'qing va o'z kompyuteringizda oddiy .html fayl yaratib, brauzerda ochib sinab ko'ring. Barcha kod bloklari statik — ya'ni namuna sifatida keltirilgan.

CSS nega kerak?

HTML'ning o'zi bilan ham sahifa yaratish mumkin, lekin u juda oddiy va bir xil ko'rinadi: qora matn, oq fon, ko'k havolalar. HTML'ning vazifasi — mazmun va tuzilma (bu — sarlavha, bu — paragraf, bu — ro'yxat). CSS'ning vazifasi esa — ko'rinish (sarlavha qanday rangda, qanchalik katta, qayerda joylashgan).

Bu ikkisini ajratib turish juda muhim tamoyil. Mazmun (HTML) va bezak (CSS) alohida bo'lgani uchun, siz bir xil HTML'ni turlicha bezashingiz yoki barcha sahifalar uchun bitta CSS faylini ishlatishingiz mumkin. Bu kodni tartibli va oson boshqariladigan qiladi.

HTML — nima ko'rsatilishi (mazmun va tuzilma);
CSS — qanday ko'rsatilishi (rang, shrift, joylashuv);
JavaScript — qanday harakat qilishi (bosishga javob, o'zgarishlar).

CSS sintaksisi: qoida (rule)

CSS eng kichik birligi — qoida (rule). Har bir qoida ikki qismdan iborat: selektor (nimani bezamoqchisiz) va e'lonlar bloki (qanday bezamoqchisiz). E'lonlar bloki jingalak qavslar { } ichida yoziladi.

selektor {
  xossa: qiymat;
  xossa: qiymat;
}

Har bir e'lon (declaration) ikki qismdan iborat: xossa (property) — nimani o'zgartirmoqchisiz (masalan, rang), va qiymat (value) — qanday qilib (masalan, qizil). Ular orasida ikki nuqta :, oxirida esa nuqtali vergul ; qo'yiladi.

p {
  color: red;
  font-size: 18px;
  text-align: center;
}

Yuqoridagi qoida shunday o'qiladi: "Barcha <p> (paragraf) elementlarining matn rangi qizil, shrift o'lchami 18 piksel va matni markazda tekislangan bo'lsin".

Oxirgi e'londan keyin nuqtali vergul (;) qo'yish shart emas, lekin har doim qo'yish yaxshi odat. Chunki keyinchalik yangi e'lon qo'shsangiz, unutib qolish xatosi kelib chiqmaydi.

CSS'ni HTML'ga ulashning 3 usuli

CSS'ni HTML sahifaga bog'lashning uchta usuli bor. Har birining o'z o'rni bor, lekin amalda deyarli har doim uchinchi usul (external) ishlatiladi.

1. Inline (element ichida)

CSS to'g'ridan-to'g'ri HTML elementining style atributi ichida yoziladi. Bu faqat o'sha bitta elementga ta'sir qiladi.

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

Inline uslub — eng yomon usul. U mazmun bilan bezakni aralashtirib yuboradi, qayta ishlatib bo'lmaydi va kodni o'qishni qiyinlashtiradi. Undan faqat juda zarur bo'lganda (masalan, JavaScript orqali dinamik o'zgartirishda) foydalaning.

2. Internal (sahifa ichida)

CSS HTML faylning <head> qismidagi <style> tegi ichida yoziladi. Bu butun sahifaga ta'sir qiladi, lekin faqat shu bitta faylda ishlaydi.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>Yashil matn</p>
</body>
</html>

Internal uslub kichik, bitta sahifalik loyihalarda yoki tez sinash uchun qulay. Lekin ko'p sahifali saytda har bir faylga alohida yozish kerak bo'lib, takrorlanish yuzaga keladi.

3. External (tashqi fayl) — eng yaxshi usul

CSS alohida .css faylida saqlanadi va HTML'ga <link> tegi orqali ulanadi. Bir CSS faylni cheksiz ko'p HTML sahifaga ulash mumkin.

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

Bu qator HTML faylning <head> qismiga yoziladi. href — CSS faylining manzili (yo'li). Endi style.css faylining o'zida odatiy CSS qoidalarini yozasiz:

/* style.css fayli */
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

p {
  color: #333333;
}

Deyarli har doim external usulni tanlang. Uning afzalliklari: bezak mazmundan ajratilgan, bitta faylni ko'p sahifada ishlatasiz, brauzer CSS faylni bir marta yuklab olib keshlaydi (tezlashadi) va kodni boshqarish osonlashadi.

CSS'da izoh (comment) /* ... */ ko'rinishida yoziladi. U bir qatorli ham, ko'p qatorli ham bo'lishi mumkin. Izohlar brauzer tomonidan e'tiborga olinmaydi, faqat dasturchi uchun eslatma sifatida xizmat qiladi.

Asosiy selektorlar

Selektor — CSS qoidasi qaysi elementlarga qo'llanishini belgilaydi. Uch xil asosiy selektor bor, ularni yaxshi o'zlashtirish CSS'ning yarmini bilish demakdir.

Element (teg) selektori

Element nomi bo'yicha tanlaydi. Masalan, p selektori sahifadagi barcha <p> elementlariga ta'sir qiladi.

h1 {
  color: navy;
}

a {
  text-decoration: none;
}

Class (sinf) selektori — nuqta (.)

Class selektori nuqta bilan boshlanadi (.nom) va HTML'da class atributi orqali qo'llaniladi. Bitta class'ni ko'p elementga berish mumkin — bu eng ko'p ishlatiladigan selektor.

/* CSS */
.tugma {
  background-color: dodgerblue;
  color: white;
  padding: 10px;
}

<!-- HTML -->
<button class="tugma">Yubor</button>
<a class="tugma">Havola</a>

Bir elementga bir nechta class berish mumkin, ular bo'sh joy bilan ajratiladi: <div class="karta katta ko'k">. Bu holda elementga uchta class ham qo'llaniladi.

Id (identifikator) selektori — panjara (#)

Id selektori panjara belgisi bilan boshlanadi (#nom) va HTML'da id atributi orqali qo'llaniladi. Id sahifada faqat bitta bo'lishi kerak — u noyob (unique) identifikator.

/* CSS */
#asosiy-sarlavha {
  font-size: 40px;
  color: black;
}

<h1 id="asosiy-sarlavha">Salom dunyo</h1>

Amalda bezash uchun ko'pincha class ishlatiladi, id emas. Sababi: class qayta ishlatiluvchan, id esa juda "kuchli" (yuqori spetsifiklikka ega) bo'lgani uchun keyinchalik uni bekor qilish qiyin bo'ladi. Id'lar ko'proq JavaScript uchun yoki sahifa ichidagi havolalar (anchor) uchun ishlatiladi.

Selektorlarni kombinatsiyalash

Selektorlarni birlashtirib, aniqroq nishonlash mumkin. Bir nechta muhim kombinatsiyalar:

Guruh — h1, h2, h3 { } — vergul bilan ajratilgan, uch element ham bir xil uslub oladi;
Avlod (descendant) — div p { } — bo'sh joy bilan, div ichidagi barcha p'larni tanlaydi;
Bevosita farzand — ul > li { } — faqat ulning bevosita li farzandlarini;
Element + class — p.katta { } — faqat katta class'iga ega p'larni.

/* .menyu ichidagi barcha havolalar */
.menyu a {
  color: white;
}

/* h1, h2 va h3 birdaniga */
h1, h2, h3 {
  font-family: Georgia, serif;
}

Spetsifiklik (specificity) — qaysi qoida g'olib?

Ba'zan bitta elementga bir nechta qoida bir xil xossani (masalan, color) turlicha belgilaydi. Bunday to'qnashuvda brauzer qaysi qoidani qo'llashni spetsifiklik qoidasiga ko'ra hal qiladi. Sodda tartibda "kuchdan kuchsizga":

Inline uslub (style="...") — eng kuchli;
Id selektori (#nom) — juda kuchli;
Class selektori (.nom) — o'rtacha;
Element selektori (p) — eng kuchsiz.

Ya'ni #nom qoidasi .nom qoidasidan ustun keladi, u esa p qoidasidan ustun. Agar spetsifiklik teng bo'lsa, u holda CSS faylida keyinroq yozilgan qoida g'olib chiqadi ("kaskad" so'zining ma'nosi ham shu).

p { color: black; }        /* kuchsiz */
.matn { color: blue; }     /* kuchliroq */
#salom { color: red; }     /* eng kuchli */

Agar bir <p id="salom" class="matn"> elementiga uchala qoida ham to'g'ri kelsa, matn qizil (red) bo'ladi — chunki id selektori eng kuchli.

CSS'da !important degan maxsus belgi bor: color: red !important;. U barcha spetsifiklik qoidalarini chetlab o'tib, majburan g'olib chiqadi. Undan iloji boricha foydalanmang — u kodni chalkashtiradi va keyinchalik uslubni o'zgartirishni juda qiyinlashtiradi. U — oxirgi chora.

Xulosa

CSS — veb-sahifaning tashqi ko'rinishini (rang, shrift, joylashuv) boshqaradigan til;
Sintaksis: selektor { xossa: qiymat; };
Ulash usullari: inline (yomon), internal (<style>), external (<link> — eng yaxshi);
Asosiy selektorlar: element (p), class (.nom), id (#nom);
Selektorlarni guruhlash va kombinatsiyalash mumkin;
To'qnashuvda spetsifiklik hal qiladi: inline > id > class > element;
Amalda deyarli har doim external CSS va class selektorlarini ishlating.