E então?

Encontrei esse guia outro dia e achei bom demais para não ter uma versão em português. Estava desistindo, quando lembrei dos direitos autorais, mas ao olhar o rodapé vi escrito Creative Commons. Traduzi e segue abaixo. A versão que ele aplicou foi a “Attribution and Share Alike”, a exceção está aberta, esse conteúdo se mantém com a mesma licença. O resto do blog, não.

A versão em inglês está disponível aqui. O crédito é de Dustin Diaz.

Sem mais delongas:
Não existe um guia oficial para todas as propriedades abreviadas do CSS. Direto ao ponto: todas as especificações de CSS que encontrei tem meia dúzia de exemplos e depois disso você deve ser capaz de se achar. Hum. Nos últimos anos, descobri alguns fatos interessantes sobre essas abreviações… por isso esse guia surgiu.

Background

Fundos podem ser confusos, mas são bastante eficazes quando condensados corretamente. A sintaxe para declarar o background abreviado é:

propriedades background

element {
background-color: cor|| #hex || (rgb / % || 0-255);

background-image:url(URI);
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-position: X Y || (top||bottom||center) (left||right||center);
background-attachment: scroll || fixed;
}

Acredite ou não, todas essas propriedades podem ser combinadas em uma única propriedade, como se vê abaixo:

a propriedade background abreviada

element {
background:
#fff
url(image.png)
no-repeat
20px 100px
fixed;
}

O desconhecido

Muitas vezes os desenvolvedores se perguntam:”E se eu deixar esse valor vazio, ou aquele outro? Como isso vai afetar o design?”. Boa pergunta.

Os valores padrão serão assumidos, quando estiverem declarados na propriedade. Veja abaixo.

valores padrão para a propriedade background

element {
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}

Moral da história: cuidado com o que você não declara. Por não colocar um valor numa propriedade abreviada, você está explicitamente declarando os valores default acima. Observe o exemplo abaixo:

background abreviada, exemplo implícito

element {
background:red url(image.png);
}

Isso é o mesmo que declarar os seguintes valores:

background abreviada, exemplo explícito

element {
background:red url(image.png) repeat top left scroll;
}

Font

A fonte é talvez a propriedade mais complexa na utilização abreviada. Ela segue a mesma regra da propriedade background: tudo que não estiver presente utilizará os valores padrão. Segue a declaração completa:

Propriedades font

element {
font-style: normal || italic || oblique;
font-variant:normal || small-caps;
font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (número+unidade) || (xx-small - xx-large);
line-height: normal || (número+unidade);
font-family:nome,”outros nomes”;
}

Os valores padrão para a propriedade fonte abreviada são os seguintes:

valores padrão para as propriedades font

element {
font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;
}

E claro, sem mais embromação, segue a declaração da propriedade fonte abreviada.

a propriedade fonte abreviada

element {
font:
normal
normal
normal
inhert/
normal
inherit;
}

É aqui que fica confuso. O fato de que font-style, font-variant e fonte-weight são “normal” por definição, não quer dizer que você não precise prestar um pouco de atenção quando aplicar o estilo aos elementos que possuem um estilo por padrão do navegador, como h1 a h6 e strong ou em. Por exemplo, ao aplicar o estilo ao elemento strong:

Elemento strong com estilo de fonte

strong {
font:12px verdana;
}

Ao escrever a regra acima, você está implicitamente removendo o negrito que é aplicado por padrão aos elementos strong.

Para terminar, pelo menos a fonte, segue um exemplo no mundo real:

exemplo de fonte abreviada - implícito

p {
font:bold 1em/1.2em georgia,”times new roman”,serif;
}

Isso é o mesmo que declarar as seguintes propriedades
exemplo de fonte - explícito

p {
font-style:normal;
font-variant:normal;
font-weight:bold;
font-size:1em;
line-height:1.2em;
font-family:georgia,”times new roman”,serif;
}

Border
As mesmas regras se aplicam aqui. É só o que você precisa saber.

Propriedades border

element {
border-width: número+unidade;
border-style: (numerous);
border-color: color || #hex || (rgb / % || 0-255);
}

é o mesmo que:

Propriedade border abreviada

element {
border:
4px
groove
linen
}

Não me pergunte como isso fica. O fato de que “linen” está ali, quer dizer que as coisas vão ficar estranhas. Pode esperar, que ainda vai ficar mas bizarro…

Exemplos de border

p {
border:solid blue;
}
/* cria uma borda sólida de 3 pixels
não me pergunte de onde vieram os 3 pixels */

p {
border:5px solid;
}
/* cria uma borda sólida de 5px…
o padrão deve ser preto?! */

p {
border:dashed;
}
/* cria uma borda de 3pixels, preta e interrompida
calma que tem mais */

p { border:10px red; }
p { border:10px; }
p { border:red; }

/* esses nem funcionam */

Uma coisa a se notar quando se declara uma borda sem uma cor explícita. O padrão é preto, a não ser que esteja explicitamente especificado ou seja herdado de outra propriedade color. Veja os exemplos abaixo:

Exemplos de cor em border

p {
border:dotted;
color:red;
}

/* cria uma borda pontilhada de 3 px VERMELHA*/
/* —————————– */
body {
color:blue;
}
body p {
border:5px solid;
}

/* cria uma borda de 5px sólida e AZUL */
/* —————————– */

Entendeu? Ótimo.

Margin e Padding

Essas são as mais simples. Basta pensar no ponteiro de um relógio apontando para o 12 e seguir a hora. Para simplificar, vamos trabalhar com a margem (margin), mas tudo se aplica exatamente igual ao enchimento (padding)

Propriedades margin

element {
margin-top: número+unidade;
margin-right: número+unidade;
margin-bottom: número+unidade;
margin-left: número+unidade;
}

… combinado com os super poderes da margem:

a propriedade abreviada margin

/* topo direita abaixo esquerda */
element {
margin: auto auto auto auto;
}

É possível declarar a sua margem com um, dois, três ou quatro valores. Veja como ela se comporta em cada caso:

Brinque com a margem

/* adiciona uma margem de 10px para todos os lados*/
element {
margin:10px;
}

/* adiciona uma margem de 20px ao topo e abaixo
e uma margem de 5px a esquerda e a direita*/
element {
margin:20px 5px;
}
/* adiciona uma margem de 50px ao topo
e de 10px para a direita e esquerda
e de 300 px abaixo */
element {
margin:50px 10px 300px;
}

Entendeu? Divertido, não? Se você ainda está lendo deve gostar.

Outline

Essa propriedade não é muito usada, provavelmente por conta da falta navegadores que suportem o CSS 2.1. Essa é uma propriedade, eu garanto, e como tal conta com sua versão abreviada. Funciona quase igual à borda abreviada. Para que possamos chamar isso aqui de guia, ela tem de estar presente. Então:

Propriedades outline

element {
outline-width: número+unidade;
outline-style: (vários);
outline-color: cor || #hex || (rgb / % || 0-255);
}

Abreviada:

Propriedade outline abreviada

element {
outline:3px dotted gray;
}

Para evitar a repetição, confira como a propriedade border abreviada funciona e entenda o funcionamento esperado e os inesperados dessa propriedade.

List-style

É isso, o último. Não é muito usado, por isso guardei até o fim. Segue:

Propriedade list-style

element {
list-style-type: (vários);
list-style-position:inside || outside;
list-style-image:url(image.png);
}

Os valores por padrão:

element {
list-style-type:disc;
list-style-position:outside;
list-style-image:none;
}

Para não nos estendermos, segue um exemplo final:

exemplo abreviado de list-style

ul li {
list-style:square inside url(image.png);
}

/* nesse caso, se a imagem.png não estiver disponível
exibe um quardado */

FIM.
Espero que esse guia sirva de referência por vários anos para as suas dúvidas sobre abreviações de CSS.

Este post foi publicado em 22 de January de 2008. na categoria Programação, Utilidade Pública.Você pode acompanhar os comentários deste posts através deste RSS 2.0.

Você pode deixar um comentário, ou fazer um trackback do seu site.