Estava eu hoje pela manhã lendo artigos sobre CSS e achei um muito legal no site Leigeber. Esse artigo mostra como escrever propriedades CSS de forma resumida deixando nosso arquivo css com um tamanho reduzido.
Confira abaixo as propriedades da forma não resumida e a forma resumida:

Margem & Padding

#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;

}

#div {
margin:0 5px 10px 15px;
/*superior direita inferior esquerda*/
}

e

#div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 20px;
}


#div {
margin:10px 20px 0;
/*superior direita/esquerda inferior*/
}

e

#div {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#div {
margin:0 auto;
/*topo/inferior esquerda/direita*/
}

e

#div {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}

#div {
margin:50px;
/*topo/direita/inferior/esquerda*/
}

Border

#div {
border-width: 5px;
border-style: dotted;
/*(solid, dashed, dotted, double, etc) (padrão = nenhum)*/
border-color: blue;
/*as cores podem ser: nome da cor, hexadecimal ou rgb de 0 a 255 */
}

#div {
border:5px dotted blue;
}

e

#div {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #666666;
}

#div {
border-right:2px solid #666;
}

e

#div {
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;
}

#div {
border-width:3px 2px;
}

Fundo

#div {
background-color: #CCCCCC;
/*as cores podem ser: nome da cor, hexadecimal ou rgb de 0 a 255 */(padrão = transparente)*/
background-image: url(images/bg.gif);
background-repeat: no-repeat;
/*repeat, repeat-x, repeat-y ou no-repeat) (padrão = repeat*/
background-attachment: scroll;
/*(fixed ou scroll) (padrão = scroll)*/
background-position: top left;
/*topo, direita, esquerda, infeior ou centro) (padrão = 0% 0%)*/
}

#div {
background:#CCC url(images/bg.gif) no-repeat 0 0;
}

Font

#div {
font-family: Verdana, Arial, Helvetica;
/*Verdana, Arial, “Times New Roman”, etc */
font-size: 12px;
font-weight: bold;
font-style: italic;
font-variant: normal;
/*normal ou small-caps (padrão = normal)*/
line-height: 1.5px;
}

defina

 #div {
font-family: Verdana, Arial, Helvetica;
font-size: 12px;
font-weight: bold;
font-style: italic;
font-variant: normal;
line-height: 1.5px;
}

#div {
font:italic bold 12px/1.5 Verdana, Arial, Helvetica;
}

Listas

#div {
list-style-image: url(images/bullet.gif);
list-style-position: inside;
list-style-type: square;
/*tipos de marcador circle, disc, square. (padrão = disc)*/
}

#div {
list-style:square inside url(images/bullet.gif);
}

Cores

Black: #000000 to #000
Blue: #0000ff to #00f
Dark Grey: #666666 to #666
Light Grey: #cccccc to #ccc
Orange: #ff6600 to #f60
White: #ffffff to #fff
Link original: Leigeber

Isso vai interessar você também