Arquivo da tag: truque css

Exemplo de uso de múltiplas classes de estilos em um único elemento html

Um truque pouco conhecido com CSS é que você não precisa limitar seus elementos a apenas uma classe(class) de estilo.

Para adicionar várias classes apenas acione-as separando com um espaço entre uma classe e outra. Por exemplo:

Declaração das classes de estilos no  CSS:


<style>

.estilo1{
border: 1px solid red;
 }

.estilo2{
font-size: 25px;
 }  </style>

Trecho html com os elementos de html:


<p class="estilo1">estilo1</p>
<p class="estilo2">estilo2</p>
<p class="estilo1 estilo2">estilo1 e estilo2</p>

Primeiro aplico o class “estilo 1” (borda vermelha), depois o class “estilo2” ( fonte grande)  e por fim os dois class de estilo1 e estilo2 (borda vermelha + fonte grande) juntos. Veja o resultado gerado no print (IE8 e FF10):

A vantagem é evidente, dá pra resolver um monte de problema com isto. A desvantagem é que em browsers muitos antigos NÃO tem suporte a este recursou.

[]s

2 Comentários

Arquivado em CSS