HTML e CSS 06: Id e class
1. CSS: id e class
Dois seletores usados no código CSS são comumente objeto de confusão: id e class.
A tag id é usada para identificar um trecho de conteúdo. Este identificador é único, é aplicado uma vez só em cada página HTML. A class é o estilo a ser aplicado em determinado trecho de conteúdo e pode se repetir quantas vezes for necessário.
Repare nesta página do curso de HTML, por exemplo. Existem trechos únicos: a barra lateral (sidebar) por exemplo, é um trecho de código que desejo identificar usar uma tag id, pois ela aparece uma só vez em cada página.
Veja, por exemplo, o código abaixo:
<body class="twoColFixRtHdr"> <div id="container"> <div id="header"> <h1><img src="../img/topo.jpg" width="745" height="285" /></h1> </div> <div id="sidebar1"> <ul> <li><a href="../index.html">capa</a> </li> <li><a href="../servicos.html">serviços</a></li> <li><a href="../processo.html">processo</a></li> <li><a href="../portfolio.html">portfolio</a></li> <li><a href="../blog/">blog</a></li> <li><a href="../cursos.html">cursos</a></li> <li><a href="../podcast.html">podcast</a></li> <li><a href="../contato.html">contato</a></li> </ul> </div> <div id="mainContent"> <p class="obs"><a href="../index.html">capa</a> / <a href="../cursos.html">cursos</a> / <a href="html-prog.htm">HTML</a> / aula 3</p> <h2>HTML e CSS: aula 04</h2> ... </div> <div id="footer"> <p class="obs">2008 | Carambola Digital | Esta obra está licenciada sob uma <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/br/" target="_blank" rel="license">Licença Creative Commons</a>.</p> </div> </div> </body>
Este é o código da página que você está vendo agora, da aula 06 do curso de HTML da Carambola Digital. Retirei trechos de código desnecessários para a explicação.
Repare que existem alguns trechos discriminados com id, outros com class.
2. CSS de posicionamento
O CSS determina como o seu código HTML vai ser apresentado pelo navegador (browser). Ele vale tanto para definir o tipo ou tamanho da fonte numa página quanto a posição em que os elementos serão dispostos.
A verdade é que é muito mais cômodo usar tabelas para elaborar o layout de uma página HTML, mas é também muito desvantajoso, como já vimos. Assim, tenha paciência em entender como as tags CSS funcionam que, lá na frente, quando você tiver bom domínio sobre elas, será um designer melhor e um profissional mais valorizado no mercado. Hoje em dia, um profissional que conheça bem o CSS pode pleitear melhores salários que um designer sem estes conhecimentos.
Assim, vamos ao que interessa: CSS de posicionamento.
| Valor | Descrição |
|---|---|
| absolute | Gera um elemento com posicionamento absoluto, posicionado relativo ao elemento pai que tiver qualquer outro valor de posicionamento diferente de static. O posicionamento deste elemento é especificado pelas propriedades top, right, bottom e left. |
| fixed | Gera um elemento com posicionamento absoluto, posicionado em relação à janela do navegador. O posicionamento deste elemento é especificado pelas propriedades top, right, bottom e left. |
| relative | Gera um elemento com posicionamento relativo, posicionado em relação a sua posição normal, portanto left:20px adiciona 20px à esquerda da posição normal do elemento. |
| static | Default. Sem posição, o elemento fica no fluxo normal do documento (ignora declarações top, right, bottom, left ou z-index). |
| inherit | Especifica que o valor da propriedade position deve ser herdada do objeto pai. |
Exemplos destes posicionamentos podem ser vistos neste arquivo.
O tutorial elaborado por Patrick Fitzgerald é ótimo e achei que vale mais a pena usar o material dele, que já está aperfeiçoado, do que elaborar um próprio.
Quem preferir um tutorial de CSS de posicionamento em português, consulte o site do Maujor.
Uma das melhores maneiras de aprender CSS é tentar descobrir como sites que você acha interesantes usam seu código CSS para formatar suas páginas.