3.21
Tutte le grandezze e le unità di misura utilizzate nei CSS, dalla grandezza dei caratteri alle unità di tempo.
Abbiamo appreso che è possibile configurare una proprietà CSS assegnando valori specifici. In questa lezione, esamineremo i diversi tipi di valori e unità di misura utilizzabili per definire tali proprietà. Tuttavia, prima di procedere, è essenziale comprendere due regole sintattiche fondamentali.
- I valori delle proprietà CSS generalmente non richiedono l’uso di virgolette, ad eccezione dei valori espressi come stringhe di testo o nomi di font costituiti da più di una parola. A titolo di esempio:
/* Esempi di valori per la proprietà ‘content’ con l’utilizzo di stringhe di testo */ content: “Viva i CSS”;
/* Specifica della famiglia di caratteri, inclusa la font “Times New Roman” */ p { font-family: “Times New Roman”, Georgia, serif; }
- Quando si utilizzano valori numerici con unità di misura, è importante notare che non dovrebbe esserci spazio tra il numero e la sigla dell’unità. Ad esempio, è corretto scrivere “15px” o “15em”, mentre è errato scrivere “15 px” o “15 em”. In quest’ultimo caso, la regola potrebbe essere ignorata o interpretata in modo errato.
Tipologie di valori Nel contesto dei CSS, i valori possono essere categorizzati come segue:
Numeri: Questi possono essere espressi come numeri interi (ad esempio 1, 23, 45) o decimali (1.2, 3.45, 4.90).
Unità di misura: Queste rappresentano grandezze specifiche come pixel (px) o em (em).
Percentuali: Sono utilizzate per indicare una percentuale di una grandezza.
Codici per la definizione dei colori: Questi codici rappresentano colori specifici utilizzando notazioni come “rgb(255, 0, 0)” per il rosso.
URI: Uniform Resource Identifier, spesso utilizzati per immagini di sfondo o altri media.
Parole chiave: Sono termini chiave come “bold” per specificare determinate proprietà, ad esempio il peso del carattere.
Stringhe di testo: Usate per rappresentare testo o stringhe di caratteri.
/* 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
Elenchiamo di seguito le diverse unità di misura utilizzate per definire dimensioni, spazi o distanze nei CSS. Va notato che nella pratica quotidiana, solo alcune di queste unità sono ampiamente utilizzate, ma forniamo una panoramica completa per completezza.
in (pollici): Questa è la misura classica del sistema metrico americano, ma ha poco valore sui browser web.
cm (centimetri): Analogamente ai pollici, l’uso dei centimetri presenta sfide nella visualizzazione su schermi, differenti dalla carta stampata.
mm (millimetri): Si applica lo stesso ragionamento fatto per i centimetri e i pollici.
pt (punti): Questa unità di misura tipografica è principalmente utilizzata per definire le dimensioni dei font ed è principalmente limitata all’uso nei CSS per la stampa.
pc (picas): L’uso delle pica è piuttosto limitato. Una pica corrisponde a 12 punti.
em (em-height): L’unità di misura “em” è ampiamente utilizzata per definire dimensioni relative, specialmente per font e box.
ex (ex-height): L’uso dell’unità “ex” è raro. Un “ex” equivale all’altezza del carattere “x” minuscolo del font selezionato.
px (pixel): L’unità di misura in pixel è ideale per schermi ed è la più comune e facilmente comprensibile.
Percentuale
Un valore espresso in percentuale è sempre relativo a un altro valore, di solito quello definito per l’elemento padre. Si esprime con un valore numerico seguito dal simbolo di percentuale: ad esempio, “60%” è corretto, mentre “60 %” è errato.
Colori
Per ulteriori informazioni su come esprimere i valori dei colori in modi diversi, si rimanda alla lezione 24 della guida.
Stringhe
Alcune proprietà CSS consentono di utilizzare stringhe di testo come valore da aggiungere al documento. In questo caso, i valori espressi come stringhe devono sempre essere racchiusi tra virgolette. Questa regola si applica specificamente a due proprietà: “content” e “quotes”.
Valori URI
I valori URI rappresentano URL che puntano a documenti esterni, tipicamente immagini utilizzate come sfondi. Gli URL possono essere assoluti o relativi. Nella definizione, la parola chiave “url” introduce sempre l’indirizzo, che deve essere racchiuso tra parentesi tonde e può essere delimitato da virgolette singole o doppie. Ecco un esempio:
background-image: url(sfondo.jpg); background-image: url(‘sfondo.jpg’); background-image: url(“sfondo.jpg”);