Archivi tag: dimensione

CSS3 Base – 3.2 – Dimensione del testo

In questa lezione vi parlo di come si modifica la dimensione del testo.

font-size

La proprietà font-size modifica la dimensione del testo a cui viene applicata la regola.

Uso di font-size
Uso di font-size

La proprietà accetta:

  • valori assoluti, ovvero valori con unità di misura fisse;
  • valori relativi, ovvero valori che dipendono da altri fattori.

Valori in pixel

Assegnando un valore assoluto, ad esempio il pixel, il carattere diventerà alto esattamente di quanto avete specificato:

font-size: 22px;

I pixel, indicati con px, sono intesi come valori assoluti, nel senso che sono indipendenti dalla larghezza della pagina o dalla dimensione di altri elementi (anche se i pixel possono essere più o meno grandi a seconda dello schermo su cui vengono visualizzati).

La dimensione predefinita del testo di una pagina web (testo del paragrafo) è di 16 pixel.

Dimensioni in pixel
Dimensioni in pixel

Valori relativi

E’ possibile impostare la grandezza del testo usando valori relativi, come ad esempio em e percentuali.

Impostando la dimensione del testo in percentuale (%), lo si obbliga ad avere una grandezza relativa a quella del testo per l’elemento che lo contiene.

font-size: 200%;

Per fare un esempio, se un paragrafo si trova dentro ad un div (un contenitore di elementi), scrivendo il seguente stile:

Uso delle percentuali
Uso delle percentuali

il testo del paragrafo dentro al div sarà grande 64 pixel, ovvero il doppio della dimensione del testo nel suo contenitore (32 pixel).

Quindi il testo con grandezza indicata in valori relativi è variabile al variare della dimensione del testo del contenitore che lo contiene.

L’unità di misura em indica la grandezza predefinita del font, che di norma abbiamo detto essere di 16 pixel.

Quindi:

1em = 16px

Come per la percentuale, è una unità di misura relativa, in quanto se noi andiamo a cambiare la dimensione standard del testo, gli em variano di conseguenza.

L’uso di em è raccomandato dal W3C.

Reset delle dimensioni

Per esigenze di leggibilità, magari dettate dalla visualizzazione del sito su dispositivi diversi, possiamo impostare un criterio per determinare una dimensione standard per la pagina web e farla usare come riferimento per tutti gli elementi testuali contenuti in essa.

Per cambiare la dimensione del testo standard, ovvero per effettuare un reset delle dimensioni dei caratteri, possiamo usare diversi modi.

Un sistema largamente utilizzato è quello di re-impostare la dimensione standard del font della pagina (del body, cioè il contenitore di livello principale) a 100%, quindi si imposta la dimensione di tutti gli altri elementi di testo utilizzati nella pagina con valori relativi (in em):

Reset dimensioni
Reset dimensioni

Se vogliamo rendere il testo più grande, ci basterà variare il valore di font-size per il body (ad esempio portandolo a 120% o 80%) e tutte le altre dimensioni varieranno di conseguenza.

Video

HTML5 Base – 5.3 – Dimensioni dell’immagine

In questa lezione vi spiego come si impostano le dimensioni di una immagine.

Normalmente le immagini vengono inserite sulla pagina mediante il tag <img>, che avete già visto.

Se non specifichiamo nulla, le immagini vengono visualizzate con la loro dimensione nativa, ovvero con i loro valori predefiniti di larghezza e altezza, tuttavia è possibile specificare la loro dimensione direttamente nel tag HTML con cui le inserite.

width e height

Per impostare la larghezza di una immagine, possiamo usare l’attributo width:

<img src="foto.jpg" width="200">

Il valore dell’attributo width è un numero che indica la larghezza dell’immagine espressa in pixel.

Per impostare l’altezza di una immagine, usiamo l’attributo height:

<img src="foto.jpg" height="200">

Anche il valore dell’attributo height è un numero inteso come pixel.

Nota: sebbene sia possibile impostare la dimensione delle immagini da HTML (come avete visto), si consiglia di usare sempre i CSS per questo tipo di formattazione.

Video