PCdaZERO.it - Guida facile per usare il computer

Acquista o scarica gratis, i libri di "PC da Zero"

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>

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.







Link sponsorizzati