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.

4. Lista con enlaces (II)

4.2 Estilo de la lista.

Estilo del texto

En el paso anterior habíamos insertado una lista en nuestra página, pero faltaba aplicar el estilo en el archivo CSS para que la letra pueda parecerse a los párrafos anteriores.

Como queremos que el tipo de letra de nuestra lista sea igual al de los parrafos amteriores, vamos a observar qué estilo les hemos dado a éstos.

Si abrimos el archivo estilo.css vemos que el estilo apicado a los párrafos está en la siguiente línea:

p { text-align: justify ; font-size : 1.1em ; font-family : arial ; color: navy ; padding-left: 3em ; padding-right: 3em ; padding-top: 0.5em ; text-indent: 2.5em }

En principio queremos conservar las siguientes propiedades : la alineación (text-align), el tamaño de letra (font-size), el tipo o fuente de letra (font-family), El color de letra (color), y los espacios entre líneas y márgenes, ( padding-left, padding-right, padding-top); y no conservaremos la sangría (text-indent), por no ser una propiedad que suelan tener las listas.

Una vez abierto el archivo estilo.css con el bloc de notas, después de la última línea escribiremos esta otra:

li { text-align: justify ; font-size : 1.1em ; font-family : arial ; color: navy ; padding-left: 3em ; padding-right: 3em ; padding-top: 0.5em ;}

Si te fijas es el mismo estilo que hemos aplicado a los párrafos, pero sin la propiedad text-indent y con el selector li que afecta a los elementos de la lista.

Guardamos y cerramos el bloc de notas, y abrimos el archivo index.html con el navegador para ver los resultados.

Tu página Web quedará así:

Ver mi Web.

Como puedes observar, el estilo del texto ha cambiado, pero todavía hay que hacer una pequeña rectificación: la viñeta (el punto que marca el elemento de la lista) queda muy separado del texto y demasiado a la izquierda. Vamos a corregirlo.

abrimos de nuevo el archivo estilo.css con el bloc de notas, y en la última línea que hemos escrito li { ... } cambiamos la propiedad padding-left: 3em por margin-left: 3em

el archivo estilo.css quedará así: (en verde el texto que hemos cambiado)

h1 { text-align: center; font-size: 2.5em; font-family: verdana; color: purple }
h2 { text-align: center; font-size: 1.9em; font-family: "times new roman"; color: olive; }
p { text-align: justify; font-size: 1.1em; font-family: arial; color: navy;
    padding-left: 3em ; padding-right: 3em ; padding-top: 0.5em; text-indent: 2.5em }
.dibujo { float: right; margin-left: 2em; margin-right: 3em; margin-bottom: 1em; } 
body  { background-color: rgb(239,226,254);  background-image: url("objetos/fondo.gif");}
li { text-align: justify; font-size: 1.1em ; font-family: arial; color: navy; 
     margin-left: 3em; padding-right: 3em; padding-top: 0.5em; }
	 

Una vez cambiado el texto, guardamos y cerramos el archivo estilo.css, y abrimos el archivo index.html con el navegador para ver los resultados.

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

Espero que tu página te quede igual que a mi, si no es así, ya sabes, revisa el código hasta encontrar algún fallo.

El estilo de la lista parece que ya queda bien, sin embargo el lenguaje CSS nos da la posibilidad de cambiar el estilo de la viñeta. Mediante la propiedad list-style-type podemos elegir entre varios tipos de viñeta: sus valores son:

• disc : La viñeta está marcada por un pequeño círculo compacto. Es el valor que aparece por defecto si no se indica nada.
• circle : La viñeta está marcada por un pequeño círculo vacío por dentro.
• square : La viñeta está marcada por un pequeño cuadrado compacto.
• none : La viñeta aparece sin marcar.

Nosotros vamos a cambiar en nuestra Web el estilo de las viñetas, para poner unas viñetas cuadradas.

Para ello, abre la hoja de estilos (archivo estilo.css) con el bloc de notas y al final , después de la última línea insertamos esta otra:

ul { list-style-type: square; },

Con esta instrucción todos los elementos de la lista (encerrados por la etiqueta ul) cambian el estilo de su viñeta, que en lugar de ser tipo "disco" pasa a ser tipo "cuadrado".

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

Una vez que hayas comprobado que tu página está bien, vamos al siguiente paso. Vamos a poner enlaces a los buscadores señalados en la lista.

Ir al siguiente paso: Enlaces externos.

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