Você está na página 1de 11

DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.

1 05 de Abril de 2009

Estilizando DIVs
Introdução
Uma DIV (Divisão) é um elemento de bloco. Desta forma, ela ocupa toda a extensão da janela do
navegador. Uma DIV pode ser entendida como um container, que tem a capacidade de armazenar
conteúdo. Quando falo sobre conteúdo, estou me referindo a qualquer conteúdo HTML,
HTML tal como textos,
linhas horizontais (hr), tabelas, listas e até outras DIVS.

Você deve pensar numa DIV como um elemento retangular (bloco), que tem um certo conteúdo.

Visualizando uma DIV no Navegador


Quando se cria uma DIV,, o que o usuário vê no navegador é apenas o seu conteúdo.
Veja o seguinte trecho HTML:-

....
Texto fora da div.
<div>
Texto dentro da div
</div>
Texto fora da div.
....

Agora veja o resultado na página:-

Note que não existe diferença visual entre o texto de fora da div e o texto criado dentro da div.

Apesar disto, podemos perceber que o texto que foi inserido dentro da DIV ficou numa linha separada dos
demais textos (criados fora da DIV).

Isto ocorre em função da natureza da DIV que é um elemento


lemento de bloco. Este tipo de elemento destaca-se
destaca
por não ficar ao lado de nenhum outro elemento (seja este outro elemento de bloco ou em linha), fazendo
com que os elementos próximos (criados antes ou depois) fiquem afastados (em outras linhas).

Começando a estilizar a DIV


Através do CSS podemos inserir uma borda (ou outro tipo de estilo visual) na DIV.

No exemplo abaixo, utilizaremos o CSS para colocar uma borda em todas as DIVs existentes na página:-
página:

<html>
<head>
<title> Exemplo 1 – Estilizando
zando DIVs via CSS </title>

Prof. Carlos Majer Página 1


DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1 05 de Abril de 2009

<style>
div { border:1px solid black; }
</style>
</head>

<body>
Texto fora da div.
<div>
Texto dentro da div
</div>
Texto fora da div.
</body>
</html>

O resultado seria isto:-

Ao inserirmos uma borda na DIV podemos verificar que a mesma se estende até o final (horizontal) da
página.

Podemos definir a largura de uma DIV através da manipulação do atributo width.

Para isto, devemos definir uma medida desejada,


desejada que pode ser em:-
 px pixels
 %  porcentagem
 pt  pontos
 em  tamanho da fonte
 ex  tamanho do x
 pt  1/72 polegadas (pontos)
 pc  12 pontos ou 1/6 de polegada (pica)
 mm  milimetro
 cm  centimetro
 in  2,54 cm (polegada)

Nota
Mantenha a unidade de medidada colada no valor a ser aplicado, isto é, não insira espaços entre eles, senão, o
atributo não funcionar. Exemplo: 12px;

No exemplo a seguir irei identificar a DIV a ser estilizada (para que apenas esta div tenha seu estilo
manipulado) e no conjunto de estilos
stilos irei definir uma largura de 300 pixels:-
pixels:

<html>
<head>
<title> Exemplo 2 – Estilizando DIVs via CSS </title>

Prof. Carlos Majer Página 2


DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1 05 de Abril de 2009

<style>
#primeira {
border:1px solid black;
width:300px;
}
</style>
</head>

<body>
Texto fora da div.
<div id="primeira">
Uma div é um elemento de bloco cujo tamanho horizontal (width) é igual ao da tela do
navegador e seu tamanho vertical é igual ao conteúdo que a DIV está armazenando.<br>
A DIV aumenta verticalmente na medida em que seu conteúdo também aumenta.
</div>
Texto fora da div.
</body>
</html>
</body>

Nota
Na medida em que você alterar a largura da janela (width), o conteúdo da DIV é distribuido
distrib e ajustado
conforme este tamanho.

Inserindo figuras de fundo numa DIV


O CSS permite que insiramos imagens como fundo de objetos HTML tais como parágrafos, formulários, divs,
dentre outros tipos de objetos.

A o definirmos uma imagem como fundo de um objeto,


objeto, o que será exibido desta imagem dependerá das
dimensões do objeto a ser exibido.

Isto quer dizer que se o desenvolvedor inserir uma imagem de fundo que tenha uma dimensão maior do
que o objeto ao qual esta imagem será aplicada, apenas parte desta imagem
imagem será exibida, porque o que
será exibido é o objeto.

