Proprietà per i caratteri
|
Valori |
|
|
font-style |
|
|
<famiglia-caratteri> |
|
|
x-small |
|
|
normal |
|
|
normal |
|
|
normal |
Esempi dimostrativi delle funzionalità di alcune proprietà per i caratteri:
· Esempio: proprietà per i caratteri
La proprietà font è una proprietà a sintassi abbreviata con cui si può definire sinteticamente e con una sola dichiarazione:
· font-style;
· font-variant;
· font-weight;
· font-size;
· font-family.
La proprietà font permette di impostare anche l'interlinea. Tutte le proprietà che non vengono specificate assumono implicitamente il valore normal.
body{
font: italic bold 1.5em Arial,
Helvetica, Sans-serif;
}
In questo esempio il carattere dell'elemento body è impostato in Arial, Helvetica, San-serif in corsivo (italic) e grassetto (bold) e con dimensione 1.5em.
La proprietà font-family accetta
più tipi di caratteri, separati da una virgola, per consentire scelte
alternative qualora il carattere scelto non fosse disponibile per il programma
utente.
L'ultimo valore dovrebbe essere sempre una famiglia generica, così da ottenere
comunque un carattere il più possibile simile a quello prescelto.
Le principali famiglie generiche sono:
· serif
· sans-serif;
· monospaced.
body{
font-family: courier, serif;
}
La proprietà font-size consente
di impostare la dimensione del carattere.
La proprietà font-size può
assumere i seguenti valori:
· x-small, x-small, small, medium, large, x-large, xx-large(impostano la dimensione del carattere a partire dalla più piccola alla più grande);
· smaller (imposta la dimensione del carattere inferiore a quella dell'elemento padre);
· larger (imposta la dimensione del carattere superiore a quella dell'elemento padre);
· <lunghezza> (imposta una dimensione fissa del carattere);
· % (imposta la dimensione del carattere in percentuale rispetto a quella dell'elemento padre).
p{
font-size: 10px;
}
In questo esempio la dimensione del carattere relativa all'elemento p è impostata a 10 pixel.
La proprietà font-style consente
di impostare lo stile del carattere.
La proprietà font-style può
assumere i seguenti valori:
· normal (valore predefinito);
· italic (corsivo);
· oblique (obliquo);
p{
font-style: italic;
}
In questo esempio lo stile del carattere associato all'elemento p è corsivo (italic).
La proprietà font-variant consente
di impostare il formato del carattere.
La proprietà font-variant può
assumere i seguenti valori:
· normal (valore predefinito);
· small-caps (maiuscolo);
div{
font-variant: small-caps;
}
In questo esempio lo stile del carattere associato all'elemento div è maiuscolo.
La proprietà font-weight consente
di impostare la formattazione del carattere.
La proprietà font-weight può
assumere i seguenti valori:
· normal (valore predefinito);
· bold (grassetto);
· bolder (più grassetto);
· lighter (sottile);
· 100, 200, 300, 400, 500, 600, 700, 800, 900 (dal più sottile al più grassetto).
div{
font-weight: bold;
}
In questo esempio lo stile del carattere associato all'elemento div è grassetto.