Trabalhando com Div em HTML

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Aprenda neste artigo um pouco sobre a tag div em HTML e veja também como estilizar elas em CSS(Cascating Style Sheet).

Veja neste artigo como trabalhar com Div no html.

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

Abaixo alguns exemplos de uso da tag <div>:

O código seria o da Listagem 1.

<html>
<head>
<title>Divs</title>
</head>

<body>
<div style="background-color:#00BFFF;text-align:center">
<p>Primeira Div</p>
</div>
<div style="border:3px dotted #9F0">
<p>Segunda Div</p>
</div>

</body>
</html> 
Listagem 1. : O Uso da tag

Vamos focar na utilização da tag <Div> para posicionamento de objetos:

Devemos iniciar pela tag <div> e terminar com a tag </div>, colocando todo conteúdo entre as duas.

A tag <div> deve sempre ser estilizada por um arquivo .css, mas para isso é preciso definirmos um id ou class para ele, ficando conforme a Listagem 2.

<div id=”nome_do_id”></div>
Listagem 2. : Div Id

Esse tipo de div deverá ser estilizado no CSS por meio do carácter “#”. Veja a Listagem 3.

#nome_do_id{
}
Listagem 3. Estilizando um id

Esta div também pode ser definida como uma classe, como mostra a Listagem 4.

<div class=”nome_da_div”></div>
Listagem 4. Div Class

Sendo representada em CSS pelo “.”(ponto), como mostra a Listagem 5.

.nome_do_id{
}
Listagem 5. Estilizando uma class

Veja alguns códigos de exemplo na Listagem 6.

<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>
<div style='position:absolute;margin-left:60px;margin-top:150px;width:300px;height:140px;z-index:1'> </div>
<div style='position:absolute;margin-left:150px;margin-top:100px;width:300px;height:140px;z-index:1'> </div>
Listagem 6. Exemplos de Div

Espero que tenham gostado e até o próximo artigo.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?