Banner propaganda da DevMedia - Cursos de desenvolvimento web

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://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®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo