Unidad 6. Hiperenlaces (V)


6.5. Formato del enlace

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:

www.aulaclic.es www.aulaclic.es

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.

Las últimas versiones de los navegadores Chrome (v.38) y Firefox (v.32) ya no dibujan el contorno de la imagen, IE 9 si lo dibuja.

Veamos como quitarlo utilizando CSS.

En el Inspector de propiedades CSS pulsamos el botón CSS Designer, que abrirá el panel Diseñador de CSS. En el primer subpanel, si no hay una fuente definida para la regla de estilo que vamos a crear, seleccionamos una. Recuerda que puede ser un archivo .css, o bien definir la regla en la propia página, como vimos en el capítulo 4.

En el subpanel Selectores pulsamos el botón para añadir un nuevo selector. En la caja de texto escribimos a img, es decir, imágenes que estén dentro de una etiqueta a (de enlace).

Finalmente, en el subpanel Propiedades, pulsamos en el icono Borde (tercero de izquierda a derecha) y luego en el icono que representa los cuatro bordes establecemos la propiedad sytle en none.

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.


Marzo-2015
Pág. 6.5
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.