- Blog
- Programmazione
- CSS
- CSS3 - Unità
CSS3 - Unità
- Programmazione
- CSS
- Giuseppe Ventura
- 09/10/2023
I CSS hanno diverse unità per esprimere una lunghezza.
Molte proprietà CSS accettano valori di "lunghezza", come width, margin, padding, font-size, ecc.
La lunghezza è un numero seguito da un'unità di lunghezza, ad esempio 10px, 2em, ecc.
Esempio
Imposta valori di lunghezza diversi, utilizzando px (pixel):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Lunghezze assolute
Le unità di lunghezza assolute sono fisse e una lunghezza espressa in una qualsiasi di queste apparirà esattamente con quella dimensione.
Le unità di lunghezza assoluta non sono consigliate per l'uso sullo schermo, poiché le dimensioni dello schermo variano molto. Possono però essere utilizzati se il supporto di output è noto, ad esempio per il layout di stampa.
| Unità | Descrizione | Prova |
|---|---|---|
| cm | centimetri | Prova |
| mm | millimetri | Prova |
| in | pollici (1in = 96px = 2.54cm) | Prova |
| px * | pixels (1px = 1/96th of 1in) | Prova |
| pt | punti (1pt = 1/72 of 1in) | Prova |
| pc | picas (1pc = 12 pt) | Prova |
Lunghezze relative
Le unità di lunghezza relativa specificano una lunghezza relativa a un'altra proprietà di lunghezza. Le unità di lunghezza relativa si adattano meglio tra i diversi mezzi di rendering.
| Unità | Descrizione | Prova |
|---|---|---|
| em | Relativo alla dimensione del carattere dell'elemento (2em significa 2 volte la dimensione del carattere corrente) | Prova |
| ex | Relativo all'altezza x del carattere corrente (usato raramente) | Prova |
| ch | Relativo alla larghezza dello "0" (zero) | Prova |
| rem | Relativo alla dimensione del carattere dell'elemento radice | Prova |
| vw | Relativo all'1% della larghezza del viewport* | Prova |
| vh | Relativo all'1% dell'altezza del viewport* | Prova |
| vmin | Rispetto all'1% della dimensione più piccola del viewport* | Prova |
| vmax | Rispetto all'1% della dimensione maggiore del viewport* | Prova |
| % | Relativo all'elemento genitore | Prova |