CSS asosiy tushunchalar va sintaksis

CSS bilan tanishish

Avvalom bor CSS nima bu, bu qanday til o'zi, bu tilni qanday imkoniyatlari boru bu til orqali nimalarni qila olamiz? Hozir shu haqida gaplashamiz.

CSS tarixi

CSS ning to'liq shakli 1997 yil tashkil topgan bo'lib, “WWW Consorcium” ida qo'llab quvvatlangan va foydalanishga taqdim etilgan. Dastlab, CSS kodlarini Netscape Navigator 4.0 va Internet Explorer 4.0 brouzerlari tushuna olgan, hozirgi kunda CSS kodlarni istalgan brauzerlar qo'llab quvvatlay oladi.

CSS haqida

CSS – (Cascading Style Sheets)Kaskadli stillar majmuasidir bo'lib stillar bilan ishlay oladigan til. CSS elementlarni ekranda, qog'ozda va yoki boshqa medialarda ko'rinishini tasvirlaydi. CSS veb sahifalarga har xil stillar berish uchun ishlatiladi. Hamda bir vaqtning o'zida bir nechta veb sahifalarni dizaynini o'zgartirish mumkin. Biror bir veb sahifani turli xil qurilmalarda turli xil ko'rinishini ham ta'minlaydi. CSS file .css formati orqali tashqi xotira saqlab qo'yishingiz va kezi kelganda veb sahifaning HTML kodini o'zgartirmasdan, faqat CSS faylni o'zgartirish orqali veb sahifaga yangidan ko'rinish berishimiz mumkin. Qisqacha qilib aytadigan bo'lsak, HTML faqat veb sahifani kodlarini yozish uchun ishlatiladi, HTML da ham veb sahifaga dizayn bersa bo'ladi, lekin bu juda uzoq jarayon talab qilgani bois, CSS bu vazifani o'z bo'yniga o'lgan.

CSS ni afzalliklari

CSS ning boshqa tillardan bitta ustun tarafi shundan iboratki, CSS kodlarini kompilatsiya qilish uchun, hech qanday kompillyatorlar, redaktorlar yoki biror bir dasturlar shart emas. Bizga oddiygina Internet Explorer va shu kabi brauzerlar kifoya. Brauzerlar orqali biz CSS kodlarini bemalol tahlil qilishimiz, natijamizni to'g'ridan to'g'ri ko'rishimiz mumkin.

Sintaksis

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;
}

Tutorials.uz - telegram kanali O'zbekiston bo'ylab bepul dasturlash darslarini ishlab chiquvchi holis kanal.