CSS - Manual de Estilo (parte 2)

Neste segundo artigo veremos como aplicar estilo ao plano de fundo de elementos, aplicar estilo aos textos e também entender o que é o Modelo da Caixa e como utilizá-lo para deixar nossas páginas web mais estilosas.

[ Hits: 23.368 ]

Por: Juliao Junior em 04/09/2009


Modelo da Caixa



Todos os elementos HTML podem ser considerados como "caixas". Em CSS, a expressão "modelo da caixa" é usado quando falamos sobre o design e o layout. O modelo da caixa é muito simples, e serve para visualizar o que está ao redor do elemento HTML, consistindo de:
  • margens
  • bordas
  • enchimento
  • conteúdo

Com este modelo em mente fica fácil de relacionar o espaço, tanto dos próprios elementos como entre eles. Veja na imagem abaixo como você pode visualizar o modelo da caixa.
Linux: CSS - Manual de Estilo Parte 2
Vamos explicar de forma geral como você pode entender o modelo da caixa, sem entrar em maiores detalhes. Escreveremos um outro artigo, próximo desta série, onde trataremos em detalhes como lidar com este modelo e tiraremos o máximo de proveito. Por hora, tente compreender como ele funciona, e assim poderá usar bem melhor os conceitos de CSS.

Primeiro, vejamos o que é cada parte.
  • Margem: obviamente é uma área ao redor da borda. A margem não tem uma cor de background, sendo completamente transparente. Ela não é nada além disso: uma margem para o elemento.
  • Borda: novamente bem claro. É uma borda que circunda o conteúdo e o enchimento. A borda recebe a cor do background do elemento.
  • Enchimento: área entre o conteúdo e a borda. Também é afetado pela cor do background.
  • Conteúdo: é o elemento propriamente dito, é o conteúdo da caixa - seja um texto, uma imagem etc.

Note que você pode inclusive indicar a borda como não tendo espessura, bem como o enchimento e a margem. Você escolhe o que usar. Mas é preciso compreender bem como indicar a altura e a largura de cada parte da caixa para que todos os navegadores possam lidar bem com elas. Então vejamos.

Primeiro ponto a entender: quando indicamos a altura e largura de um elemento em CSS, estamos indicando as dimensões do conteúdo apenas. Para saber as dimensões totais do elemento, precisamos somar com as dimensões do preenchimento, da borda e da margem.

Por exemplo, o elemento com as dimensões abaixo possui 250px:
  • width:200px;
  • padding:10px;
  • border:5px solid gray;
  • margin: 10px;

A dimensão será de 250px, pois teremos conteúdo (width) de 200px mais preenchimento (padding) de 10px de cada lado, mais borda (border) de 5px de cada lado e mais margem (margin) de 10px de cada lado. Digamos que você só pode usar 200px para este elemento em sua página. Simples: podemos tirar a margem e assim ganhamos 20px, e também diminuímos a dimensão do conteúdo para 170px. Se esta configuração não atrapalhar a leitura da página, usamos a configuração abaixo.

width:170px;
padding:10px;
border:5px solid gray;
margin: 0px;

Agora é com vocês. Testem o que foi visto aqui. Com um pouco de prática, o uso de CSS torna o trabalho mais simples e provavelmente o resultado será bem mais bonito.

Como disse acima, no próximo artigo trataremos de forma detalhada do modelo da caixa, conferindo ainda mais poder aos estilos dos elementos em nossa página. E também trataremos de alguns aspectos avançados em Folhas de Estilo. Afinal, após compreender em profundidade o modelo da caixa, já estaremos prontos para aplicações mais interessantes.

Até o próximo artigo.

Página anterior    

Páginas do artigo
   1. Aplicando estilo ao background
   2. Estilos em textos
   3. Fontes
   4. Modelo da Caixa
Outros artigos deste autor

Processing - Programando para Android e iOS

Usando o JIGDO - How To

Programando em Octave (parte 1)

Convertendo formatos de vídeo/áudio

Processing - Programação para dispositivos móveis

Leitura recomendada

Servidor LAMP no Linux Mint e Ubuntu

Introdução ao Jython

Entendendo validações e operações aritméticas com Javascript

JavaScript - Programação orientada a objetos

Manual de XHTML

  
Comentários
[1] Comentário enviado por giselinhaconfere em 04/11/2010 - 10:59h

modo de instalaçõa dos programas e como efetuar danwold

[2] Comentário enviado por giselinhaconfere em 04/11/2010 - 11:00h

como efetuar danwold

[3] Comentário enviado por giselinhaconfere em 04/11/2010 - 11:00h

o que é firewall


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts