Varios estilos de link

Citar

Escrito el 01 Mar 2007 04:42 pm

Voy a ir directo, como creo más de un estilo css para los vinculos? Solo he podido usar uno.

Se que la respuésta debe estar por aquí en algún lado, solo que no soy muy diestro en el css. Gracias!

Por el_chivo

3 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 01 Mar 2007 05:12 pm

Pues ponte a aprender.

Lo puedes hacer de varias maneras:

1- A cada link le asignas un id o clase de esta forma:
CSS

Código :

a.link1 {color:#F00;}
a.link2 {color:#0F0;}
a#link3 {color:#00F;}
...

XHTML

Código :

<a class="link1">Enlace rojo</a>
<a class="link2">Enlace verde</a>
<a id="link3">Enlace azul</a>
...

2- También puedes poner los enlaces en diferentes capas de la página:
CSS

Código :

#header a {color:#F00;}
#content a {color:#0F0;}
...

XHTML

Código :

<div id="header">
  <a>Enlace rojo</a>
</div>
<div id="content">
  <a>Enlace verde</a>
</div>
...

Por ryuz

350 de clabLevel

2 tutoriales

Envíale un mensaje privado Web

Citar

Escrito el 01 Mar 2007 07:00 pm

Y como hago para añadirle a esa clase el estado hover???

Por el_chivo

3 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 01 Mar 2007 07:09 pm

Código :

 a:hover {color:#0F0;}

Deberías leer una referencia o un tuto basico por lo menos, esos tipos de preguntas los puedes encontrar facilmente en cualquier tutorial

Por Coyr

Claber

1048 de clabLevel

2 tutoriales

Envíale un mensaje privado Web

Manizales city

Citar

Escrito el 01 Mar 2007 09:37 pm

Coyr escribió:

Código :

 a:hover {color:#0F0;}

Deberías leer una referencia o un tuto basico por lo menos, esos tipos de preguntas los puedes encontrar facilmente en cualquier tutorial

Parece que no leiste bien la pregunta, la solución que estaba buscando era simplemente:

Código :

a.link2:hover {
   color: #0F0;
}

Tal vez me puedan ayudar a entender por que en algunos internet explorers ignora totalmente este estilo? Solo es en algunos pc, así cuenten con la misma versión del explorer. En firefox no tengo ese problema.

Por el_chivo

3 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 02 Mar 2007 02:37 pm

Es probable que sea por las herencias.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 02 Mar 2007 02:57 pm

Sisi.. coincido con NEO_JP... pueden ser las herencias...

Veamos... si vos tenes algo asi

Código :

<div id="capa">
   <a class="link2" href="">Link</a>
</div>

y en el css tenes esto

Código :

a.link2:hover   {
   color: #0F0;
}

#capa a   {
   color: #FF0;
}

o tenes algo asi

Código :

a.link2:hover   {
   color: #0F0;
}

a   {
   color: #FF0;
}

te va a tomar el segundo estilo ya q esta declarado despues del que queres vos

deben estar puestos al revez

Código :

#capa a   {
   color: #FF0;
}

a.link2:hover   {
   color: #0F0;
}

Verifica q no pase

Saludos

Por 3w

145 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Citar

Escrito el 02 Mar 2007 03:15 pm

Lo siento asumí que agregarías el link#

, IE tiene problemas con el :hover hay varios hacks que lo hacen funcionar para que funcioné no solo con "a" sino con li o cualquier elemento. Para que te funcione la clase que dices al vínculo le puedes agregar el href

CSS

Código :

a.link1 {color:#F00;}
a.link1:hover {color:#0f0;}
a.link2 {color:#0F0;}
a.link2:hover {color:#00f;}
a#link3 {color:#00F;}
a#link3:hover {color:#f00;}

XHTML

Código :

<a class="link1" href="#">Enlace rojo</a>
<a class="link2" href="#">Enlace verde</a>
<a id="link3" href="#">Enlace azul</a>

Espero a eso sea lo que te refieres

Por Coyr

Claber

1048 de clabLevel

2 tutoriales

Envíale un mensaje privado Web

Manizales city

Varios estilos de link

Escribe una respuesta rapida