Hoe CSS erfenis werk in webdokumente

'N belangrike deel van die stilering van 'n webwerf met CSS is die begrip van erfenis te verstaan.

CSS erfenis word outomaties gedefinieer deur die styl van die eiendom wat gebruik word. As jy die agtergrondkleur van die styleiendom opkyk, sal jy 'n afdeling genaamd "Erfenis" sien. As jy soos die meeste webontwerpers is, het jy daardie gedeelte geïgnoreer, maar dit dien 'n doel.

Wat is CSS erfenis?

Elke element in 'n HTML-dokument is deel van 'n boom en elke element behalwe die aanvanklike -element het 'n ouerelement wat dit omsluit. Wat ook al die style wat op die ouer element toegepas word, kan toegepas word op die elemente wat daarin ingesluit is, as die eienskappe een is wat geërf kan word.

Byvoorbeeld, hierdie HTML-kode hieronder het 'n H1-kode wat 'n EM-tag bevat:

Dit is 'n Groot -opskrif

Die EM-element is 'n kind van die H1-element, en enige style op die H1 wat geërf word, sal ook aan die EM-teks oorgedra word. Byvoorbeeld:

h1 (font-size: 2em; }

Aangesien die lettergrootte-eiendom geërf word, sal die teks wat sê "Groot" (wat ingesluit is in die EM-etikette) dieselfde grootte as die res van die H1 wees. Dit is omdat dit die waarde in die CSS-eiendom erwe.

Hoe om CSS erfenis te gebruik

Die maklikste manier om dit te gebruik, is om bekend te raak met die CSS eienskappe wat nie geërf word nie. As die eiendom geërf word, weet jy dat die waarde dieselfde bly vir elke kindelement in die dokument.

Die beste manier om dit te gebruik, is om jou basiese style op 'n baie hoëvlak element, soos die LIGGAAM, te stel. As jy jou fontfamilie op die liggaamseiendom stel, dan, danksy die erfenis, sal die hele dokument dieselfde fontfamilie hou. Dit sal eintlik vir kleiner style sheets maak wat makliker te bestuur is omdat daar minder algemene style is. Byvoorbeeld:

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

Gebruik die erwe styl waarde

Elke CSS-eiendom sluit die waarde "erf" in as 'n moontlike opsie. Dit vertel die webblaaier dat selfs die eiendom normaalweg nie geërf sal word nie, dit moet dieselfde waarde as die ouer hê. As jy 'n styl stel soos 'n marge wat nie geërf is nie, kan jy die erfwaarde van die volgende eienskappe gebruik om hulle dieselfde marge as die ouer te gee. Byvoorbeeld:

liggaam {marge: 1em; } p {marge: erf; }

Erfenis gebruik berekende waardes

Dit is belangrik vir geërfde waardes soos lettergroottes wat lengtes gebruik. 'N Berekende waarde is 'n waarde wat relatief is tot 'n ander waarde op die webblad.

As u 'n lettergrootte van 1em op u BODY-element stel, sal u hele bladsy nie almal net 1 in grootte wees nie. Dit is omdat elemente soos opskrifte (H1-H6) en ander elemente (sommige blaaiers verskillende tabel eienskappe anders bereken) 'n relatiewe grootte in die webblaaier het. In die afwesigheid van ander lettergrootte inligting, sal die webblaaier altyd 'n H1-opskrif die grootste teks op die bladsy maak, gevolg deur H2 en so aan. Wanneer jy jou BODY-element op 'n spesifieke fontgrootte stel, word dit as die "gemiddelde" lettergrootte gebruik, en die hoofelemente word daaruit bereken.

'N Nota oor erfenis en agtergrond eienskappe

Daar is 'n aantal style wat gelys word, nie in CSS 2 op die W3C geërf nie, maar die webblaaiers besit steeds die waardes. Byvoorbeeld, as jy die volgende HTML en CSS geskryf het: