HTML va CSS nima?

HTML – hujjatlar uchun standartlashtirilgan dasturlash tili. Koʻpchilik veb sahifalar HTML tilida yozilgan belgilash tavsifidan iborat. Boshqacha qilib aytganda, HTML sahifa tarkibining strukturasini belgilaydi. Masalan, sarlavha, xatboshi, tasvir va hokazolar aynan HTMLʼda ishlanadi.

CSS — uslublar jadvali tili. U strukturalangan hujjatlarga (masalan, yuqorida aytib o‘tilgan HTML hujjatlariga) uslubni (masalan, shrift va ranglarni) biriktirish imkonini beradi. Sodda qilib aytganda, CSSʼning asosiy vazifasi kontentning tashqi ko‘rinishini tavsiflashdir.

Shunday qilib, HTML sahifada qanday ma’lumotlar va qaysi tartibda ko‘rsatilishi kerakligini tavsiflash uchun zarur bo‘lsa, CSS uning imkoniyatlarini kengaytiradi. Rang, shrift, fon va shu kabilarni o‘zgartirish imkonini beradi.

HTML asoslari

Xullas, yuqorida aytib o‘tganimizdek, HTML tili sahifa strukturasini tavsiflash uchun zarur.

Aynan HTML teglar orqali brauzerga sahifaning birinchi darajali sarlavhasida, xatboshida, sarlavha ostida nimalar bo‘lishi, havola qayerda joylashishi, u qayerga olib borishi va hokazolar haqida ma’lumot beriladi.

Misol uchun:

Agar sahifada biror matnni ajratib olib, uni birinchi darajali sarlavha qilishingiz kerak bo‘lsa, sarlavha boshida <h1> ochuvchi va oxirida </h1> yopuvchi teglarni qo‘yishingiz kerak (ochuvchi va yopuvchi teglar haqida keyinroq batafsil to‘xtalib o‘tamiz).
Xuddi shu tarzda boshqa darajadagi (<h2> dan <h6> gacha) kichik sarlavhalarni ham ajratib ko‘rsatish mumkin.
Xatboshini ajratib ko‘rsatish uchun HTML hujjatda xatboshidagi butun matnni tegishli ravishda <p> va </p> teglari (ochuvchi va yopuvchi teglar) orasiga joylashtirish lozim.
Satr ko‘chirishni amalga oshirish uchun kerakli joyga <br> tegini qo‘yishning o‘zi kifoya.

Kerakli teglar va ulardan foydalanish qoidalarini bilgan holda xuddi shu tarzda sahifalar tarkibini tavsiflovchi HTML hujjatlarni shakllantirishingiz mumkin.

Endi HTML bilan ishlashning nozik jihatlarini batafsilroq tavsiflashga o‘tamiz.

Sahifa strukturasi

Veb-saytdagi har qanday sahifa .html kengaytmaga ega matnli fayldir.

Sahifaning barcha tarkibiy qismlari: matnlar, teglar va boshqalar aynan shu fayl ichida boʻladi.

Istalgan bunday fayl ichida quyidagi bir nechta majburiy teglar bo‘lishi kerak:

Hujjat boshida <!DOCTYPE html>.
Hujjat boshida <html> va oxirida </html> — bu ikki teg orasida sahifaning hamma tarkibiy qismlari barcha teglari bilan birga bo‘lishi kerak (ularning tashqarisidagi hamma narsa eʼtiborga olinmaydi).
Xizmat teglari ro‘yxatining boshida <head> va oxirida </head>.
- <title> — xizmat tegi, u bilan sahifa nomi ajratib ko‘rsatiladi (unda koʻrsatilgan yozuv brauzerdagi sahifaga chiqariladi).
- <meta> — xizmat tegi, unda sahifa kodi (odatda utf-8) yoziladi.
Sahifa tarkibi boshida <body> va oxirida </body> — bu ikki teg orasida sahifa tarkibi, matnlar, xatboshilar, sarlavhalar teglari va boshqalar koʻrsatiladi.

