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: 31

Visitas el mes pasado: 38

logo

Donativos

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




8. Listas (II)

8.2. Estilo

Paso 21

logo miweb

El archivo listas.css

Cuando hemos creado el archivo listas.html hemos puesto en la cabecera (etiqueta head) una etiqueta de enlace al archivo listas.css

Crearemos en esta página este archivo, para poder poner el estilo del contenido específico de la página. Para ello abrimos el editor de textos y creamos un nuevo archivo totalmente en blanco (Con HTML-Kit Archivo / Nuevo.. y en el cuadro pulsamos en la pestaña "General", y después en "Blank Text File").

Una vez que tenemos el archivo en blanco abierto en el editor de textos escribimos en él lo siguiente:

/*Estilo especifico para pagina listas.html*/
/*titulo principal y párrafos */
#principal h2 { margin: 0.5em; color: navy; font-size: 1.5em }
#principal p { margin: 0.5em 5em; text-align: justify; font-size: 0.9em; }

Ahora guardamos el archivo en la carpeta raíz de nuestra web. Al guardarlo le ponemos como nombre listas.css.

Las dos primeras líneas que hemos puesto son comentarios. El primero indica lo que vamos a poner en este archivo, y el segundo explica las dos lineas siguientes.

En la tercera línea ponemos el estilo para el título de la sección (el cual está en una etiqueta h2). Ponemos un margen al texto (margin: 0.5em), y le cambiamos el color y el tamaño de letra.

La cuarta línea nos da el estilo de los tres párrafos que vienen después del título principal. El margen sirve para dejar espacio entre párrafos (0.5em es el margen vertical), y para dejar también un espacio entre los laterales del contenedor y el texto (5em como margen horizontal). Le damos al texto una alineación justificada, y un tamaño más pequeño.

Maquetar las listas

Las dos listas aparecen por defecto una debajo de otra, pero queremos que aparezcan en dos columnas.

Abrimos el archivo listas.css con el editor de textos, y debajo de lo que ya tenemos, escribimos lo siguiente:

/*maquetar las listas*/
#principal .lista { float: left; width: 40%;  margin: 10px 5%; background-color: #e6e6fa; }

La primera línea es simplemente un comentario para indicar que vamos a maquetar las listas.

En la segunda linea apuntamos con el selector a los dos contenedores div donde están las listas. Los posicionamos de forma flotante (float: left), y después indicamos su anchura (width: 40%).

Al indicar la anchura debemos tener en cuenta el espacio que ocupa el margen horizontal que le vamos a poner, en este caso un 5% por ambos lados, es decir un 10% en total, con lo cual el sitio que ocupará es un 50% del ancho disponible. Con la propiedad margin: 10px 5% indicamos este margen. Además ponemos un margen por arriba y abajo de 10px.

Por último la propiedad background-color cambia el color de fondo de los elementos que contienen las listas.

Cerramos y guardamos el archivo listas.css, y comprobamos el resultado. Para ello abrimos el archivo listas.html con el navegador, el cual debe quedar como el del siguiente enlace:


Estilo de las listas

Nos falta cambiar el estilo tanto del contenido de las listas como de sus títulos. Empezaremos por los títulos. Volvemos a abrir el archivo listas.css con el editor de textos, y escribimos al final del mismo lo siguiente:

/*título de las listas*/
#principal h3 { color: #4b0082; margin: 0.5em 2em; text-align: left; }

La primera línea es un comentario indicando lo que vamos a hacer. En la segunda cambiamos el estilo de los títulos de las listas. Le cambiamos el color de letra, les ponemos unos márgenes verticales (0.5em) y horizontales (2em), y los alineamos a la izquierda.

Con el archivo listas.css abierto en el editor de textos, seguimos cambiando el estilo, ahora de los elementos de las listas, para ello escribimos al final del mismo lo siguiente:

/*Elementos de las listas*/
#principal li { font-size: 0.9em; text-align: left; margin: 0.3em 4em; }

Les hemos puesto un tamaño más pequeño, los hemos alineado a la izquierda, y hemos puesto los márgenes verticales y horizontales.

Ahora vamos aplicar un estilo específico distinto para cada lista, para lo cual seguimos escribiendo en el archivo listas.css:

/*Estilo específico para cada lista*/
#paises li { list-style-type: square; }
#idiomas li { list-style-type: decimal; }

La propiedad list-style-type permite cambiar la marca que ponemos al principio de cada elemento. Para ello tiene varios valores. Aquí para la primera lista hemos puesto el valor square que marca el elemento con un pequeño cuadrado. Para la segunda lísta el valor decimal numera la lista, poniendo al principio de los elementos números consecutivos.

Ahora cerramos y guardamos el archivo listas.css, y comprobamos el resultado. Para ello abrimos el archivo listas.html con el navegador, el cual debe quedar como el del siguiente enlace:

Acabamos así la segunda página de nuestra web. Espero que te quede igual que la nuestra. Si no es así repasa los códigos y busca los errores.


Código del archivo listas.css

Para mayor claridad dejamos aquí el código completo del archivo listas.css que hemos construido a lo largo de esta página:

/*Estilo especifico para pagina listas.html*/
/*titulo principal y párrafos */
#principal h2 { margin: 0.5em; color: navy; font-size: 1.5em }
#principal p { margin: 0.5em 5em; text-align: justify; font-size: 0.9em; }
/*maquetar las listas*/
#principal .lista { width: 40%; float: left; margin: 10px 5%; background-color: #e6e6fa; }
/*título de las listas*/
#principal h3 { color: #4b0082; margin: 0.5em 2em; text-align: left; }
/*Elementos de las listas*/
#principal li { font-size: 0.9em; text-align: left; margin: 0.3em 4em; }
/*Estilo específico para cada lista*/
#paises li { list-style-type: square; }
#idiomas li { list-style-type: decimal; }



En el siguiente tema empezaremos la tercera página de nuestra web. Alli aprenderemos otro tipo de elementos que podemos poner en html: las tablas..

Tablas: contenido




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