2-mavzu. Css qoʻllagan holda web-sayt yaratish. Reja

CSS da o'ziga xoslik nima ?
Agar bitta elementga ishora qiladigan ikkita yoki undan ko'p ziddiyatli css qoidalari bo'lsa, brauzer qaysi qoidalarning eng aniqligini aniqlash uchun ba'zi qoidalarga amal qiladi va shuning uchun bazi kodlar yutib chiqadi. O'ziga xoslikni unvon sifatida o'ylab ko'ring, natijada qaysi uslub deklaratsiyalari elementga qo'llanilishini bilib olasiz. Albatta qaysi deklaratsiyaning unvoni katta bo'lsa o'sha yutib chiqadi. Va o'sha kod natija beradi.

CSS da o'ziga xoslik ierarxiyasi
Har bir selektor o'ziga xoslik ierarxiyasida o'z o'rniga ega. Selektorning o'ziga xoslik darajasini belgilaydigan to'rtta kategoriya mavjud:
1. INLINE STILLAR Inline stillar - to'g'ridan-to'g'ri stil qo'yish uchun elementga biriktirilgan.
2. ID - lar ID bu #navbar kabi sahifa elementlari uchun yogona identifikator
3. KLASS, ATTRIBUT VA SOXTA KLASSLAR (pseudo classes) Bu turkum .classlar , [attributlar] va soxta classlar ya'ni :hover, :focus va boshqalarni o'z ichiga oladi.
4. ELEMENTLAR VA SOXTA ELEMENTLAR (pseudo elements) Bu turkum esa Element nomlari va pseudo- elementlarni ya'ni h1, div, :before, :after kabilarni o'z ichiga oladi.
O‘ziga xoslikni hisoblash
0 dan boshlang, style atributi uchun 1000, har bir id uchun 100, har bir atribut, sinf yoki soxta sinf uchun 10, har bir element nomi yoki soxta element uchun bittadan qo'shing. U holda:
h1 {} - o'ziga xoslik darajasi 1 ga teng
#content h1 {} - o'ziga xoslik darajasi 101, ya'ni bitta ID va bitta element mavjud

Sarlavha

- o'ziga xoslik darajasi 1 ga teng (inline stillash);
O'ziga xoslik qoidalari …
1. Tenglik Qoidasi : Eng so'ngi yozilgan kod ish bajaradi
Agar o'sha qoidalar tashqi stillar jadvaliga ikki marotaba yozilgan bo'lsa, u holda stillar jadvalidagi pastki qoida amal qilinadigan elementga yaqinroq bo'ladi va shuning uchun ularni qo'llash kerak.

xuddi ta'kidlanganidek bunda
1 - sarlavhaning orqa foniga sariq rang berilgan bo'lsada
2 - huddi o'sha sarlavhaning ustidan qizil rang berildi va oxirgi natija qizilligicha qoldi.
2. ID selektorlari Attribut selektorlariga qaraganda ko'proq ustunlikka ega

3. Kontekstli selectorlar bitta element tanlagichga qaraganda ko'proq ustunlikka ega. O'rnatilgan stillar jadvali stilizatsiya qilinadigan elementga yaqinroq. Shunday qilib, keyingi vaziyatda ikkinchi qoida qo'llaniladi.
4. KLASS Selectorlari barcha element selectorlaridan ustun keladi. Klass selektori ya'ni .into, .box lar H1 , P , DIV elementlaridan ustun turadi. Shuning uchun doim CSS yozishda class lardan foydalanish tavsiya etiladi.

HTML-dagi har bir tegda tegishli CSS selektori mavjud. Masalan,

yorlig'i CSS selektoriga mos keladi, shu bilan biz HTML sahifaning barcha paragraflariga murojaat qilishimiz va masalan, ularning barchasini bir vaqtning o'zida qizil rangga bo'yashimiz mumkin. Selektordan keyin jingalak qavslar {} qo'yilishi kerak, ularning ichiga CSS xususiyatlari yozilishi kerak. CSS xususiyatlari rang, shrift hajmi va boshqa qiziqarli narsalarni o'rnatadi. Ular ushbu shaklda yozilishi kerak: mulk nomi, so'ngra ikki nuqta, keyin bu xususiyat qiymati (masalan, xususiyat rang, "qizil" esa qiymat). Keyin nuqta-vergul qo'yishingiz kerak va siz quyidagi xususiyatni yozishingiz mumkin. Keling, yozilgan CSS-ni bizning HTML kodimizga qanday mos kelishini tushunib olaylik. Buni uchta usulda amalga oshirish mumkin.