Saltar al contenido principal

HTML & CSS:
Curso práctico avanzado

Ejercicios - Selectores 3

Enunciado

A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias para lograr una página web que tenga el siguiente funcionamiento:

  • En su estado normal, un enlace se muestra de color rojo y sin subrayado (propiedad text-decoration).
  • Cuando el usuario sitúa el cursor del ratón sobre un enlace, se invierten los colores (el texto del enlace se muestra con color blanco sobre un fondo rojo) y se muestra el subrayado.
  • Cuando un enlace está activo, se muestra de color naranja.
  • Cuando un enlace ha sido visitado, se muestra de color verde oscuro.
  • Cuando un enlace tiene el foco del teclado, se muestra de color azul y se muestra el subrayado.

Consejo: el orden de escritura de las reglas influye en el resultado final, ya que un enlace puede estar en varios estados al mismo tiempo.

Código base

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
</head>
<body>
<h1>Universidad de Alicante</h1>

<ul>
<li><a href="">Presentación</a></li>
<li><a href="">Estudios</a></li>
<li><a href="">Alumnos</a></li>
<li><a href="">Deportes</a></li>
<li><a href="">Servicios</a></li>
</ul>
</body>
</html>

Solución

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
<style>
a {
  color: #F00;
  text-decoration: none;
}

a:visited {
  color: #0A0;
}

a:hover {
  color: #FFF;
  background-color: #F00;
  text-decoration: underline;
}

a:focus {
  color: #00F;
  text-decoration: underline;
}

a:active {
  color: #F60;
  background-color: #FFF;
}
</style>
</head>
<body>
<h1>Universidad de Alicante</h1>

<ul>
<li><a href="">Presentación</a></li>
<li><a href="">Estudios</a></li>
<li><a href="">Alumnos</a></li>
<li><a href="">Deportes</a></li>
<li><a href="">Servicios</a></li>
</ul>
</body>
</html>