CSS - Enlaces

Este capítulo le enseña cómo configurar diferentes propiedades de un hipervínculo usando CSS. Puede establecer las siguientes propiedades de un hipervínculo:

Revisaremos las mismas propiedades cuando discutamos las pseudoclases de CSS.

los :link significa hipervínculos no visitados.
los :visited significa hipervínculos visitados.
los :hover significa un elemento que actualmente tiene el puntero del mouse del usuario sobre él.
los :active significa un elemento en el que el usuario está haciendo clic actualmente.

Por lo general, todas estas propiedades se mantienen en la parte del encabezado del documento HTML.

Recuerde que un: hover DEBE ir después de un: enlace y un: visitado en la definición de CSS para que sea efectivo. Además, a: active DEBE ir después de a: hover en la definición de CSS de la siguiente manera:

<style type = "text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

Ahora veremos cómo usar estas propiedades para dar diferentes efectos a los hipervínculos.

Establecer el color de los enlaces

El siguiente ejemplo demuestra cómo establecer el color del enlace. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
     </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Producirá el siguiente enlace negro:

Establecer el color de los enlaces visitados

El siguiente ejemplo demuestra cómo establecer el color de los enlaces visitados. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = ""> link</a> 
   </body>
</html>

Producirá el siguiente enlace. Una vez que haga clic en este enlace, cambiará su color a verde.

Cambiar el color de los enlaces cuando el mouse está sobre

El siguiente ejemplo demuestra cómo cambiar el color de los enlaces cuando colocamos el puntero del mouse sobre ese enlace. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Producirá el siguiente enlace. Ahora, coloca el mouse sobre este enlace y verá que cambia su color a amarillo.

Cambiar el color de los enlaces activos

El siguiente ejemplo demuestra cómo cambiar el color de los enlaces activos. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Producirá el siguiente enlace. Cambiará su color a rosa cuando el usuario haga clic en él.