In questa lezione, vediamo come si possono decorare i testi attraverso le proprietà text-decoration. Questa proprietà si divide in 4 sotto-proprietà elencante in tabella.
| Proprietà | Descrizione |
text-decoration-line | Specifica il tipo di decorazione del testo, come underline, overline, line-through, o una combinazione di questi. È usato per aggiungere linee decorative al testo. |
text-decoration-color | Imposta il colore della decorazione del testo. Può essere impostato qualsiasi colore valido in CSS. |
text-decoration-style | Determina lo stile della decorazione del testo, come solid, double, dotted, dashed, o wavy. È usato per personalizzare l'aspetto delle linee decorative sul testo. |
text-decoration-thickness | Specifica lo spessore della decorazione del testo. Può essere definito in valori di lunghezza, percentuali, o parole chiave come auto. |
Vediamo in dettaglio ognuna delle proprietà.
Per scegliere la tipologia di linea da impostare sul testo, possiamo utilizzare la proprietà CSS text-decoration-line. Questa accetta i seguenti valori:
none rimuove qualsiasi decorazione al testo. È il valore predefinito.underline aggiunge una linea sotto il testo. Si tratta della classica "sottolineatura".overline aggiunge una linea sopra il testo.line-through aggiunge una linea al centro del testo, come quando si deve "cancellare" un testo.Vediamo degli esempi:
<p>Questo testo è sottolineato</p>
<style>
p {
text-decoration-line: underline;
}
</style>È possibile scegliere più valori diversi in text-decoration-line, così da creare diverse sottolineature per lo stesso testo. I valori devono essere diversi tra loro e divisi da uno spazio. Ecco un esempio:
<p>Questo testo è molto sottolineato</p>
<style>
p {
text-decoration-line: underline overline;
}
</style>Per impostare il colore delle linee, è possibile utilizzare la proprietà text-decoration-color. Puoi scegliere qualsiasi colore CSS. Se ti serve, dai un'occhiata alla lista completa dei colori HTML/CSS.
<p>Questo testo è sottolineato di rosso</p>
<style>
p {
text-decoration-line: underline;
text-decoration-color: red;
}
</style>Per scegliere lo stile delle linee delle decorazioni del testo, utilizziamo la proprietà CSS chiamata text-decoration-style. Essa permette, ad esempio, di tratteggiare la sottolineatura.
Ecco cosa si può utilizzare con questa proprietà:
solid crea una linea continua. È il valore predefinito.double crea una doppia linea continua.dotted crea una linea tratteggiata composta da punti.dashed crea una linea tratteggiata composta da trattini.wavy crea una linea ondulata.Vediamo un esempio:
<p>Questo testo è sottolineato tratteggiato</p>
<style>
p {
text-decoration-line: underline;
text-decoration-style: dashed;
}
</style>Per scegliere lo spessore delle linee, possiamo usare la proprietà text-decoration-thickness. Puoi specificare una dimensione con le varie unità di misura CSS, come i px.
<p>Questo testo è sottolineato di rosso</p>
<style>
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-thickness: 5px;
}
</style>Per abbreviare la scrittura del codice CSS, spesso si utilizza soltanto text-decoration, che può racchiudere tutte le proprietà che abbiamo visto in precedenza.
La sintassi da usare è: text-decoration: linea colore stile spessore. Ecco a cosa corrispondono:
text-decoration-line.text-decoration-color.text-decoration-style.text-decoration-thickness.Ecco degli esempi:
.p1 {
text-decoration: underline; /* Sottolineatura semplice */
}
.p2 {
text-decoration: underline green 5px; /* Sottolineatura verde di 5px */
}
.p3 {
text-decoration: underline dotted; /* Sottolineatura tratteggiata */
}
.p4 {
text-decoration: underline green double 2px; /* Sottolineatura doppia verde di 2px */
}