Efetuar login

Oficina da Net - Construindo conhecimento

Widgets | Contato | Cadastro | Fórum | Promoções

CSS

Agrupamento de seletores CSS

Publicado em: 23/06/2007 | CSS | Visualizações: 1.027 | 1 Comentário(s)

Uma regra CSS quando válida para vários seletores, estes podem ser agrupados.
Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A cor de todos os cabeçalhos será verde.

h1, h2, h3, h4, h5, h6 {color: #00FF00;}

O seletor classe
Mas você não está restrito somente aos elementos HTML (tags) para aplicar regras de estilo!

Você pode "inventar" um nome e com ele criar uma classe a qual definirá as regras CSS. E o mais interessante das classes, é que elas podem ser aplicadas a qualquer elemento HTML.
E mais ainda, você pode aplicar estilos diferentes para o mesmo tipo de elemento do HTML, usando classes diferentes para cada um deles.

A sintaxe para o seletor classe é mostrada abaixo.
Elemento HTML mais um nome qualquer que você "inventa", precedido de . (ponto):

elementoHTML.minhaclasse { propriedade: valor;}

Nota: Para o nome que você "inventa" para sua classe, evite usar números e caractéres especiais. Tanto quanto possível use só letras de a-z e de A-Z. Números e caractéres podem ser usados, mas há restrições quanto ao seu uso.
Dica 1: Use só letras!

Por exemplo: suponha que você queira ter dois tipos de parágrafos em seu documento:
-um parágrafo com letras na cor preta e;
-um parágrafo com letras na cor azul.

p.corum { /* classe corum= preta */

color:#000000;

}



p.cordois { /* classe cordois= azul */

color:#0000FF;

}

No seu seu documento HTML as regras seriam aplicadas conforme abaixo:

<p class ="corum">

este parágrafo terá cor preta.

</p>



<p class ="cordois">

este parágrafo terá cor azul.

</p>

Dica 2: Classes definidas pelas regras CSS são ótimas para se aplicar estilos diferentes num mesmo elemento HTML (tag) em um mesmo documento.

=======================
Conheça nosso parceiro: