|
Las pseudoclases son las diferentes clases o los diferentes estilos que podemos
darle a un enlace. El navegador por defecto le otorga un estilo diferente a los
enlaces con respecto al texto restante. Pero nosotros podemos definir ese estilo
mediante las pseudoclases.
Las diferentes posibilidades de las pseudoclases son las siguientes:
• a:link Es el estilo de un enlace que no ha sido explorado
por el usuario.
• a:visited Es el estilo de un enlace que ha sido visitado.
• a:active Estilo de un enlace seleccionado, mientras
está siendo seleccionado.
• a:hover Es el estilo de un enlace que tiene el ratón
encima, pero sin estar seleccionado.
La forma de escribir las pseudoclases es la siguiente:
<style type="text/css">
a:link{ color: #00FF00; text-decoration: none}
a:active{ color: #000000; text-decoration: none}
a:visited{ color: #000000; text-decoration: none}
a:hover{ color: #FF0000; text-decoration: underline}
</style> |
Lo que querrá decir que el enlace, cuando esté sin pulsar, se
mostrara de color verde; que cuando esté el ratón encima de él,
estará de color rojo y con subrayado; y que cuando se esté pulsando
en él o cuando ya haya sido visitado, se mostrará en negro y sin
subrayado.
Observa el efecto de este mismo código en el ejemplo práctico
que te hemos puesto en el siguiente enlace: Ejemplo
práctico de pseudoclases.
Y aquí te dejamos el código del documento de ejemplo:
<html>
<head>
<title>Ejemplo práctico de pseudoclases</title>
<style type="text/css">
a:link{ color: #00FF00; text-decoration: none}
a:active{ color: #000000; text-decoration: none}
a:visited{ color: #000000; text-decoration: none}
a:hover{ color: #FF0000; text-decoration: underline}
</style>
</head>
<body>
<a href="http://www.hazunaweb.com/">Este enlace nos llevará
directamente
a la página principal</a><br><br>
<a href="http://css.hazunaweb.com/204.php/">Este otro enlace
te llevará al artículo
de pseudoclases otra vez</a>
</body>
</html> |
Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.
| 