Unidad 3. Hiperenlaces (VII)

3.6. Pseudoclases.Estilos de los hiperenlaces.

Por defecto un hiperenlace se muestra subrayado y en color azul, sin embargo lo más común es cambiar estos estilos para adaptarlos al diseño de la página. Para hacerlo disponemos de las hojas de estilos y las pseudoclases.

Las pseudoclases son unas palabras claves que se añaden a los selectores en las hojas de estilo para indicar un estado del selector. Respecto al selector hiperenlace tenemos cuatro pseudoclases:

1.- link, es el estado inicial del enlace al cargar la página, no se ha hecho clic sobre él, es decir, no visitado.

2.- visited, visitado, es decir, ya se ha hecho clic anteriormente sobre él.

3.- hover, el cursor está situado encima del enlace.

4.- active, mientras se mantiene pulsado el botón al hacer clic sobre el enlace.

Utilizando las hojas de estilo podemos dar formato a las pseudoclases.

Por ejemplo, si queremos que los hiperenlaces sin visitar aparezcan en color verde oscuro y sin subrayar escribiremos en la hoja de estilo:

a:link { color:darkgreen; text-decoration: none }

Para que los enlaces visitados aparezcan en color rojo:
a.:visited { color: red;}

Para que al colocar el cursor aparezcan en color morado y en negrita:
a:hover { color: darkviolet; font-weight: bold }

Para que en mientras hacemos clic aparezcan en color verde claro:
a:active { color: yellowgreen; }

Y el resultado es este:

Antes de hacer clic soy de color verde oscuro, al poner el cursor morado y en negrita, al hacer clic verde claro y después de hacer clic rojo

Para practicar esto por ti mismo es conveniente que realices este Ejercicio paso a paso: Hiperenlaces.Segunda parte.