Resaltar los enlaces con CSS

27/Feb/2007 CSS , Deja un comentario

Los enlaces son los elementos que ayudaron a construir la red que conocemos a día de hoy. Parece que ahora otras tecnologías son las que están ayudando a crecer a "la red", como las peticiones de datos asíncronas estilo AJAX, los mashup de aplicaciones,... Si bien en el fondo siempre seguiremos teniendo enlaces.

Y todo este rollo, ¿para qué? Bueno, la verdad es que tampoco sabía como introducir a los enlaces. La idea de este ejemplo es resaltar los enlaces con CSS. Para hacerles más visibles.

Para ello nos vamos a apoyar en las hojas de estilo y más concretamente en la propiedad background-color, la cual podemos aplicarla a casi cualquier elemento de la página.

En nuestro caso aplicaremos el estilo sobre el elemento A, el cual representa a los enlaces. De esta forma tendremos el siguiente estilo CSS:

  1. <style>
  2. a {
  3. background-color:#ffff00;
  4. }
  5. </style>

El código utilizado #ffff00 es el color amarillo. Este código es el RGB donde los dos primeros valores hexadecimales reflejan el color rojo, el segundo el color verde y el último el color azul. Su mezcla genera un color.

Hay que tener en cuenta, que a el elemento A se le conocen varios comportamientos:

  • link, cuando el enlace no ha sido todavía visitado
  • hover, cuando estamos encima del enlace
  • visited, cuando el enlace ha sido visitado

Entonces, para nuestro ejemplo de resaltar los enlaces con CSS asignaremos un color de resaltado cuando pasemos sobre el enlace. Aunque podríamos hacerlo con los otros dos comportamientos.

El código para resaltar los enlaces con CSS quedaría finalmente de la siguiente guisa:

  1. <style>
  2. a:hover {
  3. background-color:#ffff00;
  4. }
  5. </style>

El código del elemento style de las CSS irá dentro de la cabecera de la página HTML.

Vídeos sobre CSS


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*