Qué son las capas

Una capa es una división, una parte de la página, que tiene un comportamiento muy independiente dentro de la ventana del navegador, ya que la podemos colocar en cualquier parte de la misma y la podremos mover por ella independientemente, por poner dos ejemplos. En el uso de capas se basan muchos de los efectos más comunes del DHTML.

Las etiquetas <LAYER> e <ILAYER> tienen como objetivo construir capas, pero estas no son compatibles más que con Netscape, por lo que es recomendable utilizar la etiqueta <DIV> para hacer capas preferentemente a las otras dos.

Los atributos que podemos aplicar a estas etiquetas, pero en concreto a las dos recomendadas <SPAN> y <DIV>, son principalmente de estilos CSS. Estos atributos nos permiten, como hemos podido ver en el manual de hojas de estilo en cascada de desarrolloweb, modificar de una manera muy exhaustiva la presentación de los contenidos en la página. Para aplicar estilos a estas etiquetas se utiliza el atributo de HTML style, de esta manera:

<SPAN style="text-decoration:underline;font-weight:bold">...</SPAN>

<DIV style="color:red;font-size:10px">...</DIV>

Como ya pudimos ver muchos ejemplos en el manual de CSS, nos referimos a él para ampliar esta información. Pero no habíamos visto todavía una serie de atributos que nos sirven para posicionar la división en la página como una capa. Estos atributos se pueden aplicar a la etiqueta <DIV> que es la que servía para crear capas compatibles con todos los navegadores.

Los atributos para que la división sea una capa son varios y se pueden ver a continuación.

<div id="c1" style="position:absolute; left: 200px; top: 100px;">

Hola!

</div>

El primero, position, indica que se posicione de manera absoluta en la página y los segundos, left y top, son la distancia desde el borde izquierdo de la página y el borde superior.

Hay otros atributos especiales para capas como width y height para indicar la anchura y altura de la capa, Z-index que sirve para indicar qué capas se ven encima de qué otras, clip que sirve para recortar una capa y hacer que partes de ella no sean visibles, o visibility para definir si la capa es visible o no. Estos y otros atributos los veremos en el siguiente capítulo, donde hablaremos del posicionamiento de capas.

Usuarios que han visto este tema también han visto...

- Cómo cambiar la apariencia de un botón en CSS
- Pseudoclases de CSS
- Efectos sobre bloques
- Neutralizar los estilos CSS iniciales
- Celdas con puntas redondeadas utilizando CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento