CSS
Tutorial CSS: Herencia y cascada
CSS herencia cascada: técnicas y ejemplos. Aprende técnicas de herencia y cascada en CSS con ejemplos prácticos y detallados.
Aprende CSS GRATIS y certifícate¿Qué es la herencia en CSS?
En CSS, la herencia es el mecanismo por el cual algunas propiedades estilísticas de un elemento se transfieren automáticamente a sus elementos hijos. Este comportamiento imita la herencia en sistemas biológicos y de datos, donde características específicas se transmiten de padres a hijos.
No todas las propiedades en CSS son heredadas de forma predeterminada. Solo las propiedades que tienen sentido lógico ser heredadas presentan este comportamiento. Ejemplos comunes de propiedades heredadas incluyen: color
, font-family
, line-height
, visibility
, y text-align
, entre otras.
Para ilustrar la herencia, consideremos un caso donde tenemos un elemento <div>
con un párrafo <p>
dentro de él:
<div style="color: blue;">
<p>Este texto será azul debido a la herencia de la propiedad 'color'.</p>
</div>
La propiedad color
aplicada al <div>
se hereda por el <p>
. Sin embargo, si definimos una propiedad como margin
en el <div>
, no será heredada por el <p>
, ya que las propiedades de posicionamiento y dimensionamiento no son hereditarias.
Cabe destacar que cuando una propiedad no heredada necesita ser aplicada de manera explícita a los elementos hijos, se pueden usar valores como inherit
, initial
o unset
, permitiendo un control más granular del comportamiento de herencia.
En términos técnicos, la herencia puede ser manejada de manera predecible y efectiva mediante la comprensión de las hojas de estilo en cascada (CSS), que funcionan siguiendo un modelo ordenado, mezclando reglas y selectores específicos para determinar el estilo final aplicado a un elemento.
Uso de herencia con inherit, initial, unset
En CSS, los valores inherit
, initial
y unset
son útiles para controlar y manejar la herencia de propiedades de una manera más precisa y manejable.
inherit
El valor inherit
fuerza a que una propiedad tome el mismo valor que la misma propiedad en su elemento padre. Utilizar inherit
es particularmente útil cuando necesitas asegurarte de que una propiedad específica se herede, a pesar de no ser inherentemente hereditaria.
Ejemplo:
<style>
.padre {
color: red;
}
.hijo {
color: inherit;
}
</style>
<div class="padre">
<p class="hijo">Este texto será rojo debido a la propiedad 'color: inherit;'.</p>
</div>
En este caso, aunque color
es una propiedad heredada, forzamos su herencia explícitamente utilizando inherit
.
initial
El valor initial
restablece una propiedad a su valor por defecto definido por la especificación CSS. Es útil cuando quieres eliminar cualquier valor heredado o computado y usar el valor inicial definido en el estándar CSS.
Ejemplo:
<style>
.padre {
color: blue;
}
.hijo {
color: initial;
}
</style>
<div class="padre">
<p class="hijo">Este texto será del color por defecto del agente de usuario.</p>
</div>
En este fragmento, el color
del <p>
se establece al valor inicial por defecto del navegador, ignorando el color azul del elemento padre.
unset
El valor unset
combina comportamientos de inherit
y initial
. Para propiedades que se heredan por defecto, unset
actúa como inherit
, mientras que para propiedades no hereditarias se comporta como initial
.
Ejemplo:
<style>
.padre {
color: green;
margin: 20px;
}
.hijo {
color: unset;
margin: unset;
}
</style>
<div class="padre">
<p class="hijo">Este texto será del color por defecto del agente de usuario y sin margen adicional.</p>
</div>
En este ejemplo, la propiedad color
en el <p>
actúa como initial
, adoptando el valor por defecto del navegador, mientras que margin
también se restablece a su valor inicial (generalmente 0
).
Estos valores (inherit
, initial
, unset
) son herramientas esenciales para manejar y personalizar la herencia en hojas de estilo en cascada, proporcionando un control granular sobre cómo se aplican las propiedades a los elementos del DOM y asegurando un diseño más predictivo y manejable.
¿Qué es cascada en CSS?
La cascada en CSS es el mecanismo que el navegador web utiliza para resolver conflictos cuando múltiples reglas CSS afectan a un mismo elemento. Este mecanismo tiene en cuenta la especificidad, fuente de origen y el orden de aparición de las reglas para determinar cuál aplicar. Las reglas CSS pueden provenir de diferentes fuentes, incluyendo estilos de usuario, estilos del autor y estilos del navegador (o agente de usuario).
Especificidad
La especificidad es un peso calculado que determina qué reglas tienen más importancia cuando hay conflictos. Los selectores tienen diferentes niveles de especificidad, y una regla más específica prevalecerá sobre una menos específica:
- Selectores de tipo (
p
,div
,span
): baja especificidad. - Selectores de clase (
.class
) y pseudo-clases (:hover
): media especificidad. - Selectores de ID (
#id
): alta especificidad.
Una regla con un selector de ID es más específica y, por tanto, tendrá prioridad sobre una regla con un selector de clase o de tipo.
Ejemplo:
<style>
p { color: blue; } /* Especificidad: 1 (selector de tipo) */
.texto { color: red; } /* Especificidad: 10 (selector de clase) */
#importante { color: green; } /* Especificidad: 100 (selector de ID) */
</style>
<p id="importante" class="texto">Este texto será verde debido a la mayor especificidad del selector de ID.</p>
Fuente de origen
Las fuentes de origen de las reglas CSS pueden ser:
- Hojas de estilo del navegador (predeterminadas del agente de usuario).
- Hojas de estilo del usuario (especificadas por el usuario final).
- Hojas de estilo del autor (especificadas en el documento o vinculadas externamente).
Las reglas de estilo del autor tienen mayor prioridad que las del usuario, y estas últimas tienen mayor prioridad que las predeterminadas del navegador.
Orden de las reglas
Cuando las reglas tienen la misma especificidad y provienen del mismo origen, el orden en el que aparecen en la hoja de estilos es crucial. La última regla en el orden de aparición prevalecerá.
Ejemplo:
<style>
.texto { color: red; }
.texto { color: blue; }
</style>
<p class="texto">Este texto será azul debido a que la última regla prevalece.</p>
Importancia (!important)
La declaración !important
se utiliza para aplicar máxima prioridad a una regla, incluso sobre reglas anteriores con mayor especificidad o de diferentes orígenes.
Ejemplo:
<style>
.texto { color: red !important; }
#importante { color: blue; }
</style>
<p id="importante" class="texto">Este texto será rojo debido al uso de !important en la regla de clase.</p>
La cascada en CSS proporciona un sistema ordenado y predecible para manejar múltiples reglas que pueden aplicarse a un mismo elemento, asegurando un control granular y preciso sobre los estilos finales renderizados en el navegador.
Especificidad de cascada en selectores
La especificidad de los selectores en CSS juega un papel crucial en la resolución de conflictos de estilos cuando múltiples reglas se aplican a un mismo elemento. La especificidad es una medida que determina qué regla CSS se aplica sobre otra cuando existen conflictos.
El valor de especificidad se calcula con base en un sistema de puntos basado en los componentes del selector. La sintaxis CSS categoriza los selectores en varios niveles de especificidad:
- Selectores de tipo (elementos), pseudo-elementos: Añaden 1 punto por cada selector.
- Selectores de clase, pseudo-clases, atributos: Añaden 10 puntos por cada selector.
- Selectores de ID: Añaden 100 puntos por cada selector.
- Selectores inline: Tienen una especificidad de 1000 puntos.
- Selectores universales y combinadores : No añaden puntos de especificidad.
El valor de especificidad es la suma de los puntos de todas las categorías arriba mencionadas en el orden descrito.
Ejemplos para comprensión:
<style>
div { color: blue; } /* Especificidad: 0001 */
.class { color: green; } /* Especificidad: 0010 */
#id { color: red; } /* Especificidad: 0100 */
div .class #id { color: black; } /* Especificidad: 0111 (sumatoria de especificidades) */
!important { color: yellow; } /* Máxima especificidad debido a !important */
</style>
<div id="example" class="class-example">Texto</div>
En este ejemplo, el texto tendrá color rojo ya que el selector de ID (#id) de mayor especificidad sostendría más peso. Si aplicamos !important
en otra declaración, alteraría esta prioridad:
<style>
.class { color: green !important; } /* Especificidad con !important */
</style>
El color del texto sería verde debido al uso de !important
.
La especificidad también considera el origen de las hojas de estilo: estilos del autor, del usuario y del navegador. La prioridad sigue el mismo orden, con los estilos en línea (style
atributo) y la declaración !important
sobrescribiendo otros estilos:
<style>
#example { color: purple; }
</style>
<div id="example" class="class-example" style="color: orange;">Texto</div>
El texto será naranja porque los estilos inline tienen una especificidad de 1000 puntos, sobrescribiendo el ID.
Finalmente, el orden de aparición es relevante cuando los selectores tienen idéntica especificidad. Las últimas reglas especificadas en el código prevalecen sobre las anteriores:
<style>
.text { color: brown; }
.text { color: pink; } /* Esta regla sobrescribirá la anterior debido a su posición */
</style>
<p class="text">Texto</p>
El texto será rosa.
La especificidad de cascada en selectores es esencial para entender cómo las reglas CSS se aplican y se solucionan en casos de conflicto, asegurando que los desarrolladores puedan gestionar los estilos de manera precisa y efectiva en sus aplicaciones web.
Ejercicios de esta lección Herencia y cascada
Evalúa tus conocimientos de esta lección Herencia y cascada con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja Y Posicionamiento
Propiedades De Posicionamiento
Modelo Caja Y Posicionamiento
Propiedad 'Display'
Modelo Caja Y Posicionamiento
Elementos 'Float' Y 'Clear'
Modelo Caja Y Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox Y Grid
Css Grid Para Crear Layouts Y Estructuras
Flexbox Y Grid
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
Introducción A Tailwind Css
Introducción Y Entorno
Instalación De Tailwind Css
Introducción Y Entorno
Fundamentos Del Sistema De Utility-first En Tailwind Css
Fundamentos
Fundamentos Del Diseño Responsive En Tailwind Css
Fundamentos
Tipografía Y Fuentes En Tailwind Css
Clases De Utilidad
Clases De Tamaño De Tailwind Css
Clases De Utilidad
Utilidades De Espaciado Y Alineación De Tailwind Css
Clases De Utilidad
Clases De Colores Y Fondo De Tailwind Css
Clases De Utilidad
Clases De Bordes De Tailwind Css
Clases De Utilidad
Hover, Focus Y Estado De Tailwind Css
Clases De Utilidad
Transiciones Y Animaciones De Tailwind Css
Clases De Utilidad
Contenedores Y Columnas En Tailwind Css
Layout
Flexbox En Tailwind Css
Layout
Grid En Tailwind Css
Layout
Conocimiento General De Tailwind Css - Evaluación Multirespuesta
Evaluación
Conocimiento General De Tailwind Css - Evaluación Código
Evaluación
Certificados de superación de CSS
Supera todos los ejercicios de programación del curso de CSS y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender el concepto de herencia en CSS y cómo afecta a las propiedades de los elementos.
- Aprender a utilizar los valores
inherit
,initial
, yunset
para gestionar la herencia. - Entender el mecanismo de la cascada en CSS para resolución de conflictos de estilos.
- Calcular la especificidad de diferentes tipos de selectores.
- Aplicar la declaración
!important
y entender su impacto en la prioridad de estilos. - Reconocer las fuentes de origen de las reglas CSS y su orden de prioridad.