Hvernig virkar CSS Erfðir í vefritum

Mikilvægur þáttur í að stilla vefsíðu með CSS er að skilja hugtakið arfleifð.

CSS arfleifð er sjálfkrafa skilgreind með stíl eignarinnar sem notuð er. Þegar þú horfir upp á stíllinn á bakgrunni, þá sérðu hluta sem heitir "Erfðir". Ef þú ert eins og flestir vefhönnuðir, hefur þú hunsað þann hluta, en það virkar í þeim tilgangi.

Hvað er CSS Erfðir?

Hver þáttur í HTML skjali er hluti af tré og hvert frumefni nema upphaflegt frumefni er með foreldrahluta sem umlykur hana. Hvaða stíll er beitt á það foreldraefni er hægt að beita á þá þætti sem fylgja með því ef eignirnar eru þær sem hægt er að erfða.

Til dæmis hefur þessi HTML kóða hér að neðan H1-merkið sem umlykur EM-merkið:

Þetta er Stór Fyrirsögn

EM-þátturinn er barn H1-þáttarins, og allir stíll á H1 sem erftur verður sendur áfram í EM-textann eins og heilbrigður. Til dæmis:

h1 {leturstærð: 2em; }

Þar sem leturstærðin er arfgengur, þá mun textinn sem segir "Stór" (sem er fylgir innan EM-merkjanna) vera í sömu stærð og restin af H1. Þetta er vegna þess að það erft gildi sem sett er í CSS eigninni.

Hvernig á að nota CSS arfleifð

Auðveldasta leiðin til að nota það er að kynnast CSS eiginleika sem eru og eru ekki arfgengir. Ef eignin er arf, þá veistu að verðmæti verður það sama fyrir hvert barnalag í skjalinu.

Besta leiðin til að nota þetta er að setja grunnstíllin á mjög háu stigi, eins og líkaminn. Ef þú stillir leturgerðina þína á líkamanum, þá, þökk sé arfleifð, mun allt skjalið halda sama leturgerð. Þetta mun raunverulega gera fyrir smærri stíllblöð sem auðveldara er að stjórna því það eru færri almennar stíll. Til dæmis:

líkami {font-family: Arial, sans-serif; }

Notaðu arfgerðarmörkina

Sérhver CSS eign inniheldur gildi "arf" sem hugsanleg valkostur. Þetta segir frá vafranum, að jafnvel þótt eignin væri venjulega ekki arf, ætti hún að hafa sama gildi og foreldrið. Ef þú stillir stíl eins og framlegð sem er ekki arfgengur, getur þú notað arfvirðið á síðari eignum til að gefa þeim sömu hæð og foreldri. Til dæmis:

líkami {framlegð: 1em; } p {framlegð: erfa; }

Erfðir nota tölvutengd gildi

Þetta er mikilvægt fyrir erfða gildi eins og leturstærð sem notar lengd. A reiknað gildi er gildi sem er miðað við annað gildi á vefsíðunni.

Ef þú stillir leturstærð 1em á líkama þinn, þá mun heildarsíðan þín ekki vera aðeins 1 í stærð. Þetta er vegna þess að þættir eins og fyrirsagnir (H1-H6) og aðrir þættir (nokkrar vafrar reikna borð eiginleika á annan hátt) hafa hlutfallslega stærð í vafranum. Ef ekki er um aðrar upplýsingar um leturstærð að ræða, mun vafrinn alltaf gera H1 fyrirsögn stærsta texta á síðunni, síðan H2 og svo framvegis. Þegar þú setur líkama þinn í ákveðinn leturstærð, þá er það notað sem "meðaltal" leturstærð, og fyrirsögnin eru reiknuð út frá því.

A athugasemd um erfðir og bakgrunnur eignir

There ert a tala af stíll sem er skráð hefur ekki erft í CSS 2 á W3C, en vefur flettitæki arf enn gildi. Til dæmis, ef þú skrifaðir eftirfarandi HTML og CSS: