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.369 ]

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

Guia (nem tanto) Introdutório do Linux

Guia (nem tanto) Introdutório do Linux II

Instalação ou Recuperação do GRUB

Grace - Usando a função "Regression"

Blender - Iniciante (parte 1)

Leitura recomendada

AJAX - Parte 1

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

Introdução ao Jython

JavaScript - Programação orientada a objetos

Servidor LAMP no Linux Mint e Ubuntu

  
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