Oldingi maqolamizda CSS haqida ma’lumot berishga harakat qildim. Endi chuqurroq (chuqurroooooq qaziganimiz uchun)o‘rganishni boshlaymiz. Bu maqolada, CSS ga tegishli 3 ta yangi terminni o‘rganib chiqamiz: selektor, klass, identifikator. Demak boshladik…

Selektor.

CSS da selektor vazifasini HTML teglar bajaradi. Veb sahifadagi barcha bir hil tipdagi teglarga(selektorlarga) umumiy stil beramiz. Misol uchun saytdagi barcha “ссылка”larning tegiga chizishni olib tashlaymiz(sizga ma’lumki, “ссылка” larga stil berilmasa odatiy tegiga chizilgan holatda qoladi).

<STYLE TYPE="text/css"> 
A {text-decoration:none; } 
</STYLE>

Klass.

Agar bizga, kod ichida foydalaniladigan bir xil teglarga har xil stillarni o‘rnatishimiz lozim bo‘lsa, klass yoki identifikatorlardan foydalanish juda qulay hisoblanadi. Dastlab klass haqida to‘xtalib o‘tamiz. Bir xil elementlarga har xil stil berish uchun, element nomi va nuqta(.) qo‘yib, stilga biror nom beramiz. So‘ng shu nomga tegishli bo‘ladigan stillar ketma-ketligini yozib chiqamiz. Shundan so‘ng, kod ichida kerakli bo‘lgan joyda, class so‘zi yordamida o‘rnatilgan stil nomi chaqiriladi.

Misol ko‘ramiz:

<head>
<style TYPE="text/css">
H1.rd {color:red;} 
H1.be {color:red;background-color:blue;}
</style>
</head>

E’lon qilingan stilni kerakli joyda chaqiramiz.

<body>
<h1 class="rd">Qizil shrift</h1>
<h1 class="be">Ko'k fonda qizil shrift</h1>
</body>

Shu tariqa istalgan elementga istalgan stillarni o‘rnatish mumkin bo‘ladi. YUqoridagi misolda faqat bitta element(H1) uchun stil yaratdik. Agar biz biror stilni yaratib, uni istalgan element uchun ishlatmoqchi bo‘lsak, u holda yaratilgan stilga element nomini qo‘ymasdan, faqatgina nuqta orqali stil uchun doimiy nom beramiz va kerakli joyda chaqiramiz. Tushunmadingizmi? Unday bo‘lsa quyidagi misolni yaxshilab tahlil qilib chiqing.

<STYLE TYPE="text/css">
.red {color: red; } 
.blue {color:red; background-color: blue}
</STYLE>

Biz 2 ta stil yaratdik, “red” va ”blue” deb nomladik, endi bu stillarni istalgan element uchun ishlatishimiz mumkin.

<P CLASS="red">Qizil shrift</P>
<P CLASS="blue">Ko'k fonda qizil shrift</P>

 Identifikator.

Bu o‘z ismi bilan etib turilibdi IDENTIFIKATOR, ya’ni butun veb sahifasida faqatgina bitta elementga stil berish uchun ishlatiladi. Dastlab stil yozilib, unga “#” belgisi orqali nom beriladi. “#” bu identifikatorli stillar to‘plami degan ma’noni beradi.

#akm{font-family:verdana; color:green;}

So‘ng kod ichida bu identifikator ID kalit so‘zi orqali chaqiriladi va yagona element uchun ishlatiladi. Bu ta’rif identifikatorga berilgan xaqiqiy ta’rifdir. Lekin hozirgi kundagi ko‘p brouzerlarda id orqali bir necha elementga ham stil berish mumkin bo‘lib qoldi, brouzerlar bunga ruhsat berishmoqda.

<STYLE TYPE="text/css">
#myID {letter-spacing: 1em; } 
H1#form3 {color:red; background-color: blue}
</STYLE>
<BODY> 
<P ID=myID> 1em lik yozuv</P>
<H1 ID=form2>Qora rangda</P>

YUqoridagi kodda «form3» identifikatori e’lon qilindi, lekin «form2» identifikatori ishlatildi. Bunda «form2» bo‘lmaganligi sababli yozuv odatiy holda namoyon bo‘ldi.

Hozirgi kunda identifikatordan klassda yaratilgan stillarning ma’lum bir qismini o‘zgartirish uchun ishlatishmoqda. Misol uchun, bitta klass ochib, unga nom beramiz va stillar ketma-ketligini kiritamiz. HTML  kod ichida shu klassni chaqirib, undan foydalanamiz, agar bizga stillar ketmaketligini biror elementini o‘zgartirish kerak bo‘lib qolsa, identifikatorni ishga solamiz. Shunda butun stilni bitta elementini o‘zgartirish uchun boshidan yozib o‘tirmaymiz. HTML tegida klass va identifikatorni birga ishlatsak, identifikator kuchliroq hisoblanadi. Misol ko‘ramiz.

<style>
.klas{color:blue;font-family:verdana;}  
#iden{color:red;}
</style>
<p class="klas" id="iden">test_klas</p>
<p id="iden">test_klas</p>

Ikkala holatda ham matn qizil rangda chiqadi, identifikatorda o‘rnatilgani kabi. Oxirgi berilgan stil natijaga ta’sir qiladi.