css-shorthand

Una vez que hemos dominado CSS, nos cuesta creer que no haya una forma más fácil de definir valores. Y sí, la hay, es CSS Shorthand, una definición de estilos que nos permitirá definir todos los valores relacionados con una propiedad en una sola línea, para así aligerar nuestro código y que sea más entendible. Es decir, hay dos formas de escribir la misma regla CSS, la estándar (larga) y la shorthand (corta).

En esta lista se enumeran todos los atributos de cada propiedad, ordenados en la forma con la que se pondrían en shorthand:

Font (fuente)

font-style || font-variant || font-weight || font-size / line-height || familia de fuente

Ejemplo:

P {font: italic normal bold 10px/12pt Helvetica, Tahoma, Arial}

Background (fondo)

background-color || background-image || background-repeat || background-attachment || background-position

Ejemplo:

Body {background: #FFF url(../images/ejemplo.gif) no-repeat fixed center}

Margin (Margen)

Hay que destacar un pequeño truco para usar los valores de los márgenes o paddings (o todo lo que contengan valores superior, inferior…), ya que se sitúan conforme a las agujas del reloj: primero superior, después derecho, luego inferior y finalmente izquierdo.
longitud | porcentaje | auto

Ejemplo:

Body {margin: 5px} /* todos los márgenes a 5px */ P {margin: 2px 4px} /* márgenes superior e inferior a 2px, márgenes izquierdo y derecho a 4px */ DIV {margin: 1px 2px 3px 4px} /* margen superior a 1px, right margin a 2px, bottom margin a 3px, left margin a 4px */

Padding (Relleno)

longitud | porcentaje | auto

Ejemplo:

Body {padding: 2em 3em 4em 5em} /* Si definimos cuatro valores estamos aplicando el padding superior, derecho, inferior e izquierdo */ Body {padding: 2em 4em) /* Si definimos dos o tres valores, los valores faltantes se toman del lado opuesto: superior e inferior a 2em, derecho e izquierdo a 4em */ Body {padding: 5em} /* Si definimos un solo valor se aplican a todos los lados */

Border (Borde)

border-width || border-style || color

Ejemplo:

H3 {border: thick dotted blue}

Vía | Desarrolloweb