Ya puedes aplicar lo que aprendiste en las lecciones anteriores a los enlaces (es decir, cambiar colores, fuentes, subrayado, etc.). La novedad respecto a los enlaces es que CSS te permite definir estas propiedades de forma diferente dependiendo del estado del mismo, es decir, si el enlace se ha visitado, no se ha visitado, si es el enlace activo o si el cursor está sobre dicho enlace. Esto permite añadir efectos divertidos y útiles a tu sitio web. Para controlar estos efectos se usan lo que se ha denominado como pseudo-clases.
¿Qué es una pseudo-clase?
Una pseudo-clase te permite tener en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML.
Veamos un ejemplo. Como ya sabes, los enlaces se especifican en HTML con la etiqueta
<a>. Por lo tanto, podemos usar a como selector en CSS:
a {
color: blue;
}
Todo enlace tiene diferentes estados. Por ejemplo, visitado o no visitado. Puedes usar una pseudo-clase para asignar diferentes estilos a los enlaces visitados y no visitados.
a:link {
color: blue;
}
a:visited {
color: red;
}
Usa
a:link y a:visited para enlaces visitados y no visitados, respectivamente. A los enlaces activos se les aplica la pseudo-clase a:active, y a:hovercuando el cursor se coloca o pasa sobre el enlace.
Vamos a repasar ahora cada una de las cuatro pseudo-clases con ejemplos y más explicaciones.
Pseudo-clase a:link
La pseudo clase
:link se usa para enlaces que dirigen a páginas que el usuario no ha visitado.
En el ejemplo de código que sigue, los enlaces no visitados tendrán un color azul claro.
a:link {
color: #6699CC;
}
Pseudo-clase a:visited
La pseudo clase
:visited se usa para enlaces que dirigen a páginas que el usuario ya ha visitado. Por ejemplo, el código siguiente hará que todos los enlaces visitados sean de color púrpura oscuro:
a:visited {
color: #660099;
}
Pseudo-clase a:active:
La pseudo clase
:active se usa para enlaces que están activos.
El código de este ejemplo hace que el color de fondo para los enlaces activos sea amarillo:
a:active {
background-color: #FFFF00;
}
Pseudo-clase a:hover
La pseudo clase
a:hover se usa cuando el puntero del ratón pasa por encima de un enlace.
Esta pseudo-clase se puede usar para crear efectos interesantes. Por ejemplo, si queremos que nuestros enlaces sean de color naranja y estén en cursiva cuando el cursor pase sobre ellos, el código CSS que utilizaremos será el siguiente:
a:hover {
color: orange;
font-style: italic;
}
Ejemplo 1: Efecto cuando el cursor está encima de un enlace
Es bastante popular crear diferentes efectos cuando el cursor está encima de un enlace. Por lo tanto, examinaremos unos cuantos ejemplos más relacionados con la pseudo-clase
:hover.Example 1a: Espaciado entre letras
El espaciado entre los caracteres se puede ajustar usando la propiedad
letter-spacing. Esta propiedad se puede aplicar a los enlaces para crear un efecto especial:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
Ejemplo 1b: MAYÚSCULAS y minúsculas
En la examinamos la propiedad
text-transform, que sirve para intercambiar entre letras en mayúscula y minúscula. Esto se puede usar también para crear un determinado efecto en los enlaces:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Estos dos ejemplos dan una idea sobre las posibilidades casi infinitas al combinar diferentes propiedades. Ya puedes ir creando tus propios efectos... ¡inténtalo!
Ejemplo 2: Quitar el subrayado de los enlaces
Una pregunta muy recurrente es: ¿cómo quito el subrayado de los enlaces?
Deberías considerar cuidadosamente la necesidad de quitar el subrayado, pues esto podría disminuir la usabilidad de tu sitio web de forma significativa. La gente está acostumbrada al subrayado azul de los enlaces en las páginas web y saben que pueden hacer clic en ellos. ¡Incluso mi abuelita lo sabe! Si cambias el subrayado y el color de los enalces, existe una buena posibilidad de que los usuarios se confundan y, por lo tanto, no saquen todo el provecho al contenido de tu sitio web.
Dicho esto, es muy sencillo quitar el subrayado de los enlaces. Como recordarás de la lección 5, la propiedad
text-decoration se puede usar para determinar si el texto aparece subrayado o no. Para quitar el subrayado, establece el valor de text-decoration a none.
a {
text-decoration:none;
}
De forma alternativa, puedes establecer la propiedad
text-decoration junto con otras propiedades para las cuatro pseudo clases.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
