CSS: Dando estilo a los enlaces (links o hipervinculos)
0Los enlaces son esos elementos que apenas conocemos (nótese la ironía) y que utilizamos frecuentemente.
Un ejemplo de enlace sería este:
Enlace a mi blogLo reconoces, ¿verdad?
Pues en esta entrada vamos a conocer un poquito más los enlaces, sus estados y cómo darles estilo con CSS de forma fácil y sencilla.
Estados de un enlace
Diciéndolo así fríamente no tiene sentido, ¿Cómo podría un enlace tener “estados”? Fácil, lo entenderás rápidamente leyendo cuáles son los estados (No os preocupeis si algo no lo entendeis, pronto sabréis de qué hablo):
- No visitado: Es aquel estado que tiene cualquier enlace por defecto. Se le define con el atributo “link”
- Visitado: Es el estado opuesto al primero, cuando ya hemos visitado dicho enlace. Para definirlo utilizamos el atributo “visited” (obvio, ¿verdad?)
- Activo: Este estado es exactamente cuando pulsamos el enlace; sí y solo sí lo estamos pulsando (en el momento que dejamos de pulsarlo ya no es ese estado. Se define con el atributo “active”
- Hover: Es ese estado en el que el ratón está encima del enlace, da mucho juego para los menúes y verás que es muy utilizado. Se define con “hover”.
Para dar estilo a un enlace sólo hay que usar el estado que queramos editar, como es más fácil de entender viendo un ejemplo vamos allá:
a:link {estilos que queremos darle}
a:visited {estilos a darle}
a:active {estilos aquí}
a:hover {estilos}
Por ejemplo, suponed que queremos darle estilos sólo cuando el ratón pasa por encima del enlace de manera que el texto se ponga a 20px de tamaño y de color rojo:
a:hover {
font-size:20px;
color:#100;
}
De igual manera podemos cambiar cualquier estado del enlace.
Se puede añadir borde, cambiar el tamaño de fuente, o ¡lo que la imaginación os diga!
Espero que os sirva de ayuda.