Kaip CSS paveldėjimas veikia žiniatinklio dokumentuose

Svarbi CSS svetainės stiliaus dalis - suprasti paveldėjimo sąvoką.

CSS paveldėjimas automatiškai apibrėžiamas naudojamo turto stiliumi. Kai ieškote stiliaus nuosavybės fono spalvos, pamatysite skyrių "Paveldimumas". Jei esate, kaip ir dauguma interneto dizainerių, ignoravote šį skyrių, tačiau jis yra tikslus.

Kas yra CSS Paveldėjimas?

Kiekvienas HTML dokumento elementas yra medžio dalis, o kiekvienas elementas, išskyrus pradinį elementą, turi tėvų elementą, kuris jį aptraukia. Kad ir kokie stiliai būtų taikomi tame tėvų elementui, gali būti taikomi jai priskirti elementai, jei savybės yra tos, kurios gali būti paveldimos.

Pavyzdžiui, žemiau pateiktame HTML kode yra žymė H1, kurioje yra EM žymė:

Tai yra didžioji antraštė

EM elementas yra H1 elemento vaikas, o visi paveldėti H1 stiliai bus perkelti ir į EM tekstą. Pavyzdžiui:

h1 {font-size: 2em; }

Kadangi nuosavybės šriftų dydis yra paveldimas, tekstas "Big" (kuris yra uždaras viduje EM žymių) bus tokio paties dydžio, kaip ir likusi H1. Taip yra todėl, kad jis paveldi CSS nuosavybėje nustatytą vertę.

Kaip naudoti CSS paveldėjimą

Lengviausias būdas tai naudoti - susipažinti su CSS savybėmis , kurios yra ne paveldimos. Jei nuosavybė yra paveldima, tada jūs žinote, kad vertė kiekvienam dokumento elementui priklausančiam elementui bus tokia pati.

Geriausias būdas tai naudoti - nustatyti pagrindinius stilius labai aukšto lygio elementu, pvz., "BODY". Jei savo kūno nuosavybe nustatysite savo šriftų šeimą , tada, pasibaigus paveldėjimui, visas dokumentas išsaugos tą pačią šriftų šeimą. Tai iš tikrųjų padaro mažesnes stilių lenteles, kurias lengviau valdyti, nes yra mažiau bendrų stilių. Pavyzdžiui:

kūnas {font-family: Arial, sans-serif; }

Naudokite paveldimo stilius

Kiekviena CSS nuosavybė apima vertę "paveldėti" kaip galimą variantą. Tai pasakoja žiniatinklio naršyklei, kad net jei nuosavybė nebūtų paveldėta, ji turėtų turėti tokią pačią vertę kaip ir tėvai. Jei nustatysite tokį stilių kaip ne paveldėta marža, galite naudoti paveldimo vertę vėlesnėse savybėse, kad suteiktumėte tokią pačią paraštę kaip ir tėvai. Pavyzdžiui:

kūno {margin: 1em; } p (marža: paveldėti; }

Paveldimumas naudoja apskaičiuotas vertes

Tai svarbu paveldimoms vertybėms, pvz., Šrifto dydžiams, kurie naudoja ilgį. Apskaičiuotoji vertė yra vertė, kuri yra palyginti su kokia nors kita tinklalapio reikšme.

Jei nustatysite 1em šrifto dydį savo BODY elemente, visas jūsų puslapis bus tik 1em dydžio. Taip yra todėl, kad tokie elementai kaip antraštės (H1-H6) ir kiti elementai (kai kurios naršyklės skirtingai kaupia lentelės savybes) turi santykinį dydį žiniatinklio naršyklėje. Jei nėra informacijos apie kitus šrifto dydžius, žiniatinklio naršyklė visada įrašys didžiausią teksto antraštę H1, o po to - H2 ir tt. Kai savo BODY elementą nustatote pagal konkretų šrifto dydį, jis naudojamas kaip "vidutinis" šrifto dydis, o antraštės elementai skaičiuojami iš jo.

Pastaba apie paveldėjimo ir fono ypatybes

Yra keletas stilių, kurie išvardyti W3C nepaveldė CSS 2, tačiau žiniatinklio naršyklės vis dar paveldi vertes. Pavyzdžiui, jei parašėte šį HTML ir CSS: