¿Que es una capa?

Desde ya hace bastante años, casi todas las versiones de los navegadores más extendidos (Mozilla, Internet Explorer, Ópera...) incluyen funcionalidades que permiten la utilización de capas o layers. Esta nueva característica permite diseñar páginas HTML con diferentes capas con la particularidad de que cada una de ellas puede ser mostrada de forma independiente, unas encima de otras o moverlas por la página produciendo efectos de animación. Por esta razón, a estas nuevas características del

En HTML, las capas se definen con una etiqueta que ha visto ya en las lecciones anteriores: < DIV>.. </DIV>.
Todo el contenido HTML incluido entre esas dos etiquetas es tratado como una capa, y por tanto, como un elemento único de la página.
Entre esas <DIV> y </DIV> puede escribir cualquier cosa: texto, imágenes, tablas, e incluso otras capas, como veremos más tarde.
El principal atributo de una capa es ID, pues define un nombre para la capa. Este identificador será utilizado para referimos a él cuando estemos en otras capas o cuando lo manipulemos desde una función JavaScript. Este atributo es opcional. Si no se pone, la capa no tendrá nombre y no podrá ser referenciada más tarde.
Así pues, por ahora, el esquema básico de una capa es:
<DIV ID=NombreCapa>
Codigo HTML de la capa
</DIV>
Con todo esto, tenemos que una capa queda definida por un nombre, que es un identificador único que la distingue de las otras capas. Además, hay que definir un estilo para ella, como los que ya ha visto en el capítulo lo. En ese estilo, se especifican propiedades como la posición que va a tener en la pantalla o el color de fondo.
El estilo lo puede definir de forma explícita para una capa concreta, o de forma genérica para varias capas. En el primer caso, definiremos mediante una etiqueta STYLE el estilo de la capa, del mismo modo que se vio en el capítulo la, de forma que éste estará unívocamente vinculado a una capa, y sólo se le aplicará a ella.
En este caso, se definirá así;
<DIV NAME="Nombre capa" STYLE = "Valores del estilo">

<DIV>
También podemos hacer esta definición de las propiedades de la capa fuera de la etiqueta DIV, del siguiente modo:
<STYLE>
.NombreCapa {
position:absolute;
LEFT: 60px;
TOP: 120px;
WIDTH: 300px;
Z-INDEX: 1;
}
</STYLE>

<DIV NAME="Nombre capa">

<DIV>
Como ya sabe, en este caso, el nombre del estilo debe estar precedido por un punto. En este ejemplo, estamos indicando las propiedades que tendrá la capa.
Por último, si queremos definir las propiedades de forma genérica para varias capas, en primer lugar deberemos definir el estilo mediante:
<STYLE>
.NombreEstiloCapas{
position:absolute;
LEFT: 60px;
TOP: 120px;
WIDTH: 300px;
Z-INDEX: 1;
}
</STYLE>
Y posteriormente, a la hora de definir la capa, debemos indicar que queremos utilizar el estilo que se ha definido previamente con:
CLASS = "NombreEstiloCapas" del siguiente modo:
<DIV NAME="Nombre capa" CLASS = "NombreEstiloCapas">

<DIV>
Como ya hemos comentado, esto es útil cuando deseamos definir un estilo que vamos a aplicar a varias capas.
Esta última forma se utiliza poco. Las más empleadas son las dos primeras. A continuación se recogen las dos formas de definir las propiedades de una capa. No se preocupe por el contenido del estilo. Se verá a continuación. . Definición con una clase de estilos.
<STYLE>
. Estilo{
position:absolute;
LEFT: 60px;
TOP: 120px;
WIDTH: 300px;
Z-INDEX: 1;
}
</STYLE>

<DIV ID=IdCapa CLASS=Estilo>

</DIV>
Definición directa en la declaración.
<DIV ID=IdCapa

STYLE="
position:absolute;
LEFT: 60px;
TOP: 120px;
WIDTH: 300px;
Z-INDEX: 1; ">

</DIV>