Acercando el poder del mundo a tus manos
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.
Los links por defecto poseen las siguientes caracteristicas:
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;
}
LINK Link normal.
LINK Link con el cursor encima.
LINK Link visitado.
