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

Visitas el mes pasado: 53

logo

Donativos

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




6. Pie de página (II)

6.1. Estilo

Paso 17

logo miweb

Selectores de estilo

Completaremos aquí el pie de página de la página de inicio de nuestra web. Nos falta sólamente aplicar el estilo CSS a la sección "pie".

Par ello nos fijamos cual es la distribución de las etiquetas HTML de esta sección para poder saber qué selectores CSS vamos a utilizar.

En primer lugar vemos que la etiqueta principal que engloba toda la sección es un div id="pie", por lo que para estilos que engloben a toda la sección usaremos el selector #pie.

Tenemos después tres subsecciones, todas ellas tienen la etiqueta de clase div class="col_pie", por lo que para referirnos a ellas en CSS utilizaremos el selector .col_pie.

Dentro de estas subsecciones tenemos dos tipos de texto marcados por distintas etiquetas; uno de título h4 y otro de párrafo p. Cada uno de ellos tendrá su correspondiente selector CSS para poder cambiar su estilo: El selector .col_pie h4 nos servirá para seleccionar los títulos, y el selector .col_pie p nos servirá para seleccionar los párrafos.


Maquetación

Aplicaremos primero el estilo general para toda la seccion. Abrimos para ello el archivo inicio.css con el editor de textos y añadimos al final del mismo la siguiente línea.

#pie { background-color: #ffe4c4; margin-top: 20px; padding: 10px 0px; }

Examinemos las propiedades CSS que hemos puesto en eta regla CSS:

Ahora aplicaremos el estilo a cada una de las columnas de la sección, para ello al final del archivo CSS escribiremos la siguiente regla:

.col_pie { float: left; width: 33%; }

Ponemos un posicionamiento flotante para cada una de las columnas mediante float: left, y con la propiedad width: 33% hacemos que cada columna ocupe un 33% del ancho disponible, de manera que quepan las tres en una misma línea.

Después de escribir estas dos líneas en el archivo inicio.css cerramos y guardamos el archivo, y comprobamos el resultado. Para ello abrimos el archivo index.html con el navegador, el cual lo veremos como en el siguiente enlace:


Vemos que el pie de página tiene un color de fondo distinto, y que su contenido está en tres columnas, sin embargo los textos de las columnas no tienen el estilo ni el formato que queremos.


Modificar textos

Modificaremos primero los títulos, y después los párrafos. Los títulos aparecen con su estilo por defecto, mientras que los párrafos tienen el mismo estilo que le hemos dado a los párrafos de las secciones anteriores.

Para modificar esto cambiaremos el estilo de estos elementos con CSS. Abrimos de nuevo el archivo inicio.css con el editor de textos, y al final escribimos la siguiente línea:

.col_pie h4 { font-size: 1.2em; color: maroon; padding-left: 3em; font-family: arial; }

Con esta línea cambiamos el estilo de los títulos de las columnas. Veamos los cambios que hemos hecho:

Queremos modificar también el resto de textos que hay en el pie de página, los cuales están marcados como párrafos, por lo que incluiremos también la siguiente línea en el archivo CSS:

.col_pie p { margin: 5px; padding-left: 3em; font-size: 0.8em; color: black; }

Los cambios que hemos hecho vienen marcados por las distintas propiedades que hemos añadido. Estas son:

Después de escribir estas dos líneas cerramos y guardamos el archivo inicio.css, y comprobamos el resultado. Para ello abrimos el archivo index.html con el navegador, el cual debe quedar como el del siguiente enlace:


La primera página, o página principal de nuestra web ya está acabada. En los siguientes pasos veremos cómo añadir más páginas a nuestra web.


Archivo CSS completo

Para que no quede ninguna duda vemos aquí el archivo inicio.csscompleto, el cul debe quedar de la siguiente manera:

/*archivo de estilo para página de inicio*/
* { margin: 0 auto; padding: 0; }
h1 {text-align: center; color: blue; font-size: 40px; font-family: arial;}
h2 {text-align: center; color: maroon; font-size: 30px; font-family: tahoma, verdana, arial; }
h3 {text-align: left; color: olive; font-size: 25px; 
    font-family: stencil, impact, "times new roman"; margin: 20px 100px; }
p { text-align: justify; margin: 1em 10em; font-family: verdana, nimrod, tahoma; 
    font-size: 14px; color: navy; }
a { text-decoration: none; font-weight: bold; font-size: 18px; font-family: tahoma, arial; }
a img { height: 150px; }
a:link { color: navy; }
a:visited { color: blue; }
a:hover { color: green; font-style: italic; }
a:active {color: red; }
a img:hover { height: 145px; }
#cabecera img { float: left; width: 100px; margin-left: 50px; }
.mienlace { width: 30%; margin: 20px 1%; float: left; background-color: aqua }
.mienlace p { margin: 10px 60px; }
#cabecera { background-color: silver; padding: 20px 10px; }
#enlaces { background-color: yellow; width: 90%; border: 5px double red; }
.vacio { clear: both; }
#navegacion { background-color: purple; padding: 5px 0px; }
.menu { width: 25%; float: left; }
.menu a { margin: 0px 50px; color: white; }
.menu a:hover { color: yellow; font-style: normal; }
#pie { background-color: #ffe4c4; margin-top: 20px; padding: 10px 0px; }
.col_pie { float: left; width: 33%; }
.col_pie h4 { font-size: 1.2em; color: maroon; padding-left: 3em; font-family: arial; }
.col_pie p { margin: 5px; padding-left: 3em; font-size: 0.8em; color: black; }

En color azul ponemos el código que hemos introducido en esta página. El resto del código ya lo teníamos de páginas anteriores.

En el siguiente tema haremos una plantilla para que nos sea más fácil crear el resto de páginas de nuestra web. No hacemos por tanto directamente la segunda página, sino que hacemos una página, que aunque no la publicaremos, nos facilitará la creación del resto de páginas de nuestra web.




En el siguiente tema crearemos la plantilla de nuestra web.

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