Concepto de herencia en CSS

Concepto de herencia en CSS

5
(2)

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.

Concepto de herencia en CSS 1
Ejemplo de uso de la instrucción inherit.

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.

concepto herencia css
Ejemplo de uso de la instrucción initial de css

¿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 😉

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 2

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.