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

Resumen: Entrega nº47 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01047D

 

 

PSEUDOCLASES PARA LINKS

Cuando hablamos de selectores nombramos las pseudoclases CSS y dijimos que las pseudoclases permiten identificar ciertos elementos o situaciones dentro de una página web para aplicar un estilo específico a dichos elementos o situaciones. Por ejemplo, la pseudoclase :first-child permite definir el estilo a aplicar al primer elemento de una serie.

css

 

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.

Pseudoclase

Aplicable a

Significado

:link

Los links

Se usa para definir estilos para links que no han sido pinchados por el usuario, aunque si no está en el orden adecuado puede sobreescribir otros estilos de links

:visited

Sólo links que ya han sido pinchados por el usuario

Se usa para definir estilos para links que han sido pinchados por el usuario y así distinguirlos de los no pinchados

:focus

Cualquier elemento que tiene el foco por estar seleccionado con el ratón o por uso del tabulador

Se usa para definir estilos para elementos que tienen el foco. Un link puede tener el foco.

:hover

Cualquier elemento que tiene el puntero del ratón encima de él

Se usa para definir estilos específicos para elementos por los que el usuario pasa el ratón por encima, aún sin pinchar en ellos

:active

Cualquier elemento en el momento de ser activado

Se usar para definir estilos específicos para links <a> o botones <button> en el justo momento en que son pulsados.

 

 

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:

/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: sans-serif; }
a:link {text-decoration:none; font-weight: bold; color:blue; }
a:visited {color: #6D006D;}
a:focus {outline: dashed thin red;}
a:hover {color: orange;}
a:active {font-style: italic;}
li {margin:5px;}
li a:link{border-bottom:solid #B22222 2px; font-weight: bold; color:#B22222;}
 

hover css

 

 

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:

icono info

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:

info icono

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.

/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: sans-serif; }
li {list-style-type: none;  }
a:link {text-decoration:none; font-weight: bold; color:blue;
background: url('CU01047D_2.png') no-repeat right;
padding-right:38px; display:inline-block; line-height:2.5em;}
a:visited {color: #6D006D;}
a:focus {outline: dashed thin red;}
a:hover {color: orange; background: url('CU01047D_3.png') no-repeat right;}
a:active {font-style: italic;}
li {margin:5px;}
li a:link{text-decoration:none; font-weight: bold; color:#B22222;
background: url('CU01047D_3.png') no-repeat left;
padding-left:46px; line-height:2.5em; display:inline-block; }
li a:hover{background: url('CU01047D_2.png') no-repeat left;}
 
 
 

En este código hemos introducido el icono como imagen de fondo y hemos creado tamaño para él introduciendo un padding lateral (right o left según nos interese). A su vez hemos hecho las modificaciones necesarias (márgenes, display, line-height) para conseguir una buena visualización. El resultado que debes obtener debe ser similar a el que mostramos a continuación.

Cuando el usuario sitúe el ratón encima de un link, el icono correspondiente debe cambiar de color.

efectos links css

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación