Herencia CSS

 

 

 

Herencia css 1

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-familya cada etiqueta de tu página. Configuras la bodyfuente de la etiqueta y todos los elementos secundarios la heredan, junto con otras propiedades.

La background-colorpropiedad, 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 revertpalabra 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 inherity revertque 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:

  1. Manejo de errores CSS
  2. Importar un archivo CSS usando @import
  3. Bordes CSS
  4. 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

 

Herencia css 1
Herencia css 1

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

 

 

Update cookies preferences