Combinando classes para ações selecionadas

Essa funcionalidade é muito poderosa quando se trata de reutilizar elementos. Vamos supor que você tenha criado uma classe chamada .caixa. Sabe que com freqüência pode usa-la no seu código XHTML, mas você não quer que os elementos nelas sejam todos iguais. Por exemplo: você pode querer que as margens mude, plano de fundo, espaçamentos etc.
Se você quiser que cada h3 tenha uma cor verde de fundo, você poderia fazer assim:

h3 {
text-transform: uppercase;
display: inline;
font-size: 92%;
margin: 10px 5px 0 5px;
padding: 2px;
}

.fundo_customizado {
background: #f762e0;
}

Você chama isso da seguinte maneira:

<div class=”caixa”>
<h3 class=”fundo_customizado”>Título em verde</h3>
</div>

Isso não está bom, porque você teve que chamar duas classe para realizar este efeito e outra, para criar outros fundos customizados você teria que sempre referenciar uma classe em h3. Vamos fazer diferente. Vamos criar h3 individuais para cada .caixa.

.normal h3 {
background: #ffffff; -- branco
}

noticias h3 {
background: red; -- vermelho
color: #ffffff;
}

.promocoes h3 {
background: #b18fd1;
font-size: 110%;

Agora você só precisa decidir o propósito de cada .caixa incluida em seu documento XHTML. Exemplo:

Caixa normal são texto simples
<div class=”caixa normal”>
<h3>Titulo da Caixa normal</h3>
</div>

Caixa noticias são noticias do seu site ou blog:
<div class=”caixa noticias”>
<h3>Titulo da Caixa Notícias</h3>
</div>

Caixa promocoes são suas promoções:
<div class=”caixa promocoes”>
<h3>Titulo da Caixa Promoções</h3>
</div>

Simplesmente combinamos as classe através de um separados de espaço, imediatamente toda instancia de h3 sofrerá estilização conforme sua classe. Veja que o código XHTML ficou muito mais limpo e estruturado. Com certeza o Google vai gostar disso.
Lembre-se que você pode criar, combinando classes, várias caixas de formato diferentes e cores também. Boa Sorte!

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email