Le unità di misura in CSS

In CSS, le unità di misura sono utilizzate per definire le dimensioni, le posizioni e altri aspetti degli elementi HTML all'interno di una pagina web. Ad esempio, quando scegli la dimensione di un testo:

Le unità di misura sono molto importanti nel linguaggio CSS. Alcune proprietà accettano anche valori negativi.

Le unità di misura in CSS si dividono in assolute e relative.

Le unità di misura assolute

Le unità di misura assolute definiscono una dimensione fissa, indipendentemente dagli altri elementi o dalle dimensioni dello schermo.

Unità di misura della lunghezza

Queste unità di misura possono essere utilizzate per tutte quelle proprietà che descrivono una lunghezza, ad esempio font-size (che vedremo negli stili del testo) che permette di modificare la dimensione del testo.

Unità di misura degli angoli

Queste unità di misura sono strettamente geometriche, e permettono di indicare la dimensione degli angoli. Possono essere utilizzate, ad esempio, per ruotare gli elementi con transform:rotate().

Unità di misura del tempo

Le unità di misura del tempo possono essere utilizzate per contare il tempo, ad esempio nelle animazioni. Apparentemente, il web non può essere misurato attraverso i minuti, le ore, i giorni, i mesi o gli anni, ma soltanto attraverso i secondi e millisecondi.

Ora, vediamo le unità di misura relative.

Le unità di misura relative

Le unità di misura relative in CSS sono un tipo di unità di misura che definisce la dimensione, la posizione o un altro aspetto di un elemento HTML in relazione a un valore di riferimento. Questo significa che la dimensione o la posizione non è fissa, ma cambia in base al contesto in cui viene utilizzata l'unità di misura.

Unità di misura della percentuale

L'unità di misura della percentuale (%) in CSS è utilizzata per definire dimensioni relative rispetto ad un elemento di riferimento, solitamente il contenitore padre. Le percentuali sono comunemente impiegate per impostare larghezze, altezze e altre proprietà che dipendono dalle dimensioni del contenitore circostante.

Unità di misura dei testi

Esistono specifiche unità di misura dei testi che sono relative, ovvero si modificano in base all'elemento che contiene il testo o in base al dispositivo dell'utente. Sono molto utili per creare delle pagine che si adattano più facilmente ai vari tipi di schermo.

Unità di misura del viewport

Le unità di misura del viewport (ovvero la dimensione della finestra del browser, di cui abbiamo approfondito nelle media query) in CSS sono utilizzate per creare layout e stili che si adattano dinamicamente alle dimensioni dello schermo dell'utente. Queste unità sono particolarmente utili per il design detto responsive, permettendo di definire dimensioni e posizionamenti che variano a seconda della larghezza e altezza del viewport.

Queste unità di misura si usano spesso con le proprietà height e width, che definiscono le dimensioni degli elementi.