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
