Il tag span nel codice HTML

Il tag span nel codice HTML

Il tag span viene usato nel codice HTML per modificare lo stile di una o più parole all’interno di un paragrafo, lista o altro.

Può capitare, anche più frequentemente rispetto ad altre circostanze, che vogliamo colorare o dare degli effetti particolari soltanto ad alcune parole di una pagina web. A differenza di altri tag che si limitano a rendere in grassetto o in corsivo alcune parole, span ci permette di aggiungere delle regole di stile proprio come nel caso degli elementi HTML, come paragrafi e sottotitoli.

Per potere inserire una regola CSS su una o più parole ci basterà inserire tra di esse un tag di apertura <span> e uno di chiusura </span>. All’interno del tag di apertura inseriremo anche una o più regole di stile scrivendo style =” “ con le proprietà desiderate all’interno delle virgolette.

Poniamo il caso di volere scrivere la parola ciao colorata di blu e in grassetto. Scriveremo questo codice:

<span style = "color: blue; font-weight: bold;">ciao</span>

Per ogni elemento span possiamo inserire regole diverse ma se vogliamo che tutte le parole all’interno di questo tag abbiano le medesime regole, possiamo inserire il relativo selettore nel foglio CSS:

span {
  color: blue;
  font-weight: bold;
 }

Possiamo anche attribuire a ciascun elemento span una classe o un id in modo che le parole al loro interno ereditino le regole di questi selettori. Riprendendo l’esempio precedente al tag span nel codice HTML scriveremo:

<span class = "blu">ciao</span>

All’interno del foglio di stile aggiungeremo questo selettore:

.blu {
  color: blue;
  font-weight: bold;
 }
/ 5
Grazie per aver votato!