Ko‘rgazmali bo‘lishi uchun shu tarzda shakllantirilgan hujjatga misol keltiramiz:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bu xizmat sarlavhasi</title>
</head>
<body>
Bu yerda sahifa tarkibi bo‘lishi kerak
</body>
</html>

Atribut va teglar

Yuqorida misol tariqasidagi veb-sayt sahifasining strukturasi va <html>, <head>, <body> kabi majburiy teglarni ko‘rib chiqdik.

Endi sahifani to‘ldirishda (xususan, <body> tegi ichidagi tarkib uchun) kerak bo‘lishi mumkin bo‘lgan teg va atributlarni ko‘rib chiqamiz.

Dastlab teg va atributlar nima ekani haqida so‘z yuritamiz.

Teg — aynan burchakli qavs ichiga olingan narsa, masalan, <b>. Teglar ko‘pincha juft holda: ochuvchi va yopuvchi bo‘ladi. Ochuvchi teg elementning boshida, yopuvchi teg esa mos ravishda oxirida qo‘yiladi. Shu tariqa teg ta’sir doirasining chegaralarini belgilaymiz. Misol uchun, agar matnni qalin qilmoqchi bo‘lsangiz, matn boshida <b> ochuvchi tegini, oxirida esa </b> yopuvchi tegini qo‘ying — <b> va </b> orasidagi barcha matn qalin shriftda ko‘rsatiladi. Ba’zi teglarning yopuvchi jufti boʻlishi shart emas (masalan, yuqorida tilga olingan va satrni koʻchirish uchun ishlatiladigan <br> tegini shunchaki kerakli joyga qo‘yish kifoya).
Atribut — elementga biror ma’lumotni (matn, rasm va h.k.) kiritish uchun teg ichida yoziladigan qo‘shimcha xususiyatlar. Yanada tushunarli bo‘lishi uchun quyidagi havola bilan misol keltiramiz: <a href="https://megagroup.ru">Bizning veb-saytimiz</a>. Ko‘rib turganingizdek, bu yerda MegaGroup.ru veb-saytiga havola keltirilgan. Havolani qoʻshish uchun veb-saytda havola sifatida ko‘rsatiladigan matnning o‘zini (ankor ham deb ataladi) <a> va </a> teglari orasiga oldik. Havolani qo‘shish uchun aynan shu teglar ishlatiladi. Ammo URL (havola manzili)ni ko‘rsatish uchun bizga href atributi kerak, unda u href="bu yerga havola qo‘shiladi" shaklida ko‘rsatiladi. Keyinchalik HTMLʼni o‘rganishda id, class, src kabi boshqa ommabop atributlarga ham duch kelasiz.

Asosiy teglar

Endi teg va atributlar nima ekanini tushunib olganimizdan so‘ng eng ko‘p ishlatiladigan teglarga misol keltiramiz.

Ochish va yopish teglari bilan ishlashni nazarda tutadi:

<p> — matndagi xatboshini belgilaydigan teg. Butun xatboshi <p> va </p> ichiga joylashtiriladi
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> — matnda turli darajadagi sarlavhalarni yaratish teglari. h1 sarlavhasida butun sahifaning asosiy sarlavhasini, h2 da sahifa bloklarining nomini, h3 da kichik bloklarning nomini va hokazolarni yozish tavsiya etiladi.
<b> — matnni qalin shrift yordamida ajratib koʻrsatish uchun teg.
<i> — matnni kursiv bilan ajratib koʻrsatish uchun teg.
<a> — havola qo‘shish uchun teg. Yuqorida aytib o‘tilganidek, havolaning oʻzini ko‘rsatish uchun href atributi bor. Teg toʻliqligicha quyidagicha bo‘ladi: <a href="http://site.ru">bizning saytimiz</a>

O‘z-o‘zidan yopiladigan teglar (yopish tegini talab qilmaydi):

