CREARE SITI WEB in HTML e CSS > Le dimensioni del carattere - font-size
La proprietà font-size ti permette di avere il controllo sulla dimensione del testo.
Come valore, puoi usare un numero intero seguito dall'unità di misura.
Le unità di misura sono: px pt em %
Le unità di misura in pixel (px) e punti (pt) sono relative solo alla risoluzione dello schermo; mentre em e % sono relative all'impostazione del blocco in cui si trovano.
Ad esempio nell'uso di questo Foglio Stile
<style type="text/css">
p {font-size: 50% }
div#testata {font-size: 30px}
div#corpo {font-size: 22px }
</style>
p {font-size: 50% }
div#testata {font-size: 30px}
div#corpo {font-size: 22px }
</style>
le dimensioni del testo scritto entro l'elemento <p>
vengono ridotte del 50% rispetto alle dimensioni impostate nel blocco in cui si trova.
All'interno del blocco <div id="testata"></div> il paragrafo avrà dimensioni 15px.
All'interno del blocco <div id="corpo"></div> il paragrafo avrà dimensioni 11px.
Fuori dai blocchi il paragrafo avrà dimensioni pari a metà del carattere predefinito.
Se il carattere predefinito è di 12px il paragrafo avrà dimensioni 6px.
Ecco come potrebbe essere visualizzata la pagina web con il "Foglio Stile" sopra descritto:
| codice HTML | risultato pagina web |
|
<html> <head> <style type="text/css"> p {font-size: 50% } div#testata {font-size: 30px} div#corpo {font-size: 22px } </style> </head> <body> <div id="testata"> <p>Testo ridotto del 50% su 30px</p></div> <div id="corpo"> <p>Testo ridotto del 50% su 22px</p></div> <p>Testo ridotto del 50% su predefinito</p> </body> </html> |
Testo ridotto del 50% su 30px Testo ridotto del 50% su 22px Testo ridotto del 50% su predefinito |
Il valore con unità di misura percentuale (%) può superare il 100%.
Ad esempio:
150% (equivalente a 1.5em) indica una volta e mezzo la dimensione del carattere previsto per il contenitore o blocco.
200% (equivalente a 2em) indica il doppio della dimensione.
10% (equivalente a 0.1em) indica un decimo della dimensione.