Algunas propiedades del estándar CSS 2.1 son especiales, ya que permiten establecer simultáneamente el valor de varias propiedades diferentes. Este tipo de propiedades se denominan "propiedades shorthand" y todos los diseñadores web profesionales las utilizan.
La gran ventaja de las propiedades shorthand es que permiten crear hojas de estilos mucho más concisas y por tanto, mucho más fáciles de leer. A continuación se incluye a modo de referencia la definición formal de las seis propiedades shorthand disponibles en el estándar CSS 2.1.
| Propiedad |
font |
| Valores |
( ( font-style || font-variant || font-weight )? font-size ( / line-height )? font-family ) | caption | icon | menu | message-box | small-caption | status-bar | inherit |
| Se aplica a |
Todos los elementos |
| Valor inicial |
- |
| Descripción |
Permite indicar de forma directa todas las propiedades de la tipografía de un texto |
| Propiedad |
margin |
| Valores |
( unidad de medida | porcentaje | auto ) {1, 4} | inherit |
| Se aplica a |
Todos los elementos salvo algunos casos especiales de elementos mostrados como tablas |
| Valor inicial |
- |
| Descripción |
Establece de forma directa todos los márgenes de un elemento |
| Propiedad |
padding |
| Valores |
( unidad de medida | porcentaje ){1, 4} | inherit |
| Se aplica a |
Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla |
| Valor inicial |
- |
| Descripción |
Establece de forma directa todos los rellenos de los elementos |
| Propiedad |
border |
| Valores |
( border-width || border-color || border-style ) | inherit |
| Se aplica a |
Todos los elementos |
| Valor inicial |
- |
| Descripción |
Establece el estilo completo de todos los bordes de los elementos |
| Propiedad |
background |
| Valores |
( background-color || background-image || background-repeat || background-attachment || background-position ) | inherit |
| Se aplica a |
Todos los elementos |
| Valor inicial |
- |
| Descripción |
Establece todas las propiedades del fondo de un elemento |
| Propiedad |
list-style |
| Valores |
( list-style-type || list-style-position || list-style-image ) | inherit |
| Se aplica a |
Elementos de una lista |
| Valor inicial |
- |
| Descripción |
Propiedad que permite establecer de forma simultanea todas las opciones de una lista |
Si se considera la siguiente hoja de estilos:
p {
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 1.5em;
line-height: 1.5;
font-family: Arial, sans-serif;
}
div {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 7px;
}
h1 {
background-color: #FFFFFF;
background-image: url("imagenes/icono.png");
background-repeat: no-repeat;
background-position: 10px 5px;
}Utilizando las propiedades shorthand es posible convertir las 24 líneas que ocupa la hoja de estilos anterior en sólo 10 líneas, manteniendo los mismos estilos:
p {
font: normal small-caps bold 1.5em/1.5 Arial, sans-serif;
}
div {
margin: 5px 10px;
padding: 3px 5px 10px 7px;
}
h1 {
background: #FFF url("imagenes/icono.png") no-repeat 10px 5px;
}