Búsqueda personalizada
 
 
 
 
Pseudoclases
 

Las pseudoclases son unas clases especiales, que se refieren a algunos estados especiales del elemento HTML, las que se utilizan fundamentalmente son las que se aplican a la marca <a> (ancla).

La sintaxis vara con respecto al concepto de clase visto anteriormente:

a:pseudoclase {
  propiedad: valor;
}

Es decir separamos el nombre de la marca HTML con dos puntos.
Para la marca HTML <a> tenemos 4 pseudoclases fundamentales:

link - Enlace sin ingresar
visited - Enlace presionado
hover - Enlace que tiene la flecha del 
        mouse encima
active - Es la que tiene foco en ese momento 
(pruebe de tocar la tecla tab)

Es importante hacer notar que el orden en que definimos las pseudoclases es fundamental para su funcionamiento (debe respetarse el orden: link-visited-hover-active)
Este ejemplo es muy sencillo para ver el paso en los distintos estados que puede tener un enlace:

<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" 
type="text/css">
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">Msn</a>
</body>
</html>

La hoja de estilo es:

a:link{
  background-color:#00ff00;
  color:#ff0000;
}
a:visited{
  background-color:#000000;
  color:#ffffff;
}
a:hover{
  background-color:#ff00ff;
  color:#fffff;
}
a:active{
  background-color:#ff0000;
  color:#ffff00;
}

Apenas ejecute la pgina los tres enlaces deben aparecer de color rojo con fondo verde:

a:link{
  background-color:#00ff00;
  color:#ff0000;
}

Si presionamos la tecla tab podremos ver que el enlace que tiene foco aparece de color amarillo con fondo rojo:

a:active{
  background-color:#ff0000;
  color:#ffff00;
}

Si pasamos la flecha del mouse sobre algn enlace veremos que aparece de color blanco con fondo lila:

a:hover{
  background-color:#ff00ff;
  color:#fffff;
}

Por ltimo todos los enlaces que hayamos hecho click debern aparecer de color blanco con fondo negro:

a:visited{
  background-color:#000000;
  color:#ffffff;
}
 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion