Foros del Web - Micro-tuto: abreviar estilos de fuentes

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Micro-tuto: abreviar estilos de fuentes (http://www.forosdelweb.com/f53/micro-tuto-abreviar-estilos-fuentes-555641/)

Micro-tuto: abreviar estilos de fuentes

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

:borracho:

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

Re: Micro-tuto: abreviar estilos de fuentes

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 :arriba:

Re: Micro-tuto: abreviar estilos de fuentes

Interesante aportación :arriba: