Última modificação: 31 maio 2011
Há diversas maneiras de definir determinadas propriedades do CSS como background, font, margin, padding, etc.
Background
Como o próprio nome diz, a propriedade background define o fundo do elemento, com uma cor sólida ou uma imagem. Neste último caso, pode-se dizer se esta será repetida, seu posicionamento e comportamento.
seletor { background-color: #fff; background-image: url(imagem.jpg); background-position: bottom; background-repeat: no-repeat; }
Como pode-se perceber, esta maneira deixa seu código muito extenso, então vamos abreviar estas propriedades em uma única linha. Neste caso, não há importância na ordem pela qual você dispõe os valores, mas é interessante manter um padrão de escrita:
seletor { #fff background: url(imagem.jpg) bottom no-repeat; }
Color
Como nem todos ainda sabem, é importante comentarmos sobre a abreviação na declaração da escrita das cores. Quando utilizamos os valores hexadecimais, há casos nos quais podemos escrever apenas 3 caracteres, ao invés dos 6 que estamos acostumados.
seletor { color: #aaff00; }
Podemos abreviar desta forma:
seletor { color: #af0; }
A lógica da abreviação é simples: cada caractere representa um par de caracteres da escrita não abreviada.
Margin e padding
A lógica para abreviação das propriedades margin e padding é a mesma. Vejamos o exemplo da escrita sem abreviação:
seletor { margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px; }
Para abreviar existem algumas maneiras:
Neste caso, os valores são aplicados para todos os lados do elemento:
seletor { margin: 1px; padding: 1px; }
Se as unidades do topo e rodapé forem as mesmas (1px), esquerda e direita forem iguais entre si (5px), podemos escrever de outra forma:
seletor { margin: 1px 5px; padding: 1px 5px; }
Mas há situações nas quais precisa-se utilizar uma unidade para o topo (1px), outra (igual) para os lados (5px) e mais uma para o rodapé (6px):
seletor { margin: 1px 5px 6px; padding: 1px 5px 6px; }
E, por fim, uma maneira simplificada de escrever as dimensões para todos os lados, mas deve-se seguir o sentido horário, ou seja: top (1px), right (2px), bottom (3px) e left (4px):
seletor { margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px; }
Border
Para abreviar a propriedade border é tão fácil quanto a background, pois não exige uma ordem padrão. Segue abaixo exemplo da escrita sem abreviações:
seletor { border-width: 1px; border-style: solid; border-color: #000; }
Para abreviar esta propriedade é simples:
seletor { border: 1px solid #000; }
Caso queira estilizar somente a borda do topo, por exemplo, é só acrescentar “-top” após o “border”:
seletor { border-top: 1px solid #000; }
Font
Esta propriedade tem a função de estilizar o tamanho da fonte, sua linha, família, peso, etc. A forma mais complexa de escrita é a seguinte:
seletor { font-style: normal; font-variant: small-caps; font-weight: bold; font-size: 1em; line-height: 1.3em; font-family: "Trebuchet MS", Arial, sans-serif; }
Muitos não sabem que a propriedade line-height se inclui nesta abreviação, por não ter o prefixo “font”. Veja agora a maneira simplificada de escrever a propriedade font:
seletor { font: normal small-caps bold 1em/1.3em "Trebuchet MS", Arial, sans-serif; }
Fique atento para a ordem de escrita e, caso o nome da fonte tenha espaço, escreva utilizando aspas duplas, como no exemplo acima.
List-style
A propriedade list-style é utilizada para estilizar a marcação de itens de lista. A escrita não abreviada é a seguinte:
seletor { list-style-type: circle; list-style-position: inside; list-style-image: url(bullet.gif); }
Para escrevê-la de forma simplificada não é necessária uma ordem certa das propriedades. Veja o exemplo da abreviação:
seletor { list-style: circle inside url(bullet.gif); }
Há outras propriedades que podem ser simplificadas, como a outline mas, devido sua falta de suporte, não é necessário exemplificá-la aqui.
3 comentários
ResponderBotão expansível CSS – links com background | Blog Web Standards disse:
[…] *CSS: Utilizei no CSS do exemplo a Abreviação das propriedades CSS […]
Eduardo disse:
Boa dica, bom site, parabéns “D
Raphael disse:
Bravo!!!