CSS: Dando estilo a los enlaces (links o hipervinculos)
Los enlaces son esos elementos que apenas conocemos (nótese la ironía) y que utilizamos frecuentemente.
Un ejemplo de enlace sería este:
<a href="https://www.dariobf.com">Enlace a mi blog</a>Lo 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 puede referenciar con :link en CSS, aunque habitualmente no hace falta, ya que usamos los estilos por defecto de la propia etiqueta a.
- Visitado: Es el estado opuesto al primero, cuando ya hemos visitado dicho enlace. Para definirlo utilizamos el atributo «visited» (obvio, ¿verdad?). Se le referencia por CSS con :visited
- 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 en CSS
- 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 en CSS.
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, supongamos 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.
muy util
Muchas gracias me ha servido milll…!! <3
gracias me sirvio mucho este artículo
Muchas gracias! :)
Muy claro el tema, me ayudo a obtener una idea de lo util que puede resultar modificar un elemento como lo es un hipervinculo!
Interesante. Solo quisiera saber cómo podría cambiar el color del link solo de los h3 a negro y dejar el resto, p y h1, h2, h4, h5 y h6, en azul como está actualmente.
¿Qué faltaría aquí?
a:link {
color:#222222;
}
Gracias y un saludo
Hola Peter, si solamente quieres cambiar el color a los enlaces que estén dentro de los h3, puedes hacerlo con:
h3 > a {
color: #222;
}
Saludos!
Hola Darío.
Al final, me ha funcionado así:
h3 a {
color: #222 !important;
}
Gracias y saludos