CSS – (Parte II) – Las Capas

Este post es la continuación a la introducción a los CSS o ficheros de formato de las páginas web y que podeis encontrar aquí.

En la entrada anterior hablabamos de los diferentes métodos para aplicar el diseño en una página web, y finalmente nos decantabamos por los ficheros css, para simplificar el diseño y centralizarlo.

También introduciamos el concepto de Capas o DIVs.

CAPAS o DIVs

Las Capas son diferentes superficies de programación o de visualización, y a las cuales podemos darles el diseño independientemente.

Para ello será necesario utilizar el Tag <DIV></DIV>, y muy importante asignarle un ID para posteriormente desde el fichero css aplicarle el diseño.

Paso 1- En la página web en la capa correspondiente o Tag que nos interese, debemos asignarle un ID que definiremos en el fichero css.

Paso 2-En la cabecera <HEADER> de la página web indicaremos la ruta del fichero css, para que sepa donde está el fichero y que propiedades aplicar.

<HEADER>

<LINK HREF=”css/estilos.css” REL=”stylesheet” ENGINE=”text/css” MEDIA=”screen”/>

</HEADER>

Paso 3- En el fichero Css, indicaremos el ID del DIV o el Tag que nos interese, precedido de # y entre llaves las propiedades que queramos definir. De la siguiente manera:

#Capa1
{

background:green;
color:white;
width:200px;
height:100px;
text-align:center;

}
El  ID puede ser numérico o alfanumérico, según nos interese, pero siempre conveniente que seamos ordenados y que podamos identificarlo rápidamente.

SOBRE LAS CAPAS

Las capas tienen un componente z-index que nos permitirá indicar la profundidad de la capa (más al fondo o más al frente), de tal manera que a número más grande, más al frente estará la capa.

Posiciones: La posición de las capas puede ser “absolute” o “relative”, en función de donde ubiquemos la capa.

• Position:relative/absolute
• top
• left
• right
• bottom

para indicar desde donde comenzamos a contar.

Las medidas pueden ser en pixeles o en %, por ejemplo 100px o bien 100%

Anchura y Altura

• Width and Height

Tenemos la opción de indicar

• float: left/right para indicar si queremos que coloque los objetos uno al lado del otro, y que vaya rellenando hacia la derecha y abajo automáticamente.