Con el propósito de aplicar diseños a páginas web de forma organizada, implementaremos
las reglas del estilo cascada en un documento CSS. En algunas oportunidades
cuando la página web está culminada,
los creadores se encuentran inconformes debido al desorden en cuanto al diseño,
el cual está lejos de lo deseado. Por tal motivo, mediante algunos ejemplos,
dominaremos las reglas de relevancia en selectores de CSS, según las
recomendaciones oficiales de este lenguaje de diseño.
Existen dos términos importantes
manejados en el lenguaje de hojas de estilos herencia y cascada, ambos tienen
significados diferentes y con frecuencia interpretados de forma incorrecta. La
herencia de CSS consiste en los estilos recibidos por las etiquetas superiores,
por lo tanto, hay algunos diseños que pasan a los hijos y otras no. La cascada de
CSS indica las reglas utilizadas por el navegador web cuando una etiqueta hereda estilos o tiene más de uno definido.
061-01_0510_ilu01.
Diferencia entre herencia y cascada
Cuando se trata de las reglas en
cascada hay tres factores que se toman en cuenta: importancia, especificidad y
orden, los cuales son considerados por el navegador web para determinar la relevancia de un estilo sobre otro. Es
decir, primero el navegador web evalúa
la importancia en el código, seguidamente, la especificidad y. cuando ambas
coinciden en el valor, el estilo se define con el orden en el cual se establecieron
las etiquetas.
061-01_0510_ilu02.
Orden de reglas en cascada
Importancia
La importancia del código en CSS está definida por
el valor de atributo important, precedido
por el signo de exclamación. Mediante este atributo definimos el color white de la etiqueta p la más importante sobre cualquier otra
declaración. En la siguiente imagen, si observamos la primera instrucción de la
etiqueta p tiene una declaración con
el color black, la cual es omitida
por el navegador web, debido a la
relevancia descrita anteriormente. Este es el procedimiento seguido cuando una
etiqueta tiene dos declaraciones y alguna de ellas está marcada como
importante.
061-01_0510_ilu03.
Código CSS con el valor de atributo important
061-01_0510_ilu04.
Visualización con el valor de atributo important
Especificidad
La especificidad en CSS viene dada por el valor de
los tipos de selectores:
- cuando son selectores
simples tienen una calificación de 10
- cuando son selectores de
clases es de 100
- cuando son selectores de
identificación es de 1000
En la imagen tenemos el código CSS, donde la segunda sentencia
vale 110 por tener una clase y un selector simple, y la tercera vale 10. La
etiqueta p por estar en dos
sentencias es considerada por el navegador web
donde tiene mayor valor, es decir, la primera, por lo tanto, el texto se
muestra en color negro, y como el fondo se omite en el primer selector de
párrafo entonces permanece en azul.
061-01_0510_ilu05.
Código CSS con especificidad
061-01_0510_ilu06.
Visualización con especificidad
Orden
El orden de aplicación de estilos en
CSS se define por la última declaración realizada. Este criterio se utiliza
cuando:
- La
etiqueta tiene dos declaraciones.
- Al hacer
la suma explicada obtenemos el mismo número.
- Se define important dos veces dentro de una misma
etiqueta.
Debido a ello, el texto delimitado
por la etiqueta p se muestra en color
blanco, por ser la última especificación, y omite la anterior, donde se
especifica en negro. El ejemplo se encuentra en la siguiente ilustración.
061-01_0510_ilu07.
Código CSS con el orden resaltado
061-01_0510_ilu08.
Visualización con el orden resaltado
Keynotes
- La herencia de CSS consiste en los estilos
recibidos por las etiquetas superiores, por lo tanto, hay algunos diseños que
pasan a los hijos y otras no.
- La cascada de CSS indica las reglas
utilizadas por el navegador cuando una etiqueta hereda estilos o tiene más de
uno definido.
- Cuando se trata de las reglas en cascada hay
tres factores factores que se toman en cuenta: importancia, especificidad y
orden, los cuales son considerados por el navegador para determinar la
relevancia de un estilo sobre otro.
- La
importancia del código en CSS está definida por el valor de atributo important, precedido por el signo de
exclamación.
- La
especificidad en CSS viene dada por el valor de los tipos de selectores, cuando
son selectores simples tienen una calificación de 10, cuando son selectores de
clases es de 100 y cuando son selectores de identificación es de 1000.
- El orden de aplicación de estilos en CSS se
define por la última declaración realizada. Este criterio se utiliza cuando: La
etiqueta tiene dos declaraciones. Al hacer la suma explicada obtenemos el mismo
número. Se define important dos veces
dentro de una misma etiqueta.
MisiónA fin de identificar correctamente
las reglas del estilo cascada, realiza un resumen del proceso necesario para
identificar en un documento CSS, las desiciones tomadas por el navegador con
respecto a la importancia, especificidad y orden de selectores.
Pasos a seguir:
- Crea un
documento CSS.
- Inserta
tres especificaciones de estilo, a fin de observar las tres reglas de cascada.
- Realiza el
resumen escrito de los pasos del navegador para elegir el estilo a mostrar al
usuario.
- Muestra tu
código y resumen a un especialista de materia, a través de vKonnect, y toma nota de sus sugerencias.
Sabrás que has tenido éxito,
cuando presentes tu resumen y código a los dos especialistas anteriores, y
ellos entiendan con facilidad tu explicación.
Realiza las modifcaciones
necesarias, luego comparte tu código y resumen en vPages, y pide a un compañero una sugerencia de optimización del
código. Ubica la publicación de dos
compñaeros y en cada uno agrega un comentario para complementar la información
de sus resúmenes.
Tiempo disponible: 3 horas.
CierreLa descripción precisa de las reglas del estilo
cascada en un documento CSS, permite ordenar correctamente las especificaciones
de estilo. También, determinamos las consideraciones necesarias para aplicar
correctamente un diseño. Con paciencia y organización obtendremos hojas de
estilos óptimas y correctas.
