CSS: Enlaces

Los estilos de los enlaces están muy vinculados con las pseudoclases. Es importante entenderlas y usarlas en el orden correcto para que los estilos CSS tengan el efecto deseado. Lo más habitual es modificar su color, su decoración y su grosor, pero se pueden crear diseños más complejos.

Las pseudoclases que están relacionadas con los enlaces permiten modificar su estilo dependiendo de si cada uno de los enlaces que se encuentran en un documento HTML ha sido visitado o no. Puede incluso modificarse su diseño cuando el ratón pasa por encima o mientras se está pulsando.

Pseudoclases de enlaces:

La pseudoclase :focus puede omitirse debido a su escaso uso. Se puede cambiar el foco de los enlaces presionando la tecla tabuladora (Tab), con la que se salta al siguiente enlace. Con Shift+Tab se salta al revés.

Hay que tener en cuenta que las pseudoclases :hover y :active están disponibles para todos los elementos HTML, mientras que las pseudoclases :link y :visited son exclusivas de los enlaces. Este hecho no quita la importancia de introducirlas en el orden correcto.

Debe tenerse claro que el uso de la pseudoclase :target es para los elementos que tienen el atributo id, no para los enlaces que lo apuntan. Todos los elementos <a> se estilizan de la misma manera.

El orden de las pseudoclases

El orden de uso correcto de estas pseudoclases es tal y como aparecen en la tabla anterior. Una forma de recordar este orden es mediante las dos palabras inglesas «love fears hate» (el amor teme al odio), cuyas letras más representativas coinciden con las iniciales de las cinco pseudoclases (LVFHA).

Así es como deben especificarse:

a:link {}
a:visited {}
a:focus {}
a:hover {}
a:active {}

Apariencia predeterminada

Por defecto, los enlaces normales aparecen en azul, mientras que los visitados aparecen en púrpura. Los enlaces que están siendo presionados aparecen en rojo. En general, todos aparecen subrayados. Cuando el puntero del ratón está encima de un enlace cambia a un icono en forma de mano.

Estos estilos predeterminados ya se utilizaban en los navegadores web de los años 90, y se han popularizado con el tiempo. Por tanto, los usuarios ya esperan que los enlaces tengan esta apariencia.

Estilos por defecto de los enlaces:

Párrafo con un enlace normal.

Párrafo con un enlace visitado.

Párrafo con un enlace presionado.

Párrafo con un enlace personalizado.

Podría ser confuso para muchos usuarios que los enlaces se mostrasen de forma diferente. Esto no quiere decir que se pueda cambiar la apariencia de los enlaces. Lo importante es no alejarse mucho de la conducta esperada. Lo normal es que aparezcan subrayados y con un color diferente.

En Recursivos usamos el color azul tanto para los enlaces normales como los visitados. Además, usamos el color naranja para cuando el puntero del ratón pasa por encima.

Cambiar el aspecto de los enlaces

Hay muchas propiedades CSS que pueden usarse para cambiar la apariencia de los enlaces. Las más importantes son color para el color del enlace, cursor para el cursor del estilo y outline para su contorno.

Ejemplo 1

Por ejemplo, creamos un enlace que aparezca de color turquesa, subrayado con línea discontinua (propiedad border-bottom) y en negrita. El enlace cambia a color salmón cuando se pasa el puntero del ratón por encima.

Código CSS del ejemplo 1:

.ejemplo1:link,
.ejemplo1:visited {
  border-bottom: 1px dashed teal;
  color: teal;
  font-weight: bold;
  text-decoration: none;
}

.ejemplo1:hover {
  border-bottom: 1px dashed salmon;
  color: salmon;
  font-weight: bold;
  text-decoration: none;
}

Resultado del ejemplo 1:

Párrafo con un enlace turquesa.

Ejemplo 2

En este nuevo ejemplo creamos un diseño de un botón con relieve, como si fuera en 3D, con ayuda de su borde inferior. Cuando se presiona, se visualiza como baja (el borde se reduce a 0) hasta que no se ve su relieve. También se añade un sombreado posterior que desaparece al estar presionado.

Código CSS del ejemplo 2:

.ejemplo2:link,
.ejemplo2:visited {
  background: teal;
  border-bottom: 4px solid #004848;
  border-radius: 2px;
  box-shadow:  2px -3px 3px rgba(0,0,0,0.25);
  color: white;
  display: inline-block;
  margin-left: 3px;
  padding: 2px 10px;
  text-decoration: none;
  text-shadow: -1px 1px 1px #003838;
}

.ejemplo2:hover {
  background: #007070;
}

.ejemplo2:active {
  border-bottom-width: 0;
  box-shadow: none;
  margin-bottom: 4px;
  position: relative;
  text-shadow: none;
  top: 4px;
}

Resultado del ejemplo 2:

Enlace con forma de botón 3D.

En este ejemplo se han omitido los prefijos CSS para navegadores específicos con el fin de simplificar el código y poder concentrar la atención en las propiedades que han permitido hacer este diseño.

Ejemplo 3

En este último ejemplo creamos un enlace sin color de fondo, con un borde a su alrededor que tiene dos esquinas redondeadas. Cuando el puntero del ratón se pone encima del enlace se redondean las otras dos.

Código CSS del ejemplo 3:

.ejemplo3:link,
.ejemplo3:visited {
  border: 1px solid teal;
  border-radius: 16px 4px;
  color: teal;
  display: inline-block;
  margin-left: 3px;
  padding: 2px 10px;
  text-decoration: none;
}

.ejemplo3:hover {
  border: 1px solid #ff7f2a;
  border-radius: 4px 16px;
  color: #ff7f2a;
}

Resultado del ejemplo 3:

Enlace con esquinas redondeadas.