Esta es la tercera clase del Curso de CSS3 desde 0, y va a ir centrada en las cascadas, en su importancia y especificidad. Tranquilos que ahora me adentro en explicar todo esto que os suena a chino. Confieso que a mi en su momento también, pero estudiando y practicando conseguí superarlo igual que vais a hacer vosotros.
Como ya sabéis, no escribo artículos, estas publicaciones solo tratan de a la vez que pongo a vuestra disposición mis conocimientos en estos lenguajes, me sirva de practica a mi mismo para dominar cada vez mejor los lenguajes. Por eso, no me alargo más y vamos a empezar a conocer que es todo esto de la cascada en CSS3.
La cascada en CSS3
La cascada en CSS3 se usa cuando hay 2 o más declaraciones, que afectan a un mismo elemento. Es decir, cuando tenemos más de dos reglas, que afectan a una misma etiqueta HTML. Cuando esto ocurre, la cascada determinará cual de ellas tiene mayor peso y la de mayor peso es la que se aplicará.
La cascada es el mecanismo que usa CSS para definir que regla será la ganadora, la regla ganadora que será la que se aplique cuando existan múltiples reglas que afectan un elemento. El único objetivo de la cascada, es encontrar una regla ganadora y para esto usa diferentes criterios, y aquí es donde vamos a empezar a divertirnos.
La forma de calcular el peso de una regla en CSS, no se realiza de forma arbitraria. CSS la calcula en base a 3 criterios que son los siguientes:
La importancia
Las declaraciones importantes son las declaraciones que van seguidas de una directiva llamada !important. Cualquier otra declaración sin !important es considerada declaración normal. Puedes acudir a La relevancia de los estilos en CSS3, donde ya hablamos de !important.
p{
font-size: 20px !important;
}
body p{
font-size: 6px;
}
En el ejemplo que acabas de ver, puedes comprobar que la regla donde hemos definido !important, es la que prevalece. Lo que os aconsejo, es que tengáis abierto vuestro Sublime Text con un documento html y una hoja de estilos. De esta manera estaréis practicando todo lo dicho aquí y se os quedara en la cabeza toda la información, la practica es la clave.
La especificidad
Lo que tratamos con esto es dar ordenes más especificas, la primera orden (o regla) recae en todos los elementos, pero la segunda orden (o regla) recae en todos los elementos menos el que estaba colocado primero, veamos el ejemplo.
p{
background: orange;
}
div.peligro p{
background: blue;
}
div#cuidado p{
background: green;
}
body#inicio div p{
background: yellow;
}
Y es aquí donde lo mismo os parece que os va a estallar la cabeza. Pero os lo voy a explicar de manera que lo vais a entender muy rápido y fácil.
div.peligro p dice que para todas las etiquetas <p> que están dentro de una etiqueta <div>, cuya clase es .peligro, quiero que el color de fondo sea blue. Por lo tanto esta regla es mas especifica y sobrescribe la primera.
div#cuidado p sobrescribe a las dos reglas anteriores. Esta regla ordena que se seleccionen las etiquetas <p> que están dentro de un <div> cuyo id es #cuidado.
body#inicio div p ordena que se seleccionen los párrafos <p> que están dentro de un <div> pero, que se encuentren dentro de <body> cuyo id es #inicio. Esta regla es más especifica y sobrescribe a todas las anteriores.
Existe una formula que yo utilizo y que os va a venir genial a la hora de escribir hojas de estilo complejas donde la especificidad juega un papel importante. Os aconsejo que os guardéis la siguiente imagen que contiene la formula, ya que en el futuro os va a venir muy bien. Clic derecho en la imágen, guardar imágen y os la guardáis veréis que bien os viene.
Vamos a ver como hacer los cálculos de especificidad con esta formula:
- ¿Es un estilo en linea?: En nuestra primera regla no porque tenemos definidos los estilos en una hoja de estilos. Con lo cual colocamos el valor 0, si hubiera sido un estilo en linea colocaríamos 1.
- ¿Cuantos Id contiene?: En la segunda columna colocamos la cantidad de IDs, como nuestra primera regla no tiene ningún id, el valor seria 0.
- ¿Cuantas clases, pseudo clases y atributos contiene?: Cada vez que en la regla aparezca uno de estos selectores, colocaremos 1 .
- ¿Cuantas etiquetas y pseudo elementos contiene?: Cada vez que en una regla nos encontremos con una etiqueta o un pseudo elemento deberemos sumar 1. A mayor valor, mayor especificidad y recuerda que va a ganar aquella regla que tenga el valor de especificidad mas alto.
Veamos como va resultando nuestra formula de especificidad de clases:
- Regla:
0001=1 - Regla:
0012=12 - Regla:
0102=102 - Regla:
0103=103
Como podemos comprobar después de haber calculado el valor de especificidad de las cuatro reglas anteriores, con la formula, declaramos a la cuarta regla ganadora. De verdad que os va a servir muchísimo esta formula cuando tengáis que escribir hojas de estilos complejas.
Os voy a dejar un ejercicio para que practiquéis con la formula, mientras más practica, más eficiente seras en tu trabajo.
EJERCICIO: ¿Cual es el nivel de especificidad de esta regla?
html head body h1 #inicio p .principal{}
No hagas trampas
0115=115El orden en que una regla ha sido declarada o escrita
Para entender esta regla vamos ha hacernos dos preguntas: ¿Que sucede cuando el nivel de importancia de una serie de reglas es idéntica y cuando el nivel de especificidad también es idéntico? ¿Como hace el navegador para decidir que regla va a ser la que va a implementar? En ese caso el tercer y ultimo factor, es el orden en el que son definidas o escritas. El navegador lee el contenido de una página de arriba hacia abajo y los últimos estilos definidos, serán los que ganen.
En el siguiente ejemplo, la ultima propiedad definida es "background: blue;" ya que al ser dos propiedades idénticas es la ultima propiedad la que lee el navegador.
p{
background: orange;
background: blue;
}
Regla de oro para entender todo esto:
Si dos o mas declaraciones tienen la misma importancia, la especificidad de las reglas decidirá cual se debe aplicar. Si las reglas tienen la misma especificidad, el orden en el que fueron escritas definirá el resultado final. ¿Sencillo verdad?.
En este ejemplo, podemos comprobar como los estilos en linea casi siempre ganan. Si le aplicamos la formula de especificidad el resultado es el siguiente: 1000. Inclusive está ganando en términos de orden.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
background: red;
}
</style>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<p style="background: yellow;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea cum fugiat, consequuntur aliquid quasi dolores mollitia cumque quisquam totam repudiandae, rem, maiores veniam quae nesciunt itaque dolorem, commodi perferendis eos!</p>
</body>
</html>
Finalizando la clase
Creo que no vas a tener problema alguno en entender como funciona la cascada en CSS3. Te recomiendo que practiques con lo que ya sabes, que juegues con el código y porque no, que comiences ha hacer una pequeña web con lo que ya sabes. So lo para ti, para afianzar todo lo que hoy y en anteriores clases has aprendido. El no practicar todo esto, se te va a ir olvidando. Por eso yo, lo escribo y comparto mis apuntes en este blog, de esta manera afianzo la información recibida.
Se que siempre os estoy dando la paliza con que compartáis el contenido, si hoy voy a hacerlo otra vez. Por favor, comparte este articulo, clase, post o como quieras llamarlo en tu red social favorita. Con esto ayudaras a otras personas para que se beneficien de esto igual que has hecho tu. Recuerda que puedes unirte al grupo de Facebook y puedes seguir la información en la página de Facebook de HTML5 y CSS3.
¡HASTA LA SIGUIENTE CLASE!
0 Comentarios