Cuando escribimos un documento web existen muchas etiquetas que estarán anidadas las unas dentro de las otras.
¿Te imaginas tener que especificar una por una los estilos a cada una de las etiquetas?
De hacerlo nuestra hoja de estilos en cascada tendría una longitud considerable.
Para evitarlo existen ciertas etiquetas que «heredan» los estilos de sus etiquetas contenedoras.
De este modo se consiguen optimizar las hojas CSS y se facilita la maquetación del documento web.
Forzar la herencia
Hay muchas etiquetas que heredan estilos.
Por ejemplo si hacemos que el body pinte los textos de color azul, los párrafos también lo serán. Esto es la herencia.
Sin embargo existen etiquetas que no heredan estilos.
Hacer que los párrafos sean azules no hará que un enlace en su interior también lo sea.
En el ejemplo fijaros que el texto es azul pero el enlace no.
Esto se debe a que los enlaces no heredan estilos.
Para el enlace del segundo párrafo se ha creado una clase donde se indica color:inherit.
El enlace del segundo párrafo si hereda el color y aparece de color azul.
Para más claridad hemos forzado una negrita.
Observación: Si practicáis este ejemplo no lo hagáis con el color azul porqué es el color que el navegador fuerza por defecto a los enlaces.
Romper la herencia. Reinicializar estilos.
Existen ocasiones en las que lo mejor es hacer borrón y cuenta nueva.
Resetear todos los estilos.
Para ello utilizaremos la propiedad initial.
Veámoslo con propiedades que típicamente no se heredan: los márgenes, los rellenos (paddings) y los bordes.
En el ejemplo se observa un párrafo con un padding, un margin y un border. En el segundo párrafo se aplica una clase de nombre «noHeredar» al segundo párrafo para forzar la reinicialización a los estilos que vienen de serie en el navegador web.
¿Como saber que propiedades típicamente se heredan?
Se trata de una pregunta frecuente.
¿Como podemos saber que etiquetas heredan y cuales no?
En mi opinión lo mejor es la prueba y error.
En caso de duda lo mejor es un pequeño test con por ejemplo un border.
Aún así, si quieres estar 100% entonces hay que ir a bibliografía oficial
Pásate por:
¡Hola querido lector!
Hoy hemos visto el concepto de herencia.
El siguiente paso es estudiar el concepto de cascada.
¡Nos leemos en la siguiente entrada de este tutorial CSS!
Si tienes dudas… dímelo en los comentarios 😉
Deja una respuesta