Exemplo:-

Prof. Carlos Majer Página 3


DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1 05 de Abril de 2009

Imagem de fundo a ser aplicada num objeto HTML

Objeto HTML sem a imagem de fundo (Um parágrafo simples sem nenhum outro estilo definido):-

...
<p> texto </p>
...

Resultado (Parágrafo já com a imagem de fundo aplicada):-

Nota
Se a DIV estiver sem conteúdo algum, nada será exibido. Exemplo:-
...
<div> </div>
...

Exibindo toda a imagem de fundo numa div


No exemplo abaixo verificamos o código completo para estilização de uma DIV com uma imagem de fundo.
Para que toda a imagem de fundo seja exibida iremos definir a altura da div (propriedade height) igual à
altura da imagem de fundo (250 pixels).

Utilizaremos uma imagem de nome imgVictoria.png e alguns elementos de estilo serão customizados para
destacar atributos visuais desta DIV.

<html>
<head>
<title> Exemplo 3 – Inserindo imagem de fundo numa DIV </title>
<style>
# segunda {
background:url(imgVictoria.png);
border:1px solid black;
color:white;
font-weight:bold;
font-size:18px;
height:250px;
}
</style>

Prof. Carlos Majer Página 4


DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1 05 de Abril de 2009

</head>

<body>
Texto fora da div.
<div id="segunda">
<p>A cidade de Victoria.
Victoria </p>
</div>
</body>
</html>

Temos então o seguinte resultado:-

Nota
A imagem de fundo tem 800 pixels de largura. No exemplo acima, o navegador está sendo num monitor
com uma resolução de 1024 pixels de largura. Como a div destaque não teve sua largura definida, ela acaba
ac
ocupando toda a largura da tela (elemento de bloco).

Como a largura da imagem de fundo é menor (800 pixels) do que a div onde ela deve ser aplicada (1024
pixels), a imagem é duplicada em sua exibição
exibiçã de fundo. Note que inseri uma borda branca na própria
imagem para melhor notar suas dimensões.

Isto quer dizer que caso a largura da DIV seja maior do que a imagem de fundo, a mesma será duplicada
(verticalmente e horizontalmente), a não ser que se utilize a opção no-repeat,, na propriedade
background:url(..) ou background-image,
background do CSS.

Utilizando pequenas imagens para destacar um elemento


No exemplo abaixo utilizaremos uma imagem de um relógio
relógio para destacar um formulário
formul (que também deve
ser encarad como um container, isto é, similar a uma div).

O relógio foi gentilmente disponibilizado


isponibilizado para utilização em sites web por Cemagraphics.

Veja outros elementos disponibilizad


dos por ele:-
http://cemagraphics.deviantart.com/art/Candy-Clock-Icon-96460050
http://cemagraphics.deviantart.com/art/Candy

<html>
<head>
<title> Utilizando um Icone como imagem de fundo de um formulario </title>
<style>
#newsletter {

Prof. Carlos Majer Página 5


DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1 05 de Abril de 2009

background:url(128.png) no-repeat;
Background-color:olive;
border:1px solid black;
color:white;
font-name:Verdana;
font-size:16px;
height:140px;
padding-left:150px;
}
</style>
</head>

<body>
Texto fora da div.
<form id="newsletter" action="#" >
<h2> Envio de Newsletters </h2>
Nome: <input type="text" id=" nome " name=" nome " > </br>
e-Mail: <input type="text" id=" email" name=" email " > </br>
<input type="submit" value=" Enviar">
</form>
</body>
</html>

Resultado:-

A imagem pode ser facilmente alterada por outra e os estilos podem ser trabalhados de forma a gerar
diferentes versões do mesmo formulário.

Prof. Carlos Majer Página 6


DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1 05 de Abril de 2009

Definindo o tamanho de uma DIV


Uma DIV pode ter seu tamanho horizontal definido através da propriedade width e seu tamanho vertical
através da propriedade height.

Ao inserir um conteúdo numa DIV, caso o mesmo não caiba nas dimensões da DIV, poderá acontecer o
seguinte:-
No Firefox
O Firefox respeita as dimensões definidas pelo estilo da DIV, de forma que seu conteúdo estoura tais
dimensões.

