Capas

• Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño.

• Podemos insertar una capa a través de las etiquetas <div> y </div>, que como ya vimos, sirven para agrupar bloques de texto.

Podríamos insertar una capa escribiendo el siguiente código:

Ejemplo 1:


<div id="capa" style="position:absolute; width:200px; height:115px; z-index:3; visibility: visible; background-color: #0099CC; layer-background-color: #0099CC; background-image: url(imagenes/fondocapa.gif); layer-background-image: url(imagenes/fondocapa.gif); clip: rect(1 auto auto 3);">

Este texto está dentro de una capa.

</div>


• A través del atributo id se le da un nombre a la capa.

• style se establecen el resto de propiedades de la capa.

• A través de las propiedades left (izquierda) y top (superior) se establece la posición de la capa respecto a los márgenes izquierdo y superior de la página.

• Para que la capa aparezca en la posición establecida, es necesario incluir también la propiedad position con el valor absolute. Si no se estableciera este valor, la capa se mostraría pegada al margen izquierdo.

• width (anchura) y height (altura) se establece el tamaño de la capa.

• z-index puede establecerse el índice de la capa dentro de la página.

• A través de la propiedad visibility puede establecerse la visibilidad de la capa. Puede tomar los valores inherit (se muestra la capa mientras la capa a la que pertenece también se esté mostrando), visible (muestra la capa, aunque la capa a la que pertenece no se esté viendo) y hidden (la capa está oculta).

• layer-background-image y background-image se puede establecer una imagen de fondo para la capa. La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url.

• A través de las propiedades layer-background-color y background-color se puede establecer un color de fondo para la capa. Ha de ser un número hexadecimal.

• overflow puede establecerse si se mostrará o no el contenido de la capa cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado pequeña

• clip puede establecerse el área de la capa que podrá ser visualizado. Lo que hace es recortar la capa, haciendo que partes de ella no sean visibles. Ha de especificarse la distancia de los márgenes de la capa entre paréntesis, después de la palabra url.

• auto como valor de alguna de estas distancias, lo que indica que la distancia se corresponderá con los bordes de la capa.

• Todas estas propiedades se especifican a través del atributo style, y deben aparecer entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las propiedades no se utiliza el símbolo = (igual), sino que se utiliza el símbolo : (dos puntos).

Resultado:

Ejemplo 2:


<layer name="capa" width="200px" height="115px" z-index="3" visibility="show" bgcolor="#0099CC" background="imagenes/fondocapa.gif">

Este texto está dentro de una capa.

</layer>


• Otra forma de insertar capas es utilizando las etiquetas <span> y </span>, en lugar de las etiquetas <div> y </div>

.

• La etiqueta se utiliza del mismo modo que la etiqueta <div> y </div>, y es compatible con un mayor número de navegadores.

• También existen las etiquetas <layer> y </layer> , pero solamente son reconocidas por el navegador Netscape.

• La principal diferencia de la etiqueta , en lo que se refiere a las otras dos, es que las propiedades de la capa se especifican como atributos independientes, y no como valores dentro del atributo style.
  

Resultado:

Este texto está dentro de una capa.