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 CSS son las siguientes:
- Link CSS
- a:link Es el estilo de un enlace que no ha sido explorado por el usuario.
- Visited CSS
- a:visited Es el estilo de un enlace que ha sido visitado.
- Active CSS
- a:active Estilo de un enlace seleccionado, mientras está siendo seleccionado.
- Hover CSS
- 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:
Este enlace nos llevará directamente
a la página principal
Este otro enlace te llevará al artículo
de pseudoclases otra vezY 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="/">Este enlace nos llevará directamente
a la página principal</a><br><br>
<a href="#">Este otro enlace te llevará al artículo
de pseudoclases otra vez</a>
</body>
</html>
Deja una respuesta