Como funciona CSS Inheritance en documentos web

Unha parte importante do estilo dun sitio web con CSS é comprender o concepto de herdanza.

A herdanza de CSS defínese automaticamente polo estilo da propiedade que se está a usar. Cando buscas a cor do fondo da propiedade do estilo, verás unha sección titulada "Herdanza". Se es como a maioría dos diseñadores web, ignorou esa sección, pero serve un propósito.

¿Que é o herdanza CSS?

Cada elemento dun documento HTML é parte dunha árbore e cada elemento excepto o elemento inicial ten un elemento primario que o inclúe. Calquera que sexa o estilo que se aplique a ese elemento primario pódese aplicar aos elementos incluídos nel se as propiedades son as que se poden herdar.

Por exemplo, este código HTML a continuación ten unha etiqueta H1 que inclúe unha etiqueta EM:

Este é un Big Título

O elemento EM é un fillo do elemento H1 e os estilos do H1 que son herdados tamén se transmitirán ao texto EM. Por exemplo:

h1 {font-size: 2em; }

Unha vez que a herdanza do tamaño de fonte herda, o texto que di "Big" (que é o que está dentro das etiquetas EM) será do mesmo tamaño que o resto do H1. Isto é porque herda o valor establecido na propiedade CSS.

Como usar herdanza CSS

O xeito máis sinxelo de utilizalo é familiarizarse coas propiedades de CSS que non son herdadas. Se a propiedade herdase, entón sabes que o valor seguirá sendo o mesmo para cada elemento secundario do documento.

A mellor forma de usar isto é configurar os estilos básicos nun elemento moi elevado, como o CORPO. Se configura a súa familia de fontes na propiedade do corpo, entón, grazas a herdanza, todo o documento manterá a mesma fonte-familia. Isto fará que as follas de estilo máis pequenas sexan máis fáciles de administrar porque hai menos estilos en xeral. Por exemplo:

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

Use o valor de herdanza do estilo

Cada propiedade CSS inclúe o valor "herdar" como unha opción posible. Isto di ao navegador web que, aínda que a propiedade normalmente non se herdase, debería ter o mesmo valor que o pai. Se configura un estilo como unha marxe que non se herdou, pode empregar o valor hereditario nas propiedades posteriores para darlles a mesma marxe que o pai. Por exemplo:

corpo {marxe: 1em; } p {marxe: herdar; }

Herdanza usa valores computables

Isto é importante para valores herdados como tamaños de letra que usan lonxitudes. Un valor computado é un valor relativo a algún outro valor na páxina web.

Se configura un tamaño de fonte de 1em no seu elemento CORPO, a súa páxina non só terá só 1em de tamaño. Isto ocorre porque elementos como títulos (H1-H6) e outros elementos (algúns navegadores calculan as propiedades da táboa de xeito diferente) teñen un tamaño relativo no navegador web. A falta doutros datos de tamaño de fonte, o navegador web fará sempre un título H1 o texto máis grande da páxina, seguido de H2 e así sucesivamente. Cando configura o seu elemento CORPO a un tamaño de fonte específico, entón emprégase como o tamaño da fonte "media" e os elementos de título están calculados a partir diso.

Unha nota sobre herdanzas e propiedades de fondo

Hai varios estilos que non se herdaron en CSS 2 no W3C, pero os navegadores web aínda herdan os valores. Por exemplo, se escribiu o seguinte HTML e CSS: