Abreviando o CSS, deixe o seu código menor e mais eficiente
Por que abreviar o código? Para ficar menor (em tamanho) e de fácil leitura. Irei colocar os códigos que são passíveis de abreviação da maneira enorme e depois o código abreviado.
Quatro valores diferentes para margin ou padding:
#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
(auto, 0, px, pt, em ou % )
}
#div {
margin:0 5px 10px 15px;
(top right bottom left)
}
Três valores diferentes para margin ou padding:
#div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 20px;
}
#div {
margin:10px 20px 0;
(top right/left bottom)
}
Dois valores diferentes para margin ou padding:
#div {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#div {
margin:0 auto;
(top/bottom left/right)
}
Propriedades de borda:
#div {
border-width: 5px;
(thin, thick, medium or set value) (default = medium)
border-style: dotted;
(solid, dashed, dotted, double, etc) (default = none)
border-color: blue;
(named, hex, rgb or 0-255) (default = valor dos elementos/ elemento parentes)
}
#div {
border:5px dotted blue;
}
Agora só mechendo na largura da borda, da mesma forma que margin e padding:
#div {
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;
}
#div {
border-width:3px 2px;
}
Background:
#div {
background-color: #CCCCCC;
(named, hex, rgb or 0-255) (default = transparent)
background-image: url(images/bg.gif);
(url or none) (default = none)
background-repeat: no-repeat;
(repeat, repeat-x, repeat-y ou no-repeat) (default = repeat)
background-attachment: scroll;
(fixed ou scroll) (default = scroll)
background-position: top left;
(top, right, left, bottom ou center) (default = 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) (default = varia de acordo com navegador)
font-size: 12px;
(xx-small, medium, x-large, etc) (default = medium)
font-weight: bold;
(normal, bold, bolder, lighter, 100-900 ou inherit) (default = normal)
font-style: italic;
(normal, italic ou oblique) (default = normal)
font-variant: normal;
(normal ou small-caps) (default = normal)
line-height: 1.5;
(normal, px, pt, em, num ou %) (default = normal)
}
#div {
font:italic bold 12px/1.5 Verdana, Arial, Helvetica;
}
List:
#div {
list-style-image: url(images/bullet.gif);
(url ou none) (default = none)
list-style-position: inside;
(inside ou outside) (default = outside)
list-style-type: square;
(circle, disc, square, etc) (default = disc)
}
#div {
list-style:square inside url(images/bullet.gif);
}
Cores:
Black: #000000 para #000
Blue: #0000ffpara#00f
Dark Grey: #666666para#666
Light Grey: #ccccccpara#ccc
Orange: #ff6600para#f60
White: #ffffffpara#fff
Os códigos foram tirados deste post do blog Leigeber.
Update:
Foi mal galera, o código tava cheio de <em> e </em>, erro meu. =/
