Descubra qué significa la herencia CSS y por qué es importante
Cuando se establecen algunas propiedades en un selector en CSS, éstas son heredadas por todos los elementos secundarios de ese selector.
Dije algunos , porque no todas las propiedades muestran este comportamiento.
Esto sucede porque algunas propiedades tienen sentido que se hereden. Esto nos ayuda a escribir CSS de forma mucho más concisa, ya que no tenemos que volver a configurar explícitamente esa propiedad en cada elemento secundario.
Algunas otras propiedades tiene más sentido no heredarlos.
Piensa en las fuentes: no necesitas aplicarlas font-family
a cada etiqueta de tu página. Configuras la body
fuente de la etiqueta y todos los elementos secundarios la heredan, junto con otras propiedades.
La background-color
propiedad, por el contrario, no tiene mucho sentido si se hereda.
Propiedades que se heredan
A continuación se muestra una lista de las propiedades que sí se 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 obtuve de este interesante artículo de Sitepoint sobre la herencia de CSS. Korean Beauty
Forzar la herencia de las propiedades
¿Qué sucede si tienes una propiedad que no se hereda de forma predeterminada y quieres que se herede en un elemento secundario?
En los niños, establece el valor de la propiedad en la palabra clave especial inherit
.
Ejemplo:
body {background-color: yellow;}p { background-color: inherit;}
Forzar propiedades a NO heredar
Por el contrario, es posible que hayas heredado una propiedad y quieras evitarlo.
Puede utilizar la revert
palabra clave para revertirlo. En este caso, el valor se revierte al valor original que le asignó el navegador en su hoja de estilos predeterminada.
En la práctica, esto rara vez se utiliza y la mayoría de las veces simplemente se establece otro valor para la propiedad para sobrescribir ese valor heredado.
Otros valores especiales
Además de las palabras clave especiales inherit
y revert
que acabamos de ver, también puedes configurar cualquier propiedad para:
initial
: use la hoja de estilos predeterminada del navegador si está disponible. Si no, y si la propiedad hereda de manera predeterminada, herede el valor. De lo contrario, no haga nada.unset
: si la propiedad hereda por defecto, heredar. De lo contrario, no hacer nada.
Tips de CSS
Tal vez te puede interesar:
- Manejo de errores CSS
- Importar un archivo CSS usando @import
- Bordes CSS
- La propiedad flotante CSS y su limpieza
Herencia CSS
Propiedades que se heredanForzar la herencia de las propiedadesForzar propiedades a NO heredarOtros valores especiales
programar
es
https://aprendeprogramando.es/static/images/programar-herencia-css-1987-0.jpg
2024-10-31
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente