Es muy frecuente encontrar código CSS en varias líneas que podrían ser simplificadas en una sola. Muchos diseñadores CSS prefieren la versión “contraída” del CSS para tener menos código, reducir el tamaño de sus archivos CSS, etc.

Acá presentamos algunos ejemplos conocidos sobre cómo se podrían simplificar algunas línea de código CSS:

Backgrounds:

CSS Expandido ( background ) – – – – – – – >
background-color: red;
background-position: top;
background-position: center;
background-image: url(../);
background-attachment: scroll;
background-repeat: repeat-x;

contracción – – – – – – – >
background: url(../) red top center scroll repeat-x;

Márgenes:

CSS Expandido ( margin / padding ) – – – – – – – >
margin-top: 10px;
margin-left: 5px;
margin-right: 5 px;
margin-bottom: 10px;

contracción 1 – – – – – – – >
margin: 10px 5px 10px 5px ;
contracción 2 – – – – – – – >
margin: 10px 5px;

Tipos de letra:

CSS Expandido ( font ) – – – – – – – >
font-family: Arial, Helvetica, “Trebuchet MS”;
font-size: 12px;
font-style: italic;
font-weight: bold;
line-height: 15px;

contracción – – – – – – – >
font: bold italic 12px/15px Arial, Helvetica, “Trebuchet MS”;

Bordes:

CSS Expandido ( border ) – – – – – – – >
border-top: 1px;
border-bottom: 1px;
border-left: 1px;
border-right: 1px;
border-color: red;
border-style: solid;

contracción – – – – – – – >
border: 1px solid red;

Colores:

CSS Expandido ( color ) – – – – – – – >
color:#0099FF;
color:#000000;
color:#660000;

contracción – – – – – – – >
color:#09F;
color:#000;
color:#600;

Listas:

CSS Expandido ( list-style ) – – – – – – – >
list-style-image: url(../);
list-style-position: inside;
list-style-type: circle;

contracción – – – – – – – >
list-style: url(../) inside circle;