11.1 Cascada (Cascading)
Los principios básicos de CSS incluyen cascada, herencia y especificidad. Entender estos principios ayuda a tener un mejor control sobre el estilo y la apariencia de las páginas web.
Cascada (Cascading)
La cascada es el principio básico de CSS que determina cómo aplicar estilos cuando varias reglas entran en conflicto. Al aplicar la cascada, el navegador sigue estas reglas para resolver conflictos:
- Orden de las fuentes: los estilos pueden ser definidos en diferentes lugares — hojas de estilo externas (archivos CSS), hojas de estilo internas (dentro de la etiqueta
<style>) y estilos embebidos (en el atributostyledel elemento HTML). Las reglas se aplican en el orden en el que aparecen. - Especificidad: cada selector tiene su nivel de especificidad. Cuanto mayor sea la especificidad del selector, mayor será su prioridad.
- Importancia (Importance): las reglas con la directiva
!importanttienen la más alta prioridad y se aplican incluso si hay otras reglas en conflicto.
Ejemplo de cascada:
En este ejemplo el color de fondo será amarillo, ya que el estilo embebido tiene prioridad sobre el estilo interno. El color del texto será rojo, ya que el estilo embebido tiene prioridad sobre el interno.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de cascada CSS</title>
<style>
body {
background-color: lightblue; /* Estilo interno */
}
p {
color: green;
}
</style>
</head>
<body style="background-color: yellow;"> <!-- Estilo embebido -->
<p style="color: red;">Ejemplo de cascada CSS</p>
</body>
</html>
11.2 Herencia (Inheritance)
La herencia es el proceso por el cual los elementos hijos adoptan los estilos de sus elementos padres. No todas las propiedades de CSS se heredan. Las propiedades heredadas incluyen el color del texto, la familia de fuentes, el interlineado y algunas otras.
Ejemplo de herencia:
En este ejemplo el elemento <p> hereda la fuente y el color del elemento <body>, y el tamaño de fuente de la clase .container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de herencia CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<p>Este texto hereda la fuente y el color del body, y el tamaño de fuente de ".container".</p>
</div>
</body>
</html>
11.3 Especificidad (Specificity)
La especificidad determina qué regla CSS se aplicará a un elemento cuando varias reglas coinciden con el mismo elemento. La especificidad se calcula en función de la cantidad y los tipos de selectores en la regla.
Reglas de cálculo de especificidad:
- Los estilos embebidos (inline styles) tienen la especificidad más alta
- Los identificadores (selectors by ID) tienen más especificidad que las clases, pseudoclases y atributos
- Las clases, pseudoclases y atributos tienen más especificidad que los elementos y pseudoelementos
- Los elementos y pseudoelementos tienen la especificidad más baja
Ejemplo de cálculo de especificidad:
En este ejemplo el texto será rojo, ya que el selector #unique tiene la especificidad más alta.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de especificidad CSS</title>
<style>
p {
color: blue; /* Especificidad 0-0-0-1 */
}
.highlight {
color: green; /* Especificidad 0-0-1-0 */
}
#unique {
color: red; /* Especificidad 0-1-0-0 */
}
</style>
</head>
<body>
<p class="highlight" id="unique">Este texto será rojo.</p>
</body>
</html>
11.4 Importancia (Importance)
CSS permite a los desarrolladores especificar explícitamente la prioridad de los estilos mediante la directiva !important. Las reglas con esta directiva se aplicarán sin importar la especificidad de otras reglas.
Ejemplo de uso de !important:
En este ejemplo el texto será azul, porque la regla con !important tiene la más alta prioridad.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de !important en CSS</title>
<style>
p {
color: blue !important;
}
.highlight {
color: green;
}
</style>
</head>
<body>
<p class="highlight">Este texto será azul por "!important".</p>
</body>
</html>
11.5 Ejemplos de uso de principios CSS
Ejemplos de uso de principios CSS en tareas reales.
Ejemplo de cascada y especificidad:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de cascada y especificidad CSS</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
}
.important {
color: red;
}
</style>
</head>
<body>
<p class="important">Este texto será rojo, porque .important tiene mayor especificidad que "p".</p>
</body>
</html>
Ejemplo de herencia y especificidad:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de herencia y especificidad CSS</title>
<style>
body {
font-family: Arial, sans-serif;
color: blue;
}
.container {
color: green; /* Sobrescribe el color del body para todos los elementos hijos */
}
.highlight {
color: red; /* Tiene mayor especificidad que .container */
}
</style>
</head>
<body>
<div class="container">
<p class="highlight">Este texto será rojo debido a la especificidad de la clase ".highlight".</p>
</div>
</body>
</html>
GO TO FULL VERSION