Enlaces CSS
En este capítulo, explicaremos cómo dar estilo a los enlaces y hacerlos más atractivos visualmente.
El enlace presenta los siguientes estados:
a:link- un enlace normal, no visitadoa:visited- un enlace que el usuario ya ha visitadoa:hover- un enlace cuando el usuario pasa el cursor sobre éla:active- un enlace en el momento en que se hace clic en éla:focus- un enlace que ha recibido el enfoque del teclado
Veremos las siguientes propiedades:
Decoración de texto
Como recordarás, al crear un enlace, este se subraya por defecto. Para eliminarlo, debemos usar la propiedad text-decoration.
Ejemplo de uso de la propiedad text-decoration para dar estilo a un enlace:
Ejemplos de decoración de texto en enlaces CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#"> This is some link.</a>
</body>
</html>Explicación del código.
Aquí puedes ver que el enlace en sus dos primeros estados aparecerá sin subrayado. El enlace se subraya cuando el usuario pasa el cursor sobre él o hace clic en él.
Puedes comprobarlo en tu navegador usando tus editores o nuestro editor en línea.
Estos estilos se pueden escribir tanto en la sección <head> como en un archivo CSS que utilices para tu página web.
Color
Utilizamos la propiedad color para establecer el color de un enlace.
Por ejemplo, si queremos que nuestro enlace sea negro por defecto y #1c87c9 en su tercer estado (a:hover), debemos escribir lo siguiente:
Ejemplo de uso de la propiedad color para dar estilo a un enlace:
Ejemplos de color en enlaces CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #1c87c9;
}
a:active {
color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>Resultado
Color de fondo
¿Qué podemos hacer si queremos que nuestro enlace tenga un fondo?
Solo necesitamos aplicar la propiedad background-color.
Por ejemplo, nuestro enlace tendrá un fondo gris y, al pasar el cursor, cambiará a #1c87c9.
Cuando los estados primero (a:link) y segundo (a:visited) tienen el mismo color de fondo, simplemente podemos usar a.
Ejemplo de uso de la propiedad background-color para dar estilo a un enlace:
Ejemplos de color de fondo en enlaces CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
background-color: #555555;
}
a:hover {
background-color: #1c87c9;
}
a:active {
background-color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>Puedes elegir tu color preferido mediante el Selector de color.
Práctica
¿Qué propiedades se utilizan en CSS para modificar la apariencia de los enlaces?