CSSLab

Ahorrando hasta en código

Tweet

En la sintaxis de definiciones de CSS, es posible resumir algunas propiedades (tags), lo que nos da una gran ventaja ahorrándonos líneas de código, lo que a la larga hace que nuestra hoja de estilos pese bastante menos. Con esto también logramos que nuestro código sea más entendible, ya que juntamos en una sóla línea varios parámetros que pueden estar esparcidos en el mismo o varias classes e ID‘s.

El orden y los parámetros de cada propiedad no son obligatorios respetarlos literalmente, pero recomiendo que por lo menos sigan ese mismo orden. Por experiencia propia…

Font:

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

span.destacado {font: italic normal bold 14pt Verdana, Tahoma, Arial;}

Background:

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

body {background: #F00 url(../fondo.gif) repeat-y right left ;}

Margin:

longitud | porcentaje | auto

#contenedor {margin: 15px;} /* todos los márgenes con 15px */
p {margin: 12px 8px;} /* márgenes superior e inferior con 12px, márgenes izquierdo y derecho con 8px */
ul {margin: 5px 2px 0 4px;} /* sentiro horario desde arriba: margen superior a 1px, derecha a 2px, abajo con 0px e izquierdo con 4px */

Padding:

longitud | porcentaje | auto

div#contenido {padding: 5em 1em;}

Border:

border-width || border-style || color

h1 {border: 2px dotted red;}