CSS
Herencia

Sintaxis

• propiedad: heredar;

Herencia automatica

La herencia es un mecanismo fundamental de CSS mediante el cual los valores computados de algunas propiedades de un elemento se aplican a sus 'hijos'. Esto es particularmente útil cuando desea establecer un estilo global para sus elementos en lugar de tener que establecer dichas propiedades para cada elemento de su marca.

Las propiedades comunes que se heredan automáticamente son: font , color , text-align , line-height .

Supongamos la siguiente hoja de estilo:

#myContainer {
  color: red;
  padding: 5px;
}

Esto aplicará color: red no solo al elemento <div> sino también a los elementos <h3> y <p> . Sin embargo, debido a la naturaleza del padding su valor no se heredará de esos elementos.

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>

Herencia forzada

Algunas propiedades no se heredan automáticamente de un elemento a sus hijos. Esto se debe a que normalmente se desea que esas propiedades sean únicas para el elemento (o selección de elementos) al que se aplica la propiedad. Estas propiedades comunes son el margin , el padding , el background , la display , etc.

Sin embargo, a veces la herencia se desea de todos modos. Para lograr esto, podemos aplicar el valor inherit a la propiedad que se debe heredar. El valor inherit se puede aplicar a cualquier propiedad CSS y cualquier elemento HTML.

Supongamos la siguiente hoja de estilo:

#myContainer {
  color: red;
  padding: 5px;
}
#myContainer p {
  padding: inherit;
}

Esto aplicará color: red a los elementos <h3> y <p> debido a la naturaleza hereditaria de la propiedad de color . Sin embargo, el elemento <p> también heredará el valor de padding de su padre porque se especificó.

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>