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.

11. Menú de enlaces (II)

11.2 Estilo del texto

Estilo del título

En el paso anterior hemos escrito el texto de los enaces del menú, ahora deberemos apicarle estilo. Empezaremos por el título. Para ello abrimos el archivo general.css y después de la última línea escribimos lo siguiente:(texto en verde)

.situacion { background-color: #ccffff;font-size: 0.8em; font-weight: bold; 
             padding: 0.1em 0em; }

#menu h4 { margin: 0px; padding: 0.5em 1em; font-size: 1.1em ; 
        font-family: verdana; font-weight: bold; text-align: left; }
				

Veamos cuales son las propiedades que hemos aplicado:

• margin: 0px : Ponemos el margen externo igual a cero.
• padding : 0.5em 1em : Deja una pequeña separación superior e inferior, y con los laterales. (margen interno)
• font-size : 1.1em : Define el tamaño de la letra
• font-family : verdana : Define el tipo de letra
• font-weight: bold : Cambia el texto a negrita.
• text-align: left : Alineación del texto a la izquierda

Después de escribir la línea anterior guardamos el archivo, y abrimos el archivo plantilla.html con el navegador para ver los cambios.

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

Estilo de texto

Una vez que ya hemos aplicado el estilo al título, deberemos aplicar estilo a la lista de enlaces. Para ello abrimos el archivo general.css con el HTML-Kit y después de la ultima línea escribimos lo siguiente:(texto en verde)

#menu h4 { margin: 0px; padding : 0.5em 1em; font-size : 1.1em ; 
           font-family : verdana ; font-weight: bold; text-align: left; }
#menu ul {width: 100%; list-style: none;  margin: 0px; padding: 0px;}
		 

Veamos las propiedades que hemos aplicado a la lista del menú:

• width: 100% : Hace coincidir el ancho de la lista con el ancho del recuadro que la contiene (100%)
• list-style: none : Quita el punto de la viñeta.
• margin: 0px; padding: 0px : Pone todos los márgenes a cero.

Después de escribir la línea anterior guardamos el archivo, y abrimos el archivo plantilla.html con el navegador para ver los cambios.

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

Aparentemente lo único que hemos hecho es quitar el punto de la viñeta, aunque el texto también ha quedado centrado.

El resto de cambios en el estilo lo aplicaremos a los enlaces, pero eso lo haremos ya en el siguiente paso:

ir al siguiente paso: Estilo de los enlaces

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