Foros del web, para los que viven de bits

Marche · 10-nov-2005, 13:31

Hola gente. El tema es asi, yo tengo este pedacito de codigo

Código HTML:

<a href="#" style="color:#000000; text-decoration: none;">link</a>

..quisiera saber como defino el color de hover pero si o si dentro de la propiedad style del <a>, tiene que ser asi si o si. Se puede?

leoj90 · 10-nov-2005, 13:35

Asi:

Código:

<style type="text/css">
a:link,a:visited {
text-decoration: none;
color: #0000CC;
}
a:hover {
text-decoration: none;
color: #0000CC;
}
</style>

Rafael · 10-nov-2005, 17:45

Más bien metelo en el head, dentro del mismo a no se puede.

Marche · 11-nov-2005, 11:31

Gracias leoj90 por tu respuesta pero no era eso lo que quería, perdon si no me explique bien. Eso ya sabia como se hacia pero el tema era meterlo en el mismo tag a dentro de la propiedad style. Esta seguro Rafael que dentro de la misma etiqueta a no se puede?? Bueno.. gracias de nuevo por sus respuestas.. Sigo intentando. Chauu

leoj90 · 11-nov-2005, 13:49

Q yo sepa no se puede.. dentro del "style" solo se ponen por ej: formatos de texto (color, tipo de letra, decoración..), formatos de tablas (borde, color...).. nunca vi algo asi..

Microbito · 11-nov-2005, 23:25

yo no se mucho de CSS, pero investigando hace un tiempo hice algo similar asi:

Código HTML:

<a href="#" style="color:#009933;"

onMouseOver="this.style.cssText='color: #cc0000'" 

onMouseOut="this.style.cssText='color: #009933'"> Enlace </a>

espero que pueda ayudar

Rafael · 12-nov-2005, 18:15

Bueno, interesante recurrir a javascript para meterlo dentro de la etiqueta, y en cierta forma si es css. Solo tomar el sistema con sus reservas.

leoj90 · 12-nov-2005, 18:50

Cita:

Iniciado por Microbito

yo no se mucho de CSS, pero investigando hace un tiempo hice algo similar asi:

Código HTML:

<a href="#" style="color:#009933;"

onMouseOver="this.style.cssText='color: #cc0000'" 

onMouseOut="this.style.cssText='color: #009933'"> Enlace </a>

espero que pueda ayudar

Alli yo no veo nada de css, solo la etiqueta style q está de más alli....
onMouseOver y onMouseOut son eventos de js, asi q nada q ver..
Pero, haber, porq no usas clases y listo? en vez de tratar de hacerlo con style, q no se puede.... porq te la complicas tanto ?

Microbito · 13-nov-2005, 02:32

bien, como les comenté no se mucho de CSS, ese ejemplo lo utilice en alguna pagina por que funcionaba como queria, pero la cuestion aqui es, Marche: por que quieres establecer el hover en la etiqueta A? cual es el inconveniente para no usar el estilo en la cabecera?

xp64 · 13-nov-2005, 18:02

Ese problema yo muchas veces lo he tenido, tambien muchas veces me habia preguntado si se podia

¿porque no usar una clase definida en la cabecera en lugar de meterla dentro del tag a?

Siempre hago uso de hojas de estilo, ahora cuando tienes una gran lista de links y quieres que
uno y solo uno actue de alguna forma especial, por ejemplo

Código:

<a class="style1">blabla....</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1" style="hover:font: 12 px tahoma"  ????>justo aqui es donde esta el problema</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1">....</a>
<a class="style1">...blabla</a>

El problema es crear una nueva clase para un solo link por eso es que es mucho mas practico aplicar el style="" exclusivamente al elemento que quieres que varie.

Ahora no puedes modificar la clase en la hoja de estilos porque es la misma hoja para varias paginas

y volvemos a lo mismo es necesario crear una nueva clase "style2" por uno y solo un elemento dentro de todas tus plantillas.

leoj90 · 13-nov-2005, 18:44

Nop, las clases para los links son faciles, solo tienes q escribir unas cuantas letras:
.menu {
font-size: 10pt;
}
A.menu:link,A.menu:visited {
text-decoration: none;
color: #0000CC;
}
A.menu:hover {
text-decoration: overline;
}

Y creas la clase "normal" para los otros links.....
A:link,A:visited {
color: #800000;
}
A:hover {
color: #FF0000;
}

No se la compliquen, a veces es MUCHO MEJOR escribir unas letritas de más..

(ya parezco el guille, ajjaja, 'se los van a pillar los magos'

)

Puedes hacer las clases q quieras... todo va a ser para q tu web se vea mejor y no todo con el mismo color/efecto.

Marche · 14-nov-2005, 07:39

Bueno gente, ante que nada quiero agradecerles a todos por su respuestas. Ya se que me complico la vida haciendolo de la manera que les digo. Se que sería mucho mas facil crear una clase y listo. El tema es q realmente lo necesito hacer de esa forma. Voy a probar con lo que dijo Microbito y si se de otra forma de hacerlo lo posteo al instante. Gracias de nuevo y suerte a todos.

furoya · 14-nov-2005, 10:28

Hola todos :

No entiendo por qué no hay una forma de poner seudo elementos ( como el hover ) in line. Pero parece que es así.

Lo de poner -en general- estilos in line, es para HTML, en XHTML ya no funciona.
Y es cierto que no tiene mucho sentido poner una clase/identificador para un solo y mugroso elemento. De hecho, el CSS era una ayuda para que los diseñadores no tuvieran que repetir atributos en cada etiqueta y hasta en cada documento, no para que hubiera que hacerlo solamente de esa forma; pero de última, como dice loej90 ( )

Cita:

... las clases para los links son faciles, solo tienes q escribir unas cuantas letras ...

Me gustaría saber qué caso especial es ese que solamente permite escribir en el atributo style=""; si se tiene acceso a la hoja de estilos, claro.

Por otro lado,

Código:

this.style.cssText='color: #cc0000'

es para IExplorer, además de que borra cualquier estilo declarado previamente. Una forma más eficiente es

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title></title>
<style>

a{font-size:200%; }

</style>
</head><body>


<a href="#" onmouseover="this.style.color='#000000'; this.style.textDecoration='none'" onmouseout="this.style.color='#ff0000'; this.style.textDecoration='underline overline'" >link</a>

<br />

<a href="#" onfocus="this.style.color='#008000'; this.style.textTransform='capitalize'" onblur="this.style.color=''; this.style.textTransform=''"  >link</a>

</body></html>

