Aplicando una clase de estilos solo a los enlaces de una determinada capa

Se trata de definir en la hoja de estilos que todos los enlaces que pertenezcan a una capa determinada deban seguir esos estilos. Con esto nos ahorramos escribir nada en el código Html de la plantilla.html, verás.

Abre estilo-general.css y añade (sin eliminar el antiguo código de los enlaces) esto, justo al final:

..........
#pie a         {color: red; text-decoration:none ; display: block }
#pie a:link    {}
#pie a:visited {}
#pie a:hover   {color:red ; text-decoration:underline ; background-color: yellow }
#pie a:active  {color:blue}

Si guardas la hoja de estilo y haces vista previa ahora a la plantilla, verás como todos los enlaces del pié de página han tomado las nuevas propiedades sin necesidad de tocar para nada el código Html de la plantilla.html, mágico, verdad? je je

Como esas propiedades son realmente horribles, cámbialas por estas otras para que al menos sean... presentables, je je je:

#pie a         {color: blue; text-decoration:none ; display: block }
#pie a:link    {}
#pie a:visited {}
#pie a:hover   {color:black ; text-decoration:underline ; background-color: white }
#pie a:active  {color:black}

Ahora se ven un poco mejor.

Eliminar el fondo del enlace del logotipo

Ahora que sabemos variar las propiedades de solo algunos enlaces determinados sin variarlos todos, podemos eliminar ese fondo gris que aparece al poner el ratón sobre el logotipo. Por qué aparece? Pues simplemente porque al tener el logotipo un enlace hacia el index.html se convierte la imagen en un enlace adoptando los estilos definidos para los enlaces en la Hoja de Estilos.

Si añadimos algo similar a lo anterior pero para todos los enlaces de la capa #logotipo podremos conseguir eliminar ese fondo gris tan feo. Qué propiedades le pondrías para evitar eso? Realmente, como no contiene textos me da igual, solo me interesa eliminar el fondo gris y eso lo consigo colocándole un fondo blanco cuando el ratón se situe sobre el logotipo (:hover), así que puedo colocar esto al final de la hoja de estilo:

#logotipo a         {}
#logotipo a:link    {}
#logotipo a:visited {}
#logotipo a:hover   {background-color: white }
#logotipo a:active  {}

Ahora se ve el logotipo sin esa sombra gris. Ya sabes algo más de los enlaces. Eres todo un maestro!

	Web ComoCrearTuWeb