En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo, puede adquirir cuatro colores diferentes que pueden especificarse a través de las propiedades de la página. Estos cuatro colores diferentes corresponden a los tres estados del vínculo: vínculo normal, vínculo activo (el último pulsado), vínculo visitado o vínculo de sustitución (cuando el cursor está sobre el vínculo).
Aquí tienes dos vínculos de ejemplo:
www.aulaclic.es www.elpais.com
Si has visitado alguno, verás que sale en un tono morado, si no sale en azul.
Recuerda que como todo en nuestra página, los vínculos tienen un formato por defecto, pero es totalmente personalizable por CSS. Para ello, basta con crear una Regla de estilo para la etiqueta a.
Si queremos distinguir entre los tres estados del enlace, emplearemos los siguientes selectores:
Aunque recuerda que en las propiedades del documento teníamos la categoría Vínculos CSS que nos permite establecer estos valores.
Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.
Aquí tenemos dos vínculos en una imagen:
Como puedes ver, la primera imagen que hace de vínculo contiene un recuadro alrededor. Este es el formato por defecto, pero no suele quedar bien, sobre todo en imágenes con el fondo transparente.
Veamos como quitarlo utilizando CSS.
En el Inspector de propiedades CSS seleccionamos Nueva regla CSS en Regla de destino, y pulsamos Editar regla.
En Tipo de selector, elegimos Compuesto, y en Nombre de selector escribimos a img, es decir, imágenes que estén dentro de una etiqueta a (de enlace).
Se abrirá la ventana Definición de regla para a img:
En ella, seleccionamos la categoría Borde, y en Style seleccionamos none. Pulsamos Aceptar.
Esta regla hará que las imágenes con enlace se muestren sin borde.
Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando.
Para practicar puedes realizar el Ejercicio paso a paso Crear un hiperenlace.
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.