A tag DIV serve para alterar o estilo em partes específicas da página e posicionar objetos. Neste post veja a tag DIV em HTML.
É 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:
<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>Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
