El código CSS nos permite cambiar el estilo de nuestra página web. En esta ocasión vamos a ver como modificar el aspecto de los enlaces al pasar el ratón sobre ellos y al pulsarlos.
- En css podemos añadir al link un subrayado al pasar el puntero del ratón.
- Podemos hacer que el link tenga un color diferente antes o después de haber sido pulsado
HTML
Así veíamos la página antes de introducir el código css.
 |
| antes de introducir el css |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css hover</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p><a href="https://www.excelavanzado.com">página de excelavanzado.com</a></p>
<p><a href="https://altocodigo.blogspot.com">página de altocodigo</a></p>
<p><a href="https://www.masterfinanciero.es">página de masterfinanciero.es</a></p>
</body>
</html>
CSS
Lo que hemos logrado es eliminar el subrayado inicial y que éste se ponga al pasar el mouse por el link. También hemos cambiado los colores de la tinta que se ven de los link ya utilizados y de los no utilizados aún. Además ponemos en amarillo el fondo al pasar el mouse sobre el link usando un
hover.
 |
| después de aplicar el código css |
 |
| imagen del código css que vemos en rep.it |
a:link {
color: red;
text-decoration: none;}
a:visited {
color: gray;
text-decoration: none;}
a:active {
text-decoration: none
}
a:hover {
color: blue;
background-color: yellow;
text-decoration: underline;}
Para saber más podemos visitar la página de w3schools:
No hay comentarios:
Publicar un comentario