Voltar para o site

Modelo CSS para boxes - Parte 1

Publicado em: 10/06/2004

[Parte 2] [Parte 3]

Informação importante:

Este tutorial é o ponto de partida para desenvolvimento de layouts CSS. Se você pretende projetar uma página, um documento ou um site inteiro baseado em CSS e sem uso de tabelas complexas o perfeito entendimento deste tutorial vai fornecer-lhe os conceitos básicos de posicionamento CSS.

Este assunto iniciará você nas técnicas avançadas de posicionamento CSS e em consequência para seu perfeito entendimento é necessário que você domine com destreza o uso das propriedades CSS.

Um código para nosso tutorial

Para melhor visualização e exemplificação dos conceitos contidos neste tutorial vamos criar uma página web bem simples constituida de:

  • um cabeçalho título;
  • um cabeçalho subtítulo;
  • dois parágrafos;

Abaixo o código completo da página, em XHTML 1.0 modo Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1" />
<title>Box Model</title>
</head>
<body>

<h1>Folhas de estilo em cascata</h1>

<h3>A importância do Box Model</h3>

<p> 
Para projetar um layout CSS, seja para uma página 
web ou um site inteiro é fundamental que o 
desenvolvedor entenda com detalhes como as folhas
de estilo em cascata tratam os elementos HTML< para fins
de apresentação em uma mídia do usuário
por exemplo: a tela de um monitor).
</p>

<p>
Todo elemento HTML é uma "caixa" retangular a ser
apresentada na tela com as estilizações determinadas 
pelas regras CSS. As caixas sõo empilhadas uma após a 
outra e constituídas de margens, bordas, espaçamentos 
e o conteúdo propriamente dito. 
</p>

</body>
</html>

E na figura a seguir uma visualização da página renderizada no browser.

Notar o título em um cabeçalho <h1>, o subtítulo em um cabeçalho <h3> e dois parágrafos <p>

Screenshot da página no browser

Você certamente ao olhar para a figura mostrada não tem qualquer dificuldade em entender e "ver" dois cabeçalhos e dois parágrafos em uma sequência igual a do código HTML.

Mas, para facilitar o entendimento do Box Model, olhe novamente para a figura e "veja-a" como se fossem 04 (quatro) caixas empilhadas.

Em cima <h1>, depois <h3>, a seguir <p> e em baixo de todas outro <p>.

Introdução - entendendo como CSS manipula os elementos HTML

As CSS para montar o layout de um documento, consideram e tratam todos os elementos HTML como se fossem caixas (ou mais propriamente em duas dimensões: um retângulo) a serem exibidas em uma mídia visual (a tela do monitor ou uma folha de papel impressa por exemplo).

As caixas são formatadas, estilizadas e dispostas pelas CSS segundo uma seqüência, na qual cada elemento HTML ocupa uma caixa.

Desta forma, cabeçalhos (<h1>,<h2>,<h3>..), parágrafos (<p>), listas (<ul>, <ol>), formulários (<form>), divisões (<div>), e em fim qualquer elemento HTML (tag) é representado por uma caixa. Podemos então dizer que a caixa assim como foi definida é a unidade básica de formatação CSS. As caixas podem conter ou estar contidas dentro de outras caixas.

As técnicas de formatação são simples, contudo o projetista web deve conhecê-las a fundo para bem manipular suas regras.

Caixas CSS - entendendo as caixas

As caixas CSS são constituidas por 04 (quatro) áreas retangulares, listadas abaixo:

  1. conteúdo;
  2. espaçamentos (padding);
  3. bordas (border);
  4. margens (margin).

que se desenvolvem de dentro para fora, na ordem listada acima.

Uma caixa consiste primeiramente do seu conteúdo que é aquilo ou o que vai ser exibido.

A caixa pode conter 4 bordas, que vem a ser uma linha decorativa em volta da caixa.

A distância entre a borda e o conteúdo é o espaçamento.

A distância que separa uma caixa da outra é a margem.

Vamos ao nosso código XHTML inicial e acresentemos as regras CSS abaixo:

h1 {
background-color: #cc9; 
border:10px solid #f00; 
padding: 5px;
}

h3 {
background-color: #fc9; 
border:20px solid #039; 
padding: 15px;
}

p.um {
background-color: #ff9; 
border:5px solid #f0f; 
padding: 5px;
text-align:justify;
}

p.dois {
background-color: #cff; 
border:2px solid #039; 
padding: 10px; 
text-align:justify;
}

Nota: As classes .um e .dois foram aplicadas 
nos primeiro e segundo parágrafos

Eis as quatro caixas agora coloridas e bem visíveis.

Nota: na caixa que representa o elemento <h3> nomeei as quatro áreas da caixa: margin, border, padding e conteúdo, para facilitar a visualização daquelas áreas que compõem as caixas

Screenshot das quatro caixas no browser

[Parte 2] [Parte 3]

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo