Le unità di misura CSS si riferiscono alle misure orizzontali e verticali. Il formato di un valore di misura (indicato con <length> nelle specifiche) è un numero immediatamente seguito da un identificatore di unità (px, em, ecc.). Ci sono due tipi di misure: relative e assolute.
Misure relative
Le unità relative specificano una misura relativa ad un'altra proprietà di misura. Esse sono:
- em: la dimensione del font in uso
- ex: la x-height del font in uso
- px: pixel, relativi al dispositivo di visualizzazione.
L'unità em è uguale al valore calcolato della proprietà 'font-size' dell'elemento, tranne quando viene usata nella proprietà 'font-size', in cui si riferisce alla dimensione del font dell'elemento genitore.
L'unità ex viene definita dalla x-height del font. La x-height corrisponde all'altezza della "x" minuscola.
I pixel sono relativi alla risoluzione del dispositivo di visualizzazione. Tuttavia, Internet Explorer per Windows non permette il ridimensionamento dei caratteri se questi sono espressi in pixel. Si raccomanda pertanto di evitare di esprimere valori in pixel per la proprietà 'font-size' di un elemento.
Nota
In Internet Explorer 6 per Windows, se si imposta per l'elemento body o
html un valore in em per la proprietà 'font-size', il ridimensionamento dei caratteri avverrà in modo
abnorme e sproporzionato. Si consiglia l'uso delle percentuali.
L'uso delle misure relative è particolarmente adatto per lo schermo, e rende i fogli di stile altamente flessibili.
Misure assolute
Le unità di misura assolute sono utili solo quando le proprietà fisiche del media di output sono note. Esse sono:
- in: pollici (inches) — 1 pollice = 2.54 centimetri
- cm: centimetri
- mm: millimetri
- pt: punti — 1 punto = 1/72 di pollice
- pc: pica — 1 pica = 12 punti.
Le unità assolute si rivelano particolarmente utili nel caso dei fogli di stile per la stampa:
@media print {
body {font-size: 12pt; margin: 1cm;}
}
Percentuali
Il formato di un valore percentuale (<percentage> nelle specifiche) è un numero immediatamente seguito da '%'. I valori percentuali sono sempre relativi ad un altro valore. Esempio:
body {font-size: 16px}
h1 {font-size: 200%} /* il 200% di 16px, ossia 32px */