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



Prof. Carlos Majer

Página 1

DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1

05 de Abril de 2009

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

Texto fora da div.

Texto fora da div.

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 medida 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 manipulado) e no conjunto de estilos stilos irei definir uma largura de 300 pixels:pixels:



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;

}

Texto fora da div. Texto fora da div.



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

...

texto

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

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

... ...

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.

<style> # segunda { background:url(imgVictoria.png); border:1px solid black; color:white; font-weight:bold; font-size:18px; height:250px;

}



Prof. Carlos Majer

Página 4

DESENVOLVIMENTO WEB – ESTILIZANDO DIVS – V. 2.1

05 de Abril de 2009

Texto fora da div. 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

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

}

Texto fora da div.

Envio de Newsletters

Nome:
e-Mail:

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

<style> #terceira{ background-color:orange; border:1px solid black; height:220px; width:200px;

}



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

<style> #quarta{ background-color:khaki; height:100px; margin-top:100px; overflow:auto; width:200px;

}

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

<style> #quinta{ background-color:khaki; height:100px; overflow:hidden; width:200px;

}

Resultado:-

Imagens utilizadas neste artigo imgFundo.jpg

Prof. Carlos Majer

imgMenor.jpg

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.

[email protected] [email protected] Prof. Carlos Majer.

Prof. Carlos Majer

Página 11