Liado con los estilos

KaRPiN · #1 (**permalink**) 10/11/2002, 15:00

Buenas, he estado leyendo algo sobre los estilos y he encontrado ciertas cosas bastante últiles: por ejemplo este codigo para eliminar el subrayado de los enlaces:

<a ........ style="TEXT-DECORATION: none> ... </a>

Mi pregunta es; si no quiero tener que poner a todos y cada uno de mis links ese ... style="TEXT-DECORATION: none.... , ¿qué debería escribir en una hoja de estilos externa para que todos mis links salieran por defecto sin subrayado?.

He probado de unas cuantas maneras pero no me va, por ejemplo ésta:

A:style
}
text-decoration:none
{

Espero haberme hecho entender, gracias por vuestro tiempo.

Pd: espero que la pregunta no sea demasiado ridícula, si lo es, os pido disculpas por anticipado.

tunait · #2 (**permalink**) 10/11/2002, 15:17

Hola karpin,

mira, prueba así:

<style type="text/css">
A:link {text-decoration:none }
A:visited{text-decoration:none }
A:hover{text-decoration:none }
A:active{text-decoration:none }
</style>

Todo eso ponlo en alguna parte entre <head> y </head>

Hará que por defecto todos los enlaces se comporten como los has definido

saludos

Kunael · #3 (**permalink**) 10/11/2002, 16:23

Hola:

La respuesta de tunait es válida al 100%. Pero, aún así, intentaré ser un poco más extensivo en el tema.

Lo que te dice tunait es perfecto, pero tendrás que declarar ese estilo en cada una de las páginas de tu site.

Hay una manera que creo que es mucho más óptima. Tu mismo ya lo has dicho en tu post: haciendo un archivo externo .CSS y llamándolo en la cabezera del documento.

Lo que sería muy cómodo es definir el estilo de los enlaces con clases. Por ejemplo:

A:LINK, A:VISITED, A:ACTIVE,A:HOVER{
text-decoration : none;
}

*De esta manera, por defecto, todos los enlaces de la page saldrán sin subrayados. Pero, ahora a lo que iba, si utilizas las clases se amplían enormemente tus posibilidades.

A:LINK.milink1, A:VISITED.milink1, A:ACTIVE.milink1, A.HOVER.milink1{
color : White;
text-decoration : underline overline;
}

* Ahora los enlaces te saldrían con subrayado y "subrayado por arriba".

El kit de la cuestión es como llamar al estilo determinado en cada caso. Bien, no tiene secreto: se utiliza el parámetro class.

Ejemplo:

1. El estilo por defecto se haría sin llamar clase alguna.
2. Un determinado estilo se haría <a href class="milink">lo_que_sea</a>

No sé si me he explicado bien, pero te aseguro que las opciones que te da la utilización de las clases son enormes.

KaRPiN · #4 (**permalink**) 14/11/2002, 19:54

Buenas, perdonad mi tardanza en agradecer vuestra ayuda. (He estado sin i-net unos días). Son casi las tres de la mañana y bueno es un poco tarde para comprobar todo lo que me deciis.

De todos modos Kunael:
Esto que has puesto creo que es lo que quería exactamente:

A:LINK, A:VISITED, A:ACTIVE,A:HOVER
{
text-decoration : none;
}

La última parte de las clases no la acabo de ver clara, a ver si mañana con calma.

Muchas gracias a los dos.

Un saludo.

#5 (**permalink**) 14/11/2002, 20:31

A kunael se le ha olvidado decirte cómo hay que vincular un archivo externo; es así:

Código:

<link rel="stylesheet" href="archivo.css" type="text/css">

Esto debes colocarlo en la cabecera, entre las etiquetas head. Por supuesto, deberás cambiar archivo.css por la ruta de tu archivo.

En cuanto al archivo de estilos, es muy fácil hacerlo:

1.- Abre un editor de textos (como el Word Pad o el Block de Notas).
2.- Escribes los estilos.
3.- Lo guardas como archivo de texto y con la extensión .css (por ejemplo, archivo.css o style.css).

Y lo más importante: los estilos. Para lo que quieres hacer, lo único que debes poner en el archivo css es lo que te ha dicho tunait:

Código:

A:link { text-decoration: none }
A:visited { text-decoration: none }
A:active { text-decoration: none }
A:hover { text-decoration: underline }

Yo le he añadido el subrayado para cuando pase el cursor por encima del enlace...

Bueno, eso es lo más básico en cuanto a estilos. Lo de las clases pués la verdad es que es otro asunto que nada tiene que ver con tu pregunta, pero si tienes más dudas, pués ya sabes: pregunta que aquí estamos los tres y muchos más... ;)

P.D.: ¡hola tunait! :)