Artículos
CSS

Resaltar los enlaces con CSS

27/Feb/2007

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 cómo 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:

a {
  background-color:#ff0
}

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 cuándo 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:

a:hover {
  background-color:#ff0;
}

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

Código Fuente

Descárgate el código fuente de Resaltar los enlaces con CSS
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
0 Comentarios
Opiniones integradas
Ver todos los comentarios