Artículos

[CSS] ¿Cómo funcionan los estilos a enlaces?

Introducción

Los links o enlaces no son más que hipertexto. Texto con un hipervínculo que mediante un simple clic puede realizar una acción, ya sea llevarte a otra página (interna o externa) o ejecutar cierta acción dentro de la misma página por ejemplo el despliegue de un submenú.

En esta sección vamos a explicar cómo se le pueden dar distintos estilos a estos links, ya sea cuando son seleccionados o se les hace clic.

Estilos de links por defecto:

Los links por defecto poseen las siguientes caracteristicas:

  • Link sin seleccionar (link)
    • Es de color azul y posee un subrayado. Quedando así: LINK
  • Link con el cursor encima (hover)
    • Se torna de un color rojo. Quedando así: LINK
  • Link visitado (visited)
    • Cuando el link ya fue visitado, se torna de un color púrpura. Quedando así: LINK

Utilización

Los links son reconocidos con la etiqueta “a” en html. (<a ...> ... </a>). Entonces, dentro de nuestra hoja de estilos (stylesheet) llamada por ejemplo estilo.css lo que vamos a poner para modificar los estilos del link es lo siguiente:

a:link {
    ...
}

Con eso determinaremos el estilo que desearemos utilizar para los links cuando el cursor no está encima.

a:hover {
    ...
}

Con eso determinaremos el estilo que desearemos utilizar para los links cuando el cursor está encima.

a:visited {
    ...
}

Con eso determinaremos el estilo que desearemos utilizar para los links que ya fueron visitados.

a {
    ...
}

Eso lo usaremos si no queremos que el link tome algún atributo cuando fue visitado. Eso suele usarse para hacer los enlaces de estilo botón, los que se ponen en las barras de navegación de las webs, etc.

A los links se le puede dar cualquier atributo que uno desee, ya sea cambio de color, fuente, subrayado, tamaño, posición, borde, etc.

Aquí algunos ejemplos:

a:link {
    color: #F00;
    font-family: Arial, Helvetica, Sans-serif;
    text-decoration: underline;
}

a:hover{
    color: #0F0;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: underline overline;
}

a:visited {
    color: #00F;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: line-through;
}

Poniendo eso, quedaría algo así:

LINK    Link normal.

LINK    Link con el cursor encima.

LINK    Link visitado.


Envío el mié 02 jul 2008 16:12:46 CDT por legendar.

Comentarios (0)

Deja tu comentario

Nombre o apodo para mostrar:
¿Eres usuario registrado?

Correo electrónico:

Sitio web:

* Comentario:

* Código de seguridad:
captcha


Feed/RSS
Nuevo Proyecto
Descubre CulturAllez

Identifícate
Usuario:

Clave:


¿Olvidaste tu contraseña?

o bien, puedes Registrarte