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:
Esto nos dan de codigo .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
<style>
a:link{text-decoration:name; color:red}
a:hover{text-decoration:name; color:white}
a:visited{text-decoration:name; color:verde}
</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>
este el resulado mio ,con ayuda
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
<style>
a{color: red; 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>
- 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.
Esto nos dan de codigo .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
<style>
a:link{text-decoration:name; color:red}
a:hover{text-decoration:name; color:white}
a:visited{text-decoration:name; color:verde}
</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>
este el resulado mio ,con ayuda
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
<style>
a{color: red; 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>
No hay comentarios:
Publicar un comentario