Estilos para enlaces CSS

Anterior
Avanzar

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.

Te recomendamos leer:  La propiedad overflow en CSS

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.

Código HTML

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

Código CSS

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.

Ejemplo de a:visited

a:visited {color: green;}

Indica que todos los enlaces visitados sean de color verde (color de letra).

Ejemplo de a: active

a:active {color: red}

Indica que todos los enlaces activos sean de color rojo (color de borde).

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.

Te recomendamos leer:  Estilos CSS para tablas

Ejemplo de código para evitar subrayado de enlaces CSS

Código HTML

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

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

Código CSS

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.

Lecciones CSS
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos