Estilos para enlaces CSS

Los enlaces se pueden convertir en hermosos elementos gracias a las propiedades CSS, y en esta lección aprenderemos a controlar y personalizar la apariencia de enlaces, además será la perfecta ocasión para conocer los tipos de enlaces existen y cómo trabajarlos.

Dando estilo a enlaces con CSS

Podemos dar estilo a un enlace empleando las propiedades y valores que hemos conocido en clases anteriores. Recordemos que los enlaces de HTML por defecto se marcan en otro color y quedan subrayados; mediante CSS podemos modificar y controlar muchos aspectos como: color de texto, de fondo, tamaño y familia tipográfica, rellenos, bordes, márgenes, etc. es tan simple como apuntar dicho enlace y establecer las propiedades y sus valores.

Estamos aquí para aprender más allá de lo que mencionamos hasta ahora, en especial conoceremos los pseudo selectores pensados en especial para trabajar enlaces; veamos.

Pseudo selectores para maquetar enlaces con CSS

• a: link.- este pseudo selector sirve para apuntar a enlaces normales de la página web (no accedidos).
• a:visited.- mediante este pseudo selector apuntaremos a los enlaces visitados o accedidos por el usuario.
• a:hover.- nos permite establecer el estilo para enlaces cuando el cursor del ratón se encuentra sobre dichos enlaces.
• a:active.- se refiere a aquellos enlaces en las que se han hecho clic y están activos.

Para que estos pseudo selectores no entren en conflicto al momento de ser procesados, debemos tener presente que a:hover puede ir después de a:link y a:visited. Por otro lado, a:active será establecida después de a:hover

Mediante los pseudo selectores que acabamos de conocer, indicaremos las propiedades y valores que queremos que se cumplan para cada tipo de enlace. Veamos un ejemplo.

Ejemplo de estilos para enlaces con CSS

En este ejemplo haremos que el estilo de los enlaces identificados con class="sobre" cambien cuando el cursor del ratón pase sobre ellos.

<p><a class="sobre" href="URL">Este es un enlace</a></p>

a:hover.sobre{
  color:#fff;
  background-color: blue;
  padding: 10px;
  margin: 50px;
  border: 3px solid green;
  font-family:impact;
}

Resultado:

Enlace sin cursor encima

Enlace con cursor encima

Ya con los resultados obtenidos te voy a explicar como así aunque quizá ya lo hayas entendido, venga.

El código CSS indica que si el cursor del ratón pasa por encima del enlace con class="sobre", entonces se cumplirá las propiedades establecidas para a:hover.sobre y en este caso son:

• Color de letra: #fff (blanco)
• Color de fondo: azul
• Relleno: 1px
• Margen de 50px
• Borde de ancho 3px, estilo sólido y color verde.
• Familia tipográfica: impact

Realmente se cumple, prueba tú mismo en tu propio proyecto.

Código CSS para apuntar enlaces

Quiero asegurar que todos han entendido; los pseudo selectores prácticamente sirven para apuntar un tipo de enlace, ya sea uno normal, un visitado, activo o con cursor sobre él. Más no funcionan como propiedades ni valores, sino como SELECTORES.

a:visited {color: green;}

a:active {color: red}

Eliminar el subrayado por defecto de los enlaces

Eliminar el subrayado por defecto con el que aparecen los enlaces dentro de los navegadores web es tan simple como establecer la propiedad text-decoration que ya aprendimos en su respectiva lección. Una vez establecido, definimos el valor none el mismo que indica que no se aplique ninguna decoración.

Ejemplo de código para evitar subrayado de enlaces CSS

<p><a class="sin" href="URL">Este es un enlace</a></p>

<p><a class="otro" href="URL">Este es un enlace</a></p>

a.sin {text-decoration: none;}

a.otro {
  background-color:green;
  color:#fff;
  padding: 8px;
  text-decoration:none;
}

Resultado:

Además de eliminar el subrayado por defecto se puede aplicar cualquier propiedad compatible con textos para el texto ancla de los enlaces. Vamos, te animo a probar con todo lo que imagines hay muchas posibilidades.

[popup_anything id=»4273″]