CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

HyperText Markup Language (HTML) - Tag DIV

Por Benedito Silva Júnior - publicado em 14/07/2016


A tag DIV serve para alterar o estilo em partes específicas da página e posicionar objetos.

É um recurso que podemos utilizar para organizar dados na página dentro de camadas, criar efeitos de animação e interatividade entre linguagens (HTML – Java Script, por exemplo).

Utilizamos a tag DIV entre as tags <body></body>, posicionando-as de acordo com a nossa finalidade. Para colocar um objeto (imagem, tabela, texto) dentro de uma tag DIV, basta abrir a tag <div> e colocar o que desejamos dentro dela.

Exemplos de código:


<div id="nome"><img src="nomeimagem.gif"></div>

Podemos implementar essa tag usando estilos, que nos permite mudar a cor da camada, cor da borda, posição, tamanho etc. Veja:

<div id="nome" style="width:149px; height:26px;background-color:#0066ff; border:4px double red">Uso da Tag Div</div>

Style é o estilo que estamos definindo para a tag;

Width é largura da tag em pixels;

Height é a altura da tag em pixels;

Background-color é cor da tag – poderia ser trocado por background-image: url da imagem seria colocado uma figura como plano de fundo;

Border é a espessura da borda em pixels; esse estilo é acompanhado por double nome da cor – para definir a cor da borda (a cor só irá aparecer se o código for precedido de Double).

A tag DIV deve sempre ser estilizada por um arquivo .css, mas para isso é preciso definirmos um id ou class para ele:

<div id="nome_do_id"></div>

Esse tipo de div deverá ser estilizado no css por meio do caracter "#".

Estilizando um id:

#nome_do_id{ }
Esta div também pode ser definida como uma classe.

Div Class:

<div class="nome_da_div"></div>

Sendo representada em css pelo "."(ponto).
Estilizando uma class:

.nome_do_id{ }

Exemplos de div:

<div style='position:absolute;margin-left:10px;margin-top:10px;width:300px; height:140px;z-index:1'></div> <div style='position:absolute;margin-left:50px;margin-top:20px;width:300px; height:140px;z-index:1'></div>


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo