Abbiamo imparato che una proprietà CSS può essere impostata con l'assegnazione di specifici valori. In questa lezione vedremo quali sono i tipi di valore e le unità di misura con cui è possibile definire le proprietà. Prima di tutto, però, è opportuno spiegare due fondamentali regole sintattiche.
1. I valori di una proprietà non vanno mai messi tra virgolette. Le uniche eccezioni riguardano i valori espressi da stringhe di testo e i nomi dei font formati da più di una parola. Un esempio:
/* Valori espressi per la proprietà content
con una stringa di testo */
content: "Viva i CSS";
/* Definizione del font Times New Roman */
p {font-family: "Times New Roman", Georgia, serif;}2. Quando si usano valori numerici con unità di misura, non bisogna lasciare spazio tra numero e sigla dell'unità. È corretto quindi scrivere 15px oppure 15em. È invece sbagliato usare 15 px o 15 em. In questi casi la regola sarà ignorata o mal interpretata.
Tipi di valore
Nei CSS i valori possono essere espressi da:
numeri
- possono essere definiti come numeri interi (1, 23, 45, etc.) o in virgola mobile (1.2, 3.45, 4.90, etc.)
- unità di misura
- percentuali
- codici per la definizione dei colori
- URI
- parole chiave (keywords)
- stringhe di testo
/* Altezza di linea con un numero */
p {line-height: 1.2;}
/* Larghezza con unità di misura */
div {width: 300px;}
/* Larghezza in percentuale */
div {width: 60%;}
/* Colore con codice esadecimale */
body {background-color: #2795b6;}
/* URL per un'immagine di sfondo */
body {background-image: url(sfondo.jpg);}
/* Ripetizione dello sfondo con una keyword */
body {background-repeat: no-repeat;}
/* Stringa di testo */
content: "Viva i CSS";Unità di misura per le dimensioni
Questa è la lista delle unità di misura usate per definire dimensioni, spazi o distanze. Nella pratica comune solo alcune di esse sono realmente usate. Le elenchiamo comunque tutte per completezza.
| Unità di misura | Descrizione |
|---|---|
| in (inches - pollici) |
classica misura del sistema metrico americano. Praticamente nullo il suo valore su un supporto come un browser web. |
| cm (centimetri) |
stesso discorso visto per i pollici, la difficoltà maggiore sta nella resa su monitor, che è altra cosa rispetto alla carta stampata. |
| mm (millimetri) |
vedi quanto detto per centimetri e pollici. |
| pt (points - punti) |
unità di misura tipografica destinata essenzialmente a definire la dimensione dei font. Il suo utilizzo è di fatto limitato ai CSS per la stampa. |
| pc (picas) |
unità poco usata. 1 pica equivale a 12 punti. |
| em (em-height) |
unità di misura di ampio utilizzo se si desidera impostare le dimensioni dei font o dei box con un unità di misura relativa. |
| ex (ex-height) |
di fatto inesistente il suo utilizzo. 1ex equivale all'altezza del carattere x minuscolo del font scelto. |
| px (pixels) |
unità di misura ideale per gli schermi. È quella più usata e facile da comprendere. |
Percentuale
Un valore espresso in percentuale è da considerare sempre relativo rispetto ad un altro valore, in genere quello espresso per l'elemento parente. Si esprime con un valore numerico seguito (senza spazi) dal segno di percentuale: 60% è pertanto corretto, 60 % no.
Colori
Sui diversi modi per esprimere il valore di un colore si veda la lezione 24 della guida.
Stringhe
Alcune proprietà dei CSS possono avere come valore una stringa di testo da inserire come contenuto aggiunto nel documento. I valori espressi da stringhe vanno sempre racchiusi tra virgolette. Le proprietà in questione sono due: content e quotes.
Valori URI
Si tratta di URL che puntano a documenti esterni (in genere immagini, come negli sfondi). Possono essere URL assoluti o relativi. In questo caso il percorso fa sempre riferimento alla posizione del foglio di stile e non del documento HTML.
La definizione dell'indirizzo è sempre introdotta dalla parola chiave url e va inserita tra parentesi tonde, con o senza virgolette. Queste possono essere singole o doppie. Un esempio:
background-image: url(sfondo.jpg);
background-image: url('sfondo.jpg');
background-image: url("sfondo.jpg");