Otra manera sería

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style>
a{font-size: 200%; }
.otroEnlaceLink {color: #ff0000; text-decoration: underline overline; }
.otroEnlaceHover {color: #000000; text-decoration: none; }

</style>
</head><body>


<a href="#" class="enlace" onmouseover="this.className='otroEnlaceHover'; " onmouseout="this.className='otroEnlaceLink'; " >link</a>

</body></html>

saludos

furoya

leoj90 · 14-nov-2005, 10:45

Mmm.. pero alli ya nos salimos de Css, eso ya es Js.
Conclusión: Usar clases o a lo mucho js, porq no entendemos el porqué ponerlo dentro de "style" (q no se puede).

Marche · 15-nov-2005, 06:08

Gracias furoya por tu aporte. Me sirvió para resolver un problema de compatibilidad entre los navegadores. Y con respecto a que lo quiero poner dentro del style o bueno en este caso que tambien use js es porque es un codigo que le doy al usuario para que pegue en su html y asi no tiene que hacer un enlace con un archivo .css

10-nov-2005, 13:31	#1 (permalink)
Marche Fecha de Ingreso: enero-2004 Ubicación: Córdoba Mensajes: 39	como defino el color (hover) pero dentro de la propiedad "style" de un link? Hola gente. El tema es asi, yo tengo este pedacito de codigo Código HTML: <a href="#" style="color:#000000; text-decoration: none;">link</a> ..quisiera saber como defino el color de hover pero si o si dentro de la propiedad style del <a>, tiene que ser asi si o si. Se puede?

10-nov-2005, 13:35	#2 (permalink)
leoj90 Usuario baneado! Fecha de Ingreso: agosto-2005 Mensajes: 1.369	Asi: Código: <style type="text/css"> a:link,a:visited { text-decoration: none; color: #0000CC; } a:hover { text-decoration: none; color: #0000CC; } </style>

11-nov-2005, 11:31	#4 (permalink)
Marche Fecha de Ingreso: enero-2004 Ubicación: Córdoba Mensajes: 39	no se puede?? Gracias leoj90 por tu respuesta pero no era eso lo que quería, perdon si no me explique bien. Eso ya sabia como se hacia pero el tema era meterlo en el mismo tag a dentro de la propiedad style. Esta seguro Rafael que dentro de la misma etiqueta a no se puede?? Bueno.. gracias de nuevo por sus respuestas.. Sigo intentando. Chauu

11-nov-2005, 23:25	#6 (permalink)
Microbito Fecha de Ingreso: noviembre-2002 Ubicación: Cd. Juárez, Chihuahua, México Mensajes: 819	yo no se mucho de CSS, pero investigando hace un tiempo hice algo similar asi: Código HTML: <a href="#" style="color:#009933;" onMouseOver="this.style.cssText='color: #cc0000'" onMouseOut="this.style.cssText='color: #009933'"> Enlace </a> espero que pueda ayudar __________________ Canciones de un Camarada Errante Diseño de páginas de internet: guía basada en conceptos de usabilidad web

12-nov-2005, 18:50	#8 (permalink)
leoj90 Usuario baneado! Fecha de Ingreso: agosto-2005 Mensajes: 1.369	Cita: Iniciado por Microbito yo no se mucho de CSS, pero investigando hace un tiempo hice algo similar asi: Código HTML: <a href="#" style="color:#009933;" onMouseOver="this.style.cssText='color: #cc0000'" onMouseOut="this.style.cssText='color: #009933'"> Enlace </a> espero que pueda ayudar Alli yo no veo nada de css, solo la etiqueta style q está de más alli.... onMouseOver y onMouseOut son eventos de js, asi q nada q ver.. Pero, haber, porq no usas clases y listo? en vez de tratar de hacerlo con style, q no se puede.... porq te la complicas tanto ?

10-nov-2005, 17:45	#3 (permalink)
Rafael Fecha de Ingreso: marzo-2003 Mensajes: 1.050	Más bien metelo en el head, dentro del mismo a no se puede.

11-nov-2005, 13:49	#5 (permalink)
leoj90 Usuario baneado! Fecha de Ingreso: agosto-2005 Mensajes: 1.369	Q yo sepa no se puede.. dentro del "style" solo se ponen por ej: formatos de texto (color, tipo de letra, decoración..), formatos de tablas (borde, color...).. nunca vi algo asi..

12-nov-2005, 18:15	#7 (permalink)
Rafael Fecha de Ingreso: marzo-2003 Mensajes: 1.050	Bueno, interesante recurrir a javascript para meterlo dentro de la etiqueta, y en cierta forma si es css. Solo tomar el sistema con sus reservas.

13-nov-2005, 02:32	#9 (permalink)
Microbito Fecha de Ingreso: noviembre-2002 Ubicación: Cd. Juárez, Chihuahua, México Mensajes: 819	bien, como les comenté no se mucho de CSS, ese ejemplo lo utilice en alguna pagina por que funcionaba como queria, pero la cuestion aqui es, Marche: por que quieres establecer el hover en la etiqueta A? cual es el inconveniente para no usar el estilo en la cabecera? __________________ Canciones de un Camarada Errante Diseño de páginas de internet: guía basada en conceptos de usabilidad web

13-nov-2005, 18:02	#10 (permalink)
xp64 (Desactivado) Fecha de Ingreso: febrero-2005 Ubicación: Azcapotzalco Mensajes: 302	Ese problema yo muchas veces lo he tenido, tambien muchas veces me habia preguntado si se podia ¿porque no usar una clase definida en la cabecera en lugar de meterla dentro del tag a? Siempre hago uso de hojas de estilo, ahora cuando tienes una gran lista de links y quieres que uno y solo uno actue de alguna forma especial, por ejemplo Código: <a class="style1">blabla....</a> <a class="style1">....</a> <a class="style1">....</a> <a class="style1">....</a> <a class="style1">....</a> <a class="style1">....</a> <a class="style1" style="hover:font: 12 px tahoma" ????>justo aqui es donde esta el problema</a> <a class="style1">....</a> <a class="style1">....</a> <a class="style1">....</a> <a class="style1">....</a> <a class="style1">...blabla</a> El problema es crear una nueva clase para un solo link por eso es que es mucho mas practico aplicar el style="" exclusivamente al elemento que quieres que varie. Ahora no puedes modificar la clase en la hoja de estilos porque es la misma hoja para varias paginas y volvemos a lo mismo es necesario crear una nueva clase "style2" por uno y solo un elemento dentro de todas tus plantillas.

13-nov-2005, 18:44	#11 (permalink)
leoj90 Usuario baneado! Fecha de Ingreso: agosto-2005 Mensajes: 1.369	Nop, las clases para los links son faciles, solo tienes q escribir unas cuantas letras: .menu { font-size: 10pt; } A.menu:link,A.menu:visited { text-decoration: none; color: #0000CC; } A.menu:hover { text-decoration: overline; } Y creas la clase "normal" para los otros links..... A:link,A:visited { color: #800000; } A:hover { color: #FF0000; } No se la compliquen, a veces es MUCHO MEJOR escribir unas letritas de más.. (ya parezco el guille, ajjaja, 'se los van a pillar los magos' ) Puedes hacer las clases q quieras... todo va a ser para q tu web se vea mejor y no todo con el mismo color/efecto.

14-nov-2005, 07:39	#12 (permalink)
Marche Fecha de Ingreso: enero-2004 Ubicación: Córdoba Mensajes: 39	gracias!!!! Bueno gente, ante que nada quiero agradecerles a todos por su respuestas. Ya se que me complico la vida haciendolo de la manera que les digo. Se que sería mucho mas facil crear una clase y listo. El tema es q realmente lo necesito hacer de esa forma. Voy a probar con lo que dijo Microbito y si se de otra forma de hacerlo lo posteo al instante. Gracias de nuevo y suerte a todos.

14-nov-2005, 10:28	#13 (permalink)
furoya Fecha de Ingreso: noviembre-2002 Mensajes: 981	Hola todos : No entiendo por qué no hay una forma de poner seudo elementos ( como el hover ) in line. Pero parece que es así. Lo de poner -en general- estilos in line, es para HTML, en XHTML ya no funciona. Y es cierto que no tiene mucho sentido poner una clase/identificador para un solo y mugroso elemento. De hecho, el CSS era una ayuda para que los diseñadores no tuvieran que repetir atributos en cada etiqueta y hasta en cada documento, no para que hubiera que hacerlo solamente de esa forma; pero de última, como dice loej90 ( ) Cita: ... las clases para los links son faciles, solo tienes q escribir unas cuantas letras ... Me gustaría saber qué caso especial es ese que solamente permite escribir en el atributo style=""; si se tiene acceso a la hoja de estilos, claro. Por otro lado, Código: this.style.cssText='color: #cc0000' es para IExplorer, además de que borra cualquier estilo declarado previamente. Una forma más eficiente es Código: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title></title> <style> a{font-size:200%; } </style> </head><body> <a href="#" onmouseover="this.style.color='#000000'; this.style.textDecoration='none'" onmouseout="this.style.color='#ff0000'; this.style.textDecoration='underline overline'" >link</a> <br /> <a href="#" onfocus="this.style.color='#008000'; this.style.textTransform='capitalize'" onblur="this.style.color=''; this.style.textTransform=''" >link</a> </body></html> Otra manera sería Código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title></title> <style> a{font-size: 200%; } .otroEnlaceLink {color: #ff0000; text-decoration: underline overline; } .otroEnlaceHover {color: #000000; text-decoration: none; } </style> </head><body> <a href="#" class="enlace" onmouseover="this.className='otroEnlaceHover'; " onmouseout="this.className='otroEnlaceLink'; " >link</a> </body></html> saludos furoya

14-nov-2005, 10:45	#14 (permalink)
leoj90 Usuario baneado! Fecha de Ingreso: agosto-2005 Mensajes: 1.369	Mmm.. pero alli ya nos salimos de Css, eso ya es Js. Conclusión: Usar clases o a lo mucho js, porq no entendemos el porqué ponerlo dentro de "style" (q no se puede).

15-nov-2005, 06:08	#15 (permalink)
Marche Fecha de Ingreso: enero-2004 Ubicación: Córdoba Mensajes: 39	hola!! Gracias furoya por tu aporte. Me sirvió para resolver un problema de compatibilidad entre los navegadores. Y con respecto a que lo quiero poner dentro del style o bueno en este caso que tambien use js es porque es un codigo que le doy al usuario para que pegue en su html y asi no tiene que hacer un enlace con un archivo .css

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado