11
DESENVOLVIM Prof. Carlos Majer Estilizando DI Introdução Uma DIV (Divisão) é um elemento d navegador. Uma DIV pode ser ente conteúdo. Quando falo sobre conteú linhas horizontais (hr), tabelas, listas Você deve pensar numa DIV como Visualizando uma DIV Quando se cria uma DIV, o que o u 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 Apesar disto, podemos perceber que demais textos (criados fora da DIV). Isto ocorre em função da natureza d por não ficar ao lado de nenhum out com que os elementos próximos (cri Começando a estilizar a Através do CSS podemos inserir uma No exemplo abaixo, utilizaremos o C <html> <head> <title> Exemplo 1 – Estilizan MENTO WEB ESTILIZANDO DIVS – V. 2.1 IVs de bloco. Desta forma, ela ocupa toda a extensão endida como um container, que tem a capacidade údo, estou me referindo a qualquer conteúdo HTM s e até outras DIVS. um elemento retangular (bloco), que tem um cer no Navegador usuário vê no navegador é apenas o seu conteúdo l entre o texto de fora da div e o texto criado den e o texto que foi inserido dentro da DIV ficou num . da DIV que é um elemento de bloco. Este tipo de tro elemento (seja este outro elemento de bloco iados antes ou depois) fiquem afastados (em out a a DIV a borda (ou outro tipo de estilo visual) na DIV. CSS para colocar uma borda em todas as DIVs ex ndo DIVs via CSS </title> 05 de Abril de 2009 Página 1 o da janela do e de armazenar ML, tal como textos, rto conteúdo. o. ntro da div. ma linha separada dos e elemento destaca-se ou em linha), fazendo tras linhas). xistentes na página:-

CSS - Estilizando DIVS

Embed Size (px)

DESCRIPTION

CSS - Estilizando DIVS**** ATUALIZADO *****Arquivo contendo instruções passo a passo sobre como estilizar DIVS utilizando imagens de fundo.

Citation preview

Page 1: CSS - Estilizando DIVS

DESENVOLVIMENTO WEB

Prof. Carlos Majer

Estilizando DIVs

IInnttrroodduuççããoo

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, estoulinhas horizontais (hr), tabelas, listas e até outras Você deve pensar numa DIV como um elemento retangular (bloco), que tem um certo conteúdo.

VViissuuaalliizzaannddoo uummaa DDIIVV

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 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 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).

CCoommeeççaannddoo aa eessttiilliizzaarr a

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:

<html>

<head>

<title> Exemplo 1 – Estilizando DIVs

DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1

Estilizando DIVs

(Divisão) é um elemento de bloco. Desta forma, ela ocupa toda a extensão da janela do 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 HTMLlinhas horizontais (hr), tabelas, listas e até outras DIVS.

como um elemento retangular (bloco), que tem um certo conteúdo.

nnoo NNaavveeggaaddoorr

, o que o usuário vê no navegador é apenas o seu conteúdo.

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 de bloco. Este tipo de elemento destacapor 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).

aa DDIIVV

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:

zando DIVs via CSS </title>

05 de Abril de 2009

Página 1

(Divisão) é um elemento de bloco. Desta forma, ela ocupa toda a extensão da janela do pode ser entendida como um container, que tem a capacidade de armazenar

HTML, tal como textos,

como um elemento retangular (bloco), que tem um certo conteúdo.

, o que o usuário vê no navegador é apenas o seu conteúdo.

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

lemento de bloco. Este tipo de elemento destaca-se 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).

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

Page 2: CSS - Estilizando DIVS

DESENVOLVIMENTO WEB

Prof. Carlos Majer

<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 Para isto, devemos definir uma medida desejada

� 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 medida 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 irei definir uma largura de 300 pixels:

<html>

<head>

<title> Exemplo 2 – Estilizando DIVs

DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1

border:1px solid black; }

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

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

Para isto, devemos definir uma medida desejada, que pode ser em:-

1/72 polegadas (pontos)

12 pontos ou 1/6 de polegada (pica)

da 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 stilos irei definir uma largura de 300 pixels:-

Estilizando DIVs via CSS </title>

05 de Abril de 2009

Página 2

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

da colada no valor a ser aplicado, isto é, não insira espaços entre eles, senão, o

