Aplicar estilos a enlaces con CSS
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