Sua primeira vez com XHTML e CSS em 4 passos

Fevereiro 4th, 2007

Você quer colocar a mão na massa e montar sua primeira página com a dobradinha XHTML e CSS ? Então vamos lá. Montei quatro arquivos que, na realidade, servirão como quatro passos para alcançarmos o resultado. Primeiramente vou resumir o conteúdo dos arquivos:

1. O XHTML possui uma div, um cabeçalho H1 que é o título do site e um parágrafo. O CSS formata apenas esse elementos da página, ou seja, não há classes ou IDs. As regras do CSS não possuem abreviações, estão “cheias”.
2. Tudo igual ao primeiro arquivo, mas o CSS foi resumido que é para você perceber o quanto pode diminuir o seu código.
3. Divs foram criadas e receberam IDs, mas as regras dos IDs não foram criadas ainda.
4. Criadas as regras para as IDs. São regras que controlam o posicionamento e outras características das divs e fim.

Vamos ver agora o código de cada um deles comentados em seguida:

XHTML do Arquivo 1:

Nada de anormal. Apenas o título principal para o conteúdo do site, em seguida uma div contendo um parágrafo.

Agora o css:

Vejam que esse css possui propriedades que tratam os elementos do site diretamente, ou seja, trata de body, div, h1 e p. Para body estabelecemos a cor de fundo com #CCCCCC, o tipo de fonte e o tamanho, além de “zerar” todas as margens.

Para div demos largura e altura e colocamos bordas pretas de 1px nela inteira. Percebam que usei 4 propriedades (border-top, border-left, etc.) para conseguir as bordas, mas veremos mais abaixo que isso pode ser abreviado.

Para h1 estabelecemos apenas o tamanho da fonte e para p a altura entre uma linha e outra para que não fiquemos com um texto muito “colado”.

Você pode ver o resultado desse código neste link.

Vamos ver agora o código css da parte 2, visto que apenas ele sofreu alterações.

Bem, aqui modificações interessantes para a redução e do código já foram feitas como:

Na propriedade background-color, usei o hexadecimal #CCCCCC e troquei para #CCC. Na realidade temos a mesma cor de forma simplificada. Todas as vezes que tivermos situações de cores como #CCCCCC, #FFFFFF, #999999, podemos usar apenas 3 caracteres para representar a cor. Uma outra situação é quando temos cores no formato #FFCC00, ou seja, perceba que o F, o C e 0, aparecem 2 vezes cada, então podemos reduzir isso para #FC0. Numa situação como #ABCF4E, não há como simplificar.

Para a fonte eu havia usado duas propriedades, uma para escolher o tipo (font-family) e outra para o tamanho (font-size). Nesse arquivo isso foi resumido para:

font:12px Arial, Helvetica, Sans-Serif;

Ao invés de usar duas propriedades, consegui o resultado usando apenas a propriedade font onde posso especificar várias características de uma só vez. A propriedade font pode controlar diversas características conforme abaixo:

font: [style] [variant] [weight] [size] [/line-height] family] | caption | icon | menu | message-box | small-caption | status-bar | inherit

Para usá-la, basta especificar cada característica separada apenas por um espaço. Você não é obrigado a usar todas é claro, mas procure usar na ordem acima. Em outros artigos vou explorar mais essa propriedade.

Vamos falar agora de border. Vocês viram que no primeiro css usei quatro propriedades para aplicar bordas à minha div. Foram elas:

border-top, border-left, border-bottom e border-right.

No arquivo acima eu resumi todas usando apenas uma:

border:1px solid #000;

Assim como font, border também é usada para resumir. A regra acima diz que todas as bordas terão 1px, serão do tipo sólida e na cor preta. Perceba aqui mais uma vez a especificação da cor de forma resumida.

Grave aí… muitas propriedades possuem a sua forma resumida e essa forma é determinada apenas por uma palavra, ou seja, ao invés de border-left, right, top, bottom, etc, use apenas border, ao invés de margin-left, right, top e bottom, use apenas margin e por aí vai. Um livro que gosto muito de usar e que, obviamente, indico é o Guia de consulta rápida do Luis Gustavo Amaral. Nele você encontra, senão todas, a maioria das propriedades do css e exemplos rápidos de como usá-las.

Ok, para a parte 2 gostaria de falar apenas dessas regras resumidas. O resto do arquivo estabelece apenas o tamanho da font para h1 e altura da linha para os parágrafos. Você pode ver esse arquivo na íntegra aqui.

Para parte 3 ocorreram apenas mudanças no XHTML. Antes de falar do XHTML, gostaria que olhassem a imagem abaixo que da a idéia de como quero que fique nossa página.

Vamos olhar agora o XHTML:

Não conseguimos ver tudo, mas vou explicar.

Nosso arquivo tinha apenas uma div. Passei a chama-la através de um identificador de “geral” (olhe na figura acima). Essa div foi feita para receber as outras três que são: menu, conteúdo e publicidade. Isso segue o planejamento do meu layout e portanto, não esqueça, essas três últimas divs devem ficar dentro da div geral. Confira o código aqui.

Nada de complicado até agora. Se você olhou o código e o resultado, vai ver que o layout ainda não está como planejei, até porque não inseri no css o código necessário para conseguir o posicionamento correto das divs.

Antes da parte 4 vamos olhar o pedaço de código css que segue porque quero explicar uma coisa:

Quando, no xhtml, eu identifiquei a div usando <div id=”geral”>, simplesmente não quis apenas dar um nome à div. Esse tal de ID (vem de identificador) serve à vários propósitos e um deles é receber formatação vinda do css. Na realidade o XHTML “chama” a formatação daquele elemento específico através do ID.

Lá no css um ID é criado usando-se o # (sustenido, jogo da velha, sei lá…) seguido de um nome qualquer que você queira (em outro artigo vou falar do uso da semântica na escolha desses nomes). Então no css temos:

#geral {

as regras que você quiser aqui…

}

Lá no XHTML, quem se chamar geral recebe a formatação criada nesse ID e assim sucessivamente. Lembre-se, três outras divs foram criadas com seus respectivos IDs. Bem agora você já pode dar uma olhada no código completo nesse link.

Ufa, vamos lá… quase no final… Vejamos agora o css finalizado:

Vou falar dele passo a passo.

Primeiro estabeleci que a div geral deve ter 100% de largura e que deve ser exibida como uma tabela. Usar display:table faz com que a div envolva o seu conteúdo e evita que você seja obrigado a determinar uma altura.

Na regra seguinte apliquei largura de 25% para #menu e #publicidade. Para estabelecer uma mesma regra para IDs diferentes basta separar os IDs com virgula e declarar as regras.

#conteúdo recebeu uma largura diferente.

As regras display:table, float:left e border:1px solid #000 serviam para #menu, #conteudo e #publicidade e foram alpicadas em conjunto, assim como margin-right:5px servia para #menu e #conteudo.

Se você está se perguntando sobre float:left então devo dizer que é uma regra que faz o elemento flutuar à esquerda. Com ele aplicado à #menu, #conteudo e #publicidade, então os três serão “puxados” para a esquerda e ficarão um ao lado do outro.

Como não queria as três divs grudadas, então usei margin-right:5px para afastar um pouco menu de conteúdo e, logicamente, conteúdo de publicidade.

Fim de papo. Acho que esse artigo pode ajudá-lo a começar a fugir da sua prisão aos editores visuais. Como dizem em Linux… “use a força, leia os fontes”. Digo mais… tente mais que entender, consulte outros sites, leia livros como esse, esse e esse.

Até o próximo.

Categoria(s): XHTML, CSS, tableless