Lez.7 - Corso Base Css

Dimensioni del testo e la Proprietà font-size in un foglio di stile Css

Dimensioni del testo e la proprietà font-size

La dimensione del testo si modifica con la proprietà font-size.

La proprietà font-size fondamentalmente accetta due tipi di valori:
I Valori Assoluti e i Valori Relativi.

I Valori Assoluti specificano delle unità di misura che non cambiano mai indipendentemente dal dispositivo che si sta usando.

I Valori Relativi invece defferiscono dalle unità di misura fisse perché dipendono dal dispositivo che è in uso, dipendono dalla grandezza dello schermo che si sta usando.

Le Unità di Misura Assoluta possono essere diverse ma due in particolare sono molto usate e sono il pixel e l'em le loro misure rimangono fisse indipendentemente dal dispositivo usato. Queste unità di misura assolute vengono usate sopratutto per le intestazioni e i paragrafi.

Per un'unità di misura assoluta la granezza standard di un carattere normalmente è di
16px oppure 1em quindi 1em = 16px

L'Unità di Misura Relativa si esprime con il segno della percentuale %.
Ora ad esempio, se noi ad una intestazione di un contenitore assegnamo la proprietà font-size il cui valore è del 50% stiamo dicendo che la grandezza del carattere dell'intestazione sarà grande la metà del suo contenitore, quindi se uno schermo è grande 1000px e il suo contenitore è grande 500px vuol dire che l'intestazione sarà grande 250px, ora consideriamo lo stesso contenitore con le stesse proporzioni ma con uno schermo grande 500px il risultato è che il contenitore è grande 250px e il carattere dell'intestaione è grande, sempre il 50% del suo contenuto, quindi 125px. La considerazione è che con l'unità di misura relativa la grandezza del carattere varia a seconda della grandezza del suo contenitore.

Per un'unità di misura relativa la grandezza standard di un carattere è:
100% = 16px = 1em

IMPORTANTE. Fate attenzione alla dimensione della proprietà font-size che imposterete nel body che è il contenitore principale della pagina e dalla quale dipendono tutte le dimensioni di tutti i carattere nella pagina. Facciamo un esempio: se impostate nel boby il valore del 200% questo vuol dire che state raddoppiando tutte le misure di tutti i caratteri presenti nella pagina.
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Dimensioni del testo proprietà font-size</title>
  <meta charset="utf-8">
  <style type="text/css">
    body {
         font-size: 200%;
       }
    h1 {
         font-size: 2em;
       }
    p {
         font-size: 16px;
       } 
  </style>
 </head>
 <body>			    
   Testo inserito direttamente nel body
   <h1>Dimensioni del testo</h1>
   <p>Paragrafo 1</p>
   <p>Paragrafo 2</p>
   <p>Paragrafo 3</p>
 </body>                
</html>