Aplicación de estilo avanzada a los enlaces

  • Por
  • CSS
Vemos cómo asignar estilos a enlaces de la página de una manera potente, para hacer interesantes barras de navegación.
En este artículo vamos a ver cómo podríamos crear una barra de navegación bastante dinámica utilizando únicamente las Hojas de Estilo en Cascada. En el ejemplo vamos a construir una barra de navegación que contiene enlaces de varios colores que cambian de tonalidad al pasar el ratón por encima.

Podemos ver el resultado de nuestra barra pulsando este enlace, para tener una idea más exacta de lo que queremos conseguir.

Cómo poner estilo a los enlaces

Ya lo vimos en capítulos anteriores de nuestro manual de CSS, pero lo repetimos aquí. Se define el estilo de los enlaces asignando su apariencia en sus distintos estados:
  • Enlace no visitado. Se define con el atributo link.
  • Enlace visitado. Se define con el atributo visited.
  • Enlace activo (cuando se está pulsando). Se define con active.
  • Enlace con el reton encima. Se define con hover.
Esta definición se realiza en la cabecera de la página, entre las etiquetas <STYLE> Y </STYLE>, y es global a toda la página.

Un ejemplo de esto se puede ver en esta declaración de estilos:

<STYLE type="text/css">
    A:link {text-decoration:none;color:#0000cc;}
    A:visited {text-decoration:none;color:#ffcc33;}
    A:active {text-decoration:none;color:#ff0000;}
    A:hover {text-decoration:underline;color:#999999;}
</STYLE>


Cómo dar estilo a un enlace en concreto

Si queremos resaltar nuestra barra de navegación probablemente querramos colocarla en una tabla de nuestra página web, con un color que contraste un poco con el fondo. En un caso como este, será necesario que los enlaces de la barra de navegación y los enlaces normales de la página tengan colores distintos, por estar situados sobre dos tipos de fondos distintos.

Es por esto que los enlaces de la barra van a tener un color distinto de los definidos en la cabecera de la página, con los estilos. Esto lo podemos conseguir de esta manera.

<a href="#" style="color:#ff0000">Mi enlace</a>

Hemos definido el color de un enlace de una manera específica, utilizando el atributo style, de modo que este enlace siempre tendrá el color indicado, independientemente de su estado.

Es un enlace amarillo, que quedaría muy bien resaltado sobre un fondo oscuro, como se puede ver en el ejemplo de barra de navegación siguiente.

Enlace 1
Otro enlace
Enlace 3

En la tabla anterior tenemos enlaces amarillos en una web donde los enlaces son azules por defecto.

Cómo utilizar las clases al aplicar estilo a los enlaces

También vimos en anteriores capítulos que el uso de clases puede ser muy útil a la hora de definir estilos especiales que podemos aplicar a las etiquetas que queramos. A la hora de trabajar con los enlaces también podemos aplicar las clases para definir distintos tipos de enlaces, que tienen distintos tipos de estilos.

A.clase1:visited {color:#ff0000;}
A.clase1:active {color:#ff0000;}
A.clase1:link {color:#ff0000}
A.clase1:hover {color:#00ff00}


La ventaja al utilizar las clases con los estilos de los enlaces es que podemos especificar un formato distinto al enlace dependiendo de su estado: visitado o no, activo o con el ratón sobre él.

Por si no quedó claro, al especificar el estilo con el atributo style del enlace sólo podíamos decir que el enlace lo queremos en amarillo, y siempre lo tendremos en amarillo (sea visitado o no, activo, o estemos o no con el ratón encima). Con las clases definimos un nuevo tipo de enlace al que podemos dar distintos formatos dependiendo su estado.

Otras ventajas de utilizar las clases consisten en que escribimos una única vez los estilos y que podemos cambiar el color de todos los enlaces de la clase con cambiar la delaración.

A partir de lo que acabamos de aprender podemos crear el ejemplo de barra de navegación dinámica utilizando CSS que habíamos visto al principio del capítulo. El código sería el siguiente.

<html>
<head>
    <title>Ejemplo CSS para enlaces</title>
<style type="text/css">
    A:link {color:#0000cc;}
    A:visited {color:#0000cc;}
    A:active {color:#0000cc;}
    A:hover {color:#0000ff;}

    A.clase1:visited {color:#ffff00;}
    A.clase1:active {color:#ffff00;}
    A.clase1:link {color:#ffff00}
    A.clase1:hover {color:#00ff00}

    A.clase2:visited {font-size:12;color:#ffffff;}
    A.clase2:active {font-size:12;color:#ffffff;}
    A.clase2:link {font-size:12;color:#ffffff;}
    A.clase2:hover {font-size:12;color:#ffff33;}

    body {font-family:arial;font-size:11;font-weight:bold}
    td {font-family:arial;font-size:11;font-weight:bold}
</style>
</head>

<body>
<a href="#">Este enlace es normal</a>
<br>
<br>
<br>
<span style="font-weight:normal;font-size:10">
Los enlaces de esta barra son especiales,
<br>
están definidos por clases
</span>
<br>
<table width="110" cellspacing="1" cellpadding="2" border="0">
<tr>
    <td bgcolor="#aa0000"><a href="#" class="clase2">Opciones 1</a></td>
</tr>
<tr>
    <td bgcolor="red"><a href="#" class="clase1">Enlace clase1</a></td>
</tr>
<tr>
    <td bgcolor="red"><a href="#" class="clase1">Otro de clase1</a></td>
</tr>
<tr>
    <td bgcolor="red"><a href="#" class="clase1">Más enlaces</a></td>
</tr>
<tr>
    <td bgcolor="red"><a href="#" class="clase1">Todavía más</a></td>
</tr>
</table>

</body>
</html>


Se puede ver la página en funcionamiento en este enlace. Esperamos que sirva de provecho este pequeño taller de CSS para vuestras creaciones.

Quiero agradecer la ayuda prestada para la elaboración de este artículo a Rafael Chacón, que nos mandó un generoso mail con el truquillo que hemos expuesto aquí.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Pablo Ipince

17/10/2001
Lo malo de este método es que CSS no funciona en todos los exploradores anteriores a la versión 4. Y puede que algunos usuarios no tengan acceso a este enlace.

Miguel Angel Alvarez

17/10/2001
Si que tienes razón, pero como sabrás hay dos matices:
  1. Casi cualquier usuario dispone de un navegador versión 4 o superior, compatible con CSS
  2. El enlace si que se ve, lo que no tiene es el color asignado con los estilos

Poke

20/2/2002
Realmente, no creo que haya demasiados usuarios con versiones 4 de sus navegadores. Y si es así, lo normal es que se actualicen cuando noten que no pueden visualizar bien la mayoria de las webs

Bernardino Pérez Castillo

02/6/2002
Totalmente de acuerdo con Miguel Angel, en realidad, se necesita que los usuarios se actualizen debido al factor de que las nuevas tecnologías en el desarrollo web lo exigen..., y si se decea observar los efectos que las nuevas webs tienen, este es el mejor camino, así es de que anímo con la versión 5.0 y bienvenidas sean también las novedades de las hojas de estilo. ¿ no lo creen?

emilio

25/3/2003
Antes que todo felicito al equipo de Desarrolloweb por poner contenido tan útil. siempre he tratado de mantener un equilibrio entre el uso de las "relativamente" nuevas tecnologias y las "bases" del diseño web. Referente a las hojas de estilo y acerca de que no son compatibles con nuevos navegadores, les comento que solamente en la oficina donde laboro hay más de 10 computadoras de las 25 que existen que no tienen un navegador actualizado, y sus usuarios ni tienen idea de ello y ni se encuentran interesados en actualizar. Es simple el usuario tiene el mando no el diseñador, si entra a tu sitio y lo ve, lo navega aun como lo vea, si no lo ve se dirige a otro sitio, asi de simple.

Alberto Zavala

09/7/2004
Gracias y grecias pues lo poquito que he aprendido lo aprendo aqui.

En mi pagina utilizo los frames y quiero dejar de utilizarlos, ¿como hacerle para darle en el enlace y que se carge de nuevo toda la pagina sin nesesidad de frames como en la pagina de ejemplo www.guiarte.com Gracias.


www.ajedrez.t2u.com

Pilar

14/7/2004
Solo puedo decir gracias. Gracias por esta enciclopedia de la web, gracias por poder acudir a vosotrsos cada vez que tengo una duda... gracias por estos estupendo artículos.

Ignacio

07/10/2004
En el articulo se indica como poner el color a un enlace directamente en la etiqueta. Pero no como indicarle el color al posar el ratón sobre él, o al visitarlo, etc. ¿Cómo se haría?

RESPUESTA

El artículo explica justamente esto que estás preguntando: Poniendo una declaración de estilos en la cabecera de la página, o donde sea, para definir los colores de los distintos estados del enlace. Leelo bien.

Omar

30/3/2005
También se pude utilizar la propiedad padding y el back-ground-color. Inténtenlo y verán el efecto. Ponganle un backgronund-color diferente en el hover, jeje.

Definitivamente la CSS son buenisimas, brindan una gran ayuda visual sin quitarle rapidez a la carga de la página. Muy bi\uene el artículo eh.

XXX

14/11/2007
excelente articulo, espero poder descargarlo

Iñaki

10/6/2009
Perfecto
Claro y conciso, así da gusto.

Eduardo

17/8/2010
variante
yo lo hice asi que utiliza mas el css y tiene un codigo fuente mas corto, a demás que no usa tablas:

<head>
<style type="text/css">
A:hover {color: #00f;}
A{color: #00c;}

A.class1:hover {color: #0f0;}
A.class1{color: #ff0;}

A.class2:hover {color: #ff3;}
A.class2{color: #fff;}

.class1 {background:red;}
.class2 {background: #c00;}
</style>
</head>
<body>
<a>Este enlace es normal</a>
</br>
</br>
Los enlaces de esta barra son especiales,</br>
est&aacute;n definidos por clases
<div>
<a class="class2">
Opciones 1
</a></br>

<a class="class1">
Opciones 1
</a></br>
<a class="class1">
Opciones 1
</a></br>
<a class="class1">
Opciones 1
</a></br>
<a class="class1">
Opciones 1
</a></br>
</div>
</body>

angelsanchezjr

15/7/2011
como hacer la caja de contenido autoscroll de la derecha de esta pagina?http://www.desarrolloweb.com/articulos/521.php
la ocupo muchisimo , gracias

Beatriz

13/9/2011
Realmente útil
Muchísimas gracias por el post. Me ha resultado realmente útil. Además está perfectamente explicado.

fabiovera

19/7/2012
agradecimiento
hola q tal estoy entrando a esta pagina recien pero he visto muchas cosas interesantes les agradesco por la ayuda