Una de las posibilidades de CSS es la de utilizar una sintaxis corta, lo que posibilita utilizar multiples propiedades en una sola línea. 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:
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-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.