Foros del web, para los que viven de bits

metacortex · 08-feb-2008, 22:30

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 · 09-feb-2008, 00:07

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 · 09-feb-2008, 09:15

Interesante aportación

08-feb-2008, 22:30	#1 (permalink)
metacortex Moderador Fecha de Ingreso: junio-2004 Ubicación: Venezuela Mensajes: 6.231	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 Más info: http://www.eyeofdesign.com/css/font.php __________________ • Diseño Joomla en Venezuela • Joomlaworks Support Team • JoomLatin.com - Joomla Latino (Pronto) Última edición por metacortex; 08-feb-2008 a las 22:35.

09-feb-2008, 00:07	#2 (permalink)
caricatos Moderador Fecha de Ingreso: noviembre-2002 Ubicación: Torremolinos (Málaga) Mensajes: 12.219	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 __________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo

09-feb-2008, 09:15	#3 (permalink)
kahlito Colaborador Fecha de Ingreso: marzo-2003 Ubicación: En el Estrecho y el mar Mensajes: 2.554	Re: Micro-tuto: abreviar estilos de fuentes Interesante aportación __________________ Portafolio Diseño Web Freelance

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado