Veb-xujjatlarda CSS-ning merosligi qanday ishlaydi?
CSS bilan veb-sayt yaratish uslubining muhim qismi meros tushunchasini tushunishdir.
CSS devralımı avtomatik ravishda foydalaniladigan xususiyat uslubi bilan belgilanadi. Uslublar fon-rangi-ni ko'rib chiqqandan so'ng, "Inheritance" deb nomlangan bo'limni ko'rasiz. Agar siz ko'pchilik veb-dizaynerlardek bo'lsangiz, ushbu bo'limga e'tiborsiz bo'lib qoldingiz, lekin u maqsadga xizmat qiladi.
CSS-ning merosligi nima?
HTML hujjatidagi har bir element daraxtning bir qismidir va boshlang'ich elementidan tashqari har bir element elementni qamrab olgan yuqori elementga ega. Xususiyatlari meros qilib olinadigan bo'lsa, qanday qilib uslublar o'sha ota-elementga tatbiq etilishi mumkin.
Masalan, quyidagi HTML kodi EM yorlig'ini qamrab olgan H1 yorlig'i mavjud:
Bu Big sarlavhasi dir EM elementi H1 elementining farzandidir va meros bo'lib o'tgan H1dagi har qanday uslub EM matniga ham yuboriladi. Masalan:
h1 {font-size: 2em; } Shriftning o'lchamli xususiyati meros bo'lib kelganligi sababli, "katta" (EM belgilarining ichiga qo'yilgan narsa) matnlari H1ning qolgan qismi bilan bir xil bo'ladi. Buning sababi, CSS xususiyatiga o'rnatilgan qiymati egallaydi.
CSS-ning merosini qanday ishlatish kerak
Uni ishlatishning eng oson usuli - bu CSS xususiyatlariga ega bo'lish va uni meros qilib olmoq. Xususiyat meros qilib olinsa, qiymatda hujjatdagi har bir kichik element uchun bir xil bo'ladi.
Buning eng yaxshi usuli - asosiy uslublaringizni BODY kabi juda yuqori darajadagi elementga o'rnatish. Shrift-oilangizni tana moslamasiga o'rnatgan bo'lsangiz, meros tufayli barcha hujjat o'sha shrift oilasini saqlab qoladi. Bu aslida kichikroq uslublar uchun ishlashga imkon beradi, chunki u umumiy uslublar kamroq. Masalan:
body {font-family: Arial, sans-serif; } Inherit Style qiymatidan foydalaning
Har bir CSS xususiyati "devralınır" qiymati mumkin bo'lgan variant sifatida o'z ichiga oladi. Bu veb-brauzerga aytiladi, agar mulk odatda meros bo'lib o'tmasa ham, ota-ona bilan bir xil qiymatga ega bo'lishi kerak. Agar siz meros qilib olinmagan margin singari uslubni o'rnatgan bo'lsangiz, ularga boshqa xususiyatlar bo'yicha meros qiymatini ota-ona sifatida bir xil chekka berish uchun foydalanishingiz mumkin. Masalan:
body {margin: 1em; } p {margin: inherit; } Qadriyat hisoblangan qiymatlarni ishlatadi
Bu uzunliklardan foydalanadigan shrift o'lchamlari kabi meros qiymatlari uchun muhimdir. Hisoblangan qiymat Veb-sahifadagi boshqa qiymatga nisbatan bir qiymat.
BODY elementingizda 1em shrift hajmini o'rnatgan bo'lsangiz, butun sahifangiz faqat 1 me'yor hajmda bo'ladi. Buning sababi, (H1-H6) va boshqa elementlarning (ayrim brauzerlarning jadval xususiyatlarini boshqacha hisoblash) o'xshash elementlari veb-brauzerida nisbatan hajmga ega. Boshqa shrift o'lchamlari to'g'risidagi ma'lumot bo'lmasa, veb-brauzer har doim H1 sarlavhasini sahifadagi eng katta matnni, keyin H2 ni va boshqalarni yaratadi. BODY elementingizni ma'lum bir shrift hajmiga qo'yganingizda, u "o'rtacha" shrift hajmi sifatida ishlatiladi va sarlavhali elementlar undan olinadi.
Tarix va meros xususiyatlari haqida eslatma
Listelenadigan bir qator uslublar W3C-da CSS 2-da merosga ega emas, ammo veb-brauzerlar qadriyatlarni egallamoqda. Masalan, quyidagi HTML va CSS-ni yozsangiz:
h1 {fon-rang: sariq; } Bu Big sarlavhasi dir "Katta" so'zi, fon rangli xususiyatni meros qilib olmagan bo'lsa-da, hali ham sariq rangga ega bo'ladi. Buning sababi, fon xususiyatining boshlang'ich qiymati "shaffof". Shunday qilib, da fon rangini ko'rmaysiz, aksincha, bu rang ota-onadan yoritiladi.