Cómo cambiar el color de los enlaces en una página web

Ejemplos de colores

A continuación se detallan los pasos sobre cómo puede cambiar el color de los enlaces que se muestran en su página web utilizando HTML y CSS. Aunque los colores del enlace se pueden hacer con la etiqueta HTML BODY, siempre recomendamos hacer cualquier configuración de estilo en CSS como se muestra a continuación.

Comprender los diferentes tipos de hipervínculos

Los hipervínculos son elementos especiales en su página, porque son interactivos. Para indicar que son interactivos, se colorean de manera diferente según su estado. Un hipervínculo tiene tres colores especiales, además de su color original, que representan tres estados diferentes:

  1. Enlace visitado: el color de un enlace visitado. Si un hipervínculo es de este color, el usuario puede esperar que al hacer clic en el enlace los lleve a una página que ya han visto.
  2. Enlace de desplazamiento: el color cuando el mouse se desplaza sobre un enlace. Si un hipervínculo es de este color, el usuario puede esperar que al presionar el botón izquierdo del mouse (hacer clic) y luego soltar el botón haga que se visite el enlace. El color de desplazamiento es el mismo para los enlaces "Activos" y "Visitados".
  3. Enlace activo: el color del enlace al hacer clic. Cuando el usuario ve este color, puede esperar que al soltar el botón del mouse, el navegador visite el enlace.

Ejemplo de color de enlace CSS

En el siguiente ejemplo de CSS, estamos configurando los colores del hipervínculo para que se parezcan a lo que se muestra en esta página. Primero, todos los anclajes se establecen en el # 2c87f0 (tono de azul), # 636 un tono de púrpura y todos los colores de enlace activo y activo: # c33 (rojo). El siguiente código se puede agregar al elemento de estilo CSS o en su archivo .css.

a {color: # 2c87f0; } a: visitado {color: # 636; } a: pasar el ratón, a: activo, a: foco {color: # c33; }

Si su página no utiliza CSS o no desea convertir a CSS, los pasos a continuación muestran cómo hacerlo en la etiqueta BODY en el código HTML. Sin embargo, como se mencionó anteriormente, recomendamos utilizar el código CSS anterior en lugar de la etiqueta del cuerpo. Puede agregar el código anterior en un archivo CSS y vincular todas sus páginas web a ese archivo CSS. Luego, puede cambiar los valores de color de fondo en ese único archivo CSS para cambiar instantáneamente el color de fondo de todas las páginas que lo enlazan.

Ejemplo de etiqueta de cuerpo HTML

En algunas situaciones muy raras, puede que no sea posible usar CSS. Para esas situaciones, también puede definir el color de fondo, el color del texto, el color del enlace y otros valores en la etiqueta del cuerpo HTML como se muestra a continuación.

<BODY TEXT = "# 092d07" LINK = "# 1FOOFF" VLINK = "# 000000" ALINK = "# 000000" BGCOLOR = "# ffffff">

A continuación se encuentran las descripciones de cada uno de los atributos HTML en la etiqueta del cuerpo.

TEXTO = El color del texto. ENLACE = El color de los enlaces. VLINK = Color del enlace visitado. ALINK = Color del enlace activo o el color al que cambia el enlace cuando se hace clic. BGCOLOR = El color de fondo de la página.