Agrupar selectores
Calendário de artigos
| S | T | Q | Q | S | S | D |
|---|---|---|---|---|---|---|
| voltar ao mês actual | ||||||
|
|
||||||
| 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):
- 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:
- #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:
- p {
- margin-left: 5px;
- margin-right: 10px;
- margin-top: 15px;
- margin-bottom: 2px;
- }
Podemos agrupar em:
- p {
- margin: 15px 10px 2px 5px;
- }
A ordem é: [top] [right] [bottom] [left]
Se tiveres valores iguais como:
- p {
- margin: 2px 5px 2px 5px;
- }
Pode ficar apenas:
- p {
- margin: 2px 5px;
- }
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:
- p {
- margin: 10px;
- }
Aplicará 10px a todas as margens.
Outras formas:
- body {
- background-color: #000000;
- background-image: url(imagem.jpg);
- background-repeat: repeat-y;
- background-attachment: scroll;
- }
Agrupar em:
- body {
- background: #000000 url(imagem.jpg) repeat-y scroll;
- }
Ou com tipos de letras:
Outras formas:
- body {
- font-family: arial, verdana, tahoma, sans-serif;
- font-weight: bold;
- font-variant: upper-caps;
- font-size: 12px;
- font-style: italic;
- }
Agrupar em:
- body {
- font: italic upper-caps bold 12px arial, verdana, tahoms, sans-serif;
- }
Comentários