CSS, testo sottolineato con text-decoration

di Michele Costanzo Commenta

CSS text-decoration
Da qualche tempo stiamo analizzando l’uso dei fogli di stile CSS per il trattamento del testo. Nelle precedenti guide abbiamo ad esempio visto come rappresentare il testo in grassetto o in corsivo. In questa guida vedremo come utilizzare la proprietà text-decoration per ‘decorare’ il testo con effetti come sottolineato o barrato.

text-decoration nei fogli di stile

Come consuetudine consideriamo il seguente frammento di codice CSS:

h1 {
  text-decoration: overline;
  /* sottolinea il testo */
}

Questa formulazione indica al browser che i titoli di livello H1 dovranno essere sottolineati. A questo risultato si perviene utilizzando proprio la proprietà text-decoration abbinata al valore ‘overline’. text-decoration tuttavia può essere utilizzata anche per generare altri effetti utili ad evidenziare alcuni elementi del testo.

I cinque valori di text-decoration

Nei fogli di stile CSS text-decoration può assumere 5 diversi valori a seconda del risultato che si desidera ottenere. Vediamo in dettaglio:

  • text-decoration: none; | non applica alcuna decorazione al testo. Può essere omesso a meno che non si voglia sovrascrivere nel CSS una direttiva di livello superiore.
  • text-decoration: underline; | come accennato indica al browser di sottolineare il testo.
  • text-decoration: overline; | si può considerare la versione duale di underline ed indica al browser di rappresentare il testo con una linea superiore.
  • text-decoration: line-through; | genera un testo barrato, attraversato cioè da una linea orizzontale a metà altezza.
  • text-decoration: blink; | genera un testo lampeggiante.

Il valore underline della proprietà text-decoration è spesso utilizzato per dare evidenza ai titoli che compongono un documento HTML. Il valore blink è invece solitamente poco utilizzato perché rende più difficoltosa la lettura del testo.

Lascia un commento

Il tuo indirizzo email non verrà pubblicato.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>