Abreviando declarações e valores em regras CSS

Introdução

É comum encontrar-se em muitos artigos sobre CSS escritos em blogs e sites, em textos de posts em fóruns, em listas de discussão e até mesmo em revistas e jornais, diferentes referências e denominações equivocadas para os componentes de uma regra CSS

Seletores são chamados de elementos ou de tags, propriedades são chamadas de seletores ou de atributos, valores são chamados de atributos ou de propriedades, declarações são chamadas de regras ou funções CSS e por aí vai em uma diversificada combinação dos termos acima citados em uma salada que acaba por confundir iniciantes e as vezes até mesmo outros já com alguma experiência com folhas de estilo em cascata.

Com a finalidade de facilitar o entendimento desta matéria e esclarecer a confusão que vem se formando em torno do assunto, vamos rever a sintaxe e a terminologia de uma regra CSS para que quando eu escrever seletor, declaração, propriedade e valor, não haja dúvidas sobre a porção da regra CSS a que estou me referindo e você não fique se perguntando onde estão os "atributos CSS, as tags CSS, e outros tantos termos equivocados".

Vejamos o que diz as Recomendações do W3C para Folhas de Estilo, nível 1 na seção intitulada Conceitos Básicos

O projeto, ou desenho do layout, das folhas de estilos é fácil. É preciso apenas conhecer um pouco da linguagem HTML e possuir noções básicas dos termos usados em publicação eletrônica. Como exemplo, para ajustar a cor das letras de um elemento h1 para azul, basta fazer:

h1 {color: blue}

Esse exemplo mostra o que é uma regra simples em CSS. Uma regra CSS divide-se em duas partes: um selector h1 e uma declaração color: blue.

Por sua vez, a declaração também possui duas partes: uma propriedade color e seu valor blue.

Embora esse exemplo especifique apenas uma das várias propriedades necessárias para montar um documento HTML, ela constitui por si só uma folha de estilo.

Quando for combinada com outras folhas de estilos ela determinará a apresentação final do documento (uma característica fundamental é que as folhas de estilo podem ser combinadas).

O seletor funciona como a ponte de ligação entre o documento HTML e a folha de estilo, e todos os elementos HTML podem se constituir em possíveis seletores. Os vários elementos HTML estão definidos na Recomendação HTML continua...

Como vimos, a Recomendação do W3C define claramente que uma regra CSS é composta de um seletor e uma declaração e que a declaração compreende uma propriedade e um valor.

Na regra CSS mostrada a seguir:

CSS
h1 {color: blue}

a terminologia correta é:

e a sintaxe correta é:

Estes são os termos normatizados de uma regra CSS e os que usaremos. Portanto, não existe "atributo CSS" ou "tag CSS" ou "elemento CSS" ou "função CSS" [ nota: as CSS3 criaram funções CSS, tais como calc e rgb() ] ou tantos outros equivocadamente escritos.

Não é do escopo deste tutorial detalhar as boas práticas de escrita das regras em uma folha de estilos.
Sobre este assunto escrevi e recomendo a leitura do tutorial Dicas básicas para projetar folhas de estilos.

Abreviando valores de cores hexadecimais

