3.55
La gestione dell’aspetto del testo mediante CSS è un aspetto cruciale nella progettazione di pagine web. Le proprietà che determinano l’apparenza del testo sono numerose, e abbiamo optato per suddividere l’argomento in due lezioni, iniziando con le proprietà di base. Queste comprendono:
- Font utilizzato: Definisce il tipo di carattere da applicare al testo.
- Dimensione del carattere: Stabilisce le dimensioni del carattere utilizzato.
- Consistenza del carattere: Indica la spessore del tratto del carattere.
- Interlinea tra le righe: Specifica lo spazio tra le linee di testo.
- Allineamento del testo: Determina la posizione del testo rispetto al margine.
- Decorazione del testo: Comprende elementi come sottolineature e altri ornamenti.
Forniamo qui una panoramica generale di queste proprietà. Per una comprensione più approfondita, si consiglia di consultare gli articoli suggeriti alla fine della lezione.
Proprietà font-family: La proprietà font-family imposta il tipo di carattere per una porzione di testo e si applica a tutti gli elementi, ereditando le caratteristiche. È possibile specificare un elenco di caratteri alternativi, come illustrato nell’esempio seguente:
p {font-family: Arial, Verdana, sans-serif;} In questo caso, il browser proverà a utilizzare il primo font della lista e, in mancanza, passerà al successivo. Questo meccanismo è progettato per affrontare la varietà di font disponibili su diverse piattaforme.
Proprietà font-size: La proprietà font-size, insieme a font-family, è fondamentale per definire le dimensioni del testo. Può essere applicata a tutti gli elementi e viene ereditata. I valori delle dimensioni del testo possono essere espressi in modi diversi, sia in modo assoluto che relativo:
- Valori assoluti: Utilizzando parole chiave specifiche o unità di misura come pixel, centimetri, millimetri, punti, picas e pollici.
- Valori relativi: Utilizzando parole chiave come smaller e larger, unità di misura em o percentuali.
div {font-size: 50%;} h2 {font-size: 1.2em;} Questi esempi mostrano l’applicazione di dimensioni del testo relative, consentendo una maggiore flessibilità nella progettazione delle pagine web.
La proprietà font-weight definisce la consistenza o il “peso” visivo del testo ed è applicabile a tutti gli elementi, ereditando le sue caratteristiche. Può essere dichiarata utilizzando una scala numerica o parole chiave, come mostrato nell’esempio:
p {font-weight: 900;} div {font-weight: bold;} Il “peso” visivo di un carattere può essere rappresentato numericamente da valori compresi tra 100 e 900, ordinati dal più leggero al più pesante. Le parole chiave come “normal” e “bold” sono anch’esse utilizzabili per definire rispettivamente l’aspetto predefinito e quello grassetto del testo.
La proprietà font-style, applicabile a tutti gli elementi e ereditata, imposta le caratteristiche del testo con i valori “normal,” “italic,” o “oblique.” Ad esempio:
p {font-style: italic;} La proprietà line-height consente di regolare l’interlinea nelle pagine web, influenzando l’altezza di una riga di testo all’interno di un elemento blocco. Può essere dichiarata con valori come “normal,” un valore numerico, un valore numerico con unità di misura, o percentuale. Ad esempio:
p {line-height: 1.5;} body {line-height: 15px;} La proprietà font è una forma abbreviata che consente di impostare in un’unica dichiarazione le principali caratteristiche del testo, tra cui font-family, font-size, line-height, font-weight, font-style, font-variant, e il font di sistema. Ecco un esempio:
p {font: bold 12px/1.5 Georgia, "Times New Roman", serif;} La proprietà text-align definisce l’allineamento del testo e si applica a tutti gli elementi, ereditando le sue caratteristiche. Può essere dichiarata con valori come “left,” “right,” “center,” o “justify.” Ad esempio:
p {text-align: center;} div {text-align: justify;} Infine, la proprietà text-decoration imposta decorazioni e stili speciali per il testo, come sottolineature o attraversamenti. Può essere dichiarata con valori come “none,” “underline,” “overline,” “line-through,” o “blink.” Esempio:
p {text-decoration: none;} a { text-decoration: underline;}