Iniciando no CSS: O que são as camadas?


Autor/fonte: CriarWeb.com
E-mail/Url: http://www.criarweb.com/artigos/130.php



Digg del.icio.us

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:

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

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

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.

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

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.




Enviado por xKuRt em 06/11/2006 às 12:40


Avaliação

Esta publicação ainda não foi avaliada!


Avaliar:


A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.



Comentários

Este artigo ainda não foi comentado ou o(s) comentário(s) que foi(ram) enviado(s) a ele ainda não foi(ram) publicado(s).


Envio de comentário:




  

Domingo, 23 de Novembro de 2014




Top 5 membros

Últimos membros online

Últimos membros cadastrados



Capa do livro
Fundamentos de Informática - Geometria Analítica para Computação


Capa do livro
Otimização de Conversão - A Arte e a Ciência de Converter Prospects em Clientes


Capa do livro
Projeto de Banco de Dados





Hostnet

IMD