Os browsers que suportam códigos W3C são: IE5+, NS6+, Opera, Mozilla.
Para os que se interessarem mais sobre o assunto, chequem este link (em Inglês): http://www.w3c.org/
Por que somente o suporte aos browsers W3C?
A tendência que temos hoje é de que todos os browsers convirjam para S.C. (Standards Compliant), que nada mais é que uma linguagem única que funcione em todos os navegadores.
A tag DIV, suportada nos browsers W3C mencionados no início do tutorial, cria uma camada nova. A partir desta tag, é possível escolher uma identidade (fundamental neste tutorial), posicioná-la no documento, especificar borda, visibilidade (tb usada neste tutorial), afixá-la no documento (chamado de collapsed), cores, margens, espaçamentos, dentre outros recursos.
Atribuindo uma identidade numa camada:
ID="nome_da_camada"
Adicionando CSS na camada:
STYLE="..."
Vou inserir aqui alguns dos principais códigos CSS usados em uma camada:
POSITION -> posicionamento da camada. Pode ser ABSOLUTE (absoluto), que toma o início do documento como referência ou RELATIVE (relativo), que tema algum objeto como referência.
TOP ou BOTTOM -> posiciomento (normalmente em pixels (px)) da camada. Usa-se TOP quando se posiciona levando em consideração o topo de nossa referência (documento ou objeto) e BOTTOM quando usa-se a base como referência.
LEFT ou RIGHT -> posiciomento (normalmente em pixels (px)) da camada. Usa-se LEFT quando se posiciona levando em consideração a esquerda de nossa referência (documento ou objeto) e RIGHT quando usa-se a direita como referência.
WIDTH -> Largura (normalmente em px. O uso de % é possível, mas não é garantido o uso em todos os browsers) da camada.
HEIGHT -> Altura (normalmente em px. O uso de % é possível, mas não é garantido o uso em todos os browsers) da camada.
ZINDEX -> Define a profundidade (o plano) no qual a camada está. Usa-se somente números inteiros que variam entre 1 a infinito. O número máximo que eu já vi, foi 1000; portanto até 1000 eu garanto! HEHEHE... ah, o exemplo: 10.
BACKGROUND -> atribui uma cor de fundo ou uma imagem na camada. Para a cor de fundo, pode-se usar o nome da cor (por ex.: black (preto), white (branco)), o código Hexadecimal (por ex.: #000000 (preto), #FFFFFF (branco)) ou o código RGB da cor (por ex.: rgb(0,0,0) (preto), rgb(255,255,255) (branco)). pra atribuir uma imagem, url(path/imagem.ext). Não um BACKGROUND, significa deixá-lo transparente.
BORDER -> atribui uma borda na camada. Primeiro, define-se a espessura da borda, depois a cor e logo em seguida o tipo. Quando se escreve dentro da tag style a borda, normalmente usa-se a espessura, o tipo e a cor. A borda, pode ser de cor sólida, tracejada, em pontos, etc. Para melhorar a explicação, vou colocar aqui alguns tipos de borda: dotted, dashed, solid, double, groove, ridge, inset, window-inset, outset. Sugiro que você teste todos os estilos de borda, para se familiarizar com elas. Para concluir sobre BORDER, falta o exemplo: 3px solid rgb(0, 0, 0). Aqui definimos uma borda com 3px de espessura, do tipo sólido e da cor preta.
VISIBILITY -> Base do nosso tutorial, que é a alternância entre mostrar/esconder camadas. Com este atributo, você pode deixar a camada visível (visible ou show), invisível (hidden ou none).
Há outros atributos, como o OVERFLOW, o PADDING, o FILTER (aqui começa a interação CSS + DirectX), etc.
Não convém continuar com a explicação sobre estes atributos, pois muitos deles você não usará.
O separador entre os atributos é o ponto-e-vírgula (
.Para concluir, falta um exemplo de DIV completo.
<DIV ID="teste" STYLE="POSITION: absolute; TOP: 5px; LEFT: 5px; WIDTH: 400px; HEIGHT: 300px; ZINDEX: 2; BACKGROUND: #FFFFFF; BORDER: 3px dotted #000000; VISIBILITY: visible;">
Algum conteúdo
</DIV>
Com isso, concluímos nosso tutorial sobre camadas (DIVs).
Espero ter dado uma boa introdução a todos sobre camadas.
Caso alguma coisa, entrem em contato comigo.
