Definir estilos para los enlaces del menú de la web

Aún no hemos terminado con el menú. Vamos a darle un toque más avanzado usando la hoja de estilos. Ya sabéis que usar la hoja de estilo significa que será fácil, ya lo habéis visto antes.

Tras vuestras muchas peticiones, os explico como eliminar el subrayado de los enlaces y como hacer que estos cambien de color cuando se pasa el ratón sobre ellos, entre otras cosas. Es sencillísimo y funciona en todos los navegadores (como todo lo que os explico). Veamos.

Al igual que los párrafos se definen con la etiqueta <p> ("p" de párrafo), los enlaces se definan con la etiqueta <a> ("a" de... sí, de... esto. . . . mmm, Ah! de allá va el enlace!). Por tanto, si queremos cambiar sus características lo haremos creando una nueva línea en la hoja de estilos, que empezará por la letra "a", seguido de corchetes con las características dentro.

Las características que le podemos definir a un enlaces son casi las mismas que a un texto (de hecho es un texto..), como por ejemplo:

el tamaño de la letra: text-size: 12px ; el que aparezca en negrita: font-weight: bold ; un color de fondo: background-color: red ; que aparezca subrayado: text-decoration: underline ; la alineación que queremos darle: text-align: center ; etc, etc.

Además, podemos definir las características que han de tener los enlaces en cualquier caso (dentro de a {....}). o bien las que han de tener en ciertos momentos, como cuando el enlaces ha sido visitado, cuando se pasa el ratón sobre &él, etc. Vamos a verlo más detalladamente.

Hay cuatro estados posibles para un enlace:

1.- Para los estados normales, sin haber sido visitado antes y sin el ratón encima de él. En este caso, se definen sus características con:

2.- Para los enlaces que han sido visitados anteriormente por el visitante,

3.- Para cuando el ratón está encima del enlace, aunque sin el botón apretado,

4.- Cuando finalmente el enlace está siendo pulsado,

Tenemos dos alternativas posibles, o bien definir propiedades solo usando a {.....}, en cuyo caso las propiedades declaradas funcionarán siempre, haga lo que haga el ratón, o, declarar estados diferentes según lo que haga en ratón, en cuyo caso se deben colocar en la hoja de estilo TODOS los cuatro estados, en ese orden aunque en alguno de ellos no definamos nada. Han de estar todos y en ese mismo orden.

Para nuestro ejemplo, queremos que siempre estén en negrita, pero no es necesario ponerlo aquí, pues ya habiamos definido la propiedad negrita en la hoja de estilo para la celda tipo C1 (recuerda, td.c1 {.....}). Si hubieramos tenido que definirla lo tendriamos que haber hecho en la parte a {....}, pues es donde va todo lo común a los cuatro estados.

Queremos que los enlaces aparezcan sin subrayado, salvo cuando el ratón pase por encima del enlace. Por tanto pondremos,:

Queremos que sean de color azul siempre, pero rojo si tiene el ratón encima o esté siendo pulsado, por lo que el código anterior será ahora así:

Por supuesto esto sucederá no solo para los enlaces del menú sino para todos los que aparezcan en la página. Ya aprenderemos a hacer distinciones, es decir, un estilo para cada tipo de enlace.

Según lo anterior, la hoja de estilo ha de ser ahora así:

Puedes ver como ha quedado la plantilla por ahora. Y recuerda que tenemos un Curso de Estilo CSS genial en esta web!

Lección V:

• Insertar un Menú
• Diseñar un Menú
• Construir un Menú
• Insertar el Menú
• Mejorar el Menú
• Eliminar el margen
• Ventana Propiedades
• Creando Enlaces
• Estilos para Enlaces
• Y para sub-apartados