<br> — satrni ko‘chirish.
<hr> — matnga gorizontal chiziq qo‘yish uchun teg.
<img> — matnga rasm joylash uchun teg. U src (tasvirlarga havola kiritish uchun) va alt (muqobil matn kiritish uchun) atributlariga ega. Shunday qilib, teg to‘liqligicha <img src="rasmlar URLsi" alt="muqobil matn"> ko‘rinishida bo‘ladi.

Bundan tashqari, HTMLʼga izoh kiritish uchun teg kerak bo‘lishi mumkin. Bunday matn brauzer tomonidan e’tiborsiz qoldiriladi — ekranda ko‘rinmaydi, lekin sahifaning manba kodida saqlanib qoladi. Izoh qo‘yish uchun uning matnini  orasiga oling. Sizda quyidagilar paydo bo‘lishi kerak:

Bu mumkin bo‘lgan teglarning ba’zilari.

To‘liq ro‘yxat bilan havola orqali berilgan batafsil axborotnomada tanishishingiz mumkin.

HTMLʼdagi ro‘yxatlar

HTML hujjatlardagi markirovkalangan va raqamlangan ro‘yxatlarni yaratishga alohida e’tibor qaratishni istardim.

Raqamlangan ro‘yxat yaratish uchun sizga <ol> (ro‘yxat boshida va ro‘yxat oxirida </ol> yopish tegi) hamda <li> (har bir bandning boshida va oxirida </li> yopish tegi) teglari kerak bo‘ladi. Shu tarzda sizda taxminan quyidagi ko‘rinishdagi ro‘yxat hosil bo‘lishi kerak.

<ol>
<li>1-band</li>
<li>2-band</li>
<li>3-band</li>
</ol>

Markirovkalangan ro‘yxatni yaratish uchun esa mos ravishda <ul> va <li> teglari kerak bo‘ladi.

<ul>
<li>1-band</li>
<li>2-band</li>
<li>3-band</li>
</ul>

HTMLʼdagi jadvallar

Jadvaldagi asosiy teg <table> bo‘ladi. Kataklar haqidagi barcha ma’lumotlar aynan <table> va </table> orasiga joylashtiriladi.

Navbatdagisi <tr> tegi bo‘ladi. <tr> va </tr> orasida jadval qatorlari haqida ma’lumot koʻrsatiladi.

Har bir qator ichida <td> teglari bo‘lishi kerak. Mos ravishda <td> va </td> orasida qator katakchalarining tarkibi ko‘rsatilishi lozim.

Natijada HTMLʼdagi jadval taxminan quyidagicha bo‘ladi:

<table border="1">
<tr>
<td>1-qatordagi 1-katakcha</td>
<td>1-qatordagi 2-katakcha</td>
</tr>
<tr>
<td>2-qatordagi 1-katakcha</td>
<td>2-qatordagi 2-katakcha</td>
</tr>
</table>

Ko‘rib turganingizdek, <table> tegining boshida border atributi bor. Unda ramkaning qalinligi piksellarda ko‘rsatiladi.

Border atributidan tashqari jadvallarda boshqa ko‘plab teglardan foydalanish mumkin. Masalan, jadval foni rangi (bgcolor), ramka ranglari (bordercolor), ramkadan chekinish (cellpadding), katakchalar orasidagi masofa (cellspacing) va boshqalar.

Havola orqali jadvallar va ularning xususiyatlari bilan ishlash haqida batafsilroq ma’lumot olishingiz mumkin.

Qo‘shimcha ma’lumot

Ushbu qo‘llanmada HTML nima ekani, u qanday ishlashi haqidagi asosiy ma’lumotlarni keltirdik.

Albatta, sahifalarning to‘laqonli shablonlarini yaratish, ularni kontent bilan to‘ldirish va hokazo uchun sizga ushbu belgilash tiliga oid kengroq bilimlar kerak bo‘ladi.

CSS asoslari

Bundan oldingi qo‘llanmada HTML haqida soʻz yuritgan edik. HTML sahifa strukturasi, uning navigatsiya bloklari va kontentidir. CSS bu strukturani sahifalari chiroyli ko‘rinadigan va turli hajm sigʻimiga ega displeylarda yaxshi aks etadigan shaklda bezatish imkonini beradi.

Sodda qilib aytganda, HTML — sahifaning karkasi, CSS esa uning pardozi.

Avvalo, boshqaruv tizimi ichida HTML va CSS o‘zaro qanday ishlashini tushunib olish lozim.

CSS uslublarini HTML hujjatga ulashning uchta usuli mavjud.

CSS ulanish. 1-usul: element ichida

Darhol ta’kidlab o‘tamiz, imkon boʻlsa, bu usuldan voz keching. Chunki HTML va CSS bir hujjatda bo‘lmagani maʼqul.

Demak, bu usulning mohiyati shundan iboratki, uslublarni styles atributi yordamida HTML tegining ichida yozasiz.

Ko‘rgazmali bo‘lishi uchun misol keltiramiz:

<p style="color: blue">xatboshidagi matn</p>

Bu misolimizdagi HTML hujjatda xatboshi bor (u <p> va </p> teglari orasida oʻrin olgan). Aynan shu xatboshiga uslub berish uchun tegning o‘ziga style="color: blue" atributini qo‘shdik. Natijada bu xatboshidagi butun matn ko‘k rangda ajralib ko‘rinadi.

CSS ulanish. 2-usul: hujjat ichida

Bu usul ham optimal emas, chunki unda ham CSS uslublarini HTML hujjatiga kiritishingiz kerak bo‘ladi.

Bu uslublarga har birini alohida teg emas, balki alohida sahifaning barcha elementlari uchun belgilash imkonini beradi.

Buni amalga oshirish uchun uslublarni sahifa strukturasining oʻzida <head> tegi ichida yozishingiz kerak.

Tushunarli boʻlishi uchun yana misol keltiramiz:

<!DOCTYPE html>
<html>
<head>
<title>Sahifa sarlavhasi</title>
<style type="text/css">
p { color: yellow; }
a { color: blue; }
</style>
...

Ko‘rib turganingizdek, bu misolda HTML faylining boshidayoq <style> tegini yozdik va uning ichida barcha xatboshilar sariq rangda (p { color: yellow; }), matndagi barcha havolalar esa ko‘k rangda (a { color: blue; }) bo‘lishi kerakligini belgiladik.

CSS ulanish. 3-usul: tashqi uslublar (tavsiya etiladi)

Bu usul HTML va CSSʼni bir-biridan to‘liq ajratish imkonini beradi. Tashqi uslublar bir vaqtning o‘zida veb-saytning ko‘plab sahifalariga ulanish uchun ishlatiladi.

CSSʼni shu tarzda ulash uchun quyidagilar zarur:

Barcha kerakli uslublar sanab o‘tilgan .css kengaytmali (misolimizda faylni file.css deb nomlaymiz) alohida fayl yaratish. Fayl tarkibiga misol:

p
{ color: yellow; }
a
{ color: blue; }

Yuqoridagi misolda boʻlgani kabi bu yerda ham xatboshilar uchun sariq, havolalar uchun ko‘k rangni belgiladik.

Havoladagi yo‘riqnomadan foydalanib, hosil qilingan faylni tizimga yuklash.
<link> tegi orqali bu faylga havolani kerakli HTML fayllarda <head> tegi ichiga yozish:

<!DOCTYPE html>
<html>
<head>
<title>Sahifa sarlavhasi</title>
<link rel="stylesheet" type="text/css" href='file.css' />
...

Bu misolda HTML hujjat uchun file.css faylida (<link rel="stylesheet" type="text/css" href='file.css' />) ko‘rsatilgan uslublardan foydalanishni belgiladik. Shu tariqa ushbu sahifa uchun barcha dizayn biz shakllantirib, tizimga yuklagan fayldan olinadi.

