The Wayback Machine - https://web.archive.org/web/20101125192242/http://maujor.com/tutorial/abreviacss.php

:: Abreviando declarações e valores em regras CSS ::

Relembrando a sintaxe e a terminologia de uma regra CSS

É 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}

Este exemplo mostra o que é uma 'regra' simples em CSS. Uma regra é composta de duas partes principais: um selector ('H1') e uma declaração ('color: blue'). Por sua vez, esta declaração também possui duas partes: uma propriedade ('color') e seu valor ('blue'). Embora este 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 estilo 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 funcionar como possíveis seletores. Os vários elementos HTML estão definidos na Recomendação HTML

etc.”

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 a seguir:

H1 {color: blue}

a terminologia correta é:

  • H1 - seletor;
  • {color: blue} - declaração;
  • color - propriedade;
  • blue - valor.

e a sintaxe correta é:

  • Escrever o seletor e a seguir a declaração;
  • A declaração deve estar entre { } (chaves);
  • Na declaração, separar a propriedade e o valor por : (dois pontos);
  • É permitido usar espaços em branco em qualquer quantidade entre cada um dos caracteres da regra;
  • É permitido grupar declarações em uma mesma regra e neste caso as declarações deverão ser separadas por ; (ponto-e-vírgula) podendo todas elas estar em uma mesma linha ou em linhas distintas. É facultativo o uso de ; (ponto-e-vírgula) após a última declaração na regra;
  • É indiferente o uso de maiúsculas e minúsculas em uma regra CSS, contudo as classes e ID's devem seguir a mesma grafia constante da marcação.

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" 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).

p {color: #ff0000;}

e que poderá ser abreviada para:

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 sido declarado duas vezes, isto é:

genericamente, #abc é equivalente #aabbcc

Exemplos:

#c30 = #cc3300
#999 = #999999
#ff0 = # ffff00
#d61 = #dd6611

É fácil concluir que a abreviação de cores hexadecimais somente é possível para as cores constituidas por 3 pares de dígitos hexadecimais.

Valores para os 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 uma div.

A sequência em que você escreve os valores para estilizar os quatro lados de uma 'caixa' é 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 div {padding: 2px 3px 8px 7px;} define para a div:
um padding inferior igual a 8px:
um padding superior igual a 2px;
um padding à esquerda igual a 7px:
um padding à direita igual a 3px.

Além da mostrada acima é válido abreviar declarações que envolvem os quatros lados de uma 'caixa' de outras 3 maneiras diferentes como mostradas a seguir:

  1. div {padding: 10px;} padding de 10px para os 4 lados;
  2. div {padding: 6px 8px;} padding de 6px para os lados superior e inferior e de 8px para os lados direito e esquedo;
  3. 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 ao longo deste tutorial, como abreviar as seguintes propriedades CSS:

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

Abreviando margin

As regras a seguir definem valores para as 4 margens para uma div: 

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

E pode ser abreviada para:

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

Abreviando padding

As regras a seguir definem valores para os 4 paddings de um parágrafo: 

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

E pode ser abreviada para:

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

Abreviando background

As regras a seguir definem valores para propriedades background de uma div: 

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

E pode ser abreviada para:

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

Abreviando font

As regras a seguir definem valores para propriedades de font em um documento: 

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:

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 sedo 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

As regras a seguir definem valores para propriedades de listas: 

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

E pode ser abreviada para:

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 é pouco conhecida e empregada. Serve para 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.

As regras a seguir definem a marcação de um 'destaque' em linha vermelha sólida de 1px ao redor do elemento h2: 

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

E pode ser abreviada para:

h2 {
outline:#f00 solid 1px;
}

Exemplo: Para este parágrafo eu defini um destaque (outline) de 5px em linha tracejada na cor azul que será visualizado nos Mozillas e no Ópera, mas não no Internet Explorer que não suporta outline.

Abreviando border

As regras a seguir definem valores para propriedades de borda: 

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

E pode ser abreviada para:

div {border:1px solid #f00;}

As regras a seguir definem valores para espessuras de borda: 

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

E pode ser abreviada para:

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

As regras a seguir definem valores para cores de borda: 

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

E pode ser abreviada para:

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

As regras a seguir definem valores para estilos de borda: 

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

E pode ser abreviada para:

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

Última modificação: 2008/03/4 22:11:47 GMT

Publicado em: 2006-04-10

banner clickmaujor
ir topo
Morty Proxy This is a proxified and sanitized view of the page, visit original site.