|
CSS kaskadli jadvallar stillarida selektorlar
|
| bet | 2/3 | | Sana | 28.10.2022 | | Hajmi | 102.71 Kb. | | #28403 |
Bog'liq CSS 2-ma`ruza IOM, 1-amaliy mashg’ulot, collect2012 1, 65493215-ba12-4d37-81d9-72487bf20a45, Mustaqil ish yuzi, 1-mavzu, КАФОЛАТ ХАТ, Azamat 1, Kurs ishi uchun namunaviy mavzular5 kurs sirtqi, Mirzayev Akbar 0, ВМҚ-395CSS kaskadli jadvallar stillarida selektorlar
CSS qoidalar, selektor va stilni e‘lon qilish blokidan tashkil topadi. Selektor har doim chap tomonda joylashadi va undan keyin figurali qavsni
ichida stilni e‘lon qilish bloki joylashadi. Har bir e‘lon,hususiyat va uni qiymatidan tashkil topadi. E‘lonlar bir – biridan nuqtali vergul bilan ajratiladi. Aynan hususiyat stilni tashqi ko‘rinishini aniqlaydi.
Stil qo‘llash mumkin bo‘lgan elementning konstruktsiyasini selektor deb ataymiz.
Selektorlarning turlari.
Element bo‘yicha selektor. Selektor sifatida elementning nomidan ham foydalanish mumkin (p, td, body). Masalan quyidagicha konstruktsiya yaratamiz:
Р { color: #ССС; font-size: 14px}
Bu abzats ichidagi matn kulrang rangda, 14 piksel o‘lchamli shriftda yozilgani ko‘rsatilgan. HTML tilidagi ixtiyoriy elementdan shu tarzda selektor sifatida foydalanish mumkin. Selektorga qo‘llanilgan stil, butun sahifa uchun o‘rinli bo‘ladi. Bazan shunday holat yuzaga keladiki, H1 sarlavha ba‘zi joyda ko‘k rangli, 18 px o‘lchamli bo‘lsin, ba‘zi joyda esa H1 sarlavha yashil rangda, 16 px o‘lchamli bo‘lsan. Agar biz selektor sifatida H1 ni olsak, bunday differentsiallashga erisha olmaymiz. Bu muammoni hal qilish uchun CSS1 da ikkita mexanizm, sinfs va unikal identifikatorlar (ID) tushunchasi kiritilgan.
Sinf bo‘yicha selektor. Nomidan ko‘rinib turibdiki, bu mexanizm, berilgan elementlarni sinfslarga ajratadi. Bu ish quyidagicha amalga oshiriladi: Bu hat boshida biror matn keltirilgan, bu hat boshidagi matn esa kichraytirilgan shrift bilan yoziladi. Ko‘rsatilgan sinfsga stillar quyidagi tartibda yoziladi:
Р { color: #CCC; font-size: 14рх} P.smaller {font-size: 12px}
Bu holda birinchi hat boshi 14 piksel o‘lchamli shrift bilan yoziladi. Ikkinchi hat boshi esa 12 piksel o‘lchamli shrift bilan yoziladi. Sintaksis ikkala holda ham o‘xshash, lekin sinfsga murojaat nuqta orqali amalga oshiriladi, nuqtadan keyin sinfsni nomi yoziladi. Agar ko‘rsatilgan sinfsni faqatgina hat boshi uchun emas, balki ixtiyoriy element uchun qo‘llasak, stil quyidagicha yoziladi:
.smaller {color: #ССС; font-size: 14рх}
Agar ikkita
va
element va bir xil sinfs bilan berilsa, ularni differentsiallash mumkin:
P.smaller {color: #CCC; font-size: 14px} PRE.smaller {color: #F00; font-size: 12px}
Bu holda
element bilan ko‘rsatilgan matn qizil rangda, shrift 12 piksel boladi.
element bilan ko‘rsatilgan matn kulrang rangda, shrift 14 piksel o‘lchamda bo‘ladi.
Unikal identifikatorlarni qisqa dilib, ID deb ataymiz. Berilgan hujjatda faqat bir martagina ID selektoridan foydalanish mumkin.
#first { font-style:italic; }
|
| |
