oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso CSS - Lección 4: Fuentes
Venga vamos a ver que aprendemos sobre las fuentes y su uso en CSS
Propiedad "font-family"
La propiedad font-family la usaremos para establecer una lista ordenada de fuentes. Podemos establecer varias fuentes para en caso de que alguna de ellas no este instalada en el ordenador desde el que visitamos el sitio siga probando hasta encontrar una fuente que si este instalada.
El orden de las fuentes a insertar en la propiedad será primero la preferida seguida de las alternativas. veamos un ejemplo de como tendriamos que poner el código en nuestra hoja de estilos:
h1 {font-family: georgia, garamond, serif;}
p {font-family: arial, verdana, sans-serif;}
De modo que los encabezados se mostrarían usando la fuente "georgia" y en caso de no estar disponible mostraría la fuente "garamond" y así sucesivamente. Con los párrafos pasaría lo mismo el navegador mostraría la fuente del párrafo en "arial" y en caso de no estar disponible lo intentaría mostrar en "verdana" y así sucesivamente.
Propiedad "font-style"
La propiedad font-style nos dirá que valor muestra la fuente elegida, hay tres tipos de valores: normal, italic, y oblique.
En el siguiente ejemplo todos los párrafos aparecerían en cursiva:
h1 {font-family: georgia, garamond, serif;}
p {font-family: arial, verdana, sans-serif; font-style: italic;}
Propiedad "font-size"
La propiedad font-size la usaremos para establecer el tamaño de la fuente
Para definir el tamaño de la fuente lo podemos hacer mediante "píxeles", y "porcentajes". Yo recomiendo usar siempre los píxeles.
h1 {font-family: georgia, garamond, serif; font-size: 25px;}
p {font-family: arial, verdana, sans-serif; font-style: italic; font-size: 8px;}
Mediante las propiedades que acabas de aprender podríamos cambiar el tamaño y el estilo de fuente de un sitio web con muchas páginas en tan solo unos minutos, puesto que los cambios que hiciesemos en nuestra hoja de estilos automáticamente se aplicaría a todas nuestras páginas. ¿Ves como es importantísimo usar CSS a la hora de crear un sitio web?.
Quiero aprender más!!!
- Avanzar a Lección 5: Texto
- Retroceder a Lección 3: Fondos y colores
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®