Cambiando el diseño de los links en CSS – Pseudo-clases CSS

ligas en CSS Una de las ventajas de CSS es que nos permite aplicar diferentes estilos a un mismo elemento en función a su estado. Así que por ejemplo cuando pasamos el ratón por encima del enlace, este cambia su aspecto. CSS define cuatro estados para un enlace:   a:link (enlace que aun no hemos visitado). a:visited (enlace que ya visitamos). a:hover (aplica un estilo al enlace cuando colocamos el puntero del       ratón por encima). a:active (aplica un estilo cuando pinchamos sobre el enlace).

Si aplicamos diferentes Pseudo-clases sobre un mismo enlace y no queremos provocar una colisión entre estilos, de forma que al pasar el ratón por encima de un enlace visitado, se aplique :hover y :visted a la vez. Debemos tener cuidado de seguir el siguiente orden:

a:link, a:visited{…}

a:hover, a:active{…}

 

¿Como eliminar estilos que por defecto muestran los navegadores?

Como sabemos, por defecto los navegadores nos muestran los enlaces no visitados de color azul y los visitados de color morado. Con las Pseudo-clases podemos modificar por completo ese aspecto.

a:link, a:visited{text-decoration: none}

a:hover, a:active{text-decoration: none}

 

Pseudo-clases & Clases

¿Y si queremos combinar las Pseudo-clases con las clases CSS? También podemos combinarlas, de la siguiente forma:

 

a.liga:visited { color: #FFF;}

 

<a class=”liga” href=”http://www.tumaestroweb.com/”>TuMaestroWeb</a>

 

Algo muy importante y que no debemos olvidar es que las Pseudo-clases no pueden separarse de los dos puntos iniciales.

a: link     INCORRECTO

a:link      CORRECTO

1
2
3
4
5
6
7
8
9
10
11
12
        <title>Pseudo-clases CSS</title>
    
        <header>
            <nav>
                <a class="liga" href="inicio.html">INICIO</a>
                <br><br><a class="liga" href="spyware.html">SPYWARE</a>
                <br><br><a class="liga" href="trucos.html">TRUCOS</a>
                <br><br><a class="liga" href="web.html">WEB</a>
            </nav>
        </header>
    <!-- Cuerpo de la pagina -->

Código CSS3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a.liga:link, a.liga:visited{
text-decoration: none;
color: #61210B;
font-weight: bold;
}
a.liga:hover {
background: #2A0A0A;
Color: #FFF;
font-style: italic;
}
a.liga:active{
background: #2A0A0A;
Color: #FFFF00;
font-style: normal;
}

Ejecútalo en tu navegador y coméntanos los resultados…


¿ Te Gusto ? Comenta y compartelo!