Voltar para o site

Uma marcação para vários templates

Publicado em: 22/05/2006

Identificadores class e ID

Atribuir um identificador ID ou uma classe class a um elemento HTML ou a um seletor CSS é uma prática tão comum em projetos com folhas de estilo em cascata, que você com o mínimo de conhecimento da matéria já deve saber exatamente o que significam e para que servem as marcações em destaque nos códigos a seguir:

  • <p class="diferente">Bla...bla...</p>
  • <div id="navegacao">Bla...bla...</div>
  • <h1 id="campeao">Bla...bla...</h1>
  • <h5 class="diferente">Bla...bla...</h5>
  • <span class="dest">Bla...bla...</span>

É isso mesmo que você pensou.
Os identificadores diferente, navegacao, campeao e dest servem como uma referência a serem colocados na folha de estilo em cascata, com a finalidade de estilizar os elementos p, div, h1 e span que os contenha.

Observe que a classe diferente foi atribuida a 2 seletores: p e h5. Coloquei assim apenas para alertar, pois não esqueça:
Em uma página Web a mesma classe pode ser atribuida a tantos elementos e seletores quanto se queira. Contudo id deve ser única, isto é, um e somente um elemento ou seletor deve estar identificado com determinada id.

Identificando o elemento body

Observe:
<body id="primeiro" class="grupo-dois">

Que tal? Já tinha visto isso? Já usou assim? Sabia que é válido? Sabe para que serve ?

Se você tem alguma intimidade com projetos CSS deve ter respondido SIM a todas as perguntas acima, e aqui vai outra:
Você já montou templates valendo-se da atribuição de um identificador ao elemento body?
A finalidade deste tutorial é a de demonstrar através de um exemplo prático, como construir templates a partir de uma marcação HTML única e uso das CSS.

Não estranhe eu ter atribuido uma id e uma classe ao elemento body, pois esta sintaxe é válida e pode ser empregada para qualquer elemento HTML e não só body. Nestes casos, as regras CSS aplicáveis são aquelas definidas tanto para o id como para a classe.

A marcação HTML

Mostrarei a construção dos templates tomando como base um exemplo prático. Extrai um trecho da marcação HTML gerada pelo Word Press para meu blog - Blog do Maujor e transcrevo a seguir. Dê uma passada de olhos pela marcação e no fim dela há um link para você constatar a renderização e conferir o código fonte.

...
<body>

<div id="tudo">

<div id="topo">
<h1>TOPO</h1>
</div>

<div id="nav">
<h2>COLUNA DE NAVEGAÇÃO</h2>
...
</div>

<div id="principal">
<h2>COLUNA PRINCIPAL</h2>
...
</div>

<div id="apoio">
<h2>COLUNA DE APOIO</h2>
...
</div>

<div id="rodape">
...
</div>

</div>

</body>
</html>

Procure memorizar a estrutura geral da página para melhor acompanhar o desenvolvimento do tutorial. Memorize a seguinte estrutura de marcação:

  1. Uma div#tudo - engloba toda a página;
  2. Uma div#topo - topo da página;
  3. Uma div#nav - navegação;
  4. Uma div#principal - conteúdo principal da página;
  5. Uma div#apoio - área de apoio;
  6. Uma div#rodape - rodapé da página.

Antes de prosseguir, vamos consolidar o que vimos visitando a página exemplo renderizada sem estilizações. Estando lá aproveite para conferir o código fonte. Ver a página exemplo.

Regras CSS gerais

Defini algumas regras que se aplicam a todos os templates apenas para efeito de apresentação e que não interferem com o layout físico do template.
São regras para fundos, cores e fontes bem como para centrar o layout na tela e que podem ser definidas ao gosto e preferência do desenvolvedor.

Observe as regras gerais a seguir:

body {
	margin:0;
	padding:0;
	border:none;
	font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
	background:#ffe;
	color:#333;
	text-align:center;
	}
#tudo {
	width:750px;     
	margin:0 auto;
	text-align:left;
	}
#topo {
	height:50px;
	border-bottom:1px solid #c30;
	}
#rodape {
	clear:both;
	text-align:center;
	border-top:1px solid #c30;
	}
ul, ol {
	margin:0;
	padding:0;
	list-style:none;
	}
h1, h2, h3 {
	margin: 0.8em 0;
	color:#c30;
	font-size:1.4em;
	}
h2 {
	font-size:1.2em;
	}
h3 {
	font-size:1.0em;
	}
	
.dest {
	color:#039;
	}

Template de 3 colunas

Começarei com o template de 3 colunas com a navegação à esquerda, apoio à direita e principal no centro.

Para posicionar as colunas, declarei uma largura para cada uma delas e usei a declaração float:left; para as colunas de navegação e principal e float:right; para a coluna apoio. Adicionalmente declarei bordas para maior clareza. 

#principal {
	float:left;
	width:460px;
	margin-left:10px; 	
	text-align:justify;
	border:dotted #c30;
	border-width: 0 1px;
	padding: 0 10px;
	}
#nav {
	width:120px;
	float:left;
	}
#apoio {
	width:120px;
	float:right;
	}

Veja o template de 3 colunas

Template de 2 colunas com navegação à esquerda e sem coluna de apoio

A seguir vamos ao template de duas colunas, com navegação e coluna principal.
Para 'sumir' com a coluna de apoio basta declarar display:none; para ela. A seguir estender a coluna principal para que ela ocupe o espaço á direita deixado pela coluna de apoio, bastando para isso, aumentar a largura da coluna principal.
Contudo, se eu escrever estas regras na folha de estilos elas irão influenciar e destruir o layout do template de 3 colunas já construido. E é aqui que entra em cena a declaração de um identificador para o elemento body.

Vou definir um id para o elemento body das páginas que usarão o template de 2 colunas, assim:

<body id="duascolunas">

E agora posso definir regras CSS específicas para as páginas que usarão o template de 2 colunas sem interferir com o de 3 colunas.
Observe abaixo: 


body#duascolunas #apoio {
	display:none; /* 'Some' com a coluna de apoio */
	}
body#duascolunas #principal {
	width:600px; /* Estende a coluna principal */
	border-right-width:0;
	padding-right:0;
	}

Veja o template de 2 colunas

Template de 2 colunas - variante

Vamos agora a uma variação do template de 2 colunas, onde desejamos mudar apenas algumas configurações de apresentação sem alterar o layout. Para exemplificar alterei cor de fundo e fontes.

Para construir esta variante do template de 2 colunas, vamos aproveitar aquele template a acrescentar uma classe ao elemento body, assim:

<body id="duascolunas" class="duascolunas-a">

Que pode ser lido assim: Template de duas colunas variante dois-a.

E as regras de estilo para este template são: 

body.duascolunas-a #topo, body.duascolunas-a #rodape{
	font: 11px Verdana, Arial, Helvetica, sans-serif; 	
	background:#cff; 
	padding-bottom:1px;
	}
body.duascolunas-a	{
	background:#fff;
	font: 14px Georgia, "Times New Roman", Times, serif;
	}
body.duascolunas-a #principal  {
	color:#c30;
	}

Veja o template de 2 colunas - variante a

Template de 2 colunas com navegação e apoio à direita

Outra variação do template de 2 colunas, onde desejamos alterar o posicionamento e trazer de volta a coluna de apoio.
Neste template, a coluna principal fica à esquerda e as colunas de navegação e apoio à direita , uma em baixo da outra.
Deixo para você analisar o código fonte e tirar suas conclusões.

Veja o template de 2 colunas - variante navegação à direita

Template de 1 coluna com navegação horizontal

Para finalizar, fica também por sua conta o template de uma coluna.

Conclusão

Atribuir um identificador ao elemento body de uma página é um poderoso artifício de estilização que permite não só construir templates com uso de uma marcação única conforme mostrado neste tutorial como também agrupar conjuntos de páginas de um site que devam ser estilizadas de forma idêntica.

Conheça os livros do Maujor®

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

topo