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.

font Tipografía
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
margin Margen
Valores ( <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
padding Relleno
Valores ( <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
border Estilo completo de todos los bordes
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
background Fondo de un elemento
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
list-style Estilo de una lista
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;
}
Auto CMS es nominado al PHP INNOVATION AWARD Desarrolle la clase Auto CMS pensando en crear un apoyo a quienes desean tener presencia en internet sin problemas, de manera rápida, sencilla, y con ...
Que es un Documento HTML ? Guía Rápida Un documento en HTML ("HyperText Markup Language") define la forma en que será desplegada información en un navegador ("Netscape" o "Explorer"), este ...
Firefox 16 Mozilla sigue fiel a su estrategia de lanzar actualizaciones constantes para su navegador Firefox, a pesar de que hasta ahora su esfuerzo no se ha tra...
Según un estudio,Hoteles y Operadores Turísticos son las pymes que más usan redes sociales La crisis está reduciendo no solo el número de puestos de trabajo, sino también el tejido de pequeñas y medianas empresas. De 2010 a 2011 el número d...
Constants on PHP A constant is an identifier (name) for a simple value. As the name suggests, that value cannot change during the execution of the script (except for...
El marketing online Levantar tu negocio online no es tan fácil como muchos supuestos ‘gurus’ nos quieren hacer creer, y cuando tienes todo puesto en marcha debes hacerte ...
Google lanza el que es tal vez su mayor rediseño hasta la fecha ¿Habéis notado algo nuevo, diferente en la página principal de Google? Es posible que aún no, pero en los próximos días os daréis cuenta que Google ha...
Yahoo User Interface 3.4.1 YUI 3.4.1 o Yahoo User Interface 3.4.1. es la última versión estable de una serie de bibliotecas escritas en JavaScript y CSS utilizadas para el desar...
Lo Mas Curioso del CES 2012, Consumer Electronic Show Los organizadores de la Feria Internacional de Productos Electrónicos de Consumo, CES, por sus siglas en inglés, aseguraron que este año alcanzaron un...
Curiosidades Sobre Linux Linus Torvalds desarrolló el kernel de Linux mientras estudiaba en la Universidad de Helsinki en 1991. En 2009 el 75% del código creado para Linu...
La propiedad shorthand en CSS
Tagged on: