Una página web generalmente tiene secciones bien definidas como una cabecera, una barra lateral y un cuerpo donde ponemos el contenido pero no siempre queremos que los links o enlaces de nuestras web luscan de la misma forma en toda la página.
Mediante el uso de estilos CSS podemos definir un clase para cada tipo de link que deseemos. Por ejemplo, un estilo para la cabecera, un estilo para los menus y otro para los que se encuentren dentro del contenido que serán los mas generales.
Primero veamos como dar estilo a los links. Las etiquetas que ulizamos para hacer un link son <a></a>
y por tanto hay que adjudicarle estilos a esta etiqueta.
El link tiene cuatro estados y por tanto hay que definir cada una de ellas:
- Link no visitado. Se define con el atributo link.
- Link visitado. Se define con el atributo visited.
- Link activo (justo cuando presionamos). Se define con active.
- Link con el reton encima. Se define con hover.
La declaración de estilos estilos generales (para todo la página) se hace de la siguiente forma:
<style type="text/css">
a:link {text-decoration:none; color: #99CC00;} /* Link no visitado*/
a:visited {text-decoration:none; color:#99CC66} /*Link visitado*/
a:active {text-decoration:none; color:#99FF00; background:#EEEEEE} /*Link activo*/
a:hover {text-decoration:underline; color:#99FF00; background: #EEEEEE} /*Mause sobre el link*/
</style>
Y lo resultados se verán en todos los links colocados de la manera convencional (sin ninguna clase):
<a href="#">Primer link convencional</a>
<a href="#">Segundo link convencional</a>
Y el resultado es el siguiente
Primer link convencional
Segundo link convencional
Estos estilos tendran efecto en toda la página, A MENOS, que les declaremos una clase especial, por ejemplo para los menú podriamos crear una clase en CSS con caracteristicas diferentes a las declaradas de forma general de la siguente manera:
<style type="text/css">
a.menus:link {text-decoration:none; color: #ffffff; background: #990000; border:#FFFFFF 1px solid;} /* Link no visitado*/
a.menus:visited {text-decoration:none; color:#cccccc} /*Link visitado*/
a.menus:active {text-decoration:none; color: #003399; background: #993333; border:#FFFFFF 1px solid;} /*Link activo*/
a.menus:hover {text-decoration:underline; color: #003399; background: #993333; border:#FFFFFF 1px solid;} /*Mause sobre el link*/
</style>
Estos links tendran una apariencia distinta a los definidos para toda la página, la forma de aplicarlos es simplemente usando la clase:
<a href="#" class="menu">Primer link del menú</a>
<a href="#" class="menu">Segundo link del menú</a>
<a href="#" class="menu">Tercer link del menú</a>
Y el resultado es el siguiente:
Primer link del menú
Segundo link del menú
Tercer link del menú
A mi en lo particular me gusta tener los links “hover” y “active” con las mismas propiedades, dado que el momento en que se a click a un link es muy corto y a penas notorio. Ojala que les sirva!
Antonio mayo 4, 2009 a las 9:43 am
justo lo que buscaba, 2 años y 3 meses después. Gracias!
ResponderJosé Pablo Gr julio 5, 2009 a las 4:15 am
De gran ayuda! al momento de dar estilo a un solo mejor en joomla!
Gracias 😀
ResponderPeter julio 31, 2009 a las 2:19 pm
Gracias tenia muchas dudas acerca del tema
ResponderArk! agosto 13, 2009 a las 10:26 am
Muchas gracias por la información. Muy útil para los que estamos empezando con esto del diseño CSS 😀
Responderbufu octubre 29, 2009 a las 11:52 am
muchas gracias, era justo lo que buscaba.
ResponderpAU-Pau diciembre 7, 2009 a las 11:36 pm
Super bueno faltan ciertos detalles pero muy útil “Gracias”
Responderfernando mayo 31, 2011 a las 2:37 pm
Muchas gracias por el aporte no encontraba nunca una explicacion tan sencilla. gracias, ojala y sigas posteando mas sobre Css, un abrazo desde Chile.-
ResponderAdrian Torres octubre 16, 2011 a las 7:20 pm
Excelente comentario gracias por compartir tus conocimientos en codigo css.
ResponderAlejandro Torres septiembre 16, 2013 a las 9:09 am
Se agradece, aun muy vigente!!
Responderaitor noviembre 19, 2013 a las 7:44 am
hola queria saber si el visited funciona para imagenes es decir quiero hacer un menu con imagenes y cuando cliquen en una iamgen vayan a una pagina, quiero que el enlace clicado de la iamgen se cambie de foto como lo ago?
ResponderRosangela abril 21, 2014 a las 1:48 pm
Muy buena la información… despejos mis dudas … gracias
Responderaaa abril 26, 2014 a las 6:15 pm
buena cara de pescado
Responderjose alberto julio 22, 2014 a las 9:46 am
hola amigos una duda tengo mi menu que esta echo con css en html y solo queria saber como puedo hacer para que ese menu me abra otras paginas web pero sin salirme de la que tiene el menu.. es decir me deje el menu intacto y me muestre las paginas debajo del menu me seria de mucha ayuda gracias.
Responderroninbyte octubre 31, 2015 a las 7:46 pm
Gracias, tenia un problemilla con clases como a.menus:link y lo pude solucionar.
ResponderCARLOS mayo 12, 2016 a las 3:17 pm
Excelente y didáctica explicación referente a los enlaces con atributos independientes.
ResponderBeatriz febrero 16, 2017 a las 4:41 am
Gracias!!!
ResponderMe ha sido de gran ayuda.
Muy bien explicado
Dante marzo 21, 2017 a las 2:01 pm
pregunta: Cuando regresa a su estado normal un link modificado por un visited?
ResponderDante marzo 21, 2017 a las 2:03 pm
pregunta: Cuando regresa a su estado normal un link modificado por un visited?
Respondercoloque un A:visited y funciona bien, pero me salgo de la pagina y cuando vuelvo a entrar (no importa despues de cuando tiempo), sigue marcando los links como visitados.
Tony De Gouveia julio 31, 2017 a las 11:53 am
Buenas, yo quisiera que el link no se visualice en la parte inferior del navegador, me refiero a la barra de estado ¿Como se hace?.
Responder