Stilizzare il testo
Vediamo adesso quali sono le principali proprietà CSS per la stilizzazione del testo.
Iniziamo dalla base font che permette di impostare le dimensioni del testo, il carattere da utilizzare, il corsivo ed il grassetto.
(L'articolo continua più sotto...)
Le rispettive proprietà relative alle stilizzazioni appena citate sono riportate nell'esempio seguente:
div
{
font-size: 11px;
font-family: verdana;
font-style: italic;
font-weight: bold;
}
Vediamo alcune caratteristiche delle singole proprietà.
La proprietà font-size permette di impostare il testo in pixel o in altre unità di misura, ad esempio:
font-size: 10em;o in percentuale, ma consiglio di adottare i pixel con la specifica "px".
La proprietà font-family permette di impostare uno o più caratteri, come nell'esempio che segue:
font-family: verdana arial sansserif;Qualora il primo carattere mancasse sul client che visualizza la pagina verrà impostato il secondo, altrimenti il terzo, e cosi via.
I caratteri i cui nomi sono composti da più di una parola vanno scritti tra singoli apici:
font-family: 'times new roman';Le proprietà font-style e font-weight accettano come principali valori, oltre ai già visti "italic" (corsivo) e "bold" (grassetto) accettano il valore "normal" per eliminare gli eventuali già presenti corsivo e/o grassetto:
div.NORMALE
{
font-style: normal;
font-weight: normal;
}
Abbiamo poi tre proprietà in base text che permettono di impostare:
- text-decoration - la sottolineatura del testo;
- text-indent - la tabulazione del testo;
- text-transform - maiuscole e minuscole nel testo.
div.SOTTOLINEATO
{
text-decoration: underline;
}
La proprietà text-decoration accetta i valori "none" (nessuna sottolineatura), "underline" (sottolineatura bassa) oppure "overline" (sottolineatura alta).
div.TABULAZIONE
{
text-indent: 100px;
}
La proprietà text-indent specifica in pixel (o nell'unità di misura scelta) lo spazio di tabulazione da sinistra che si desidera impostare.
div.MAIUSCOLO
{
text-transform: uppercase;
}
div.MINUSCOLO
{
text-transform: lowercase;
}
div.INIZIALI_MAIUSCOLE
{
text-transform: capitalize;
}
Non credo che quest'ultimo elemento necessiti di ulteriori spiegazioni.
Vediamo adesso come allineare il testo e come gestire altre stilizzazioni di giustificazione.
Esistono le proprietà:
- text-align - allinea il testo in orizzontale;
- vertical-align - allinea il testo in verticale;
- letter-spacing - definisce lo spazio tra le lettere;
- word-spacing - definisce lo spazio tra le parole;
- line-height - definisce la distanza tra una riga e l'altra del testo di uno stesso elemento.
<table width="500"> <tr> <td id="A">Prima cella</td> <td id="B">Seconda cella</td> </tr> </table>Vediamo il codice CSS di esempio:
td
{
font-size: 11px;
font-family: verdana;
}
#A
{
vertical-align: top; /* OPPURE middle OPPURE bottom */
width: 200px;
letter-spacing: 10px;
}
#B
{
vertical-align: top;
text-align: center; /* OPPURE left OPPURE right */
width: 300px;
word-spacing: 30px;
line-height: 10px;
}
Si testi l'esempio per verificare il risultato.
