Categoria Dicas CSS - Agrupamento de seletores CSS

Posted by webmaster | CSS |

Agrupamento de Seletores
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.

Tags:

Nenhum Comentário

Nenhum comentário ainda.

Feed RSS dos comentários deste post TrackBack URI

O formulário de comentários está fechado no momento.