CSS - Estilizando DIVS

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>

<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:-

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);
color:white;
font-weight:bold;
font-size:18px;
height:250px;
}
</style>

</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 {

background:url(128.png) no-repeat;
Background-color:olive;
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.

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:-

Exemplo:-
<html>
<head>
<style>
#terceira{
background-color:orange;
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

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>
<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)
</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:-

<html>
<head>
<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
</div>
</body>
</html>
</body>
Resultado:-
Imagens utilizadas neste artigo

imgFundo.jpg imgMenor.jpg

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.

CSS - Estilizando DIVS

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

CSS - Estilizando DIVS

Hochgeladen von

Copyright:

Verfügbare Formate

DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.

Visualizando uma DIV no Navegador

Agora veja o resultado na página:-

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

Começando a estilizar a DIV

Prof. Carlos Majer Página 1

O resultado seria isto:-

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

Para isto, devemos definir uma medida desejada,

Prof. Carlos Majer Página 2

Inserindo figuras de fundo numa DIV

A o definirmos uma imagem como fundo de um objeto,

Prof. Carlos Majer Página 3

Imagem de fundo a ser aplicada num objeto HTML

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

Exibindo toda a imagem de fundo numa div

Prof. Carlos Majer Página 4

Temos então o seguinte resultado:-

Utilizando pequenas imagens para destacar um elemento

O relógio foi gentilmente disponibilizado

Veja outros elementos disponibilizad

Prof. Carlos Majer Página 5

Prof. Carlos Majer Página 6

Definindo o tamanho de uma DIV

Prof. Carlos Majer Página 7

Prof. Carlos Majer Página 8

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

Escondendo o conteúdo excessivo da DIV

Prof. Carlos Majer Página 9

Imagens utilizadas neste artigo

Prof. Carlos Majer Página 10

Estas imagens são

Desenvolver e aplicar estilos CSS nos elementos HTML é algo

Prof. Carlos Majer.

Prof. Carlos Majer Página 11

Das könnte Ihnen auch gefallen