CSS no Lanche

Uma das grandes capacidades do CSS é de se utilizar declarações curtas. Ela permite que você especifique várias propriedades semelhantes utilizando apenas uma declaração. Se você entende CSS entenderá logo o propósito desse artigo. Através dele você entenderá como escrever o CSS de uma forma mais inteligente e legível.

Afim de obter o máximo de proveito desse artigo, você deverá saber a forma normal de escrita das propriedades CSS e seus valores, eles serão utilizados aqui mas não explicados.

A estrutura básica das CSS

Agora vamos a uma rápida demonstração de como escrever CSS para refrescar nossa memória:

    _____________Seletor
   |      _________ Propriedade
   |     |       ____ Valor
   |     |      |
   h1 { color: red }
        |________|
        Declaração

Essa regra CSS irá declarar muitas vezes as propriedades. Mas através do seletor propriedades poderemos declarar vários valores de uma só vez. Para você ter uma idéia melhor, vamos adicionar estilos a tag body do HTML:

body {
background: url("bg.gif");
background-color: #003366;
background-repeat: repeat-x;
background-position: left top;
}

O código acima é uma forma muito comum de se declarar CSS utilizada por todo mundo. Agora vamos ver o que acontece quando tentamos definir o mesmo estilo, mas desta vez utilizando a propriedade background com declarações curtas. Utilizando a propriedade background nós seremos capazes de definir todas as propriedades acima com maior eficiência, ou melhor, vamos diminuir o código pela metade:

body {background:#036 url("bg.gif") repeat-x left top;}

Então, como você pode ver existe uma forma de você adicionar mais produtividade a seu CSS, portanto, se você sabe utilizar declarações curtas, mãos a obra. Abaixo você verá um guia para utilização de declarações curtas no CSS da mesma forma como foi mostrado anteriormente, mas também serão mostrados os browsers suportados, a sintaxe utilizada e um exemplo com uma breve explicação.

Declarações curtas na propriedade font

Sintaxe:

font: font-style | font-variant | font-weight | font-size | line-height | font-family

 p { font: strong x-large/110% "new century schoolbook", serif; }

No exemplo acima não definimos o valor de font-variant, mas será assumido o valor default do browser. x-large/110% se referem respectivamente ao tamanho da fonte e ao line-height. Uma vez que ambas utilizam tamanho que agrege valor, deverão sempre estar juntas, onde font-size é sempre o primeiro valor a ser definido. Citações são sempre utilizadas quando forem declaradas famílias de fonte.

Declarações Curtas em Margin e Padding

Sintaxe:

margin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left

Nota: O Internet Explorer tem possui problemas com o Box Model, portanto ele interpreta padding de uma forma diferente em relação aos outros browsers, tenha cuidado.

p {margin: 2em}

Neste primeiro exemplo todas as margens foram definidas como 2em. Quando apenas um valor é declarado, ela se aplica a todos os lados.

p {margin: 1em 2em}

No exemplo acima, 2 valores foram definidos. CSS interpreta a primeira regra como sendo para as margens top e bottom, e a segunda regra para a direita e esquerda.

p { margin: 1em 2em 3em }

Nesse último exemplo, 3 valores foram definidos. Margin-top leva em consideração o primeiro valor, margin-right e margin-left levam em consideração o segundo valor e margin-bottom o terceiro valor. Quando 4 valores são definidos, margin-top é definido primeiro, suscetivamente right, bottom e left, sempre no sentido horário.

As regras aplicadas a padding são as mesmas aplicadas a margin.

Declarações curtas na propriedade border

Sintaxe:

border: border-width | border-style | color

Exemplos:

p { border: solid red }

Irá definir as bordas de p para uma linha sólida e vermelha.

p { border: 1px dotted #369 }

Irá definir um minúsculo ponto azul a borda pontilhada em volta dele.

Declarações curtas em: border-top, border-right, border-bottom, border-left

Sintaxe:

border-top: border-width | border-style | color

Esse tipo de declaração funciona semelhante a anterior, a única diferença aqui é que agora você irá especificar bordas para locais específicos do elemento.

Exemplo:

p { border-right: 4px groove blue;}

Declarações curtas em: list-style

Sintaxe:

list-style: list-style-type | list-style-position | list-style-image

Exemplo:

ul { list-style: url("dot.gif") disc inside}

Nesse exemplo será usado um elemento gráfico chamado dot.gif, se ele não for encontrado, será utilizado o elemento disc.

Declarações curtas na propriedade: background

Sintaxe:

background: background-color | background-image | background-repeat | background-attachment | background-position

Um exemplo foi utilizado na introdução desse artigo.

Exemplo:

p {background: gray url("bg.gif") repeat fixed 50% }

Como vocês podem ver, foi definida uma imagem de fundo chamada bg.gif, e seu antecedente uma cor cinza. O fundo irá repetir mas permanece fixo e o posicionamento será aplicado a 50% horizontalmente.

Esse artigo é uma tradução do original de: Ove Klykken