Agrupar selectores

Calendário de artigos

< Fevereiro 2007 >
S T Q Q S S D
voltar ao mês actual
A carregar
      01 02 03 04
05 06 07 08 09 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28        

Podem-se agrupar os selectores no caso de terem a mesma declaração (que é o conjunto de propriedade mais o valor):

  1. p, body { background-color: #000000; color: #ffffff; font-family: arial, verdana, tahoma, sans-serif; }

Mas não convém cair no erro, de ao utilizar IDs ou classes de te esqueceres de voltar a colocar o ID ou a class, por exemplo:

  1. #sidebar h1, #sidebar h2 { background-color: #000000; color: #ffffff; font-family: arial, verdana, tahoma, sans-serif; }

Não pode ficar apenas #sidebar h1, h2 tem de se definir o ID novamente. A não ser que seja mesmo o h2 geral, sem estar num ID que queiramos definir.

Agrupar propriedades e valores

Para uma melhor organização do ficheiro .css e para mininização do tamanho do mesmo (tanto em extensão como peso), podemos agrupar várias propriedades e valores num só. Exemplos:

  1. p {
  2. margin-left: 5px;
  3. margin-right: 10px;
  4. margin-top: 15px;
  5. margin-bottom: 2px;
  6. }

Podemos agrupar em:

  1. p {
  2. margin: 15px 10px 2px 5px;
  3. }

A ordem é: [top] [right] [bottom] [left]

Se tiveres valores iguais como:

  1. p {
  2. margin: 2px 5px 2px 5px;
  3. }

Pode ficar apenas:

  1. p {
  2. margin: 2px 5px;
  3. }

E ele vai aplicar o [top] e [bottom] como 2px e o [right] e [left] com 5px.

E se forem todos iguais basta uma vez:

  1. p {
  2. margin: 10px;
  3. }

Aplicará 10px a todas as margens.

Outras formas:

  1. body {
  2. background-color: #000000;
  3. background-image: url(imagem.jpg);
  4. background-repeat: repeat-y;
  5. background-attachment: scroll;
  6. }

Agrupar em:

  1. body {
  2. background: #000000 url(imagem.jpg) repeat-y scroll;
  3. }

Ou com tipos de letras:

Outras formas:

  1. body {
  2. font-family: arial, verdana, tahoma, sans-serif;
  3. font-weight: bold;
  4. font-variant: upper-caps;
  5. font-size: 12px;
  6. font-style: italic;
  7. }

Agrupar em:

  1. body {
  2. font: italic upper-caps bold 12px arial, verdana, tahoms, sans-serif;
  3. }

Comentários