- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
FAQs
General Tutorials
MonsterONE Subscrioption
¿Cómo añadir los estilos de enlaces múltiples en la misma página?
noviembre 15, 2010
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.