O formato hexadecimal é uma das opções sintáticas mais usadas para se escrever o valor das cores em regras CSS. A regra a seguir define que os parágrafos serão na cor vermelha (#ff0000).

CSS
p {color: #ff0000;}

e que poderá ser abreviada para:

CSS
 p {color: #f00;}

é válido abreviar cores hexadecimais para 3 dígitos. Valores escritos com 3 dígitos são interpretados como se cada um dos dígitos tivesse sido declarado duas vezes, isto é:

genericamente, #abc é equivalente #aabbcc

Exemplos:

é fácil concluir que a abreviação de cores hexadecimais somente é possível para as cores constituidas por 3 pares de dígitos hexadecimais. Cores assim constituidas são chamadas de "web safe colors", que em tradução livre significa "cores seguras para web". Trata-se de um legado do passado quando os computadores eram capazes de processar e apresentar somente um número limitado de cores.

Estilização dos quatro lados de um elemento nível de bloco

Um elemento nível de bloco ou uma 'caixa' admite estilização em seus quatro lados para algumas propriedades como border e padding entre outras.
Por exemplo: você pode definir um padding superior, um padding à direita, um padding inferior e um padding à esquerda para um elemento div.

A sequência em que você escreve os valores para estilizar os quatro lados de uma caixa CSS é rígida e fixa em uma regra CSS e obedece a seguinte ordem:

em cima , lado direito, embaixo, lado esquerdo

Faça uma analogia com o relógio para não esquecer a sequência.
12 horas (superior), 3 horas (direita), 6 horas (inferior), 9 horas (esquerda).

A regra CSS mostrada a seguir

CSS
div {padding: 2px 3px 8px 7px;}

define para a div:

Além da sintaxe mostrada anteriormente é válido abreviar declarações que envolvem os quatros lados de um box de outras 3 maneiras diferentes como mostradas a seguir:

CSS
div {padding: 10px;} 
/* padding de 10px para os 4 lados */
  
div {padding: 6px 8px;} 
/* padding de 6px para os lados superior e 
inferior e de 8px para os lados direito e esquedo */

div {padding: 2px 4px 9px;} 
/* padding de 2px para o lado superior, de 4px para os 
lados direito e esquerdo e de 9px para o lado inferior */

Propriedades que admitem abreviação

Veremos, na sequencia deste tutorial, como abreviar as seguintes propriedades CSS:

  1. margin;
  2. padding;
  3. background;
  4. font;
  5. list;
  6. outline;
  7. border.

Abreviando margin

A regra a seguir define valores para as 4 margens para uma div:

CSS
div {
  margin-top:10px;
  margin-right:8px;
  margin-bottom:0;
  margin-left:5px;
}

E pode ser abreviada para:

CSS
div {
  margin:10px 8px 0 5px;
}

Qualquer declaração de medida CSS igual a ZERO não deve ser seguida de unidade. Não se escreve 0 metros, 0 kilos, 0 litros, 0 pixel, 0 cm3, pois ZERO é ZERO e não precisa ser expresso por uma unidade de medida. Portanto escreva: margin: 0 e não margin: 0px.

Abreviando padding

A regra a seguir define valores para os 4 paddings de um parágrafo:

CSS
p {
  padding-bottom:6px;
  padding-top:12px;
  padding-left:1px;
  padding-right:2px;
}

E pode ser abreviada para:

CSS
div {
  padding:12px 2px 6px 1px;
}

Abreviando background

A regra a seguir define valores para propriedades background de uma div:

CSS
div {
  background-color:#ffc
  background-image:url(fundo.gif);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:20px 10px;
}

E pode ser abreviada para:

CSS
div {
  background:#ffc url(fundo.gif) no-repeat fixed 20px 10px;
}

Abreviando font

A regra a seguir define valores para propriedades de font em um documento:

CSS
body {
  font-style:italic;
  font-variant:small-caps;
  font-weight:bold;
  font-size:11px;
  line-height:15px;
  font-family:Arial, Helvetica, Sans-serif;
}

E pode ser abreviada para:

CSS
body {
  font:italic small-caps bold 11px/15px Arial, Helvetica, Sans-serif;
}

Nota: Para abreviar a propriedade font é obrigatório definir no mínimo os valores de tamanho e família da font. Os demais valores são facultativos. A ordem de declaração dos valores é importante e deve ser assim:

  1. começar com font-style, font-variant e font-weight sendo que estes três valores são facultativos e podem ser escritos em qualquer ordem;
  2. a seguir declarar obrigatoriamente font-size e opcionalmente line-height (font-size/line-height);
  3. finalmente declarar obrigatoriamente font-family.

Abreviando list

A regra a seguir define valores para propriedades de listas:

CSS
ul {
  list-style-type:square;
  list-style-position:inside;
  list-style-image:url(image.gif);
}

E pode ser abreviada para:

CSS
ul {
  list-style:square inside url(image.gif);
}

A propriedade: list-style-type pode ser abreviada para list-style.
Por exemplo: list-style-type:none pode ser abreviada para list-style:none;

Abreviando outline

A propriedade outline destina-se a colocar uma margem ao redor de um elemento, com a finalidade de destacá-lo no contexto. Difere da propriedade border por não interferir com as dimensões do box model, isto é, não ocupa espaço no box do elemento e em consequência não afeta o posicionamento do box e nem dos boxes adjacentes.

A regra a seguir define a marcação de um 'destaque' em linha vermelha soólida de 1px ao redor do elemento h2:

CSS
p {
  outline-color:#f00;
  outline-style:solid;
  outline-width:1px;
}

E pode ser abreviada para:

CSS
p {
  outline: #2daebf dashed 5px;
}

Exemplo: Para este parágrafo foi definida a propriedade outline) de 5px em linha tracejada na cor azul que será visualizado nos navagadores modernos. Convém ressaltar que por padrão os navegadores devem destacar com outline todo link de uma página sempre que a ele for dado o foco(por exemplo: acessado pelo teclado). Tal recomendação visa a facilitar a acessibilidade aos links fornecendo uma maneira inequívoca de o usuário identificar o link em que se encontra e é uma exigência de acessibilidade.

Abreviando border

A regra a seguir define valores para propriedades de borda:

CSS
div {
  border-width:1px;
  border-style:solid;
  border-color:#f00;
}

E pode ser abreviada para:

CSS
div {
  border:1px solid #f00;
}

A regra a seguir define valores para espessuras de borda:

CSS
p {
  border-top-width:2px;
  border-right-width:1px;
  border-bottom-width:3px;
  border-left-width:5px;
}

E pode ser abreviada para:

CSS
p {
  border-width:2px 1px 3px 5px;
}

A regra a seguir define valores para cores de borda:

CSS
h1 {
  border-top-color:#f00;
  border-right-color:#ccc;
  border-bottom-color:#00f;
  border-left-color:#999;
}

E pode ser abreviada para:

CSS
p {
  border-color:#f00 #ccc #00f #999;
}

A regra a seguir define valores para estilos de borda:

CSS
p {
  border-top-style:solid;
  border-right-style:ridge;
  border-bottom-style:double;
  border-left-style:dotted;
}

E pode ser abreviada para:

CSS
p {
  border-style:solid ridge double dotted;
}

Compartilhe essa matéria com seus amigos

logo twitter logo facebook logo linkedin logo reddit

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.