lunes, 23 de enero de 2017

Creación web, ejercicio 2: Hoja de estilos

Para evitar tener que teclear todo el estilo en cada una de las páginas, éste suele definirse en un archivo aparte, con la extensión "css", al que enlazan cada una de las páginas. Para ello, en el <head> de cada una de ellas debe aparecer la siguiente etiqueta:


<link href="estilo.css" rel="stylesheet" type="text/css" />

En un archivo css los estilos se definen así:

elemento {
 propiedad: valor;
 propiedad: valor;


Vamos a dar estilo a la página web creada en el ejercicio anterior a través del archivo css:

  • El color de fondo de la página puede definirse así:
 body {
      background-color: gray;
 }

  • el color de fondo de un elemento con un identificador (por ejemplo, la división encabezado, <div id="encabezado">):
#encabezado {
     background-color: blue;
}

  • Los estilos de la barra de navegación se definirán así:
#navegacion {
     background-color:blue;
}

#navegación ul {
     list-style-type:none;
}

#navegacion li {
     display: inline;
}

#navegacion a {
     text-decoration: none;
}

En cuanto a los elementos que aparecen en el contenido, tenemos tres tipos de párrafos que se repiten varias veces (los normales, los que contienen las imágenes, y los pies de foto).

En una página web un identificador sólo puede aparecer en un elemento. Para poder definir estilos que se repiten varias veces pueden identificarse con una clase. Las clases si pueden aparecer varias veces en una misma página web. Por ejemplo, podemos identificar los párrafos normales así:

<p class="normal">

los pies de foto así:

<p class="piefoto">

y los de las imágenes así:

<p class="imagen">

En un archivo css a las clases se les define el estilo así:

.normal {
     font-size: 14px;
     color: red;
}

.piefoto {
     font-size: 10px;
     color: gray; 
     text-align: center;
}

.imagen {
     text-align:center;
}

En este ejercicio deberás quitar todos los estilos de la página web que creaste y ponerlos en un archivo css.

Además, deberás crear el resto de páginas web de tu sitio.

No hay comentarios:

Publicar un comentario