Definir enlaces de distintos tipos
Ya vimos cómo conseguir cambiar el estilo de los enlaces de toda la web de una sola vez. La cuestión ahora es... y si quiero tener varios enlaces con aspectos distintos? Pues como siempre, lo conseguimos gracias a la hoja de estilos.
Las líneas de estilo-general.css que por el momento están afectando a los estilos son las siguientes:
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
Y por qué incluyo la línea del asterisco *? Sencillo, porque como ya hemos dicho antes, esa línea, al llevar asterisco afecta a todos los elementos de la web.
Bien. Eso nos da un tipo de enlace general, para todos los enlaces de la web. Tendrán por tanto margenes nulos, nada de indentado, sin bordes, de color marrón todos, etc, etc. Vamos a ver la forma de crear una nueva clase de enlace con otras propiedades sin que por ello se pierda el tipo ya definido.
Una nueva clase de enlaces
Anteriomente hemos dicho que los estilos para elementos que solo aparecen una sola vez en una página web concreta los definiriamos con la almohadilla # antes de su nombre. Pero como este nuevo estilo de enlace si puede que se repita para varios elementos dentro de una página, lo definimos del otro modo, con un punto en la hoja de estilo y llamándolos con class="loquesea" en lugar de con id="loquesea" en el html de la página.
Para definir una clase de enlace nueva, primero escogemos un nombre. Como siempre, todo en minúsculas, sin espacios ni símbolos raros ni empezando con un número. Le pondremos el nombre .enlaceuno y lo escribimos así en estilo-general.css, justo al final (no escribas este código aún en tu hoja de estilos):
a.enlaceuno:link {}
a.enlaceuno:visited {}
a.enlaceuno:hover {}
a.enlaceuno:active {}
Los enlaces definidos en las otras líneas que ya teníamos actuan sobre todos los enlaces, pero como estos nuevos están colocados después, serán respetados para aquellos enlaces donde indiquemos que son de la clase .enlaceuno
Lección 4:
