HTML: Básico: A Tag Div

Neste post vou mostrar como trabalhar com Div no html.

A tag <div> serve principalmente para posicionar objetos em uma página html. Podemos dizer que um DIV é um bloco onde pode ser colocado em qualquer parte do seu código, ou ainda sobrepor outros blocos já existentes.

Um exemplo de um div seria o código abaixo

1 2 3 4 5 6

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

Propriedades de um div:

Um div pode receber diversas propriedades como largura, altura, posicionamento, formatação de borda, cor ou imagem de fundo entre outras.

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 em uma classe de estilos utiliando as tags <style> </style> ou por um arquivo .css, mas para isso é preciso definirmos um id ou class para ele, ficando da seguinte forma:

1	<div id=”nome_do_id”></div>

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

1 2	#nome_do_id{ }

Esta div também pode ser definida como uma classe

1	<div class=”nome_da_div”></div>

Sendo representada em css pelo “.”(ponto).

1 2	.nome_do_id{ }

As principais propriedades que utilizaremos em nosso div são as seguintes:

1 2 3 4 5 6 7 8 9 10 11 12 13

<style> .nome_do_id{ position:relative; width:400px; height:200px; background-color:red; top:10px; left:10px; } </style> <div class='nome_da_div'></div>

Desta forma teremos o seguinte resultado:

Categories: HTML