Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++


logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 19

Visitas el mes pasado: 22

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




10. La barra de enlaces (III)

10.3. Estilo de de enlaces

Estilo general de enlaces.

En el paso anterior colocamos los enalces y los posicionamos en la barra de navegación. Ahora tenemos que dar estilo, es decir, cambiar tipo de letra, color, fondo, etc.

Cambiaremos primero aquellas propiedades que van a ser igual en todas las pseudoclases o estados del enlace. así que abrimos el archivo general.css con el HTML-Kit y después de la última línea escribimos lo siguiente (texto en verde):


....
#navegacion ul li { display: inline; float: left;width: 200px ;
                    border: 1px solid #ffcc99 ;margin: 3px ; }
										
#navegacion ul  { clear:both; }

#navegacion a { font-size: 0.8em; font-weight: bold; 
          text-align: left; text-decoration: none; padding: 0.2em 1em 0.2em 1em; 
          display: block; }


Vamos a ver cuales son las propiedades que hemos aplicado:

Una vez escrita la línea anterior, guardamos el archivo, y abrimos después el archivo plantilla.html para ver los cambios:

La página quedará así: Ver mi página


Ahora ya tenemos el estilo de los enlaces, pero falta aplicar estilo a las pseudoclases, es decir los estados del enlace (normal, visitado, etc.) añadiremos unas líneas en las que cambiaremos el color del texto y el del fondo del enlace según las pseudoclases.

Estilo de pseudoclases.

Abrimos el archivo general.css con el HTML-Kit y después de la ultima línea escribimos lo siguiente(texto en verde):


....
#navegacion ul li  { display: inline; float: left;width: 200px ;
           border: 1px solid #ffcc99 ;margin: 3px ; }
					 
#navegacion ul { clear:both; }

#navegacion a { font-size: 0.8em ; font-weight: bold;
                text-align: left; text-decoration: none	;padding: 0.2em 1em 0.2em 1em; 
                display: block; }
								
#navegacion a:link { color: #333333; background-color: #ffff99 ; }
#navegacion a:visited	{ color: #333333; background-color: #ffff99 ; }		
#navegacion a:hover { color:#990099; background-color: #ffffcc; }
#navegacion a:active { color:#990099; background-color: #ffffcc; }


Después de escribir estas líneas, cerramos el archivo y abrimos el archivo plantilla.html con el navegador para ver los cambios.

La página quedará así: Ver mi página


Ahora ya hemos completado la barra de navegación, pero debajo de ella pondremos una pequeña barra de situación que nos dirá en qué página de la Web estamos. Pero eso lo veremos ya en el siguiente paso.


ir al siguiente paso: Barra de situación.







Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com