Miten CSS-perintö toimii Web-dokumenteissa

Tärkeä osa CSS: n verkkosivuston muotoilemista on käsitys perinnöstä.

CSS- perintö määritellään automaattisesti käytettävän ominaisuuden tyylillä. Kun tarkastelet tyyliominaisuuden taustaväriä, näet osion "Perintö". Jos olet kuin useimmat verkkovalmistajat, olet jättänyt huomiotta kyseisen osion, mutta se palvelee tarkoitusta.

Mikä on CSS-perintö?

Jokainen HTML-asiakirjan osa on osa puuta ja jokainen elementti, paitsi alkuperäinen -elementti, sisältää sen, joka sulkee sen. Mitä tahansa tyyliä sovelletaan tähän vanhempiin elementtiin, sitä voidaan soveltaa siihen sisältyviin elementteihin, jos ominaisuudet ovat sellaisia, jotka voidaan periä.

Esimerkiksi alla olevassa HTML-koodissa on H1-tagi, joka sisältää EM-tagin:

Tämä on iso otsikko

EM-elementti on H1-elementin lapsi, ja kaikki H1: n perimäsi tyylit välitetään myös EM-tekstille. Esimerkiksi:

h1 {font-size: 2em; }

Koska kirjasinkoon omaisuus on peritty, teksti "Big" (joka on EM-tunnisteiden sisällä) on sama koko kuin muualla H1. Tämä johtuu siitä, että se perii CSS-ominaisuuden arvon.

Kuinka käyttää CSS-perintöä?

Helpoin tapa käyttää sitä on perehtyä sellaisiin CSS-ominaisuuksiin, jotka ovat ja joita ei ole peritetty. Jos omaisuus on peritty, niin tiedät, että arvo säilyy jokaiselle asiakirjan jokaiselle lapselle.

Paras tapa käyttää tätä on asettaa perustyylit hyvin korkealle tasolle, kuten BODY. Jos määrität fonttiperheesi kehon ominaisuuksiin, perintöoikeuden ansiosta koko asiakirja pitää sisällään saman fontin perheen. Tämä tosiasiallisesti tekee pienemmistä tyyleistä, jotka ovat helpommin hallinnoitavissa, koska yleistyyliä on vähemmän. Esimerkiksi:

body {font-family: Arial, sans-serif; }

Käytä Inherit Style -arvoa

Jokainen CSS-ominaisuus sisältää arvon "periä" mahdollisena vaihtoehtona. Tämä kertoo Web-selaimelle, että vaikka omaisuutta ei tavallisesti periteta, sen arvon pitäisi olla sama kuin vanhempi. Jos määrität tyyliä, kuten marginaalia, jota ei ole peritetty, voit käyttää periä arvoa myöhemmissä ominaisuuksissa, jotta ne saisivat samalla marginaalin kuin vanhemman. Esimerkiksi:

elin {marginaali: 1em; } p {margin: inherit; }

Perintö käyttää laskennallisia arvoja

Tämä on tärkeää perinnöllisille arvoille, kuten fonttikoot, jotka käyttävät pituuksia. Laskettu arvo on arvo, joka on suhteessa johonkin toiseen arvoon verkkosivulla.

Jos olet asettanut BODY-elementin fonttikokoa 1em, koko sivusi ei ole vain yhden kokoinen. Tämä johtuu siitä, että elementit kuten otsikot (H1-H6) ja muut elementit (jotkut selaimet laskevat taulukon ominaisuuksia eri tavoin) ovat suhteellisen kooltaan selaimessa. Jos muita fonttikokoa koskevia tietoja ei ole, Web-selain tekee aina H1-otsikon suurimman tekstin sivulla, sen jälkeen H2 ja niin edelleen. Kun asetat BODY-elementtesi tiettyyn kirjasinkokoon, sitä käytetään "keskimääräisenä" fonttikokoisena, ja otsikon elementit lasketaan siitä.

Huomautus perintö- ja taustaominaisuuksista

Useita listattuja tyylejä ei ole peritty CSS 2: ssa W3C: ssä, mutta Web-selaimet peri vielä arvot. Jos esimerkiksi kirjoitit seuraavan HTML: n ja CSS: n: