CSS: Abreviando propriedades (Shorthand)

Algumas propriedades CSS podem ser combinadas em propriedades abreviadas.

Estas abreviações foram criadas para tornar mais fácil a escrita e interpretação dos códigos CSS.

Algumas propriedades que permitem abreviação:

background, border, margin, padding, font entre outros.

Exemplos:

p { padding: 4px }

Abreviação para: padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px;

p { padding: 2px 5px }
define os valores para: (top/bottom) (left/right)

p { padding: 2px 5px 3px }
define os valores para: (top) (left/right) (bottom)

p { padding: 2px 5px 3px 4px}
define os valores para: (top) (right) (bottom) (left)

obs: A ordem das propriedades seguem o sentido horário (top/right/bottom/left).

Mais exemplos:

–> background
div
{
background-color: yellow;
background-image: url(01.jpg);
background-repeat: no-repeat;
background-position: bottom left ;
}

div
{
background: yellow url(01.jpg) no-repeat bottom left;
}

–> border
p
{
border-top-style:groove;
border-right-style:dotted;
border-bottom-style:dashed;
border-left-style:double;
}

p
{
border-style:groove dotted dashed double
}

–> border
p {
font-style: normal;
font-weight: bold;
font-size: 12px;
font-family: Arial;
}

p
{
font: normal bold 12px Arial
}