Categorias: Code CSS

CSS shorthand

No português é conhecido como CSS curto, resumido ou abreviado.

Existem algumas formas de escrever um CSS, mas ao fazê-lo resumido deixa o arquivo final menor, o que ajuda no desempenho das páginas.

Background

Completo:

background-color: #000;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;

Resumido:

background: #000 url('image.gif') no-repeat top left fixed;

Border

Completo:

border-width: 1px;
border-style: solid;
border-color: #000;

Resumido:

border: 1px solid #000;

Margin

Completo:

margin-top: 1em;
margin-right: 1em;
margin-bottom: 2em;
margin-left: 2em;

Resumido:

margin: 1em 1em 2em 2em;

Padding

Completo:

padding-top: 1em;
padding-right: 1em;
padding-bottom: 2em;
padding-left: 2em;

Resumido:

padding: 1em 1em 2em 2em;

Font

Completo:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1.5em;
line-height: 150%;
font-family: Georgia, "Times New Roman", serif;

Resumido:

font: bold italic small-caps 1.5em/150% Georgia, "Times New Roman", serif;

List

Completo:

list-style-type: circle;
list-style-position: inside;
list-style-image: url('bullet.gif');

Resumido:

list-style: circle inside url('bullet.gif');