2 - dars CSS da Sintaksis va Selektor tushunchalari

2 - dars CSS da Sintaksis va Selektor tushunchalari


2 - dars CSS da Sintaksis va Selektor tushunchalari


Selektor veb sahifadagi barcha bir xil turdagi teglarga umumiy dizayn berish uchun ishlatiladi. Qoida bo'yicha CSS selektor va bayonot (declaration) dan tashkil topgan bo'ladi.


h1 - bu yerda selektor, figurali qavs ichidagi qiymatlar esa, bayonotdir. Selektorni vazifasi HTML elementlarini ko'rinishini siz hohlagan ko'rinishda bezatishdan iborat. Bayonot qismida bitta yoki undan ko'p xossalar (property) bo'lsa nuqtali vergul (;) bilan ajratiladi. Xossalar bilan uning qiymati esa o'z navbati esa ikki nuqta (:) bilan ajratiladi. Oxirgi elementdan so'ng nuqtli vergul qo'yilishi va figurali qavs bilan yopilishi ham shart. Quyidagi misolda, p elementni joylashuvi markazda, rangi esa qizil holatda bo'lishini ko'rasiz.

p {
    color: red;
    text-align: center;  
} 

CSS HTML dagi elementlarni masalan ism, id, klass, qiymatlar va boshqa elementlarni belgilash uchun ishlatiladi.


Element Selektor

Element selektor - bu htmldagi biror bir elementni belgilash va unga turli xil ko'rinish uchun ishlatiladi. Quyidagi misolda p elementi belgilanadi va html dagi barcha p elementi berilgan qiymatni oladi.

p {
    color: red;
    text-align: center;  
} 

Id selektor

Id selektor htmldagi biror elementning id sini belgilab unga ko'rinish berishda ishlatiladi. Bizga ma'lumki, id takrorlanmas bo'lishi kerak. Shu qatori, id selektor veb sahifadagi o'ziga xos "id" ini belgilaydi. Id maxsus hash kod orqali belgilanadi ya'ni (#) belgi orqali.

#para1 {
    text-align: center;
    color: red; 
}

Klas selektor

Klas selektor bu htmldagi elementni aniq bir qiymatini belgilab olish uchun ishlatiladi. "Class selector" nuqta (.) bilan boshlanishi kerak. Masalan aytaylik biror klasning "center" qiymatini olaylik.

#para1 {
    text-align: center;
    color: red;
}

Quyida <p> elementni klasiga oid misolni ko'ramiz.

p.center {
    text-align: center;
    color: red;
}

Guruh selektor

Agar sizda bir nechta elementga bir xil ko'rinish bermoqchi bo'lsangiz quyidagicha yoziladi:


h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

Ko'rib turganizdek bir xil kodni 3 marta yozib chiqdik, buni qisqartirish yo'li mavjud. Uni quyidagicha yozamiz.

h1, h2, p {
    text-align: center;
    color: red;
}

Har elementdan keyin vergul va bitta bo'sh joy qolishi kerak. Aks holda yozilgan kod ishlamaydi.

CSS da izohlar

CSS da kodlarga izoh yozishimiz mumkin. Bu bizga birmuncha qulayliklar beradi. Masalan, siz guruh bo'lib ishlayabsiz, siz yozgan kodlarni boshqalar yaxshiroq tushuna olishi uchun izohlardan foydalanasiz va bu qidirishni ham osonlashtiradi. Izohlar /* bilan boshlanib */ bilan tugaydi.

p {
    color: red;
    /* Men izohman, bu yerda hohlagancha yozishingiz mumkin, meni yaxshi tamonim, foydalanuvchilarga ko'rinmayman. */
    text-align: center;
}

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017