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

Anúncios

2 Comentários

Arquivado em CSS

2 Respostas para “Exemplo de uso de múltiplas classes de estilos em um único elemento html

  1. washington

    Topico antigo mas era isso que eu estava procurando.
    Vlw brother.

  2. Allan

    Vlw brother!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s