Saltar la navegación

4. Colisiones

Colisiones en CSS

Las reglas CSS se pueden aplicar a un mismo elemento HTML, ocasionando colisiones en el código.

p { color: red; } p { color: blue; } <p>... </p>

Método seguido por CSS para resolver las colisiones:

1

Determinar todas las declaraciones que se aplican al elemento para el medio CSS seleccionado.

2

Ordenar las declaraciones según su origen (CSS de navegador, de usuario o de diseñador) y su prioridad (palabra clave !important).

3

Ordenar las declaraciones según lo específico que sea el selector. Cuanto más genérico es un selector, menos importancia tienen sus declaraciones.

4

Si después de aplicar las normas anteriores existen dos o más reglas con la misma prioridad, se aplica la que se indicó en último lugar.

La regla CSS que prevalece se decide por lo específico en cada selector. Por ejemplo:

Observe los comentarios en el código.

Actividad de Aprendizaje (Colisiones)

Indicaciones Generales

  • Utilice Visual Studio Code para transcribir el código que se presenta arriba. 
  • Envíe su trabajo a la plataforma de la siguiente manera:
    • El archivo scolisiones.html que ha sido codificado en Visual Studio Code.
    • Archivo en formato .pdf con captura de pantalla del código y del resultado en el navegador.

Creado con eXeLearning (Ventana nueva)