3.56
Dopo aver esaminato le principali proprietà CSS per la gestione del testo, procediamo all’analisi di quelle avanzate.
font-variant: La proprietà font-variant consente di trasformare il testo in maiuscoletto, ossia lettere in maiuscolo con dimensioni uguali a quelle dei caratteri minuscoli. È una proprietà ereditata e può essere dichiarata con i valori “normal” o “small-caps”. Ad esempio:
h2 {font-variant: small-caps;} text-indent: La proprietà text-indent definisce l’indentazione della prima riga in ogni elemento contenente del testo. È ereditata e può essere dichiarata con un valore numerico con unità di misura o un valore in percentuale. Ad esempio:
p {text-indent: 10px;} div {text-indent: 10%;} text-transform: Questa proprietà modifica gli attributi del testo relativamente a tre aspetti: maiuscolo, minuscolo, e prima lettera maiuscola. È una proprietà ereditata e può essere dichiarata con i valori “none,” “capitalize,” “uppercase,” o “lowercase”. Ad esempio:
p {text-transform: capitalize;} h1 {text-transform: uppercase;} white-space: La proprietà white-space gestisce il trattamento degli spazi bianchi in un elemento ed è ereditata. Può essere dichiarata con i valori “none,” “pre,” o “nowrap”. Ad esempio:
p {white-space: pre;} div {white-space: nowrap;} letter-spacing: Questa proprietà aumenta lo spazio tra le lettere di una parola ed è ereditata. Può essere dichiarata con il valore “normal” o un valore numerico con unità di misura. Ad esempio:
h1 {letter-spacing: 5px;} word-spacing: Proprietà complementare a letter-spacing, aumenta lo spazio tra le parole in un elemento. È ereditata e può essere dichiarata con il valore “normal” o un valore numerico con unità di misura. Ad esempio:
p {word-spacing: 1.2em;} div {word-spacing: 15px;}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;}