Mas de css
Tengo una terrible confusión con esto de los Css, yo se ahora como hacer diferentes estilos para que dos vínculos tengan colores y tipos de letras diferentes, eso se hace creando clases (class) en Dreamweaver, ahora bien, yo tengo un libro que habla como hacer una especie de rollover con el texto de los vínculos, es decir, que cuando el mouse se pose sobre el vinculo, este cambie de color u otro atributo, eso se hace definiendo los
a:Link a:active a:visited a:hover, pero como te habrás dado cuenta, se esta editando la etiqueta <a> es decir, que ahora TODOS los vínculos de esa página cuando se pose el mouse sobre ellos sevan a comportar igual, es decir haciendo un rollover.
Pero por ejemplo en la página de entrada de todoexpertos.com, vemos como por ejemplo NEGOCIOS tiene un azul obscuro que cuando le pones el mouse cambia ha subrayado, y debajo de esa palabra se encuentran "Creación de empresas, fiscalidad..." que tienen otro color, otro tamaño, otro tipo de fuente y que aun así, cuando le pones el mouse sobre ellas, cambian ha subrayado.
Yo pensaría que como se edito la etiqueta <a> eso no se podría hacer, pero si se pudo, ¿cómo se hace eso?
Te agradecería que me iluminaras porque en verdad que lo necesito.
a:Link a:active a:visited a:hover, pero como te habrás dado cuenta, se esta editando la etiqueta <a> es decir, que ahora TODOS los vínculos de esa página cuando se pose el mouse sobre ellos sevan a comportar igual, es decir haciendo un rollover.
Pero por ejemplo en la página de entrada de todoexpertos.com, vemos como por ejemplo NEGOCIOS tiene un azul obscuro que cuando le pones el mouse cambia ha subrayado, y debajo de esa palabra se encuentran "Creación de empresas, fiscalidad..." que tienen otro color, otro tamaño, otro tipo de fuente y que aun así, cuando le pones el mouse sobre ellas, cambian ha subrayado.
Yo pensaría que como se edito la etiqueta <a> eso no se podría hacer, pero si se pudo, ¿cómo se hace eso?
Te agradecería que me iluminaras porque en verdad que lo necesito.
6 Respuestas
Respuesta de karmichael
1
El termino .class de CSS no es el único que existe. Dreamweaver llama selectores a las denominadas pseudo-clases, pero es otra de las opciones menos explotada.
Porque hay más ( ¡Y tanto! ), porque están :
Selectores universales
Selectores de tipos
Selectores de descendientes
Selectores de hijos
Selectores de hermanos adyacentes
Selectores de atributos
Selectores de clases
Selectores de ID
Pseudo-elementos y pseudo-clases
Y usando cada uno de ellos podemos conseguir diferenciar un vinculo A de otro vinculo A solamente usando un atributo ID.
Por ejemplo, esta CSS:
A#identificacion:hover{ color:blue }
NO es igual a :
A:hover { color: green }
¿Por qué?
La primera afectaría a etiquetas como esta:
< A ID="identificacion" href="mivinculo.htm">
La segunda css afectaría a todo el resto de vínculos.
También lo podemos hacer con clases.
A.miestilo:hover { color: blue }
Afectando a este tipo de etiquetas html.
Aquí tienes un ejemplo en HTML, cópialo y pégalo en la ventana de código de Dreamweaver. Fíjate en las diferencias que hay entre los vínculos.
-----------------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a#minombre:hover {
color: #FF0000;
text-decoration: underline;
}
a:hover {
color: #00FF33;
text-decoration: underline;
}
a.miclase:hover {
color: #66CCFF;
text-decoration: underline;
}
a#minombre:link {
color: #0033CC;
text-decoration: none;
}
a.miclase:link {
color: #FF0000;
text-decoration: none;
}
a:link {
color: #666666;
text-decoration: none;
}
-->
</style>
</head>
<body>
<p><a href="javascript:;" id="minombre">minombre
</a></p>
<p><a href="javascript:;">normal </a></p>
<p><a class="miclase" href="javascript:;">conclase</a></p>
</body>
</html>
-----------------------------
Para hacerlo en Dreamweaver tienes que seleccionar Nuevo estilo CSS, y activar el casillero de selector.
Entonces escribe en el campo de texto del selector, por ejemplo:
A#conID:hover
Y pulsa aceptar, entonces podrás crear CSS basada en selectores de distinto tipo.
Casi todas las etiquetas HTML permiten el uso del atributo ID. Casi todas, porque <HTML> y <HEAD> (con su contenido) no las aceptan.
Porque hay más ( ¡Y tanto! ), porque están :
Selectores universales
Selectores de tipos
Selectores de descendientes
Selectores de hijos
Selectores de hermanos adyacentes
Selectores de atributos
Selectores de clases
Selectores de ID
Pseudo-elementos y pseudo-clases
Y usando cada uno de ellos podemos conseguir diferenciar un vinculo A de otro vinculo A solamente usando un atributo ID.
Por ejemplo, esta CSS:
A#identificacion:hover{ color:blue }
NO es igual a :
A:hover { color: green }
¿Por qué?
La primera afectaría a etiquetas como esta:
< A ID="identificacion" href="mivinculo.htm">
La segunda css afectaría a todo el resto de vínculos.
También lo podemos hacer con clases.
A.miestilo:hover { color: blue }
Afectando a este tipo de etiquetas html.
Aquí tienes un ejemplo en HTML, cópialo y pégalo en la ventana de código de Dreamweaver. Fíjate en las diferencias que hay entre los vínculos.
-----------------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a#minombre:hover {
color: #FF0000;
text-decoration: underline;
}
a:hover {
color: #00FF33;
text-decoration: underline;
}
a.miclase:hover {
color: #66CCFF;
text-decoration: underline;
}
a#minombre:link {
color: #0033CC;
text-decoration: none;
}
a.miclase:link {
color: #FF0000;
text-decoration: none;
}
a:link {
color: #666666;
text-decoration: none;
}
-->
</style>
</head>
<body>
<p><a href="javascript:;" id="minombre">minombre
</a></p>
<p><a href="javascript:;">normal </a></p>
<p><a class="miclase" href="javascript:;">conclase</a></p>
</body>
</html>
-----------------------------
Para hacerlo en Dreamweaver tienes que seleccionar Nuevo estilo CSS, y activar el casillero de selector.
Entonces escribe en el campo de texto del selector, por ejemplo:
A#conID:hover
Y pulsa aceptar, entonces podrás crear CSS basada en selectores de distinto tipo.
Casi todas las etiquetas HTML permiten el uso del atributo ID. Casi todas, porque <HTML> y <HEAD> (con su contenido) no las aceptan.
Respuesta de machbel
1
a:link.menu { color: #E0E0E0; text-decoration: none}
a:hover.menu { color: #FFFFFF; text-decoration: underline overline}
a:active.menu { color: #6F6F6F; text-decoration: underline overline}
a:visited.menu { color: #E0E0E0; text-decoration: none}
Y después en el link (<a href..>) pues pone por ejemplo class=menu
De esta forma puedes hacer todos los links que quieras de forma distinta.
Esto en dreamweaver, pues haces los links como siempre, y después pones vista de código y lo editas para que sea de la forma a:acción. Nombreespecial (ej. a:Visited. Menu )
Como ves no es muy difícil, lo complicado es ver que es así :).
Si en una web ves algo que te gusta y no sabes como hacerlo, mira el código fuente, y así descubrirar cosillas interesantes.
a:hover.menu { color: #FFFFFF; text-decoration: underline overline}
a:active.menu { color: #6F6F6F; text-decoration: underline overline}
a:visited.menu { color: #E0E0E0; text-decoration: none}
Y después en el link (<a href..>) pues pone por ejemplo class=menu
De esta forma puedes hacer todos los links que quieras de forma distinta.
Esto en dreamweaver, pues haces los links como siempre, y después pones vista de código y lo editas para que sea de la forma a:acción. Nombreespecial (ej. a:Visited. Menu )
Como ves no es muy difícil, lo complicado es ver que es así :).
Si en una web ves algo que te gusta y no sabes como hacerlo, mira el código fuente, y así descubrirar cosillas interesantes.
Respuesta de scrich
1
Yo uso Javascript para eso, aquí te copio el código:
<a href="link" onMouseOver="javascript:this.style.color='#ffff00'" onMouseOut="javascript:this.style.color=''">
Puedes "jugar" con mouseover y mouseout para el tema de subrayado, tachado, etc.
<a href="link" onMouseOver="javascript:this.style.color='#ffff00'" onMouseOut="javascript:this.style.color=''">
Puedes "jugar" con mouseover y mouseout para el tema de subrayado, tachado, etc.
Respuesta de silentghost
1
Fíjate, así como cuando <a> al ponerle el mouse encima y cambia se convierte en "a:hover", cuando haces un class llamado, por ejemplo, "link" y quieres que cambie cuando le pongas el mouse encima, es tan sencillo como:
"a.Link:hover" y le pones los atributos que quieres. Cuando creas los class "link" y "a.link:hover", selecciones el link o el objeto al cual quieres agregarle este class, le das al botón derecho del mouse y seleccionas el css que quieras agregarle y listo, automáticamente el DW sabrá que le "a.link:hover" es el estado del class cuando le pongas el mouse encima.
"a.Link:hover" y le pones los atributos que quieres. Cuando creas los class "link" y "a.link:hover", selecciones el link o el objeto al cual quieres agregarle este class, le das al botón derecho del mouse y seleccionas el css que quieras agregarle y listo, automáticamente el DW sabrá que le "a.link:hover" es el estado del class cuando le pongas el mouse encima.
Respuesta de rafaelje
1
Si ya sabes como crear clases en css tienes un terreno ganado debido a que de esta manera es como se puede hacer que una parte de cierta página se comporte de manera diferente que otra con las mismas características crea una clase con un (.)Punto para que sea unicode esta manera
.NuevaClase{
link ...
}
y donde quieras colocar la clase pones
class = "NuevaClase"
Y se va a comportar como tu quieras
.NuevaClase{
link ...
}
y donde quieras colocar la clase pones
class = "NuevaClase"
Y se va a comportar como tu quieras
