CSS-Capitulo 4

Ahora vamos a aprender como crear enlaces en CSS.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:

Codigo1

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.

Codigo2

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:hover cuando 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.

Codigo3

• Ver ejemplo

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:

Codigo4

• Ver ejemplo

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:

Codigo5

• Ver ejemplo

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:

Codigo6

• Ver ejemplo

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

Como recordarás de la lección 5, 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:

Codigo7

• Ver ejemplo

Ejemplo 1b: MAYÚSCULAS y minúsculas

En la lección 5 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:

Codigo8

• Ver ejemplo

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. Si cambias el subrayado y el color de los enlaces, 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.

Codigo9

De forma alternativa, puedes establecer la propiedad text-decoration junto con otras propiedades para las cuatro pseudo clases.

Codigo10

• Ver ejemplo

Resumen

En esta lección has aprendido nociones relativas a las pseudo-clases, a la vez que has usado algunas de las propiedades de lecciones anteriores. Esto debería darte una idea de algunas de las posibilidades que ofrece CSS.