No exemplo abaixo, verificamos a DIV (e seu tamanho) que está com a borda vermelha e fundo amarelo.
Dentro dela, um pouco deslocada para a direita, está uma imagem que estoura (ultrapassa) suas dimensões.
Internet Explorer
No caso do IE, ele ajusta o tamanho da DIV ao seu conteúdo, ignorando as informações definidas pelo
CSS.

Exemplo de uma imagem inserida dentro de uma DIV com dimensões menores do que a imagem:-

Prof. Carlos Majer Página 7


DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1 05 de Abril de 2009

Exemplo:-

<html>
<head>
<title> Exemplo 2 – Estilizando DIVs via CSS </title>
<style>
#terceira{
background-color:orange;
border:1px solid black;
height:220px;
width:200px;
}
</style>
</head>

<body>
<div id="terceira">
<p>Uma DIV pode ter seus tamanhos de altura (height) e largura (width) configurados via
CSS.</p>
<p> <img src="imgMenor.jpg"> </p>
<p>Se o conteúdo da DIV não couber dentro do tamanho especificado, seu conteúdo
estoura a DIV.</p>
</div>
</body>
</html>
</body>

Nota

Prof. Carlos Majer Página 8


DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1 05 de Abril de 2009

No IE, a largura da DIV está sendo respeitada, mas sua altura esta sendo alterada para aceitar o conteúdo.

Respeitando as dimensões da DIV e exibindo todo o seu conteúdo


O CSS oferece a possibilidade que mostrar todo o conteúdo de uma DIV e ainda assim respeitando suas
dimensões. Para isto, pode ser utilizada a propriedade overflow, usando o valor auto ou scroll. Esta
propriedade controla a forma pela qual como será exibido o conteúdo de uma DIV. Ao se escolher o valor
auto ou scroll, a DIV mostrará barras de rolagem, quando necessário, permitindo ao usuário visualizar todo
seu conteúdo nas dimensões definidas.

Exemplo:-

<html>
<head>
<title> Exemplo 2 – Estilizando DIVs via CSS </title>
<style>
#quarta{
background-color:khaki;
height:100px;
margin-top:100px;
overflow:auto;
width:200px;
}
</style>
</head>
<body>
<div id="quarta">
Esta DIV teve sua propriedade overflow setada para auto (scroll)
<p> <img src="imgMenor.jpg"> </p>
</div>
</body>
</html>
</body>

Resultado:-

Escondendo o conteúdo excessivo da DIV


O CSS oferece a possibilidade que esconder o conteúdo de uma DIV que ultrapassar suas dimensões. Isto
pode ser feito através do uso da propriedade overflow, usando o valor hidden.

Exemplo:-

Prof. Carlos Majer Página 9


DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1 05 de Abril de 2009

<html>
<head>
<title> Exemplo 2 – Estilizando DIVs via CSS </title>
<style>
#quinta{
background-color:khaki;
height:100px;
overflow:hidden;
width:200px;
}
</style>
</head>
<body>
<div id="quinta">
Esta DIV teve sua propriedade overlay setada para hidden
<p> <img src="imgMenor.jpg"> </p>
</div>
</body>
</html>
</body>

Resultado:-

Imagens utilizadas neste artigo


imgFundo.jpg imgMenor.jpg

Prof. Carlos Majer Página 10


DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1 05 de Abril de 2009

imgVictoria.png

Links Interessantes
Smashing Magazine
Algumas imagens disponibilizadas por
or este site podem ser utilizadas gratuitamente para
p criação de topos de
páginas.

Exemplo:-

Estas imagens são


ão de diversos autores.
Para conhecê-las
las e as demais imagens, favor verificar o endereço abaixo:-

http://www.smashingmagazine.com/2008/03/05/blog
http://www.smashingmagazine.com/2008/03/05/blog-headers-for-free-download/

Conclusão
Verificamos neste artigo algumas possibilidades na estilização
estilizaç de elementos HTML,, dentre eles parágrafo
par e
divs. Outros elementos podem ser também
tamb trabalhados. Alguns pontos interessantess foram a utilização
utilizaç de
imagens em fundo de divs e o estudo da
d maneira pela qual o conteúdoúdo de uma div pode ser formatado.

Desenvolver e aplicar estilos CSS nos elementos HTML é algo


lgo que todo desenvolvedor deverá focar em
algum momento de sua carreira.

cmajer@uol.com.br
cmajer@ig.com.br

Prof. Carlos Majer.

Prof. Carlos Majer Página 11

Você também pode gostar