Diseño de links con CSS

CSS

Los vínculos o links por defecto se muestran azules y subrayados y cambian de color si ya han sido visitados. Para modificar esas características hay que manejar las siguientes propiedades:

  • Color: Cambia el color de la letra.
  • Background-color: Cambia el fondo dándole un aspecto como si hubieras utilizado un subrayador.
  • Text-decoration: Se refiere a la línea que subraya el vínculo, se podría quitar o cambiar por otro estilo.

Además, los links cuentan con pseudo-clases que permiten tener un mayor control sobre la presentación según las acciones que realice el usuario.

Pseudo-clases

  • Link: Estilo del link en general.
  • Visited: Estilo del link cuando ha sido visitado.
  • Hover: Estilo cuando se pasa el ratón por encima.
  • Active: Estilo del vínculo cuando está activo (siendo clicado).

A continuación dejo el CSS para que un vínculo tenga una fuente arial, con un color verde y sin subrayado.

CSS
1
2
3
4
5
6
7
8
a {
  font-family : arial, verdana, sans-serif;
  font-size : 16px;
}
a:link {
  color:#0F0;
  text-decoration : none;
}

El link a personalizar sería el siguiente

XHTML
1
<a href="#">Link de prueba</a>

No redirecciona a ningún sitio (href=»#») lo cual será ideal para los siguientes ejemplos.

links css

Resultado del CSS

Ahora supongamos que cuando sea visitado tenga un color distinto

CSS
1
2
3
4
a:visited {
  color : #060;
  text-decoration : none;
}

Después de clicar en el enlace debería de cambiar color a verde oscuro. En mi caso FireFox no funcionó asique realice la prueba en Internet Explorer.

links visited css

Vínculo después de haber sido clicado

La siguiente regla será para cambiar el fondo del vínculo y darle un subrayado cuando se pasé el ratón por encima

CSS
1
2
3
4
a:link:hover {
  background-color : #ffff66;
  text-decoration : underline;
}

link css hover

Vínculo al pasar el ratón por encima

Para finalizar una regla para cuando esté siendo clicado. Al mantener el click izquierdo debería ver como cambia el color de texto a rojo pero manteniendo el fondo amarillo.

CSS
1
2
3
4
a:active {
  color : #ff0000;
  text-decoration : underline;
}

link css active

Vínculo al mantener presionado el click izquierdo

Y hasta aquí el tutorial de hoy, espero que os haya servido de ayuda. A seguir picando código 🙂