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

Visitas el mes pasado: 66

logo

Donativos

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




4. Maquetación (III)

4.3 Cambios en el estilo

Paso 13

logo miweb

Cambiar estilo por defecto

Tenemos ya la primera página de nuestra web maquetada. Ahora le haremos algunos cambios en el estilo de las distintas secciones para que queda más llamativa.

Todo esto lo haremos modificando el archivo CSS (inicio.css), al cual le añadiremos unas cuantas líneas. Abrimos por tanto el archivo inicio.css con el editor de textos (HTML-Kit) para poder cambiarlo.

Todos los navegadores tienen un estilo por defecto. Éste puede cambiar de unos a otros y a veces puede ser la causa de que la página no se vea igual en todos los navegadores. Cambiar este estilo es muy fácil. Basta con poner al principio del archivo CSS (después del comentario del inicio) la siguiente línea:

* { margin: 0 auto; padding: 0; }

Utilizamos aquí el selector universal (* un asterisco) para indicar que los cambios tendrán lugar en todos los elementos de la página.

Los cambios que hacemos aquí son los más habituales. Con la propiedad margin: 0 auto quitamos el margen externo de los elementos que suelen tener por defecto algunos navegadores, y además mediante el valor auto indicamos que, por defecto, cualquier elemento en la página quedará con alineación centrada horizontalmente.

La propiedad padding: 0; elimina el margen interno de cualquier elemento. Con esto nos aseguramos de que las medidas de los márgenes que pongamos en la página sean las que nosotros ponemos, sin añadir márgenes tanto externos como internos, por defecto.

Otros cambios habituales que suelen hacerse en el estilo por defecto son marcar el tipo de letra (font-family) o la alineación del texto (text-align). Nosotros añadiremos simplemente la línea que hemos visto antes al principio de la página:

* { margin: 0 auto; padding: 0; }

Una vez añadida esta línea al principio de la página (después del comentario de apertura), no cierres todavía el archivo inicio.html, ya que vamos a hacer más cambios.

Cambios en la cabecera

Cambiaremos ahora el estilo en la cabecera de la página. Cambiaremos el color de fondo a un color gris plateado mediante la propiedad background-color: silver. y añadimos también un margen interno para dejar espacio entre el borde del elemento y su contenido, para ello utilizamos la propiedad padding: 20px 10px; . Con la primera medida 20px indicamos el margen superior e inferior, con la segunda, 10 px indicamos los márgenes izquierdo y derecho.

El color de fondo indicado en backgroound-color lo vemos también en los márgenes internos (padding) pero no se ve en los márgenes externos (margin).

Añadiremos por tanto la siguiente línea al final del archivo CSS para cambiar la cabecera:

#cabecera { background-color: silver; padding: 20px 10px; }

Una vez hayamos insertado las dos líneas que hemos visto hasta ahora, cerramos el archivo inicio.css y guardamos los cambios. Comprobamos después el resultado abriendo el archivo principal (index.html) con el navegador. Este lo veremos como el del siguiente enlace:


Cambios en la sección de enlaces

Ahora vamos a cambiar el estilo de la sección id="enlaces". Abrimos por tanto el archivo inicio.css con el editor de textos (HTML-Kit), para poder insertar los cambios.

La sección que queremos cambiar (div id="enlaces") engloba a todo lo que tenemos dentro de este "div": su título, su párrafo, y los tres recuadros con los enlaces que hemos puesto. Le pondremos a esta sección un fondo de color amarillo y un borde con una doble línea de color rojo. Pondremos para ello la siguiente línea al final del archivo CSS:

#enlaces { background-color: yellow; width: 90%; border: 5px double red; }

Mediante la propiedad background-color: yellow; cambiamos el color de fondo de la sección.

Con la propiedad border: 5px double red; indicamos que en el borde de esta sección ponemos una línea doble de 5 pixels de ancho de color rojo.

La propiedad width: 90%; hace que el ancho de la sección se reduce al 90% de la pantalla (y no el 100%). El 10% restante es un espacio en blanco. Como hemos puesto al principio del archivo CSS el selector universal con la propiedad margin: 0 auto, la sección queda centrada en la página.

Después de insertar esta línea cerramos y guardamos el archivo inicio.css. Comprobamos después el resultado. Abrimos para ello la página principal (index.html) que quedará como la del siguiente enlace:


Sin embargo éste no es el resultado que queremos, ya que las subsecciones donde se incluyen los enlaces no están incluidas en el recuadro.

Esto es debido a que éstas están en posicionamiento flotante (propiedad float: left;), y por tanto están fuera del flujo normal de los elementos de la página.

Para incluirlos dentro del recuadro, el truco está en poner un elemento normal (no flotante) después de éstos y obligar al recuadro a extenderse hasta este elemento.

Éste elemento suele ser un elemento vacío. Explicamos de este modo porqué hemos puesto en el código HTML el elemento <div class="vacio"></div> al final de la sección.

Para extender el recuadro hasta este último elemento utilizamos la propiedad clear: both de CSS. por tanto volvemos a abrir el archivo inicio.css con el editor de textos (HTML-Kit), e incluiremos al final del mismo la siguiente línea:

.vacio { clear: both; }

Con esto el elemento vacío queda detrás de los elementos flotantes, y como éste pertenece a la sección "favoritos", obliga a la sección a extenderse hasta este elemento, con lo que los elementos flotantes quedan incluidos dentro de la sección.


Resumen de archivo CSS

Con lo visto hasta ahora, el archivo inicio.css debe quedar como éste:

/*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; }
.mifavorito { width: 30%; margin: 20px 1%; float: left; background-color: aqua }
.mifavorito p { margin: 10px 60px; }
#cabecera { background-color: silver; padding: 20px 10px; }
#favoritos { background-color: yellow; width: 90%; border: 5px double red; }
.vacio { clear: both; }

En color azul destacamos las nuevas líneas que hemos introducido en este paso. El resto del archivo ya lo teníamos de pasos anteriores.

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


Si tu resultado no es el mismo que aquí, repasa los códigos CSS y HTML vistos hasta ahora para que sean iguales que los nuestros.




En el siguiente tema añadimos una nueva sección a la página: la barra de navegación

Barra de navegación.




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