El valor inherit

martes, 24 de junio de 2014

Muchas de las propiedades CSS heredan su valor "de padres a hijos", lo que permite no tener que establecer el valor de todas las propiedades CSS para todos los elementos de la página.

En el siguiente ejemplo, se muestra un párrafo que contiene en su interior un elemento <em> y otro elemento<strong>. Si se define el color de la letra del párrafo, los elementos <em> y <strong> se mostrarán del mismo color (salvo que definan otro color de forma explícita) ya que el color de la letra se hereda:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Para el resto de propiedades CSS que por defecto no se heredan, se puede utilizar el valor inherit para forzar a que se produzca la herencia automática. En el siguiente ejemplo, se establece un estilo discontinuo al borde superior del primer <div>. Como la propiedad border-top-style no se hereda, el <div> interior no mostrará ese tipo de borde:
div { border-top-style: dashed; }
El estilo del borde no se hereda
Utilizando el valor inherit, es posible forzar a que el <div> interior muestre el mismo estilo de borde que el<div> que lo encierra:
div { border-top-style: dashed; }
div { border-top-style: inherit; }
El valor inherit también se puede utilizar para que los enlaces muestren el mismo color de letra que el párrafo en el que se encuentran:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, [color:inherit] consectetuer adipiscing elit.
Para saber si el valor de una propiedad se hereda o no, puedes consultar la tabla de características que se incluye en la definición de cada propiedad CSS de esta referencia.