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.

Menú lateral (III)

5.3 Estilo del texto del menu

Estilo del Título del menú.

En el paso anterior nos faltaba aplicar estilo al texto del menú lateral. Empezaremos por el título. El título tiene la etiqueta <h3> ... </h3> a la cual todavía no le hemos aplicado ningún estilo. Aplicaremos las propiedades del texto al selector h3 en la hoja de estilo.

Abre el archivo estilo.css con el bloc de notas, y después de la última linea añadimos esta otra:

h3 { font-size: 1.5em; font-family: "times new roman"; font-weight: bold; text-align: center; color: purple; }

Veamos cuales son las propiedades que hemos aplicado:

• font-size: 1.5em; : Indica el tamaño de la letra.
• font-family: "times new roman"; : indica el tipo de letra.
• font-weight: bold; : Indica el grosor de letra, sus valores pueden ser normal, bold, bolder, lighter (normal, negrita, extra-negrita, y fino) tambien puede tener valores numéricos del 100 al 900 (siempre de 100 en 100), correspondiendo al 400 el valor normal
• text-align: center; : Alineación del texto: centrada
• color: purple; : Define el color del texto (púrpura)

Una vez escrita la línea en el bloc de notas, lo cerramos y guardamos; y abrimos el archivo index.html con el navegador para ver los cambios.

Tu página Web quedará así: Ver mi Web.

Como ves, el título del menú, ha cambiado, ahora vamos a cambiar los enlaces del menú.

Estilo de la lista del menú

Se te fijas, tenemos dos listas dentro de la página, una la que hicimos al principio, dentro del subtítulo "Buscadores en la Web", y otra la de los enlaces del menú. La lista de enlaces del menú ha cogido el mismo estilo que la lista de Buscadores; queremos cambiar la lista de enlaces sin cambiar la lista de buscadores; por tanto debemos encontrar un método para aplicar el estilo a una sin que afecte a la otra.

Para ello, en el código CSS se usa el encadenamiento de selectores. Usando el selector "div li" indicamos que las propiedades que les afecten deben ser los que tengan la etiqueta <li> y a su vez estén dentro de la etiqueta <div>. Con esto podemos aplicar estilos a la lista, o a los enlaces de una lista, sin que el estilo afecte a la otra lista. Pero esto lo veremos mejor en la práctica.

Abre el archivo estilo.css con el bloc de notas, y después de la última línea escribe esta otra:

div li { font-size: 1.1em; font-family: "times new roman"; margin: 0em; padding-right: 0em; }

el selector afecta a todas las etiquetas li que estén dentro de la etiqueta div , pero no a los que estén fuera. con eso conseguimos que esta lista tenga un estilo difetente de la otra. Como ves hemos variado el tamaño y el tipo de letra, y hemos cambiado los márgenes, pero no los que teniá la caja, sino los que tenían los elementos de la lista.

Una vez escrita la línea anterior, guardamos y cerramos el bloc de notas, y abrimos el archivo index.html con el navegador para ver los cambios.

Tu página Web quedará así: Ver mi Web.

Como puedes ver el aspecto del texto ha cambiado, pero todavía quedan unos cuantos retoques. Ahora vamos quitar el punto de la viñeta de la lista. Abre de nuevo el archivo estilo.css con el bloc de notas, y después de la última línea añadimos esta otra:

div ul { list-style-type: none; }

Como ves, es muy parecida a la que ya usamos para cambiar el punto de la viñeta en la lista "buscadores", sólo que aquí la etiqueta apunta a la lista del menú y su valor es none (ninguno).

Una vez escrito el código anterior, cerramos y guardamos el bloc de notas, y abrimos el archivo index.html con el navegador para ver el resultado.

Tu página Web quedará así: Ver mi Web.

Como ves, la página ya va tomando forma, ahora sólo falta aplicar estilo a los enlaces del menú, para que no sean igual que los que tenemos en la otra lista.

Estilo de enlaces del menú

Tal como hicimos con los enlaces de la lista de "buscadores", vamos a aplicar el estilo de enlaces del menú con las pseudoclases. Por tanto cambiaremos el color de los enlaces.

Abre el archivo estilo.css con el bloc de notas, y después de la última línea escribe lo siguiente:(escribir el texto en verde)

.....
div li { font-size: 1.1em; font-family: times new roman; margin: 0em; 
         padding-right: 0em; padding-left: 0em; text-align: left;  }
div ul  { list-style-type: none; }
div li a:link  { color: rgb(204,32,239); }
div li a:visited  { color: rgb(144,112,207); }
div li a:hover  { color: rgb(32,112,63); }
div li a:active  { color: rgb(32,112,63); }

Como ves aquí hemos encadenado tres selectores para indicar dónde se debe aplicar el estilo. Una vez escritas las líneas anteriores en el bloc de notas, lo guardamos y cerramos. y abrimos el archivo index.html con el navegador para ver los resultados.

Tu página Web quedará así: Ver mi Web.

Nuestra primera página está casi lista. en el próximo tema daremos los últimos retoques a la página, y revisaremos lo ya aprendido.

Ir a l tema siguiente: Últimos retoques.

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