Programación
{clase 9}
1-Text-align
2-Font
3-font-family
Contenidos 4-Font-size
5-Font-weight
6-font-style
7-Practicas
text-align
La propiedad text-align de CSS establece la alineación
horizontal del contenido a nivel de línea dentro de un
elemento de bloque o caja de celda-tabla. Esto significa que
funciona como vertical-align pero en dirección horizontal.
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all; }
text-align: match-parent;
Ejemplos de text-align
font
La propiedad font permite establecer de una sola vez
los valores para todas las propiedades: font-style,
font-variant, font-weight, font-size, line-height y
font-family en una hoja de estilo.
}
font-family
font-family
La propiedad font-family permite establecer el tipo de letra (fuente)
del elemento.
La propiedad font-family puede tomar como valor el nombre concreto de
una fuente. El nombre de la fuente debe escribirse entre comillas si
contiene espacios (y puede escribirse entre comillas si no contiene
espacios). Si el ordenador no tiene instalada la fuente indicada, el
navegador utilizará una fuente de la familia genérica serif (que se
explica a continuación). En los ejemplos siguientes si no está
instalada alguna de las fuentes Arial, Segoe UI u Homer Simpson, el
ejemplo se verá en el mismo tipo de letra que el cuarto ejemplo
}
Ejemplo de Font-family
p { font-family: cursive;}
p { font-family: Arial;} (Esto es un (Esto es un párrafo con fuente cursive
párrafo con fuente Arial.) (en Windows suele ser Comic Sans).
p { font-family: fantasy;}
p { font-family: "Segoe UI";} (Esto es (Esto es un párrafo con fuente fantasy
un párrafo con fuente Segoe UI.) (en Windows cada navegador aplica una
fuente distinta)).
p { font-family: "Homer Simpson UI";}
(Esto es un párrafo con fuente Homer
Simpson).
p { font-family: serif;} (Esto es un
párrafo con fuente serif).
p { font-family: sans-serif;} (Esto es
un párrafo con fuente sans-serif (en
Windows suele ser Arial).
p { font-family: monospace;} (Esto es
un párrafo con fuente monospace (en
Windows suele ser Consolas). }
font-size
Tamaño del tipo de letra: font-size
font-size
Tamaño absoluto
La propiedad font-size permite establecer el
El navegador tiene definidos una serie de
tamaño del tipo de letra (fuente) del elemento. tamaños que se llaman xx-small, x-small,
Se puede expresar el tamaño de varias small, medium, large, x-large y xx-large.
maneras: tamaño absoluto, tamaño relativo, Estos tamaños el navegador los elige en
distancia o porcentaje, aunque generalmente función de la resolución de la pantalla, el
tamaño de la fuente, etc.
se aconseja utilizar unidades relativas (% o
em).
}
Tamaño Relativo
Tamaño relativo
Se pueden utilizar los valores larger o
smaller. Estos valores se interpretan con
respecto al elemento padre y se toman el ul {
valor siguiente o anterior de la lista de
tamaños absolutos. font-size: smaller;
En el ejemplo siguiente, la hoja de estilo
establece que una lista tiene que tener un
}
tamaño menor que el elemento padre. Si se
escriben listas anidadas, cada sublista es
cada vez más pequeña. Cuando se llega al
límite inferior, el navegador puede seguir
reduciendo la letra o dejarla en xx-small.
}
Valores Numericos con unidades
Absolutas
Valor numérico con unidades absolutas p { font-size: 16pt;}
Se puede definir un tamaño concreto, por ejemplo,
14pt, 3cm, 20px, etc. Esto es un párrafo de tamaño 16pt.
Nota: Hace años (antes de 2010) se desaconsejaba
utilizar estas unidades de forma indiscriminada
porque los navegadores no permitían reducir ni
ampliar los elementos definidos mediante
unidades absolutas, pero actualmente no existe
esa limitación.
}
Valor Numerico
Valor numérico con unidades relativas p { font-size: 150%;}
Se puede definir el tamaño de cada elemento mediante (Esto es un párrafo de tamaño 150%).
porcentajes (o em o rem, teniendo en cuenta que 1em =
p { font-size: 120%;}
100% y que 1rem = 100%), que se interpretan con
(Esto es un párrafo de tamaño 120%.)
respecto al tamaño base
p { font-size: 80%;}
(Esto es un párrafo de tamaño 80%.)
}
Font-weight
La propiedad font-weight permite elegir el grosor del trazo. Existen
nueve valores numéricos (100, 200, 300, 400, 500, 600, 700, 800,
900), del más fino al más grueso. Además, existen los valores normal
y bold que deben coincidir respectivamente, con los valores
numéricos 400 y 700. Y por último, existen los valores lighter y
bolder que significan, respectivamente, un valor inferior y superior
en la lista de valores numéricos y se interpretan respecto del
elemento padre.
Al definir el grosor con valores numéricos, los navegadores muestran
tres grosores distintos (de 100 a 500 como normal, 600 y 700 como
bold y 800 y 900 más grueso que bold). Esos grosores no se aprecian
de la misma manera en cada tipo de letra. En la siguiente lista,
cada valor está en el grosor indicado por el propio valor:
Fuente sans-serif
100, 200, 300, 400, 500, 600, 700, 800, 900
normal y bold
lighter y bolder
Fuente serif
100, 200, 300, 400, 500, 600, 700, 800, 900
normal y bold
lighter y bolder
Fuente monospace
100, 200, 300, 400, 500, 600, 700, 800, 900
normal y bold
lighter y bolder
Fuente cursive
100, 200, 300, 400, 500, 600, 700, 800, 900
normal y bold
lighter y bolder
Dar formato segun ubicacion
p { font-family: sans-serif; }
p.g400 { font-weight: 400; }
Este párrafo está en negrita (400).
p.n { font-weight: normal; }
Este párrafo está en negrita (normal)
p.g700 { font-weight: 700; }
Este párrafo está en negrita (700).
p.b { font-weight: bold; }
Este párrafo está en negrita (bold).
p.g900 { font-weight: 900; }
Este párrafo está en negrita (900).
El valor bolder hace que el elemento se muestre, si es posible, con
un grosor mayor que el del elemento en el que está incluido. En el
siguiente ejemplo, cada lista se muestra con un grosor mayor que la
anterior:
p { font-weight: normal;}
ul { font-family: sans-serif;
font-weight: bolder;}
Inclinación (itálica): font-style
font-style
Una forma de obtener una variante de un tipo de letra es inclinar las
letras. En Tipografía se distinguen dos formas de inclinación:
oblicua: la forma de la letra no cambia, simplemente se inclina
itálicas: además de inclinarse, la forma de algunas letras cambia
Para distinguir si una fuente es oblicua o itálica, es necesario fijarse
en letras como la "a". La imagen siguiente muestra un ejemplo: la
primera línea corresponde a la fuente Aldine (normal e itálica) y la
segunda línea corresponde a la fuente Arial (normal y oblicua).
Font-style
La propiedad font-style permite elegir la
inclinación: normal, oblique o italic. Para que los
navegadores puedan mostrar las variantes oblicua e
itálica es necesario que en el ordenador esté
instaladas fuentes de ambas variantes, lo que no
suele ser habitual.
En general, si no hay instaladas fuentes específicas,
los navegadores simplemente inclinan el tipo de letra
normal, tanto para oblique como italic. Como esto
correspondería más bien a la variante oblicua, se
aconseja dar el valor oblique en vez de italic
ejemplo de font-style
p { font-family: sans-serif;
font-size:150200%;
font-style: normal;}
Este párrafo está en estilo normal.
p { font-family: sans-serif;
font-size: 150%;
font-style: italic;}
Este párrafo está en estilo italic.
p { font-family: sans-serif;
font-size: 150%;
font-style: oblique;}
Este párrafo está en estilo oblique.
Ejemplo font-style
Práctica
1-Realiza un HTML con su css en cada uno de ellos coloque en su hoja css propiedades de text-
align, Font-family, font-size mirando los ejemplos en el material.
2-Crea un archivo HTML y un archivo CSS.
En el archivo HTML, agrega un elemento h1 con el texto "Bienvenido a mi página".
En el archivo CSS, aplica las siguientes propiedades al h1:
font-family: Usa una fuente que te guste (puedes utilizar fuentes web como Google
Fonts).
font-size: Asigna un tamaño de fuente de 36px.
font-weight: Haz que el texto sea negrita.
font-style: Usa italic para hacer el texto en cursiva.
3-Centrando un Párrafo
Objetivo: Centrar un párrafo en la página utilizando text-align.
Instrucciones:
1. Crea un archivo HTML y un archivo CSS.
2. En el archivo HTML, agrega un elemento p con un texto de tu elección.
3. En el archivo CSS, aplica la propiedad text-align: center al p para centrar el texto.
Ejemplo de Práctica
