Herencia en CSS
El HTML está compuesto por una serie de etiquetas que se ordenan jerárquicamente. La herencia te permite que algunas de las propiedades aplicadas a un elemento padre se apliquen a los elementos jerárquicamente de nivel inferior. Por ejemplo:
En este ejemplo queremos que el párrafo y la cabecera sean de color rojo.
<body> <h1>Cabecera <p>Párrafo </body>
Esto se podría hacer de dos formas. Aplicando la hoja de estilos de color rojo al body:
body {color:red}
O bien, aplicando la hoja de estilos a los elementos h1 y p.
h1,p {color:red}
Esto es así porque la propiedad color se ha heredado de la etiqueta body a h1 y p que están en un nivel jerárquico inferior.
Hay propiedades como por ejemplo el borde que no se heredan. Si queremos que un elemento la herede tendríamos que forzar la herencia con el valor inherit.
Ejemplo:
En este ejemplo vemos que para que el párrafo tenga un borde lo tenemos que heredar de la etiqueta div que está en un nivel jerárquico superior.
<head>
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
}
div {
font-size: 14px;
color: blue;
border: 5px dotted red;
}
div p {
border: inherit;
}
</style>
</head><div>La capa contiene un <p>párrafo</p></div>
Pruébalo