Dimensionamento e misure
Le misure e le dimensioni nei css, utilizzate in molti ambiti tra i quali e non solo: bordi, altezza e larghezza dei blocchi, grandezza dei caratteri, margini, padding, possono essere espresse in forma relativa oppure assoluta nella forma: numero seguito da due lettere che indicano l’unità di misura. Attenzione agli errori frequenti che possono creare problemi di visualizzazione, in particolare: tra i numeri e la misura non possono esserci spazi. Se la misura è zero non deve esser seguito da unità di misure.
Es.: corrette: 12px; 1.45em; 0;
errate: 12 px, 1. 45em, 0px;
Dimensioni assolute:
- cm: centimetri;
- mm: millimetri;
- in: inches, pollici, dove un pollice = 25,4 mm
- pt: punti, cioè la 72a parte di un inch, circa 0.35mm; in pratica 3pt ~ 1mm
- pc: picas, un sesto di inch, circa 4,2 mm
Tali dimensioni son ottime se usate nella stampa e nei dispositivi a dimensione fissa, son sconsigliabili viceversa a video dato che essi son per loro natura diversi uno dall’altro. Dimensioni assolute comportano a schermo visioni diverse delle proprie pagine da computer a computer. Tenete sempre in mente che il web non è la tipografia classica e che è praticamente impossibile creare siti che siano perfettamente simili su qualsiasi computer.
Dimensioni relative:
- em: dimensione di una lettera m del carattere utilizzato
- px: pixel
- %: percentuale
La dimensione dei pixel dipende dalla risoluzione dei dispositivi utilizzati. Un pixel è la più piccola particella *unica* dello stesso. A video son i vari elementini luminosi che messi assieme formano un’immagine. Un em è la dimensione di una lettera m del set di caratteri utilizzato. Se impostiamo una misura in em essa è riferita alla dimensione dei font del livello contenitore. Praticamente:
body {font-size:20px;}
div#div1 {font-size:1.5em;}
div#div2 {font-size:0.8em;}
<body>
<div id="div1">Bla bla<div id="div2">Bla bla</div></div>
</body>
Il body avrà dimensioni 20px. Div1 avrà dimensione di una volta e mezza quella di body, cioè 30px; Div2 0.8volte quella del suo contenitore quindi 30*0.8=24px. Le dimensioni percentuali seguono lo stesso ragionamento su indicato. Le misure relative son quelle più utilizzate nelle pagine. Il mio consiglio è quello di impostare una dimensione per il body in pixel ed usare em per tutte le altre sezioni. Le misure in pixel dovrebbero esser usate solo per le dimensioni dei bordi dei blocchi.
[…] Le Nostre Guide « Introduzione al mondo dei CSS Dimensionamento e misure » […]
1 novembre, 2007 - 11:37 pm[Permalink]
[…] <Dimensione> può essere una lunghezza come definitita in questo articolo oppure i valori […]
17 luglio, 2008 - 10:31 am[Permalink]