No exemplo a seguir irei identificar a DIV a ser estilizada (para que apenas esta div tenha seu estilo

Page 3: CSS - Estilizando DIVS

DESENVOLVIMENTO WEB

Prof. Carlos Majer

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

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 é distribconforme este tamanho.

IInnsseerriinnddoo ffiigguurraass ddee ffuu

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 odimensõ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 iserá exibido é o objeto. Exemplo:-

DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1

border:1px solid black;

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á

A DIV aumenta verticalmente na medida em que seu conteúdo também aumenta.

Na medida em que você alterar a largura da janela (width), o conteúdo da DIV é distrib

uunnddoo nnuummaa DDIIVV

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

A o definirmos uma imagem como fundo de um objeto, o que será exibido desta imagem dependerá das

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 será exibida, porque o que

05 de Abril de 2009

Página 3

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.

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

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

bjeto, o que será exibido desta imagem dependerá das

Isto quer dizer que se o desenvolvedor inserir uma imagem de fundo que tenha uma dimensão maior do magem será exibida, porque o que

Page 4: CSS - Estilizando DIVS

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

Prof. Carlos Majer Página 4

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>

...

EExxiibbiinnddoo ttooddaa aa iimmaaggeemm ddee ffuunnddoo nnuummaa ddiivv

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>

Page 5: CSS - Estilizando DIVS

DESENVOLVIMENTO WEB

Prof. Carlos Majer

</head>

<body>

Texto fora da div.

<div id="segunda">

<p>A cidade de Victoria

</div>

</body>

</html>

Temos então o seguinte resultado:-

Nota A imagem de fundo tem 800 pixels de largura. com uma resolução de 1024 pixels de largura.ocupando toda a largura da tela (elemento de bloco). Como a largura da imagem de fundo pixels), a imagem é duplicada em sua exibiçã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 background:url(..) ou background

UUttiilliizzaannddoo ppeeqquueennaass iimm

No exemplo abaixo utilizaremos uma imagem de um relser encarad como um container, isto O relógio foi gentilmente disponibilizado Veja outros elementos disponibilizadhttp://cemagraphics.deviantart.com/art/Candy

<html>

<head>

<title> Utilizando um Icone como imagem de fundo de um formulario

<style>

#newsletter {

DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1

Victoria. </p>

de largura. No exemplo acima, o navegador está sendo com uma resolução de 1024 pixels de largura. Como a div destaque não teve sua largura definida, ela acocupando toda a largura da tela (elemento de bloco).

fundo é menor (800 pixels) do que a div onde ela deve ser aplicada (1024 pixels), a imagem é duplicada em sua exibição de fundo. Note que inseri uma borda branca

suas dimensões.

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-image, do CSS.

mmaaggeennss ppaarraa ddeessttaaccaarr uumm eelleemmee

No exemplo abaixo utilizaremos uma imagem de um relógio para destacar um formulser encarad como um container, isto é, similar a uma div).

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

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

Utilizando um Icone como imagem de fundo de um formulario </title>

05 de Abril de 2009

Página 5

No exemplo acima, o navegador está sendo num monitor div destaque não teve sua largura definida, ela acaba

a div onde ela deve ser aplicada (1024 uma borda branca na própria

da DIV seja maior do que a imagem de fundo, a mesma será duplicada , na propriedade

eennttoo

ógio para destacar um formulário (que também deve

Cemagraphics.

</title>

Page 6: CSS - Estilizando DIVS

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

Prof. Carlos Majer Página 6

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.

Page 7: CSS - Estilizando DIVS

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

Prof. Carlos Majer Página 7

DDeeffiinniinnddoo oo ttaammaannhhoo ddee uummaa DDIIVV

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

Page 8: CSS - Estilizando DIVS

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

Prof. Carlos Majer Página 8

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

Page 9: CSS - Estilizando DIVS

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

Prof. Carlos Majer Página 9

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

RReessppeeiittaannddoo aass ddiimmeennssõõeess ddaa DDIIVV ee eexxiibbiinnddoo ttooddoo oo sseeuu ccoonntteeúúddoo

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

EEssccoonnddeennddoo oo ccoonntteeúúddoo eexxcceessssiivvoo ddaa DDIIVV

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

Page 10: CSS - Estilizando DIVS

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

Prof. Carlos Majer Página 10

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

IImmaaggeennss uuttiilliizzaaddaass nneessttee aarrttiiggoo

imgFundo.jpg

imgMenor.jpg

Page 11: CSS - Estilizando DIVS

DESENVOLVIMENTO WEB

Prof. Carlos Majer

imgVictoria.png

LLiinnkkss IInntteerreessssaanntteess

Smashing Magazine

Algumas imagens disponibilizadas por este site páginas. Exemplo:-

Estas imagens são de diversos autores. Para conhecê-las e as demais imagens, favor http://www.smashingmagazine.com/2008/03/05/blog

CCoonncclluussããoo

Verificamos neste artigo algumas possibilidades na estilizaçdivs. Outros elementos podem ser tambimagens em fundo de divs e o estudo d Desenvolver e aplicar estilos CSS nos elementos HTML

algum momento de sua carreira. [email protected]@ig.com.br Prof. Carlos Majer.

DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1

or este site podem ser utilizadas gratuitamente p

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

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

algumas possibilidades na estilização de elementos HTML, dentre eles parOutros elementos podem ser também trabalhados. Alguns pontos interessantes foram a utilizaç

o estudo da maneira pela qual o conteúdo de uma div pode ser formatado.

CSS nos elementos HTML é algo que todo desenvolvedor deverá focar em algum momento de sua carreira.

[email protected] [email protected]

Carlos Majer.

05 de Abril de 2009

Página 11

para criação de topos de

, dentre eles parágrafo e s foram a utilização de

údo de uma div pode ser formatado.

lgo que todo desenvolvedor deverá focar em