Pseudoclases CSS link, visited, focus, hover y active. Estilos y efectos en links. Propiedad outline. (CU01047D)

CSS define otra serie de selectores denominados pseudoelementos que van precedidos de :: y cuya función es análoga a la de las pseudoclases. También hemos hablado de ellos anteriormente en el curso, por ejemplo ::first-letter nos permite definir un estilo para la primera letra del texto de un elemento.

Vamos a hablar ahora de cómo dotar de estilos a los links en CSS. Para ello es necesario referirnos a algunas pseudoclases que son las que permiten hacer esto.

La sintaxis a emplear es la que ya conocemos: tipoElemento:nombrePseudoclase { … }

A la hora de aplicar estas pseudoclases es importante el orden en que se aplican, ya que si no se hace correctamente se pueden anular estilos definidos. Por ejemplo:

a:hover {color: orange;}

a:link {text-decoration:none; font-weight: bold; color:blue;}

Podríamos pensar que los links sobre los que se situara el ratón se mostrarían naranjas, pero no va a ser así. Se mostrarán azules porque a:link sobreescribe lo definido en a:hover porque :link afecta a todos los links (incluso los que tienen el ratón encima de ellos) mientras que :hover sólo afecta a determinados links. Por ello si situamos :link después de :hover estaremos anulando lo definido en :hover.

Para evitar esto se usa una regla mnemotécnica: LVHA (link-visited, hover, active; es conveniente recordar y aplicar este orden para evitar sobreescribir indebidamente. Podemos usar una frase como “Llegamos vivos hasta amanecer” o “Luego vuelvo hasta allí para acordarnos de este orden.

La pseudoclase :focus se suele colocar justo antes de :hover.

Veremos ejemplos de uso de estas propiedades a continuación.

PROPIEDAD OUTLINE CSS

La propiedad outline CSS es una propiedad shorthand análoga a la propiedad border. De hecho, lo que hace es crear un contorno similar a un borde, con la diferencia de que no ocupa espacio. Su uso suele ser para marcar los contornos de un elemento (muchas veces lo usan los diseñadores y programadores para ver las cajas del modelo de cajas mientras están realizando el diseño).

Al igual que con los bordes existen propiedades individuales que son: outline-style, outline-widht y outline-color, pero en general será preferible usar la propiedad shorthand.

Dado que esta propiedad es completamente análoga a la propiedad border, te remitimos a leer el apartado de bordes si quieres profundizar en su manejo. En el código del ejemplo que vemos a continuación puedes ver un ejemplo de aplicación de esta propiedad.

EJEMPLO DE APLICACIÓN

Usando el código HTML de base que venimos empleando a lo largo del curso, escribe un archivo de estilos css con este código:

En la imagen anterior vemos el resultado de aplicar el código css indicado. En naranja el aspecto de un link sobre el que tuviéramos situado el ratón encima. Abajo en azul, la línea punteada roja indica que el link tiene el foco. El color azul con fuente en negrita es el que hemos definido para todos los links excepto los que estén dentro de elementos li, que se muestran en la parte superior de otro color.

Hemos eliminado el subrayado por defecto de los links y a cambio hemos usado la propiedad border-bottom. Esto es una práctica que usan muchos diseñadores porque les permite un mayor control sobre los links (evita que queden cortadas las partes inferiores de las letras, permite establecer grosores personalizados, etc.).

Nota: en algunos navegadores puede haber comportamientos extraños o particulares. Por ejemplo que los links visitados definidos con a:visited no respondan y no muestren los estilos definidos a través de la regla css correspondiente. Esto ha sido introducido como opción de seguridad en algunos navegadores para evitar que se pueda rastrear lo que ha hecho el usuario y qué links ha visitado durante su navegación. Podemos modificar las opciones de seguridad en nuestro navegador (en algunos navegadores esto se hace accediendo a Opciones, Privacidad y eligiendo “Recordar mi historial de descargas y navegación”), pero esto sólo afectará a nuestro navegador.

Consejo: acostúmbrate a aceptar que los navegadores tengan distintos comportamientos. Es algo con lo que tendrás que convivir. En algunos casos se podrán aplicar soluciones específicas o “parches” específicos para cada navegador y en otros casos simplemente habrá que aceptarlo así.

EJERCICIO RESUELTO

Usando el código HTML de base que venimos empleando a lo largo del curso, se desea realizar lo siguiente:

Para los links dentro de elementos li: establecer su color como #B22222. Estos links deben aparecer sin subrayado y en negrita.Poner la siguiente imagen (que mide 38x38 px) a la izquierda de los links dentro de listas:

Para los links dentro de párrafos: establecer su color como azul, formato negrita, sin subrayado. Color para cuando han sido visitados: #6D006D. Color al pasar el ratón encima de ellos: naranja. Poner la siguiente imagen (que mide 38x38 px) a la derecha de los links dentro de párrafos:

Adicionalmente: cuando el usuario ponga el ratón encima de un elemento que lleva el icono rosado la imagen de fondo deberá cambiar y pasar a ser la imagen con el icono azul. Del mismo modo, cuando ponga el ratón encima de un elemento que lleva el icono azul la imagen de fondo deberá cambiar y pasar a ser la imagen con el icono rosado. Es decir, el color del icono debe cambiar al pasar el ratón por encima del link generando un “efecto de cambio”.

Nota: eliminar las viñetas de las listas usando esta propiedad: li {list-style-type: none;}

SOLUCIÓN

Aquí te planteamos una posible solución (en tu caso tendrás que poner las rutas de imágenes que hayas utilizado). Ten en cuenta que se puede llegar a un resultado de distintas maneras, por tanto tu código podría ser distinto a este código. Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.