:: CSS desde o início ::

Autor: Joe Gillespie
URL do original: https://www.wpdfd.com/editorial/basics/index.html
Título original: CSS from the Ground Up
Traduzido com autorização expressa do autor

Etapa número 7 - Boxes CSS

Vimos que um texto na Web pode ser dividido em títulos e parágrafos através da marcação HTML. Vimos também como podemos definir estilos ao nosso gosto, de modo a sobrescrever os estilos padrão. Vamos agora ver como definir estilos que possibilitam ir além do que permite o HTML e construir layouts mais interessantes.

O corpo ('body') da página é a área total visível, mas conforme eu mostrei na etapa número 3, é possível compartimentar a página em pequenas divisões com seus estilos próprios. Estas divisões podem ser tão pequenas quanto um caracter ou grandes o suficiente para acomodar porções retangulares inteiras de uma página. Tudo o que temos a fazer é englobar entre o par de tags <div>...</div> a área que pretendemos transformar em uma divisão. Tais áreas, são como uma mini página que em CSS são chamadas de boxes CSS. Boxes CSS se constituem na unidade básica de construção de layout de uma página Web e eu passarei a explicá-los com detalhes pois eles são muito importantes.

Boxes CSS podem ter uma largura e uma altura (width e height), uma cor de fundo ou até mesmo uma imagem de fundo que pode se repetir constituindo um padrão de preenchimento. Um box CSS por padrão estende-se da margem esquerda à margem direita do corpo da página. Se você não especificar uma margem para o corpo da página (body) um box CSS ocupará toda a largura da janela do navegador. Se você não especificar uma altura para um box CSS ele não terá altura (será considerada zero). Ao colocar texto dentro do box ele se expandirá em altura de modo a acomodar o texto colocado - ou uma imagem.

Para manter o texto afastado das bordas do box você deve usar o enchimento - padding...

Você deverá tomar precauções ao usar padding pois ele se comporta de maneira diferente no navegador Microsoft Internet Explorer. Ao contrário do que foi mostrado no diagrama acima o IE coloca o padding dentro do box, e em consequência seu comprimento e altura não se alteram. Todos os demais navegadores colocam o padding fora do box, adicionando seus valores ao comprimento e altura do box. Assim o seu box sofrerá alterações de acordo com o navegador em que for visualizado e isto poderá trazer resultados desastrosos quando você depende de maior precisão.

Além dos limites do padding você poderá ter uma borda...

Bordas estão disponíveis em uma variedade de estilos e você poderá definí-las separadamente para cada lado, em termos de espessura, estilo e cor. Elas são mostradas com pequenas diferenças de acordo com o navegador em que são visualizadas, a seguir como elas aparecem no navegador Mozilla...

A espessura da borda aumenta o comprimento do box.

Para separar um box de outro usamos as margens.

Margens e paddings costumam ser confundidas pois o que nós chamamos de margem de uma página de um livro ou de uma página Web, na verdade é um 'padding' porque obviamente este espaçamento não poderia ficar fora da página. Lembre-se que este caso é especial. Para o body de uma página Web, as margens são contadas para dentro e para todos os demais boxes CSS são contadas para fora do box.

Posicionamento absoluto

Além de ter um comprimento e uma altura os boxes CSS podem ser colocados em qualquer lugar da página através da definição CSS position: absolute; Posicionamento absoluto é um conceito fácil de se entender, pois é assim que as coisas funcionam na vida real. Por exemplo: a localização de uma casa poderia ser descrita assim; à 50 metros da Rua Norte e à 100 metros da Rua Leste.

A maneira mais simples de posicionar um box seria definir algo como top:50px; left:100px (topo: 50px; esquerda: 100px) mas não necessariamente terá que ser top e left, poderá ser top e right (topo e direita), bottom e left (fundo e esquerda) ou bottom e right (fundo e direita).

Aqui você tem alguns boxes CSS estilizados e cada um deles com as definições de estilo mostradas. As possibilidades de estilizações são infinitas.

Boxes com dimensões definidas e posicionados de forma absoluta, são semelhantes a recortes de notícias e imagens de jornais que se faz para montagem de um álbum de recortes. O problema é que tais álbuns permanecem com suas dimensões fixas - Páginas Web, não.

Posicionamento relativo

Se você quiser descrever a posição da porta da casa do seu vizinho você poderia dizer que ela encontra-se a 70 metros da Rua Norte e a 100 metros da Rua Leste, ou ainda, dizer que ela localiza-se a 5 metros da sua casa. Posicionamneto relativo considera que boxes CSS localizam-se próximos a um outro box. O primeiro box ocupa a posição mais acima, o próximo box localiza-se abaixo do primeiro, o seguinte abaixo deste. Eles efetivamente flutuam colocando-se de cima para baixo na página. Este exemplo é um pouco fora da vida real, mas imagine-se dentro de uma piscina coberta onde uma pilha de colchões de ar flutuassem, o primeiro colaria na cobertura, o seguinte em baixo dele e seguinte em baixo e assim por diante.

Para fazer com que boxes flutem um ao lado do outro em lugar de em baixo, você definirá float: left; ou float: right; à semelhança dos colchões de ar na piscina coberta, os boxes vão flutuando um ao lado do outro enquanto houver espaço lateral. Acabado o espaço lateral eles ocuparão a posição abaixo daqueles que já flutuaram, começando uma nova camada. Você poderá evitar uma situação destas assegurando-se que a soma total das larguras dos boxes não ultrapasse a largura da página. Isto pode ser feito especificando-se as larguras ('width') em pixel - mantendo a soma total abaixo da largura do navegador. Ou ainda, definir as larguras em percentagens, mantendo a soma total igual a 100 - ou preferencialmente um pouco abaixo de 100. Ao posicionar de maneira relativa, evite misturar pixel com percentagem, pois os resultados podem ser imprevisíveis.

Esta página de exemplos para boxes flutuantes mostra o comportamento de boxes posicionados de maneira relativa em colunas simples e múltiplas.

Navegação pelo tutorial

1. » Introdução - página básica
2. » Folha de estilos
3. » Estilizando texto
4. » Mais texto
5. » As listas
6. » Os links
7. » Boxes CSS
8. » DIV's
9. » Juntando tudo
10. » DOCTYPE
11. » Estilos externos
12. » Estilizando tabelas
13. » Estilizando formulários
14. » Browsers
15. » O futuro

Criado em: 2005-04-11