Definiendo los colores de los vínculos con CSS

Escrito por J.F. el Saturday, 21 de July del 2007 a las 18:24

Es importante en el diseño de una página web elegir los colores de los hipervínculos acordes a los del resto del diseño de la página. Por defecto, a los vínculos de una página web se le asignan unos colores que pueden ser modificados mediantes una hoja de estilos. Existen 4 tipos de "estados" de los hipervínculos:

• El link normal(link), es el que te encuentras por defecto en cualquier sitio web y que no ha sido visitado ninguna vez.
• El enlace ya visitado(visited), que como su propio nombre indica ya ha sido visitado con anterioridad.
• Hipervínculo activo(active), que es el estado cuando seleccionamos con el cursor el hipervínculo. Realmente no es nevcesario su uso, salvo casos puntuales.
• Por último el vínculo hover(hover), que se produce cuando situamos el cursor encima del enlace.

Una vez aclarado ésto, veamos como podemos definir el formato de los hipervínculos de un sitio web. Lo haremos mediante CSS, y como norma general, usaremos un reducido número de atributos para definir el estilo de los enlaces: Color del texto, alineación de éste, color del fondo, estilo de la fuente(cursiva, negrita, subrayado). También podremos utilizar otros menos usuales como fuente, borde, imagen de fondo, etc. Veamos pues un ejemplo:

TEXTO PLANO

CSS:

1. //a:link se usa para links normales
2. a:link {text-decoration:none;font-weight:bold;color:#FFF;}
3. //a:visited lo utilizamos para los links ya visitados
4. a:visited {text-decoration:none;font-weight:bold;color:#FFF;}
5. //a:hover, para cuando situamos el cursor sobre el vínculo
6. a:hover {text-decoration:underline;font-weight:bold;color:#000;}

En éste caso, hemos definido que todos los links de nuestro sitio sean de color blanco, con fuente negrita. Al ponernos encima el color cambiará a negro, se subrayará el texto y se mantendrá la negrita. Podemos personalizar muchos más aspectos como veremos más abajo en el resumen de algunos estilos CSS que podemos incluir. Si te das cuenta hemos decidido que el color de los links normales y de los vínculos ya visitados sea el mismo, ésto ayuda a mantener el estilo uniforme de nuestro sitio. Cuando no hay muchos hipervínculos en una página web no ocurre nada y es recomendable, pero en el caso de que en una misma página haya un gran número de links, es muy recomendable cambiarles el color para así no confundir al visitante. Si no conoces mucho acerca de CSS y el diseño web en general te preguntarás, ¿Qué ocurre si deseo incluir en una misma página diferentes estilos para los links? Pues es muy fácil, habrá que crear una nueva clase, definiendo los estilos de los vínculos. Aquí tienes un ejemplo:

TEXTO PLANO

CSS:

1. a:link.videos {text-decoration:none;font-weight:bold;color:white;background-color:#515151;}
2. a:visited.videos{text-decoration:none;font-weight:bold;color:white;background-color:#515151;}
3. a:hover.videos {text-decoration:underline;font-weight:bold;color:#515151;background-color:#white;}

Como habrás visto hemos añadido .videos, creando así una nueva clase de vínculos. Para utilizar ésta clase de vínculos lo único que deberemos hacer es definir los vínculos de la siguiente manera:

TEXTO PLANO

HTML:

1. <a class="videos" href="#">Ir arriba</a>

Aquí tienes un pequeño recordatorio CSS, para que puedas definir los estilos de tus hipervínculos:

color:#F12345;
Sirve para definir el color del texto, indicando el color mediante su nombre o su valor RGB.
font-weight: normal | bolg | bolder
Estilo de la fuente, desde normal hasta diferentes tipos de negrita.
text-decoration: none | underline | overline | line-through
Estilo de la fuente, tachado, subrayado, normal.
text-align: left | right | center | justify
Alineación del texto
background-color: green;
Color de fondo

Ejemplo: | Ver diferentes estilos de vínculos con CSS

Comentarios (2)

Categoria: CSS

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>