O que são as camadas?

Vemos as diferenças entre várias etiquetas para aplicar estilos e criar camadas, além de uma pequena introdução às camadas.

Vejamos uma pequena introdução ao que são as camadas, a etiqueta HTML <DIV> utilizada para construí-las e os atributos CSS com os quais podemos aplicar estilos.

Como já vimos em nosso manual de CSS, <SPAN> serve para aplicar estilo a uma pequena parte de uma página HTML. Por exemplo, com ela poderíamos fazer com que uma parte de um parágrafo fosse colorida de vermelho. Com <SPAN> não é habitual englobar um pedaço muito grande de texto, por exemplo que ocupe vários parágrafos.

Com <DIV> también podemos aplicar estilo a partes de la página HTML.

A diferença entre <SPAN> e <DIV> é que com esta última sim que podemos aplicar estilo a uma parte mais ampla da página, por exemplo com três parágrafos. Além do mais, a etiqueta <DIV> tem um uso adicional que é o de criar divisões nas páginas as quais poderemos aplicar uma quantidade adicional de atributos para modificar seus comportamentos. Por exemplo, com o atributo align de HTML podemos alinhar a divisão ao centro, à esquerda, à direita ou justificado. Porém seu uso mais destacado é o de converter essa divisão em uma camada.

Uma camada é uma divisão, uma parte da página, que tem um comportamento muito independente dentro da janela do navegador, já que podemos colocá-la em qualquer parte da mesma e poderemos mover por ela independentemente, por exemplo. Muitos dos efeitos mais comuns do DHTML se baseiam no uso de camadas.

As etiquetas <LAYER> e <ILAYER> têm como objetivo construir camadas, mas estas não são compatíveis mais do que com Netscape, por isso é mais recomendável utilizar a etiqueta <DIV> para fazer camadas.

Os atributos que podemos aplicar a estas etiquetas, mas em concreto às duas recomendadas <SPAN> e <DIV>, são principalmente de estilos CSS. Estes atributos nos permitem, como podemos ver no manual de folhas de estilo em cascata de criarweb, modificar de uma maneira muito exaustiva a apresentação dos conteúdos na página. Para aplicar estilos a estas etiquetas utiliza-se o atributo de HTML style, desta forma:

Como podemos ver muitos exemplos no manual de CSS, nos referimos a ele para ampliar esta informação. Mas não havíamos visto ainda uma série de atributos que nos servem para posicionar a divisão na página como uma camada. Estes atributos podem ser aplicados à etiqueta <DIV> que é a qual servia para criar camadas compatíveis com todos os navegadores.

Os atributos para que a divisão seja uma camada são vários e podem ser vistos a seguir.

O primeiro, position, indica que se posicione de maneira absoluta na página e os segundos, left e top, são a distância desde a borda esquerda da página e a borda superior.

Existem outros atributos especiais para camadas como width e height para indicar a largura e a altura da capa, Z-index que serve para indicar que camadas se vêem em cima de que outras, clip que serve para recortar uma camada e fazer com que partes dela não sejam visíveis, ou visibility para definir se a camada é visível ou não. Estes, e outros atributos veremos no próximo capítulo, onde falaremos do posicionamento de camadas.