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 igual a 10px direita/esquerda igual a 20px e inferior 0*/
}
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);
}
Link original: Scriptiny