Embedded Files
DEFINIR ESTILOS DE FUENTES
Contamos con una serie de propiedades relacionadas a fuentes:
font-family
font-size
font-style
font-weight
font-variant
Podemos inicializar algunas o todas las propiedades relacionadas a fuentes. Por ejemplo:
Como podemos observar, hemos definido dos reglas de estilos para los elementos h1 y h2, eso significa que el navegador utilizará esas reglas de fuentes para todas las partes de la página que se utilicen dichos elementos HTML.
La primera regla definida para el elemento h1 es:
h1 {
font-family:times new roman;
font-size:30px;
font-style:italic;
font-weight:bold;
}
Recordemos que para definir la regla de estilo, debemos indicar el nombre del elemento HTML a la que definiremos el estilo (en este caso h1) y luego, entre llaves, todas las propiedades y sus valores separados por punto y coma.
La primera propiedad inicializada es font-family. Algunas de las fuentes más comunes a las que puede acceder el navegador son:
Arial
Arial Black
Arial Narrow
Courier New
Georgia
Impact
Tahoma
Times New Roman
Verdana
En caso que la fuente no esté disponible, el navegador selecciona el estilo por defecto para ese elemento HTML.
Podemos definir varias fuentes por si acaso alguna no se encuentra disponible para el navegador, esto lo hacemos separando por coma todas las fuentes (se eligen de izquierda a derecha):
font-family: verdana, arial, georgia;
La segunda propiedad inicializada es font-size. Hay varias medidas para indicar el tamaño de la fuente (veremos más adelante otros sistemas de medida), en nuestro caso indicamos en píxeles:
font-size:30px;
La tercera propiedad es font-style, que puede tener los siguientes valores :
normal
italic
oblique
La última propiedad es font-weight (peso de la fuente), pudiendo tomar los siguientes valores:
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
Esta propiedad indica el peso de la fuente. Cuanto mayor sea el valor, los caracteres serán más rellenos.
La segunda regla define sólo dos propiedades relacionadas a la fuente:
h2 {
font-family:verdana;
font-size:20px;
}
Las propiedades que no se inicializan quedan como responsabilidad al navegador, quien elegirá los valores correspondientes por defecto.
Existe una última propiedad no utilizada en este ejemplo que es font-variant que puede asumir estos dos valores:
small-caps
normal
Define si la fuente se muestra en mayúsculas tipo normal o pequeñas.
Ejercicio 1
Definir reglas para los elementos HTML: h1,h2,h3,h4,h5 y h6. Inicializar la propiedad font-size con valores decrecientes para cada uno de los elementos (40,30,25,20,15 y 10 píxeles). Inicializar la propiedad font-family para las tres primeros elementos con los valores: Arial, Arial Black y Arial Narrow.
AGRUPAR VARIOS ELEMENTOS CON UNA MISMA REGLA DE ESTILO
Esta característica nos permite ahorrar la escritura de reglas duplicadas para diferentes elementos de HTML.
La sintaxis es disponer los nombres de los elementos HTML a los que queremos aplicar una regla, separados por comas:
h1,h2,h3 {
font-family:verdana;
color:#0000ff;
}
Si queremos la misma fuente y color para los elementos h1,h2 y h3, podemos implementarlo de la siguiente manera:
Ejercicio 2
Definir la misma fuente, color y tamaño de fuente para los elementos p (párrafo) y h6 . Tener en cuenta que cuando vea la página, el texto que se encuentra en el elemento h6 difiere del texto que se encuentra dentro del párrafo por la propiedad font-weight (ya que el elemento h6 es de tipo bold por defecto y el elemento p tiene por defecto normal) .
Debe quedar así:
Page updated
Google Sites
Report abuse