Diseño con CSS

A la hora de maquetar una página, el uso de CSS's se ha hecho indispensable, tanto por la facilidad que nos permite a la hora de hacer cambios, por la reducción de peso de la página y por las nuevas normativas de usabilidad y accesibilidad.
Aqui teneis unas reglas básicas para reducir tambien el código css utilizando la manera abreviada o corta:

div {
margin-top: 10px;
margin-bottom: 15px;
margin-left: auto;
margin-right: 20px;
padding-top: 20px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 20px;
font-family: Verdana, Arial, san-serif;
font-size: 1em;
font-weight: bold;
line-height: 1.4em;
color: #f00;
}

en forma abreviada:

div { margin: 10px 20px 15px auto; padding: 20px 20px 10px 15px; font: bold 1em/1.4em Verdana, Arial, sans-serif; color: #f00; }

Veamos otro ejemplo para ver el margen de una caja, veamos como se pondría la posición:

div.nombreclase { comando: arriba derecha abajo izquierda; }

Si hubiese valores iguales, por ejemplo

div.modelo { margin: 10px 10px 10px 10px;}

podríamos poner:

div.modelo { margin: 10px;}

Para idénticos valores, siguen el orden de las agujas del reloj, quedaría:

div.modelo { margin: superior+inferior derecha+izquierda;}
div.modelo { margin: superior derecho+izquierdo inferior;}

Para elementos que tengan las mismas propiedades:
(elementos x,y,z)

X, Y, Z { color: #666; font-family: Arial, sans-serif; font-size: 10pt; line-height: 18pt; }


Bueno, espero que os sea de utilidad. (agradecimientos a minid.net)

Besitos y sed felices