CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

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.