Estilos en cascada en CSS
Cuando tenemos dos o más reglas que se aplican a un mismo elemento el navegador tiene que decidir cual de ellas va a aplicar.
Vamos a tener en cuenta tres tipos de hojas de estilos: hojas de estilo de autor o diseñador, hojas de estilo de usuario y hojas de estilo del navegador. Por defecto los navegadores tienen unas hojas de estilo predefinidas estas son las hojas de estilo de navegador. En los navegadores nosotros podemos añadir nuestras propias hojas de estilo independientemente de las páginas, estas son las hojas de estilo de usuario y las hojas de estilo que aplicamos a una página web se conocen como hojas de estilo de usuario.
Cada navegador tiene sus propias hojas de estilo y te permite añadir tus propias hojas de usuario de forma diferente dependiendo de cada navegador. El orden que se va a seguir para aplicar las hojas de estilo es el siguiente:
- Estilos de usuario etiquetados como !important
- Estilos de autor/diseñador etiquetados como !important
- Estilos de autor/diseñador
- Estilos de usuario
- Estilos aplicados por el navegador
Hay tres elementos que indican el orden de preferencia a la hora de aplicar las hojas de estilo: La importancia, la especificidad y el orden en las fuentes.
La importancia
Indica que este estilo prevalece sobre estilos similares. Se representa con !important. Si tenemos dos estilos y uno de ellos tiene un !important aplicamos este. Se añade a nuestra hoja de estilos como si fuese un atributo más.
Ejemplo:
<style>
td{
color: red !important;
}
td.celda{
color:blue;
background-color:green;
}
</style>
<body>
<table border="1">
<tr>
<td class="celda">Celda roja por el important y fondo verde</td>
<td>celda roja
</tr>
</table>
</body>
Pruébalo
Especificidad
Si nos encontramos un selector al que se le aplican varios estilos la regla de especificidad es la que nos va a determinar cual de ellos se le va a aplicar. Se trata de mecanismo matemático que mediante puntuaciones te determina que hoja de estilos se aplica.
1. Hoja de estilo local. 1,0,0,0 ( vamos a pensar en 1000 puntos para entenderlo mejor)Ejemplo: <h1 style="color: #fff;">
2. Identificador. 0,1,0,0 (100 puntos)Ejemplo: #parrafo
3. Clase, pseudoclases o selector de atributo. 0,0,1,0 (10 puntos)Ejemplo: .parrafo, [lang], :hover o :focus
4. Elemento (etiqueta) y pseudoelementos. 0,0,0,1 (1 punto).Ejemplo: p, :before o :after.
Nota: El selector universal no tiene etiqueta.
Vamos a aplicar lo anterior al siguiente ejemplo.
<style>
h1 { color: red }
div#contenedor h1 { color:green }
#contenedor h1 { color:blue }
</style>
<div id="contenedor">
<h1 style="color:yellow">Esto es un TÃtulo
</div>
Pruébalo
Vamos a tener 4 reglas y vamos a calcular la especificidad de cada una de ellas:
1.- h1: 0,0,0,1 (1 punto, etiqueta h1)
3.- div#contenedor h1: 0,1,0,2 (102 puntos, 1 de la etiqueta div, 100 del identificador contenedor y 1 de la etiqueta h1)
2.- #contenedor h1: 0,1,0,1 (101 puntos, 100 del identificador contenedor y 1 de la etiqueta h1).
4.- style="color:yellow": 1,0,0,0 (1000 puntos de la la hoja de estilos local).
Por lo tanto vamos a aplicar la cuarta regla y nuestro tÃtulo será de color amarillo. Si quitamos esta regla aplicaremos la regla segunda y nuestro tÃtulo será de color verde.
El orden
Pero, ¿ qué ocurre cuando tenemos la misma especificidad para dos reglas e incluso la misma importancia ?. Podemos hablar de una regla adicional que es la siguiente: lo último que se lee es lo que se aplica.
Ejemplo:
<style>
a.enlace {color:blue}
a.enlace{color:green}
</style>
<body>
<div> <p> <a href="enlace.html" class="enlace"> Este un enlace verde</div>
Pruébalo
Ejemplo:
<style>
div p a.enlace {color:red !important;}
body div a.enlace{color:blue !important;}
</style>
<body>
<div> <p> <a href="enlace.html" class="enlace"> Este es un enlace azul</a></p></div>
</body>
Pruébalo
En el ejemplo anterior tenemos que ambos son importantes y tienen la misma especificidad 0,0,1,2. En este caso se aplicará la regla al último y nuestro párrafo será de color azul.