Definición de estilos CSS Shorthand

Disminuye el peso de tus hojas de estilo utilizando la forma shorthand de especificación CSS, que no es más que una manera reducida de escribir las propiedades de estilos.

Shorthand

Vamos a explicar cómo escribir de forma reducida nuestras reglas CSS para que nuestros archivos de estilo tengan menos peso y sean más entendibles a la hora de una actualización.

Según la W3C hay dos formas de escribir la misma regla de CSS: la estándar y la shorthand. Una es la larga y la otra es la reducida.

Propiedad Font (fuente)

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

Ejemplo:

P {font: italic normal bold 12px/14pt Verdana, Tahoma, Arial}

Propiedad 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)

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}