Micro-tuto: abreviar estilos de fuentes

[metacortex]

Este dato me pareció importante y quise compartirlo, aunque es muy posible que algunos ya lo sepan.

Algunas personas colocamos los estilos de fuentes así:

Código:

.fuente {
	font-size: 12px;
	font-family: Arial, Helvetica, Sans-serif;
	font-weight: bold;
	line-height: 120%;
	font-variant: uppercase;
	font-style: italic;
}

Ahora miren esto, da el mismo resultado:

Código:

.fuente {
	font: italic uppercase bold 12px/120% Arial, Helvetica, Sans-serif;
}

¿Tremendo no? Cada elemento debe obedecer a un orden específico y es éste:

Código:

.fuente {
	font: [1] [2] [3] [4]/[5] [6];
}

Donde

1. font-style
2. font-variant
3. font-weight
4. font-size
5. line-height
6. font-family



Más info: http://www.eyeofdesign.com/css/font.php

[caricatos]

Hola:

Buen aporte meta, te invito a que lo insertes en las FAQs...

Sobre este tipo de sintaxis para estilos compuestos, se puede extender a los bordes (border-width, border-style y border-color) y a los fondos, véase FAQ-24.

Ejemplos:
.bordeAbreviado {
border: 3px inset gray;
}

.fondoAbreviado {
background: #eeeeee url(fondo.jpg) no-repeat center center;/* suelo usarlo con mucha frecuencia */
}

Saludos

[kahlito]

Interesante aportación