Herencia CSS

Descubra qué significa la herencia CSS y por qué es importante

Cuando establece algunas propiedades en un selector en CSS, todos los elementos secundarios de ese selector las heredan.

yo dijealgunos, porque no todas las propiedades muestran este comportamiento.

Esto sucede porque algunas propiedades tienen sentido para ser heredadas. Esto nos ayuda a escribir CSS de forma mucho más concisa, ya que no tenemos que volver a establecer explícitamente esa propiedad en todos los niños.

Algunas otras propiedades tienen más sentido paranoser heredado.

Piense en las fuentes: no necesita aplicar elfont-familya cada etiqueta de su página. Tu estableces elbodytag font, y todos los hijos la heredan, junto con otras propiedades.

losbackground-colorla propiedad, por otro lado, tiene poco sentido para ser heredada.

Propiedades que heredan

Aquí hay una lista de las propiedades que heredan. La lista no es exhaustiva, pero esas reglas son solo las más populares que probablemente usará:

border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font-size-adjust
font-stretch
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
quotes
tab-size
text-align
text-align-last
text-decoration-color
text-indent
text-justify
text-shadow
text-transform
visibility
white-space
widows
word-break
word-spacing

Lo saqué de estobuen artículo de Sitepointsobre la herencia CSS.

Obligar a las propiedades a heredar

¿Qué sucede si tiene una propiedad que no se hereda de forma predeterminada y desea que lo sea en un hijo?

En los niños, establece el valor de la propiedad en la palabra clave especialinherit.

Ejemplo:

body {
	background-color: yellow;
}
p {
background-color: inherit;
}

Obligar a las propiedades a NO heredar

Por el contrario, es posible que tenga una propiedad heredada y desee evitarlo.

Puedes usar elrevertpalabra clave para revertirla. En este caso, el valor se revierte al valor original que le dio el navegador en su hoja de estilo predeterminada.

En la práctica, esto rara vez se usa, y la mayoría de las veces simplemente establecerá otro valor para la propiedad para sobrescribir ese valor heredado.

Otros valores especiales

Además deinherityrevertpalabras clave especiales que acabamos de ver, también puede establecer cualquier propiedad para:

initial: utilice la hoja de estilo predeterminada del navegador si está disponible. De lo contrario, y si la propiedad hereda por defecto, hereda el valor. De lo contrario, no hagas nada.
unset: si la propiedad hereda por defecto, hereda. De lo contrario, no hagas nada.