Entendido.

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

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

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:

• font-size: 0.8em : Define el tamaño de la letra.
• font-weight: bold : Cambia la letra a negrita.
• text-align: left : Alineación del texto a la izquierda.
• text-decoration: none : Elimina el subrayado de los enlaces.
• padding: 0.2em 1em 0.2em 1em : crea un margen alrededor del texto para que éste no esté pegado a los bordes del recuadro. Los cuatro valores de la propiedad padding se refieren respectivamente al los margenes internos superior, derecho, inferior e izquierdo.
• display: block; : Convierte al enlace en un elemento de bloque que ocupará toda la línea, así si le cambiamos el fondo, cambiamos el fondo de todo el recuadro y no sólo el del espacio que ocupa el texto.

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.

Página creada por ANYELGUTI.

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

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

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