24 Abr Veo veo ¿de qué color se verá? | ejercicio sobre especificidad css
En este ejercicio vamos a aplicar el concepto de especificidad, orden de selectores CSS y la instrucción !important .
En esta entrada puedes encontrar los apuntes CSS correspondientes.
Recordar que muchas veces la intuición puede fallar, aunque en líneas generales:
- Cuanto más cerca está una instrucción de la etiqueta html mas fuerza.
- Ante la duda, suele ganar la instrucción más restrictiva.
- A igualdad de peso, la última propiedad css reemplaza las anteriores.
Entremos en materia.
Enunciado
A continuación se facilita el siguiente código html y css.
¿Simplemente leyendo el código sabrías decir de que color se verá cada párrafo?
Anótalo en una hoja de papel antes de mirar la solución final.
¡Recuerda que la intuición a veces falla!
<!DOCTYPE html>
<html>
<head>
<title>ejercicio css</title>
<meta name="author" content="francesc ricart" />
<style>
.rojo{color:red !important;}
p.rojo{color:yellow;}
#verde{color:green;}
#naranja{color:orange;}
.rosa{color:pink;}
</style>
</head>
<body>
<p class="rojo" id="naranja">hola que tal</p>
<p class="rojo"><span>hola que tal</span></p>
<p id="verde">hola que tal</p>
<p class="rosa" id="naranja">hola que tal</p>
<p style="color:blue;" class="rosa">hola que tal</p>
</body>
</html>Solución del ejercicio
En el día a día no siempre vamos a resolverlo haciendo una tabla de especificidad.
Voy a resolver el ejercicio de cabeza sin necesidad de tablas.
En líneas generales:
- Al primer párrafo le afectan las instrucciones
.rojo{color:red !important;}y#naranja{color:orange;}.En condiciones normales ganaría el selector de id pero como el primer selector lleva un !important el resultado es que se ve de color rojo. - Al primer párrafo le afectan las instrucciones
.rojo{color:red !important;}yp.rojo{color:yellow;}En condiciones normales ganaría el selector de clase con etiqueta pero como el primer selector lleva un !important el resultado es que se ve de color rojo y no amarillo. - Para el tercer párrafo no hay discusión posible.
- En el cuarto párrafo entran en conflicto una clase y un identificador. Gana el identificador.
- En el quinto párrafo entran en conflicto un css dentro del atributo style y una clase. Gana el style por ser muchísimo más específico.
Podemos aplicar la lógica !important > style = «» > id > class > etiquetas
¡Hola!
Querido lector,
Espero que este ejercicio te haya resultado de utilidad.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
¿Existe alguna herramienta gratuita, rápida y sencilla de usar para dibujar el croquis de una maqueta web? + info en la publicación.
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
¿Hay alguna forma amable de leer páginas web dónde todo el contenido se haya compactado? Te presento algunas de mis herramientas favoritas.
Ejercicio css en el que se muestra como mostrar logotipos sencillos mediante el uso de paletas de colores adecuadas y tipografías de google fonts.
La propiedad background se desarrolla en muchísimas variantes que permiten generar efectos muy interesantes. Veámoslas todas.
Numerar listas css es como con el Word es posible gracias a la propiedad counter(). Veamos un ejemplo de uso.
No Comments