Translate

Cómo cambiar color a los enlaces html

Necesito cambiar el color de los enlaces en una página web y no se como hacerlo... --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

En la etiqueta body se definen esas cosas:

<body link="#ffffcc" vlink="#ffffcc" alink="#ffffcc">

link para los enlaces normales

vlink para los enlaces visitados

alink para los enlaces activos (en el momento de pulsarse)

También se pueden cambiar con Hojas de Estilo en Cascada, colocando los estilos en la cabecera de la página, por ejemplo:


<STYLE type="text/css">

A:link {text-decoration:none;color:#0000cc;}

A:visited {text-decoration:none;color:#ffcc33;}

A:active {text-decoration:none;color:#ff0000;}

A:hover {text-decoration:underline;color:#999999;}

</STYLE>


Enlace sin subrayado

Desde siempre los navegadores muestran los enlaces textuales con un subrayado (underline) que señala su función. Internet Explorer ofrece la posibilidad de eliminar dicho subrayado actuando en las propiedades del navegador. Con las hojas de estilo los elaboradores pueden eliminar totalmente el subrayado mediante un simple código que se insertará entre las marcas BODY del documento:


<style type="text/css">
A:link, A:visited { text-decoration: none }
</style>

Enlace subrayado sólo cuando pasa el ratón

El ejemplo que hemos visto antes puede elaborarse de nuevo para hacer más atractiva la página. En los enlaces que no llevan subrayado éste aparecerá sólo cuando el ratón pasa por encima gracias a la propiedad A:hover.


<style type="text/css">
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>


Con referencia al último ejemplo es posible impostar la CSS para obtener el efecto contrario: los enlaces están subrayados por defecto pero el subrayado desaparece cuando el ratón pasa por encima:

<style type="text/css">
A:link, A:visited { text-decoration: underline }
A:hover { text-decoration: none }
</style>


Enlace que cambia de color cuando pasa el ratón

Explotando todavía más la propiedad A:hover, es posible crear un efecto mediante el cual los enlaces tengan un color por defecto que cambiará cuando el ratón pase por encima. El color se puede impostar como palabra clave (red, green, blue, etc.) o como trío hexadecimal.


<style type="text/css">
A:hover { color: red }
</style>


Enlace que cambia color de fondo cuando pasa el ratón

Otra vez la propiedad A:hover que, de acuerdo con la propiedad de definición del background genera un efecto muy interesante: cuando el cursor del ratón pasa por encima del enlace, éste se activa con un color de texto y de fondo impostados.


<style type="text/css">
A:hover { color: white; background:blue }
</style>


Enlace que cambia el tamaño del texto cuando el ratón lo activa

Último ejemplo de A:hover. Esta vez el texto se agranda cuando el ratón pasa por encima.


<style type="text/css">
A:link { font-size: 15px }
A:visited { font-size: 15px }
A:hover { font-size: 16px }
</style>

Las hojas de estilo consideredas hasta ahora son incorporadas, ya que están colocadas entre las marcas HEAD del documento y se refieren a todos los elementos de la página.
Exigencias particulares pueden requerir que se activen estos efectos sólo por lo que se refiere a algunos enlaces. Si por ejemplo los enlaces se quieren subrayar excepto por lo que se refiere a un único elemento de la página, se usan las hojas de estilo en línea de esta manera:


<A STYLE="text-decoration: none" HREF="http://www.htmlpoint.com">VISITA HTMLpoint</A>

Una buena norma es la de igualar los efectos en los enlaces para todos los documentos del sitio, adoptando un método que permite un automatismo en este sentido. La solución ideal son las Hojas de estilo externas, dentro de las cuales se insertan los atributos de estilo.

0 comentarios:

Publicar un comentario