Concepto de herencia en CSS

Concepto de herencia en CSS

Print Friendly, PDF & Email
Concepto de herencia en CSS
Valora esta entrada
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.

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 😉

Entradas relacionadas:

Colores CSS para web
- 298
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 22
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
La propiedad overflow
- 16
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 57
Ejemplos prácticos y visuales dónde se muestran los posicionamientos static | absolute | relative | fixed | sticky. Incluye código CSS y HTML
Diferencia entre visibility:hidden; y display:none;
- 35
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
- 69
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 247
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Sintaxis CSS básica. Cómo se escribe el CSS.
- 130
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Dimensiones reales de una caja en CSS
- 113
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 220
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.