En estos años hemos tenido ocasión de estudiar propiedades y clases de CSS que son quizá un poco más desconocidas o menos utilizadas por nosotros. Por eso en esta ocasión vamos a volver a lo básico y ver cómo podemos modificar la apariencia de los enlaces de una página web desde la hoja de estilos.
Lo primero que tenemos que utilizar es el elemento a para seleccionar todos los enlaces que estemos usando y a continuación definimos las propiedades que queremos modificar:
/*Se aplicará de manera global*/
a{
text-decoration:none;
}Hay que tener en cuenta que por defecto los enlaces son azules y utilizan un subrayado. En el caso anterior elimino la línea inferior a la hora de imprimirlos en la pantalla.
Para completar nuestro CSS nos quedaría personalizar los diferentes estados de los links como son el no visitado, rollover, activo o visitado. Para ello vamos a usar algunas de las pseudo-clases que ya vimos en otro artículo y que nos servirán de selectores.
/*Para enlaces no visitados*/
a:link{
color:#999999;
}
/*Para cuando el cursor pase por encima*/
a:hover{
color:#000000;
}
/*Para cuando se haga click*/
a:active{
font-weight:#ffffff;
}
/*Para enlaces ya visitados*/
a:visited{
color:#cccccc;
}Con esto ya tendríamos personalizados los estilos y podemos usar las propiedades que queramos para que los enlaces queden a nuestro gusto. Aunque como ejemplo he usado el elemento a que es global para todos los enlaces, podríamos usar sin ningún problema una clase o un id específico para aplicar los estilos solo a éstos.
Deja una respuesta