Ismael Royano Gómez
Técnico Informático curioso, lector activo de las nuevas tecnologías, amante de las series de televisión y usuario del respetable mundo del enredo.
Web.CSS.Enlaces.
Estados de los enlaces. Esto se refiere a la forma de controlar que efecto darle a un enlace cuando ocurre una de las acciones siguientes:
- a:link. Cuando está en espera.
- a:visited. Cuando se ha visitado con anterioridad.
- a:hover. Cuando se pasa el ratón por encima.
- a:active. Cuando se hace clic.
Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}
</style>
</head>
<body>
<p><b><a href="https://www.google.es" target="_blank">Ir a Google</a></b></p>
</body>
</html>
En este ejemplo el enlace por defecto está en rojo, cuando ya se ha visitado con anterioridad está en verde, cuando se pasa el ratón por encima se pone de color rosa y en el momento de hacer clic se obtiene color azul.
Se puede dar más efectos mezclando cosas que ya se han visto. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.bing.com" target="_blank">Ir a Bing</a>
</body>
</html>
En este ejemplo, al enlace en modo espera y el efecto visitado se le da:
- Color de fondo hexadecimal, este ejemplo es tono rojo claro.
- El color del texto será blanco.
- El relleno se usa 14 píxeles superior e inferior y 25 píxeles izquierda y derecha.
- El texto se le efecto centrado.
- Y para finalizar se le quita el subrayado por defecto en los enlaces.
Al efecto de pasar el ratón por encima y al momento de hacer clic:
- Un colo de fondo rojo puro.
Al hacer estas modificaciones, se ha creado como una especie de botón mezclando algunas cosas que se han ido aprendiendo. Todo depende de la imaginación de cada uno.
