Ver la Versión Completa : Colores de links
CARLOS E
13-06-2006, 23:48:04
Hola
para dar un color distinto a los links de mi pagina utlizo el siguiente codigo
<style type="text/css"> < A:link {text-decoration:none; color:#ffffff} A:visited {text-decoration:none; color:#000000} A:active {text-decoration: none} A:Hover {text-decoration:none; color:#FF9933;}
</style>
pero como puedo hacer para que un grupo de links tengan esos colores y otro grupo de links(dentro de la misma pagina) adquieran otros?
Hola,
Tendrás que "clasificar" los enlaces, o bien "identificar" alguno de ellos, o bien meterlos en marcos a los que luego puedas dar su correspondiente estilo, incluyendo los enlaces que contenga dicho marco.
¿Un ejemplo? Lo haremos únicamente con el "a:link", para no liarnos demasiado. Por cierto, que sepas que también valdría un "a", simplemente, para dar el mismo estilo a todos los enlaces, pero, a lo que vamos:
body { }
a:link { } /* Enlaces en todo el documento */
.enlace {} /* Enlaces de la clase "enlace" */
#enlace {} /* Enlace identificado como "enlace" */
div.marco a:link {} /* Enlaces dentro de "div" de clase "marco" */
div#marco a:link {} /* Enlaces dentro de "div" de ID "marco" */
Como ves puedes hacer diferentes "combinaciones" para lograr lo que pretendes. ;)
CARLOS E
14-06-2006, 02:02:37
Muchas gracias. He diseñado este ejemplo, aunque me ha funcionado a medias debido a que aun me aparecen los enlaces subrayados y solo en el color que tengo a:hover, que en la clase .pre es "#aaaaaa" y en la .ver "#ff9933"
¿que hago mal?
<style type="text/css">
.pre{A:link text-decoration:none; color:#AAAAAA A:visited text-decoration:none; color:#AAAAAA A:active text-decoration: none; A:Hover text-decoration:none; color: #AAAAAA}
.ver{A:link text-decoration:none; color:#FFFFFF A:visited text-decoration:none; color:#FFFFFF A:active text-decoration: none; A:Hover text-decoration:none; color: #FF9933}
</style>
<BODY bgcolor=black>
<A HREF="index.php" CLASS="PRE"> Inicio </a>|
<A HREF="crea_anuncio.php" CLASS="PRE"> enlace x del grupo 1 </a><br>
<A HREF="preguntas.php" CLASS="PRE"> enlace y del grupo 1 </a><br>
<A HREF="recomienda.php" CLASS="PRE"> enlace z del grupo 1 </a><br>
<A HREF="pag1.php" CLASS="VER"> Inicio </a>|
<A HREF="pag2.php" CLASS="VER"> enlace a del grupo 2 </a><br>
<A HREF="pag3.php" CLASS="VER"> enlace b del grupo 2 </a><br>
<A HREF="pag4.php" CLASS="VER"> enlace c del grupo 2 </a><br>
</BODY>
JavierB
14-06-2006, 19:09:58
Hola CARLOS E
Prueba con este código:
<style type="text/css">
.pre {text-decoration:none; color:#AAAAAA}
.ver {text-decoration:none; color:#FFFFFF}
</style>
</head>
<body style="background:black">
<a href="pagina1.html" class="pre">Enlace</a>
<a href="pagina2.html" class="ver">Enlace</a>
</body>
Saludos, :cool:
vBulletin v3.6.8, Derechos ©2000-2024, Jelsoft Enterprises Ltd.