Un enlace es un vínculo con el que enlazamos unas páginas con otras. El enlace en CSS tiene varias propiedades:
A:link = Enlace normal (Sin pulsar ni mantener el cursor encima)
A:visited = Cuando el enlace ha sido visitado anteriormente.
A:active = Cuando hacemos click sobre el enlace.
A:hover = Cuando situamos el cursor sobre el enlace.
Puedes definir estas propiedades en cualquier enlace que quieras para que el usuario pueda obtener mayor interactividad en tu sitio web.
Font-family
Se puede indicar el tipo de familia que se desea usar mediante la propiedad “font-family”.
Un ejemplo:
<style type="text/CSS">
a: hover {
font-family: Arial;
}
</style>
Font-style
Se puede dar estilo a la fuente, utilizando la propiedad “font-style”. Estas son las opciones disponibles:
font-style: normal; (normal)
font-style: oblique; (oblicua)
font-style: italic; (cursiva).
Font-weight
Se puede indicar la anchura de la fuente con la propiedad font-weight, pudiendo ser en negrita, por ejemplo:
font-weight: bold; (bold = negrita).
Podemos elegir los valores relativos:
font-weight: bolder; (bolder = más gruesa).
font-weight: lighter; (lighter = más fina).
La propiedad font-weight puede tomar un valor de 100 a 900, no tiene porqué ser bold (negrita).
Cabe destacar que de 100 a 500 el texto no se convierte en negrita, mientras que de 500 hasta 900 ya se aplica negrita al texto.
Ejemplo:
<style type="text/CSS">
a: hover {
font-weight: 400;
}
</style>
Text-decoration
También podemos darle decoración al enlace gracias a la propiedad text-decoration, pudiendo elegir entre estos tipos:
text-decoration: none = No se aplica ninguna decoración.
text-decoration: underline = Se subraya el texto.
text-decoration: overline = El texto se decora con una línea superior.
text-decoration: line-through = El texto se convierte en tachado.
text-decoration: blink = El texto se vuelve intermitente (parpadea).
También podemos combinar varios tipos de decoraciones, por ejemplo:
<style type="text/CSS">
a: hover {
text-decoration: overline underline;
}
</style>
Un ejemplo de cada tipo de decoración:
none | [ underline || overline || line-through || blink ]
Color
Al enlace se le puede dar cualquier color mediante la propiedad color: #elcolorenRGB; Que puede ser de 3 dígitos a 6. Ejemplo:
<style type="text/CSS">
a: hover {
color: #FFF; (o también se puede indicar como color: white;)
}
</style>
El código usando un poco de todas estas propiedades podría quedar así, como ejemplo:
<style type="text/CSS">
a: hover {
font-family: Arial;
text-decoration: underline;
color: #FFF;
font-weight: bold;
font-style: normal;
}
</style>
Finalmente podemos ver un ejemplo final de todas las propiedades que hemos mostrado.
