Abreviando as declarações no CSS

Por Erika Sarti, em 20_05_2008.

Introdução

A grande vantagem do CSS (Cascading Style Sheets) é concentrar todas as declarações num lugar só. Se você quiser fazer todos os títulos da sua página ficarem da mesma cor, por exemplo, não precisa alterar um por um, basta fazer uma única declaração no seu arquivo CSS, que afetará todos os títulos. Isso sem dúvida economiza tanto o tempo de carregamento para exibir sua página no navegador do usuário quanto o seu trabalho na hora de atualizar uma página.

Mas é possível deixar um arquivo CSS ainda menor, abreviando algumas declarações. Junto com um código limpo e comentado, esse pequeno truque vai facilitar muito o desenvolvimento do seu site. Aqui você vai conhecer quais declarações podem ser abreviadas, e como fazer isso.

Note que este tutorial é destinado àqueles que já conhecem os atributos CSS e seus possíveis valores. Se você ainda não está familiarizado com CSS, procure estudar o assunto. Para isso, existe na internet uma grande variedade de tutoriais que são destinados a iniciantes.

A seguir, as abreviações para declarações usadas para fontes, fundo de página, margens, espaçamento, bordas e listas. Os valores das declarações, é claro, são exemplos.


Fontes

As declarações possíveis para a fonte são:

h1	{font-style: italic;
		font-weight: bold;
		font-size: 30px;
		line-height: 120%;
		font-family: Verdana,Tahoma,sans-serif;}

Abreviadas, todas essas declarações podem aparecer em apenas uma linha, na seguinte ordem:

h1	{font: italic bold 30px/120% Verdana,Tahoma,sans-serif;}

Ilustração CSS Os dois primeiros valores, que representam os atributos font-style e font-weight, são opcionais. Se não forem declarados, o navegador assume normal como valor padrão (ou seja, sem itálico e sem negrito, respectivamente).

Já os atributos de tamanho e tipo de fonte são obrigatórios: se algum deles não aparecer, o estilo não irá funcionar. A declaração para o espaçamento entre as linhas, quando presente, deve vir em seguida ao tamanho da fonte, separadas por uma barra (30px/120%).

Note que em elementos que normalmente já são em negrito, como títulos (<h1> a <h6>) e as tags <b> e <strong>, se o bold não for especificado o navegador assumira o valor padrão normal, ou seja, exibirá esses elementos sem o negrito. A mesma coisa acontece com elementos nativamente em itálico, como <i> e <em>.


Fundo

As declarações possíveis para o fundo de um elemento são:

body	{background-color: #F00;
		background-image: url(fundo.png);
		background-repeat: repeat-y;
		background-position: top right;
		background-attachment: fixed;}

Abreviadas, essas declarações aparecem em apenas uma linha:

body	{background: #F00 url(fundo.png) repeat-y top right fixed;}

Aqui, todos os valores são opcionais e podem aparecer em qualquer ordem. A recomendação é sempre utilizar os valores na mesma ordem, simplesmente para facilitar a manutenção do código.


Margens e Espaçamentos

A propriedade margin pode ser abreviada de várias maneiras. Vamos partir da declaração completa:

div	{margin-top: 5px;
		margin-right: 10px;
		margin-bottom: 15px;
		margin-left: 4px;}

Onde temos 4 valores diferentes. Para abreviar esse valor, vamos declará-lo no sentido horário: topo, direita, base e esquerda:

div	{margin: 5px 10px 15px 4px;}

Quando temos dois valores iguais, ou seja, as margens do topo e da base têm um valor, e as margens da esquerda e direita têm outro, como no trecho abaixo:

div	{margin-top: 100px;
		margin-right: 10px;
		margin-bottom: 100px;
		margin-left: 10px;}

Podemos simplificar essa parte declarando apenas dois valores, na "horizontal" e na "vertical":

div	{margin: 100px 10px;}

E, finalmente, quando os quatro valores são iguais, simplesmente declaramos:

div	{margin: 10px;}

O mesmo princípio pode ser aplicado à propriedade padding.


Bordas

O estilo da borda de um elemento pode ser combinado aplicando os mesmos valores a todas as bordas, ou para as quatro bordas separadamente.

O primeiro exemplo aplica o mesmo estilo a todas as bordas:

div	{border-color: #F00;
		border-width: 3px;
		border-style: solid;}

E pode ser simplificado da seguinte maneira:

div	{border: #F00 3px solid;}

Os valores podem vir em qualquer ordem e não são obrigatórios. Porém, é aconselhável definir os três valores, porque cada navegador pode assumir um valor padrão diferente, especialmente se elementos hierarquicamente superiores tiverem os valores da borda já definidos.

Para utilizar valores diferentes em cada borda, também utilizamos a ordem horária. Por exemplo, para definir larguras diferentes para as quatro bordas você pode utilizar

div	{border-width: 14px 5px 1px 80px;}

E o mesmo princípio pode ser utilizado para mudar a cor das bordas separadamente.

Também é possível alterar as propriedades das bordas separadamente utilizando as declarações border-top, border-right, border-bottom e border-left, como no exemplo:

div	{border: #F00 3px solid;
		border-left: #000 1px dotted}

Que primeiro aplica uma borda vermelha em torno do elemento, e depois uma borda preta, mais fina e pontilhada, apenas na borda esquerda.


Listas

As declarações possíveis para uma lista são:

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

Que são abreviadas da seguinte maneira:

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

Se algum dos valores for omitido, o navegador assumirá os valores padrão: sem imagem, usando o símbolo • como marcador e alinhando os marcadores do lado de fora. Nos casos em que usamos uma imagem, é a imagem que será exibida pelo navegador, e o marcador definido será visível apenas se a imagem não carregar.


Finalizando

Como você deve ter percebido, as abreviações em CSS são uma forma simples e fácil de deixar a codificação dos estilos mais organizada e mais "limpa", sem, no entanto, afetar sua compreensão. Colocar essa dica em prática, pode, de fato, contribuir com a sua produtividade :)


Erika Sarti é web designer e trabalha como free-lancer desde 2000, sendo também responsável pelo layout do InfoWester. Mais informações em seu blog - www.erikasarti.com - e em seu portfólio - www.erikasarti.net -.





Mais em HardwareSoftwareRedesGNU/LinuxDicasTutoriaisWeb DesignNotíciasBlogDúvidas