Cascada
La jerarquía en la estructura de CSS es una de sus más importantes características, y es además de donde toma su denominación de "cascading". La idea de cascada veine del efecto causado por el orden en que las propiedades son aplicadas a un elemento desde diferentes orígenes. Los tres orígenes posibles son, en orden de relevancia: el autor, el visitante y el navegador.
Las implicancias de este orden son muy pequeñas para los autores, ya que las definiciones de estilos que ellos declaren sólo pueden ser anuladas explícitamente por el usuario. Pero no debes olvidar el echo de que los atributos que no especifiques serán establecidos por el visitante o navegador (y los valores predeterminados de los navegadores pueden variar).
La regla "!important"
La otra variante que provee la propiedad de cascada es la regla "!important". Con esta regla los autores pueden cambiar el órden en que los estilos son aplicados: los estilos normales son siempre anulados por los estilos importantes.
La regla "!important" es aplicada a las propiedades al final de la declaración (antes del punto y coma) y separada del resto por un espacio.
p {
font-family: arial, helvetica;
font-size: 10px !important;
color: black;
}
font-family: arial, helvetica;
font-size: 10px !important;
color: black;
}
En el ejemplo anterior el tamaño de la letra es declarado con la regla "!important", por lo tanto, cualquier párrafo definido con estilos normales seguirá teniendo un tamaño de fuente de 10px (ya que esta declaración se aplica a todos los párrafos).
El orden de especificidad
El orden de especificidad tiene un mayor impacto en la forma que los autores aplican atributos a sus documentos. A diferencia de la propiedad de cascada, éste especifica el órden en que diferentes declaraciones (atributo "style", selectores ID, clases, etc.) toman precedencia.
La lista siguiente muestra el órden de especificidad usado para aplicar propiedades CSS a elementos HTML, desde el más específico al más global.
- El atributo "style" (por ejemplo,
<p style="...">). - Selectores ID (por ejemplo,
p#ayuda {...}). - Definición de clase específica (por ejemplo,
p.segundo {...}). - Definición de clase global (por ejemplo,
*.segundo {...}). - Definición de elemento (por ejemplo,
p {...}). - Definición global (por ejemplo,
* {...}).
En el siguiente ejemplo analizaremos la aplicación de diferentes definiciones de estilo a un solo elemento.
<html>
<head>
<title>Prueba</title>
<style type="text/css">
p {
font-family: arial,helvetica;
font-size: 10px;
color: black;
}
.importante {
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<p class="importante" style="font-weight: normal;">Algún texto</p>
</body>
</html>
<head>
<title>Prueba</title>
<style type="text/css">
p {
font-family: arial,helvetica;
font-size: 10px;
color: black;
}
.importante {
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<p class="importante" style="font-weight: normal;">Algún texto</p>
</body>
</html>
Las declaraciones con mayor orden de especificidad anula al resto. En el ejemplo anterior, el párrafo tendrá una fuente "arial, helvetica" y un color negro de las propiedades definidas para el elemento "p", pero no tendrá un tamaño de fuente de "10px" debido a que será anulada por la propiedad definida en la clase "importante" que es aplicada al elemento. Subsecuentemente, el elemento recibirá de la clase "importante" un tamaño de fuente de "12px" pero el espesor de la fuente "bold" será anulado por la propiedad definida en el atributo "style".
