Blog

Topo 15/10/08

CSS simples: abreviando as propriedades

Uma das características que fazem o CSS uma linguagem tão difundida é sua facilidade de aprendizado e flexibilidade para a escrita. Seja usando uma regra ou propriedade por linha, seu código funcionará corretamente.

Há tambem diversas maneiras de definir determinadas propriedades do CSS como background, font, margin, padding, etc. E este é o intuito deste artigo, mostrar para aqueles que ainda não conhecem estes “atalhos” que ajudam (e muito) a diminuir seu código.

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-image: url(imagem.jpg);
background-color: #fff;
background-repeat: no-repeat;
background-position: bottom;
}

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 { background: url(imagem.jpg) #fff 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. Veja o esquema abaixo:

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.