Selektorlar

Endi CSS faylni qanday ulash kerakligini ko‘rib chiqqanimizdan so‘ng uni qanday shakllantirishni tushunib olishga harakat qilamiz.

Biror element uchun uslubni belgilashda avvalo HTML fayllarda aynan qaysi element ushbu uslublardan foydalanishi kerakligini ko‘rsatishingiz lozim. Element turini ko‘rsatish selektor vazifasini bajaradi. Masalan, selektor sifatida element nomidan (misol uchun, <h1> yoki <a>), shuningdek, atribut qiymatidan (misol uchun, id yoki class) foydalanishingiz mumkin.

Misol keltiramiz (payqaganingizdek, uslublarda burchakli qavslarni yozish shart emas):

p { color: yellow; }

Bu yerda "p" selektor vazifasini bajaradi — ya’ni <p> tegi bilan belgilangan barcha elementlarga qavs ichida ko‘rsatilgan uslub (matn sariq rangda) qo‘llanadi.

Uslublarni qo‘llash qanchalik aniq bo‘lishi kerakligiga koʻra selektorlar turli xil kombinatsiyalardan iborat. Yaʼni barcha xatboshilar yoki faqat ma’lum birilari uchun boʻlishi mumkin.

Barcha selektorlarni shartli ravishda quyidagi guruhlarga bo‘lish mumkin:

Tur selektorlari. Nomidan ko‘rinib turganidek, ular ma’lum turdagi elementlarga, masalan, <a> yoki <div> tegli elementlarga uslublar qo‘llashni ko‘rsatadi. Xullas, tur selektoriga ega kodning taxminiy ko‘rinishi quyidagicha bo‘ladi (bizning misolimizda selektor <a> tegli elementlar uchun — ya’ni HTML hujjatdagi barcha havolalarga uslublarni belgilaydi. Shakldor qavslarda esa kerakli uslublar yozilishi kerak):

a { ... }

Sinf selektorlari. HTML bo‘yicha qo‘llanmada aytib o‘tganimizdek, muayyan teglar uchun class atributini belgilashingiz mumkin. Shunga muvofiq CSS faylida shu sinfga mansub elementlar uchun uslublarni koʻrsatsangiz boʻladi. Bu aniqroq selektor hisoblanadi. Chunki u uslublarni nafaqat bir turdagi elementlarga, balki bir xil sinfga mansub bo‘lgan turli elementlarga ham qo‘llash imkonini beradi. Masalan, sahifalardagi turli elementlar uchun, aytaylik, ayrim <p> teglari va ba’zi <a> havolalari uchun class="forexample" (HTML faylida bu <p class="forexample">xatboshi tarkibi</p> ko‘rinishida boʻladi) deb yozilgan. Endi siz bu uslubga ega barcha elementlar uchun ma’lum bir uslublarni (shriftlar, ranglar va hokazo) belgilamoqchisiz. Buning uchun CSS fayliga taxminan quyidagilarni yozishingiz kerak (shakldor qavslar ichiga yana o‘zingizga kerakli uslublarni kiritishingiz lozim):

.forexample { ... }

Identifikator selektorlari. Identifikator faqat bitta noyob elementni aniqlagani uchun (HTMLʼda bu id atributi) bunday selektor uslubni alohida elementga nisbatan qo‘llash imkonini beradi. Misol uchun, siz HTMLʼda biror xatboshini unique atribut-identifikatori bilan belgiladingiz (sahifa kodida bu <p id="unique">xatboshi tarkibi</p> koʻrinishida bo‘ladi) va endi uslublarni aynan shu xatboshiga qoʻllamoqchisiz. CSSʼga quyidagilarni yozing:

#unique { ... }

Xususiyatlari

Koʻrib turganingizdek, har bir selektordan so‘ng shakldor qavslar ichida elementlarga qo‘llanadigan xususiyatlarni yozish lozim.

Xususiyatlar shakldor qavslar ichida, ikki nuqtadan oldin yoziladi.

Mumkin bo‘lgan xususiyatlar ro‘yxati ancha keng. Eng ko‘p ishlatiladiganlari quyidagilar:

background — fon xususiyatlari (masalan, background-color – fon rangi; background-image – element uchun fon rasmi),
color — element rangi,
font-size — shrift o‘lchami,
height va width — elementlarning balandligi va kengligini o‘rnatish imkonini beradi.

Masalan, xatboshilar uchun ma’lum shrift o‘lchami va matn rangini belgilamoqchi bo‘lsak, CSS faylida quyidagilarni yozamiz:

p {
color: ...;
font-size: ...;
}

CSS xususiyatlarining to‘liq ro‘yxati bilan havola orqali tanishishingiz mumkin.

Qiymatlar

Qiymatlar bu — aynan ikki nuqtadan keyin keladigan narsa. Boshqacha qilib aytganda, avval uslublar (selektor)ni nimaga qo‘llash kerakligini, keyin qaysi parametrlar (xususiyatlar)ni o‘zgartirish lozimligini ko‘rsatamiz. Shundan keyingina bu xususiyatlar uchun qiymatlarni belgilaymiz.

Yana oʻsha xatboshilar uchun shrift va ranglarni belgilash misolini olib, endi xususiyatlardagi qiymatlarni (qizil rang va shrift o‘lchami — 20 piksel) belgilaymiz:

p {
color: red;
font-size: 20px;
}

Kaskadlik va ustuvorlik

CSS bilan ishlashda hisobga olinishi kerak bo‘lgan ikki xususiyat — kaskadlik va ustuvorlik.

CSSʼda barcha uslublar yuqoridan pastga kaskad bo‘lib keladi. Bundan kelib chiqadiki, boshqa uslublarni qo‘shishingiz va ularni qayta yozishingiz mumkin. Tushunish oson bo‘lishi uchun yana bir misol keltiramiz: avvalroq uslub faylida barcha havolalar uchun matn rangi ko‘k va shrift o‘lchami 12 piksel qilib belgilangan edi. Endi fayl oxiriga yangi qiymat qo‘shib, matn rangini yashilga o‘zgartiramiz. Shunda fayldagi barcha havolalar yashil rangga aylanadi.

a {
color: blue;
font-size: 12px;
}
a {
color: green;
}

Soddaroq qilib aytganda, quyida ko‘rsatilgan rang qiymati ustuvorlikka ega bo‘ladi va elementlarga nisbatan aynan u qo‘llanadi (bu holda qayta belgilanmagani uchun shrift o‘lchami 12 bo‘lib qoladi).

Shuningdek, CSSʼda asosiy teglarning uslublari ulardan ajralib chiqqan teglarga ham o‘tishini aytib oʻtishimiz lozim. Buni misol orqali tushuntirish osonroq:

body { font-family: Calibri; }
p { font-size: 14px; }
em { color: yellow; }

Bu yerda asosiy <body> tegi uchun Calibri shrifti belgilangan. So‘ngra matndagi xatboshilar uchun 14 piksel o‘lcham va kursiv matnlar uchun sariq rang ko‘rsatilgan. Mazkur holatda <p> tegi Calibri shriftini, <em> tegi esa Calibri shrifti va 14 piksel shrift o‘lchamini oladi.

Ammo ajralib chiqqan teglar uchun alohida uslublarni (o‘z shrifti va o‘lchami) belgilasak, ular ustuvorlikka ega bo‘ladi:

body { font-family: Calibri; }
p { font-size: 14px; font-family: Arial; }
em { color: yellow; font-family: Comic Sans; font-size: 16px; }

Bunday holatda xatboshilar 14 piksel o‘lchamdagi Arial shriftiga ega bo‘ladi. Kursiv matnlar esa nafaqat Comic Sans shriftida turadi. Balki shrift o‘lchami ham xuddi shu xatboshidagi boshqa matndan farq qilib, 16 piksel va sariq rangda chiqadi.

