Sabemos que en CSS podemos anidar etiquetas, como se ejemplifica a continuación.
.
<body><main></main></body>.
Decimos que las etiquetas anidadas son hijas de la etiqueta que las contiene. En el ejemplo anterior la etiqueta main es hija de la etiqueta body o, lo que es lo mismo, la etiqueta body es padre de la etiqueta main.
.
La herencia ocurre cuando los estilos definidos para una etiqueta se aplican también a sus etiquetas hijas.
.
Por ejemplo, supongamos que tenemos la siguiente estructura en HTML.
.
<body><p>Texto que aparecerá en rojo</p></body>.
Luego aplicamos los siguientes estilos a body mediante código CSS.
.
body {
color: red;
}
.
El texto contenido en la etiqueta p se mostrará en rojo porque heredará la propiedad color de su padre, la etiqueta body.
No todas las propiedades de las etiquetas HTML pueden heredarse, sin embargo, podemos forzar que ocurra la herencia dando, en la etiqueta hija, alguno de los siguientes valores a la propiedad que deseamos heredar.
inherit:
- Hace referencia al valor de la misma propiedad en la etiqueta padre.
initial:
- Establece el valor default de esta propiedad.
unset:
- Hereda el valor del padre si está disponible, de lo contrario toma el valor default.
