[contact-form-7 id="24084" title="Feedback ES"]

¿Cómo añadir los estilos de enlaces múltiples en la misma página?

P: ¿Cómo añadir varios estilos de enlace en la misma página?

R: Podemos definir un estilo de vínculo que sólo está activo en una área determinada de la página por medio de los selectores dependientes del contexto.
En lugar de dirigir A: selector de enlace, vamos a definir una área exterior, separado de la área donde necesitamos algún estilo de vínculo.

Por ejemplo:


<html>
<head>
<style type=”text/css”>
.body A:link {color: #ff6600; text-decoration: none}
.body A:visited {color: #0000ff; text-decoration: none}
.body A:active {color: #0000CC; text-decoration: none}
.body A:hover {color: #6699cc ; text-decoration: underline; color: red;}

.body2 A:link {color: #0000CC; text-decoration: underline overline}
.body2 A:visited {color: #0000CC; text-decoration: underline overline}
.body2 A:active {color: #0000CC; text-decoration: underline overline}
.body2 A:hover {color: #0000CC; text-decoration: underline; color: green;}
</style>
</head>

<body>
UN TIPO DE ENLACES
<br/>
<span class=”body”>
<a href=”http://www.yahoo.com”>YAHOO</a>
<br/>
<a href=”http://www.google.com”>GOOGLE</a>
</span>
<br/>
<br/>
OTRO TIPO DE ENLACES
<br/>
<span class=”body2″>
<a href=”http://www.yahoo.com”>YAHOO</a>
<br/>
<a href=”http://www.google.com”>GOOGLE</a>
</span>
</body>
</html>

Fíjese en la manera de utilizar <span>  para definir el contexto.
Esto es inteligente por dos razones:

    • esto nos permite utilizar los estilos de enlace diferentes en la misma página, en lugar de estar limitados a la utilización de un estilo único de enlace.
    • podemos definir las áreas enteras donde se aplica un cierto estilo de enlace. Por lo tanto, no tiene que añadir una definición de estilo a cada de los enlaces de esa área.