Selektorlar kombinatsiyasi

Qulay boʻlishi va CSS kodini qisqartirish maqsadida selektorlarni guruhlab, kombinatsiyalashingiz mumkin.

Selektorlarni kombinatsiyalab, qaysi element yoki elementlar guruhini tanlashni xohlayotganingizni aniq koʻrsatsangiz boʻladi.

Misol uchun, agar

xatboshilar hamda h2 va h3 sarlavhalari bir xil shrift va rangda,
faqatgina o‘lchami bilan bir-biridan farqli boʻlishini istasangiz,
avval <p>, <h2> va <h3> elementlarini guruhlashingiz va ular uchun shrift hamda rangni belgilashingiz, keyin esa har bir element uchun alohida shrift o‘lchamini ko‘rsatishingiz mumkin. Bu taxminan quyidagicha ko‘rinishda boʻladi:

p, h2, h3
{ font-family: Georgia, 'Times New Roman', Times, serif;
color: #333; }
p {font-size:1.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }

Selektorlar kombinatsiyasi bilan bogʻliq yana bir murakkabroq misolni ko‘rib chiqaylik. Aytaylik, sizda xatboshilar brightstyle sinfiga mansub element ichida joylashgan sahifa mavjud. Undagi ayrim xatboshilar uchun alohida dullstyle uslubi belgilangan. Siz barcha brightstyle xatboshilar uchun matn rangini qizil qilmoqchisiz. Dullstyle sinfidagi xatboshilar uchun esa matn rangi kulrang boʻlishini xohlayapsiz.(Boshqacha qilib aytganda, HTMLʼda <div> va unga brightstyle sinfi — <div class="brightstyle">, uning ichida bir nechta <p> xatboshilari, shuningdek, o‘z sinfiga ega bir nechta <p class="dullstyle">...</p> xatboshilar belgilangan). Endi bu CSSʼda qanday ko‘rinishda boʻlishini tasavvur qilaylik:

.brightstyle p {
color: red;
}
.brightstyle p.dullstyle {
color: gray;
}

Bu yerda o‘ng tomondagi eng chetki selektor doim asosiy. Undan chap tomondagi barchasi esa aniqlashtiruvchi hisoblanishini e’tiborga olish kerak.

Boshqacha aytganda, dastlab bizning misolimizda brightstyle (bu aniqliklashtiruvchi) sinfiga mansub barcha <p> (bu asosiy selektor) xatboshlar uchun qizil rang qo‘llanadi.

So‘ngra brightstyle (bu aniqlashtiruvchi) sinfi ichida joylashgan va dullstyle (asosiy selektor) sinfiga mansub <p> xatboshilaridagi barcha elementlar uchun kulrang ishlanadi.

Shu bilan birga, uslublarning qo‘llanishiga bo‘shliqlarning mavjudligi ham ta’sir qilishini aytib oʻtishimiz kerak.

Bizning misolimizda ".brightstyle" va "p.dullstyle" o‘rtasida bo‘shliq bor. Lekin "p" va ".dullstyle" o‘rtasida yo‘q.

Bo‘shliqning yo‘qligi rang faqat .dullstyle sinfiga mansub <p> xatboshilarigagina qo‘llanib, bir elementning ikkita selektorini birlashtiradi. Shuningdek, selektorning oʻziga xosligini oshirishini anglatadi. Agar bo‘shliq shunchaki olib tashlansa, p .dullstyle yozuvi selektorlar ketma-ketligini ifodalaydi. Ya’ni .dullstyle sinfiga mansub elementlar <p> xatboshi ichida ekanini bildiradi. Agar bo‘shliq va xatboshi selektori <p> ni olib tashlaganimizda rang nafaqat <p> xatboshilarga, balki .dullstyle sinfiga mansub barcha elementlarga qo‘llangan va bu bilan selektorning oʻziga xosligi pasaygan boʻlardi.

Manba: Что такое HTML и CSS?