English Português

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!

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Antonio / Hace 8 años /

      justo lo que buscaba, 2 años y 3 meses después. Gracias!

      Responder a Antonio →
    2. José Pablo Gr / Hace 8 años /

      De gran ayuda! al momento de dar estilo a un solo mejor en joomla!

      Gracias 😀

      Responder a José Pablo Gr →
    3. Peter / Hace 8 años /

      Gracias tenia muchas dudas acerca del tema

      Responder a Peter →
    4. Ark! / Hace 8 años /

      Muchas gracias por la información. Muy útil para los que estamos empezando con esto del diseño CSS 😀

      Responder a Ark! →
    5. bufu / Hace 7 años /

      muchas gracias, era justo lo que buscaba.

      Responder a bufu →
    6. pAU-Pau / Hace 7 años /

      Super bueno faltan ciertos detalles pero muy útil “Gracias”

      Responder a pAU-Pau →
    7. fernando / Hace 6 años /

      Muchas gracias por el aporte no encontraba nunca una explicacion tan sencilla. gracias, ojala y sigas posteando mas sobre Css, un abrazo desde Chile.-

      Responder a fernando →
    8. Adrian Torres / Hace 6 años /

      Excelente comentario gracias por compartir tus conocimientos en codigo css.

      Responder a Adrian Torres →
    9. Alejandro Torres / Hace 4 años /

      Se agradece, aun muy vigente!!

      Responder a Alejandro Torres →
    10. aitor / Hace 3 años /

      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?

      Responder a aitor →
    11. Rosangela / Hace 3 años /

      Muy buena la información… despejos mis dudas … gracias

      Responder a Rosangela →
    12. aaa / Hace 3 años /

      buena cara de pescado

      Responder a aaa →
    13. jose alberto / Hace 3 años /

      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.

      Responder a jose alberto →
    14. roninbyte / Hace 1 año /

      Gracias, tenia un problemilla con clases como a.menus:link y lo pude solucionar.

      Responder a roninbyte →
    15. CARLOS / Hace 12 meses /

      Excelente y didáctica explicación referente a los enlaces con atributos independientes.

      Responder a CARLOS →
    16. Beatriz / Hace 2 meses /

      Gracias!!!
      Me ha sido de gran ayuda.
      Muy bien explicado

      Responder a Beatriz →
    17. Dante / Hace 1 mes /

      pregunta: Cuando regresa a su estado normal un link modificado por un visited?

      Responder a Dante →
    18. Dante / Hace 1 mes /

      pregunta: Cuando regresa a su estado normal un link modificado por un visited?
      coloque 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.

      Responder a Dante →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad