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 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;} |
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.
/* 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.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.