CSS Para Enlaces

Los enlaces son la base de toda la internet, se presentan muchas veces en su aspecto natural con textos de color azul subrayado, otras veces en menus verticales u horizontales, se aplican una serie de efectos para resaltarlos para que adopten una forma llamativa al pasar sobre ellos como cambiar el color de texto, iluminar el color de fondo, subrayar, quitar subrayado, añadirle viñetas, y un largo etc.

¿ Cómo aplicar CSS a los enlaces?

Para empezar escribimos una lista con enlaces normales

<ul>
<li><a href="#"> Enlace 1 </a></li>
<li><a href="#"> Enlace 2 </a></li>
<li><a href="#"> Enlace 3 </a></li>
</ul>

Ver ejemplo de lista con enlaces normales

Añadiendo estilos CSS a la lista de enlaces

Las propiedades para modificar la apariencia de los enlaces o links, se aplican al elemento a. Por ejemplo, si deseamos cambiar el color azul predeterminado a uno verde escribimos:

a {color:green;}

Ver ejemplo de lista con enlaces con el color modificado

Cambiar color cuando el puntero del raton pasa o esta sobre el enlace

Un efecto muy utilizado es cambiar el comportamiento del enlace cuando el cursor o puntero del ratón pasa por encima. Para lo cual se utiliza la pseudo-clase :hover cuando el cursor se coloca o pasa sobre el enlace.

Agregando la pseudo-clase :hover

Agregamos la pseudo-clase :hover al elemento a para modificar el comportamiento del enlace cuando el puntero del mouse pasa sobre el.

Por ejemplo, cambiara del color verde al rojo cuando pasemos sobre el enlace.

<ul>
<li><a href="#"> Enlace 1 </a></li>
<li><a href="#"> Enlace 2 </a></li>
<li><a href="#"> Enlace 3 </a></li>
</ul>

a{color:green;}
a:hover{color:red;}

Cambiar color del enlace al hacer clic

Añdiremos el efecto para cambiar el color del enlace al hacer clic sobre los enlaces. utilizando la pseudo-clase active

<ul>
<li><a href="#"> Enlace 1 </a></li>
<li><a href="#"> Enlace 2 </a></li>
<li><a href="#"> Enlace 3 </a></li>
</ul>

los enlaces tendran color verde, al pasar sobre ellos color rojo y al hacer clic o acivar el enlace tendra color amarillo.

a{color:green;}
a:hover {color:red;}
a:active {color:yellow;}