Estilos a los enlaces con CSS

Una página web generalmente tiene secciones bien definidas como una cabecera, una barra lateral y un cuerpo donde ponemos el contenido pero no siempre queremos que los links o enlaces de nuestras web luscan de la misma forma en toda la página.

Mediante el uso de estilos CSS podemos definir un clase para cada tipo de link que deseemos. Por ejemplo, un estilo para la cabecera, un estilo para los menus y otro para los que se encuentren dentro del contenido que serán los mas generales.

Primero veamos como dar estilo a los links. Las etiquetas que ulizamos para hacer un link son <a></a> y por tanto hay que adjudicarle estilos a esta etiqueta.

El link tiene cuatro estados y por tanto hay que definir cada una de ellas:

• Link no visitado. Se define con el atributo link.
• Link visitado. Se define con el atributo visited.
• Link activo (justo cuando presionamos). Se define con active.
• Link con el reton encima. Se define con hover.

La declaración de estilos estilos generales (para todo la página) se hace de la siguiente forma:

<style type="text/css">
a:link {text-decoration:none; color: #99CC00;} /* Link no visitado*/
a:visited {text-decoration:none; color:#99CC66} /*Link visitado*/
a:active {text-decoration:none; color:#99FF00; background:#EEEEEE} /*Link activo*/
a:hover {text-decoration:underline; color:#99FF00; background: #EEEEEE} /*Mause sobre el link*/
</style>

Y lo resultados se verán en todos los links colocados de la manera convencional (sin ninguna clase):

<a href="#">Primer link convencional</a>
<a href="#">Segundo link convencional</a>

Y el resultado es el siguiente

Primer link convencional
Segundo link convencional

Estos estilos tendran efecto en toda la página, A MENOS, que les declaremos una clase especial, por ejemplo para los menú podriamos crear una clase en CSS con caracteristicas diferentes a las declaradas de forma general de la siguente manera:

<style type="text/css">
a.menus:link {text-decoration:none; color: #ffffff; background: #990000; border:#FFFFFF 1px solid;} /* Link no visitado*/
a.menus:visited {text-decoration:none; color:#cccccc} /*Link visitado*/
a.menus:active {text-decoration:none; color: #003399; background: #993333; border:#FFFFFF 1px solid;} /*Link activo*/
a.menus:hover {text-decoration:underline; color: #003399; background: #993333; border:#FFFFFF 1px solid;} /*Mause sobre el link*/
</style>

Estos links tendran una apariencia distinta a los definidos para toda la página, la forma de aplicarlos es simplemente usando la clase:

<a href="#" class="menu">Primer link del menú</a>
<a href="#" class="menu">Segundo link del menú</a>
<a href="#" class="menu">Tercer link del menú</a>

Y el resultado es el siguiente:

Primer link del menú
Segundo link del menú
Tercer link del menú

A mi en lo particular me gusta tener los links “hover” y “active” con las mismas propiedades, dado que el momento en que se a click a un link es muy corto y a penas notorio. Ojala que les sirva!