Propieades CSS con sintaxis corta

Una de las posibilidades de CSS es la de utilizar una sintaxis corta, lo que posibilita utilizar multiples propiedades en una sola lína. Utilizar una sintaxis corta mejora la visibilidad y optimiza el archivo CSS.

A continuación se muestran varias propiedades con su sintaxis corta.

FONT
Sintaxis corta:

font: font-style | font-variant | font-weight | font-size | line-height | font-family

Por ejemplo:

font-family: serif;
font-size: 1.4em;
font-weight: bold;

quedaría:

font: bold 1.4em serif;

MARGIN y PADDING
Sintaxis corta:

margin: margin-top | margin-right | margin-bottom | margin-left
padding: padding-top | padding-right | padding-bottom | padding-left

Por ejemplo:

padding-top: 1px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 3px;

quedaría:

padding: 1px 4px 3px 4px;

BORDER
Sintaxis corta:

border: border-width | border-style | color

Por ejemplo:

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

quedaría:

border: 1px solid #000;

border-top, border-right, border-bottom y border-left funcionarían de un modo similar a la hora de aplicar este tipo de sintaxis. Así por ejemplo para definir un borde derecho sería:

border-right: 4px dotted #CCC;

LIST-STYLE
Sintaxis corta:

list-style-type | list-style-position | list-style-image

Por ejemplo:

list-style-position: inside;
list-style-image: url(flecha.gif);
list-style-type: disc;

quedaría:

list-style: disc inside url("flecha.gif");

BACKGROUND
Sintaxis corta:

background: background-color | background-image | background-repeat | background-attachment | background-position

Por ejemplo:

background-color: #EEE;
background-image: url(bg.gif);
background-attachment: fixed;

quedaría:

background: #EEE url(bg.gif) fixed;


La utilización de esta sintaxis es soportada tanto por IE, como por Mozilla y Opera. Únicamente es parcialmente soportada por navegadores antiguos como IE4 o NS4.