Los enlaces son muy comunes en las páginas web, pero muchos diseñadores web no se dan cuenta del poder que tienen con CSS para manipular y administrar sus enlaces de manera efectiva. Puede definir enlaces con estados visitados, suspendidos y activos. También puedes trabajar con bordes y fondos para dar a tus enlaces más pizzaz o hacer que parezcan botones o incluso imágenes.

La mayoría de los diseñadores web empiezan por definir un estilo en la etiqueta a:

a { color: rojo; }

Esto le dará estilo a todos los aspectos del enlace (flotante, visitado y activo). Para cambiar el estilo de cada parte por separado, debe utilizar pseudoclases de enlace.

Enlace Pseudo-Clases

Hay cuatro tipos básicos de pseudoclases de enlace que puede definir:

• :link – este es el estilo por defecto para el enlace
• :visited – después de hacer clic en un enlace
• :hover – como un ratón está posicionado sobre un enlace (pre-click)
• :active – justo cuando se hace clic en el enlace

Para definir una pseudoclase de enlace, utilícela con la etiqueta a en su selector CSS. Por lo tanto, para cambiar el color visitado de todos sus enlaces a gris, escriba:

a:visitado { color: gris; }

Si se estiliza una pseudo-clase de un eslabón, es una buena idea estilizarlas todas. De esta manera no se sorprenderá de resultados extraños. Así que si sólo quieres cambiar el color visitado a gris, mientras que todas las otras pseudo-propiedades de tus enlaces permanecen negras, escribes:

a:link, a:hover, a:active { color: negro; }a:visited { color: gris; }

Cambiar los colores de los enlaces

La forma más popular de cambiar el estilo de los enlaces es cambiar el color cuando el ratón pasa por encima de ellos:

a { color: #00f; }a:hover { color: #0f0; }

Pero no olvide que puede influir en el aspecto del enlace al hacer clic en él con la propiedad :active:

a { color: #00f; }a:activo { color: #f00; }

O cómo se ve el enlace después de haberlo visitado con la propiedad :visited:

a { color: #00f; }a:visitado { color: #f0f; }

Para ponerlo todo junto:

a { color: #00f; }a:visitado { color: #f0f; }a:hover { color: #0f0; }a:activo { color: #f00; }

Poner fondos en los enlaces para agregar iconos o viñetas

Jugando un poco con el fondo, puede crear un enlace que tenga un icono asociado. Elija un icono que sea pequeño, alrededor de 15px por 15px, a menos que su texto sea más grande. Coloque el fondo a un lado del enlace y establezca la opción de repetición en No repetición. A continuación, rellene el enlace para que el texto dentro del mismo se mueva lo suficiente a la izquierda o a la derecha para ver el icono.

a {acolchado: 0 2px 1px 15px;fondo: #fff url(ball.gif) left center no-repeat;color: #c00;}

Una vez que haya obtenido su icono, puede establecer una imagen diferente a la de sus iconos flotante, activo y visitado para hacer que el enlace cambie:

a {acolchado: 0 2px 1px 15px;fondo: #fff url(ball.gif) left center no-repeat;color: #c00;}a:hover {background: #fff url(ball2.gif) left center no-repeat;}a:active {background: #fff url(ball3.gif) left center no-repeat;}

Haga que sus enlaces parezcan botones

Los botones son muy populares, pero hasta que llegó el CSS, tenías que crear botones usando imágenes, lo que hace que tus páginas tarden más en cargarse. Afortunadamente, hay un estilo de borde que puede ayudarle a crear un efecto de botón fácilmente con CSS.

a {borde: 4px al principio; acolchado: 2px;texto-decoración: ninguno;}a:activo {borde: 4px inserto;}

Tenga en cuenta que cuando se ponen colores en los estilos de inicio y de inserción, los navegadores no son tan propensos a renderizarlos como se podría esperar. Así que, aquí hay un botón más elegante con bordes de colores:

a {border-style: solid;border-width : 1px 4px 4px 4px 1px;text-decoration : none;padding : 4px;border-color : #69f #00f #00f #69f;}

Y también puede afectar los estilos de hover y los estilos activos de un enlace de botón, simplemente use esas pseudo-clases:

a:link {border-style: solid;border-width : 1px 4px 4px 4px 1px;text-decoration : none;padding : 4px;border-color : #69f #00f #00f #69f;}a:hover { color del borde: #ccc; }