Botonera con imagenes de fondo en css

Se trata de una lista no ordenada de enlaces y su css correspondiente en un archivo vinculado es un ejercicio para webmasters algo veteranos y que ya se han enfrentado antes con hojas de estilo en cascada. En el CSS se indica la imágen que corresponde a cada enlace dependiendo de si es un link visitado o no y la imagen que se muestra cuando pasas el ratón por encima o en diferentes estados. Los estados de los enlaces son normal, vinculo activo cuando pinchas sobre él, vinculo visitado cuando ya es vinculo que has visitado anteriormente y el enlace cuando pasas el ratón por encima. Esos estados en CSS se traducen como: a, a:link, a:visited, a:hover.
Esos atributos dentro del código los encuentras en:

background-image: url()

Entre los paréntesis has de poner el nombre o la url de la imagen con http://
para la imagen que se ha de ver según la acción del ratón: link activo, visitado o al pasar el ratón. En un principio deberían de verse los botones todos en color morado grisáceo que corresponde al enlace inactivo, si es un enlace ya visitado lo veras en azul claro y al pasar el ratón por encima en verde. Pruebalo
EJEMPLO:
Botonera en css
Descarga:

Los atributos de los enlaces son tal como vienen diciendo en el css del ejemplo:

a:link {
color: #000;
text-decoration:none;
font-size: 30px;
font-family: Verdana,Arial,Georgia,sans-
serif;
background-image: url(re_cursos7.gif);
background-repeat: no-repeat;
}

Esto para el link activo text-decotarion: none; indica que el enlace no esta subrayado lo contrario seria underline en vez de none.
Pero para empezar a jugar empecemos por el principio.
Descarga el archivo zip que contienen los documentos HTML, CSS y las imagenes y descomprime dentro encontraras un archivo HTML uno CSS y tres imagenes GIF. Abre los archivos re-cursos_nav.html y re_cursos_nav.css con el block de notas o algún editor de texto sin formato, puedes usar Dreamweaver o Frontpage en Windows, Geany o Bluefish para Linux .
Abre el archivo re-cursos_nav.html con tu navegador (espero que no sea IExplorer) veras la web y podrás navegarla en tu disco duro, veras los cambios al pasar el ratón por encima, etc.
Todo este lío para que empieces a cambiar el archivo del CSS y comience la fiesta de modificar el documento HTML para cambiar su aspecto. Teniendo ya abierto re_cursos_nav.css vamos a cambiar lo que sucede con el link activo y todos los demás:

a:link {
color: #fff;
text-decoration:none;
font-size: 30px;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos7.gif);
background-repeat: no-repeat;
}
a:visited {
color: red;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}
a:hover {
color:#000;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

Por ejemplo vamos a hacer algo visible como que aparezca una linea por debajo de los enlaces. En a:hover cambiamos text-decoration: none; por text-decoration: underline; y veremos como al pasar el ratón por encima aparece una linea por debajo. El atributo color: corresponde al color de las letras y se lo podéis cambiar también poniendo el nombre del color el código hexadecimal o RGB podéis ver aquí una tabla de colores HTML. Los colores se pueden poner por su nombre en ingles por ejemplo red para el rojo green para el verde y una larga lista de colores que aguantan todos los navegadores, en hexadecimal o su valor RGB.
Vamos por ejemplo a cambiar el color del texto del enlace visitado que tiene como color el blanco (#fff;) deciros que los colores hexagesimales están formados por 6 cifras de 0 a 9, 6 letras o la combinación de ambos como: (# FF0000;) para el rojo. En colores en que los 6 números o letras son el mismo puedes escribir solo la mitad. Por ejemplo para blanco que es #FFFFFF; se usa (#fff;) y para el negro que es (#00000;)se utiliza (#000;) que sirve igual. Vemos que en el enlace visitado tenemos de color el rojo (red) y el enlace al pasar el puntero cambia a negro (#000;). Todo esto sin los paréntesis, ojo. Así escrito:

a:visited {
color: red;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}
a:hover {
color:#000;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

Pues hagamos que se al revés cambiamos los atributos de color de uno para el otro:

a:visited {
color: #000;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}
a:hover {
color:red;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

De esta forma el enlace visitado se vera en negro y rojo al pasar el ratón por encima. Al revés que en el caso anterior.
Juega con diferentes colores o sus valores.
Si usas (blue)Azul, (cyan) azul claro, (green) verde,(Darkgreen), (gold)dorado, (silver) gris plateado por ejemplo.
Podemos cambiar la imagen que aparece de fondo en cualquier caso como antes vamos a cambiar la imagen del enlace visitado y al pasar el mouse. Como las imagenes tienen el mismo nombre y sólo se diferencian por un numero (1,5,7) lo que habrá que cambiar sera simplemente el numero en el nombre de la imagen.
Ver esto por ejemplo:

a:hover {
color:red;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

Así es como se ve en el original. Con la imagen re_cursos5.gif que es el botón verde y lo vamos a cambiar por re_cursos1.gif que es botón azul claro Así:

a:hover {
color:red;
text-decoration:none;
background-color: #fff;
font-family: Verdana,Arial,Georgia,sans-serif;
font-size: 31px;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}

Y al revés en a:visited cambiamos el numero de la imagen por re_cursos5.gif que es el botón verde. Justamente a la inversa.
Antes:

a:visited {
color: #000;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos1.gif);
background-repeat: no-repeat;
}

.... y después.

a:visited {
color: #000;
font-size: 30px;
text-decoration:none;
color: red;
font-family: Verdana,Arial,Georgia,sans-serif;
background-image: url(re_cursos5.gif);
background-repeat: no-repeat;
}

Podéis jugar con otros atributos como el tipo de fuente (font-family:) estilo de la fuente (font-style: italic;) por ejemplo que pondrá el texto en cursiva podéis probar que el texto se ponga en cursiva al pasar el mouse, o también (font-weight:bold;) para texto en negrita. El tamaño del texto no os recomendaría que lo cambiarais ya que la imagen se ajusta a su tamaño y con tamaño menor de fuente más pequeña se hace la imagen y al revés si hacéis una fuente excesivamente grande se saldrá fuera del botón. Hay una forma de evitar que suceda esto pero ya queda para otra lección. De momento practicar con lo que ya sabéis hasta que lo entendáis a base de prueba error/acierto y ver lo que pasa en el disco duro de vuestro PC antes de subirlo a la web. El código de la lista no ordenada y los enlaces están en el archivo html, en el body se encuentra
la lista la conoceréis por las etiquetas (ul ) y (li) con sus correspondientes cierres. Sobre esto un dato en el CSS hay algo referente a las listas no ordenadas como podréis ver:

ul{list-style-type: none;}

Que quiere decir que no tiene decoración hay variados atributos: square que pone un cuadrado delante de cada elemento de la lista (square;), un circulo (disc), triángulos (triangle). También las hay alfabéticas y numéricas pero en este caso nos viene mejor una lista no ordenada sin decoración y ya le decimos lo que queremos que aparezca delante de cada elemento con css, si queremos una imagen, un color de fondo, etc. Seguro que ya vais adivinando por donde van los tiros, les dedicaremos algún episodio.
Subir la carpeta y los archivos e imagenes a un servidor para pruebas de este tipo usar alguno gratuito. La barra os puede servir para la cabecera de una web metida en una capa (div). En vez de tener la página vinculada a la hoja de estilos podéis incrustar el CSS en el header del HTML antes de entre las etiquetas:
(style type="text/css") y su cierre (/style) sin los paréntesis y con <> y borrando o anulando(link rel="stylesheet" href="re_cursos_nav.css" type="text/css" media="all"/).
Bueno estudiarlo bien y podréis integrar vuestra botonera en cualquier web dentro de una tabla, un marco o una capa al principio del todo del body de la web o si esta en una capa en la posición que le deis. Podéis cambiar las imagenes por una de vuestra creación modificando las que ya vienen con algún editor de imagen tipo Photoshop, El Gimp o Gimpshop (los cuales os recomiendo, es libre, gratis y funciona en cualquier sistema operativo, hay versiones para todos también portables). Crear unas del mismo tamaño o uno adecuado al tamaño de texto que le pongáis a los enlaces y llamarlas de la misma forma o incluso llamarlas como querais y cambiar el atributo de nombre de la imagen de en el CSS: bacgkgroud-image: url(elnombredevuestraimagen.gif); con los paréntesis para encerrar el nombre de la imagen.
Deciros que podeis hacer que los botones en vez de aparecer de forma vertical uno encima de otro podeis alinearlos horizontalmente con lo siguiente:

/*lista no ordenada----------*/
li {float:left;list-style:none;margin: 0px 1px 0px 1px}
ul { margin-left: 180px }

Ver el resultado en el ejemplo:
Barra de navegacion horizontal
Ahora nuestra botonera se ha convertido en una barra de navegación en posición horizontal en vez de una lista vertical indicado por las lineas CSS anteriores. Para que lo entendais (float:left) indica que flote hacia la izquierda, (margin-left:) margen al lado izquierdo, (list-stile:none) que no tiene decoración para que no aparezcan los fatidicos puntos negros si no le indicas eso, margin: son los margenes que guardan las imagenes y funciona en el sentido de las agujas del reloj la primera cifra para el margen superior, la segunda para el derecho, la tercera para el píe de página y la cuarta corresponde con el margen izquierdo . Esto indica unos margenes de 0 desde arriba, 1a la derecha, 0 abajo y 1 por la izquierda. Realmente el que manda es el 1 a la izquierda que es la distancia que mantienen entre ellos. Si los quieres juntitos de todo les pones 0 para todo pero para eso es mejor que lo indiques con una sola cifra así:

li {float:left;list-style:none;margin: 0px}

Si lo haces así:

li {float:left;list-style:none;margin: 0px 1px}

Indicara una de las cifras los margenes de arriba y de abajo y otra los de la derecha y la izquierda. Dependiendo de la precisión que necesiten tus margenes usaras entre una y cuatro cifras expresadas en pixeles y otras unidades. Yo lo he puesto así para tener que explicar todo esto y daros todo este rollo. Eso si deberia de ir incluido en un div o capa para poderle dar otras propiedades como por ejemplo una imagen o un color de fondo para la capa, bordes, etc y poderla situar mejor en su sitio. Este otro rachivo de ejemplo al contrario que el otro que está vinculado a una hoja de estilos en cascada externa al documento HTML, en esta va incrustado en el head del HTML entre las etiquetas style con lo cual sólo teneis que ver el código fuente de la página y copiarlo para poder jugar con ello, comparte las mismas imagenes y con el mismo nombre que las del anterior con el nombre que querais y la extensión htm o html. Para ver el código fuente de cualquier página recuerda en Mozillla control+u y para todos en el menú ver y suele poner algo como ver codigo fuente. Si lo teneis en alguna carpeta de vuestro disco duro podeis guardarlo en esa misma carpeta con el archivo HTML, las imagenes y la hoja de estilos del anterior y listo.
Que largo se ha hecho para el proximo lo hago por fasciculos.
Creo que tenéis deberes suficientes por hoy.