CSS avanzado

1.1. Propiedades shorthand

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;
}