Com funciona l'herència CSS en documents web

Una part important de dissenyar un lloc web amb CSS és entendre el concepte d'herència.

L' herència CSS es defineix automàticament per l'estil de la propietat que s'utilitza. Quan busqueu el color de fons de la propietat d'estil, veureu una secció titulada "Herència". Si ets com la majoria dels dissenyadors web, heu ignorat aquesta secció, però serveix per a un propòsit.

Què és l'herència CSS?

Cada element d'un document HTML forma part d'un arbre i cada element, excepte l'element inicial , té un element primari que el conté. Independentment dels estils que s'apliquen a aquest element primari es pot aplicar als elements que hi figuren si les propietats són aquelles que es poden heretar.

Per exemple, aquest codi HTML a continuació té una etiqueta H1 que inclou una etiqueta EM:

Aquest és un títol Grans

L'element EM és un element secundari de l'element H1, i els estils de l'H1 heretats també es transmetran al text de l'EM. Per exemple:

h1 {font-size: 2em; }

Atès que la propietat de mida de font s'hereta, el text que diu "Big" (que està tancat dins de les etiquetes EM) tindrà la mateixa mida que la resta de l'H1. Això es deu a que hereta el valor establert a la propietat CSS.

Com s'utilitza l'herència CSS

La forma més senzilla d'utilitzar-la és familiaritzar-se amb les propietats CSS que no són heretats. Si la propietat hereta, sabeu que el valor seguirà sent el mateix per a tots els elements secundaris del document.

La millor manera d'utilitzar-ho és establir els estils bàsics en un element d'alt nivell, com ara el COS. Si configureu la font-family en la propietat del cos, llavors, gràcies a l'herència, tot el document mantindrà aquesta mateixa font-family. Això farà que els fulls d'estil més petits siguin més fàcils de gestionar perquè hi ha menys estils globals. Per exemple:

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

Utilitzeu el valor del valor hereditari

Cada propietat CSS inclou el valor "heretar" com una opció possible. Això indica al navegador web que, fins i tot si la propietat normalment no s'hereta, hauria de tenir el mateix valor que el pare. Si configureu un estil com ara un marge que no s'hereta, podeu utilitzar el valor hereditari en propietats posteriors per donar-los el mateix marge que el pare. Per exemple:

cos {marge: 1em; } p {margin: inherit; }

L'herència utilitza els valors computats

Això és important per als valors heretats com mides de lletra que usen longituds. Un valor computat és un valor relatiu a algun altre valor de la pàgina web.

Si heu establert una mida de font de 1em al vostre element BODY, la vostra pàgina sencera no tindrà talla única. Això és degut a que elements com a encapçalaments (H1-H6) i altres elements (alguns navegadors calculen les propietats de la taula d'una altra manera) tenen una mida relativa al navegador web. A falta d'informació addicional sobre la mida de la font, el navegador web farà sempre un títol H1 el text més gran de la pàgina, seguit d'H2 i així successivament. Quan configureu el vostre element BODY a una mida de lletra específica, s'utilitza com a mida de lletra "mitjana", i els elements titulars es calculen a partir d'aquesta.

Una nota sobre herències i propietats de fons

Hi ha diversos estils que no figuren a CSS 2 al W3C, però els navegadors web encara hereten els valors. Per exemple, si escriviu els següents HTML i CSS: