você está aqui: Home  → Arquivo de Mensagens

Notação abreviada para elementos css

Colaboração: Rubens Queiroz de Almeida

Data de Publicação: 21 de setembro de 2015

Em arquivos de estilo CSS, podemos definir um elemento como:

  margin-top:1px;
  margin-right:2px;
  margin-bottom:5px;
  margin-left:1px;

O elemento margin pode ser definido também como:

  margin: 1px 2px 5px 1px;

Mas como saber a ordem em que os valores são escritos? Na verdade é bastante simples, os valores são especificados no sentido horário. Começamos pelo valor do topo (margin-top), em seguida passamos para a direita (margin-right), fundo (margin-bottom), e finalmente a esquerda (margin-left).

Pense que cada caractere economizado com uma notação abreviada é um caractere a menos a ser transmitido quando alguém acessa sua página. Com a notação completa, primeiro exemplo, temos 70 caracteres, já na segunda notação, com abreviação, temos apenas 25 caracteres, uma economia substancial.

A imagem abaixo, do artigo "CSS Shorthand Clockwise Rule", ilustra muito bem este conceito:

Mas podemos abreviar ainda mais. Podemos utilizar três, dois ou mesmo apenas um parâmetro. Observe pelas cores nas imagens como os parâmetros são calculados. Por exemplo, se especificarmos apenas um valor (margin: 1px;), o mesmo valor se aplicará a todos os lados (topo, fundo, direita e esquerda).

Com três parâmetros

Com dois parâmetros

Com um parâmetro

Esta regra pode ser utilizada também para a diretiva CSS padding.

Referência: Este texto foi baseado em grande parte no artigo CSS Shorthand Clockwise Rule



Veja a relação completa dos artigos de Rubens Queiroz de Almeida

 

 

Opinião dos Leitores

Seja o primeiro a comentar este artigo
*Nome:
Email:
Me notifique sobre novos comentários nessa página
Oculte meu email
*Texto:
 
  Para publicar seu comentário, digite o código contido na imagem acima
 


Powered by Scriptsmill Comments Script