Nella precedente lezione abbiamo giร visto unโimportante proprietร del testo, cioรจ la proprietร color attraverso la quale รจ possibile definire il colore degli elementi testuali. Vediamo adesso quali sono le principali proprietร CSS per la stilizzazione del testo.
Per prima cosa vediamo le proprietร della famiglia font attraverso le quali รจ possibile impostare il tipo di carattere da utilizzare, le dimensioni del font, il corsivo ed il grassetto. Queste proprietร sono:
- font-family
- font-size
- font-style
- font-weight
Vediamo un esempio che contempla tutte e quattro queste proprietร CSS:
p
{
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-style: italic;
font-weight: bold;
}
Vediamole una ad una.
font-family
La proprietร font-family permette di impostare uno o piรน caratteri tipografici (cd. font) per il testo. In questo modo il web-designer ha la facoltร di specificare quale tipo di font vuole utilizzare per specifici blocchi di testo; รจ possibile, ad esempio, impostare un tipo di caratteri differente per gli heading (H1, H2, ecc.) e per il testo:
h1, h2, h3
{
font-family: 'Comic Sans', coursive;
}
p
{
font-family: verdana, arial, sans-serif;
}
Ma perchรจ abbiamo indicato piรน di un carattere? Semplicemente perchรจ รจ stato previsto un meccanismo tale per cui qualora il primo carattere non fosse presente sul computer client che visualizza la pagina verrร utilizzato il secondo, altrimenti il terzo, e cosi via. Eโ bene ricordare, infatti, che nelle specifiche di CSS 2.1 il font specificato nella proprietร font-family fa sempre riferimento alla libreria di caratteri installati allโinterno del computer client.
Solitamente lโultima posizione (nel nostro caso corrispondente a "sans-serif") รจ utilizzata per specificare la "famiglia del font" in modo generico in modo da suggerire al client, in caso di assenza di tutti i font specificati, di utilizzare quello di default per quella data famiglia.
Le famiglie di caratteri tipografici sono:
- serif
- sans-serif
- coursive
- fantasy
- monospace
Si noti ancora che i caratteri tipografici i cui nomi sono composti da piรน di una parola vanno scritti tra singoli apici, come ad esempio:
font-family: 'times new roman';
Eโ bene precisare che per una corretta visualizzazione delle nostre pagine web รจ bene limitarsi allโutilizzo dei caratteri piรน diffusi come ad esempio:
- arial
- verdana
- tahoma
- times new roman
font-size
La proprietร font-size permette di impostare la dimensione del testo. Questa puรฒ essere utilizzata specificando un valore percentuale oppure numerico seguito da un unitร di misura (solitamente si usa "px", "pt" o "em"). In alternativa รจ possibile utilizzare una keyword tra "xx-small", "x-small", "small", "medium", "large", "x-large" e "xx-large".
Vediamo un esempio:
p {
font-size: 12px;
}
p.piccolo {
font-size: small;
}
Si noti che la definizione in pixel (px) o punti (pt) consente di specificare in modo diretto la dimensione del testo, utilizzando "em", percentuali o una delle keyword citate, invece, la dimensione del testo viene calcolata in modo automatico dal browser sulla base dei valori esplicitati per lโelemento contenitore.
font-style e font-weight
Le proprietร font-style e font-weight trasformano il carattere utilizzato impostando rispettivamente uno stile (ad esempio "italic") e il grassetto ("bold"). Il valore di default per entrambi รจ "normal".
Vediamo qualche esempio di utilizzo:
span.grassetto
{
font-weight: bold;
}
span.corsivo
{
font-style: italic;
}
Si noti che attraverso queste proprietร รจ possibile anche sovvertire la stilizzazione di default impostata per taluni tag come <b> e <i>, in questo modo:
/* Tolgo il grassetto ai tag b e strong */
b, strong
{
font-weight: normal;
}
/* Tolgo l'italico ai tag i e em */
i, em
{
font-style: normal;
}
La proprietร font
Anche per questa famiglia esiste una versione compatta rappresentata dalla proprietร font. Anche questa volta possiamo usare una singola proprietร CSS per definire tutti gli aspetti della relativa famiglia in un colpo solo. Vediamo un esempio:
p
{
font: italic bold 12px/1.5 arial, tahoma, sans-serif;
}
Gli unici valori obbligatori sono font-size e font-family; tutti gli altri sono facoltativi. Ad esempio:
p
{
font: 12px arial, tahoma, sans-serif;
}
Una precisazione importante: nel primo esempio di questa proprietร abbiamo definito il font-size in questo modo:
12px/1.5
In realtร , con questa sintassi, abbiamo definito non solo la dimensione del font (12px) ma anche il valore di line-height (1.5). Vedremo in seguito a cosa corrisponde questโultima proprietร .
Le proprietร della famiglia text
Oltre alle proprietร della famiglia font, CSS prevede altre proprietร per la stilizzazione degli elementi di testo. Si tratta delle proprietร della famiglia text, cioรจ:
- text-align
- text-decoration
- text-indent
- text-transform
text-align
Attraverso la proprietร text-align รจ possibile definire lโallineamento del testo in senso orizzontale; possiamo, ad esempio, impostare un testo a destra oppure centrato a seconda dei nostri gusti e delle nostre esigenze. Questa proprietร ammette questi valori:
- left โ (default) allineamento a sinistra;
- right โ allinemaneto a destra;
- center โ allineamento centrato;
- justify โ allineamento giustificato.
Vediamo un esempio:
p.articolo
{
text-align: justify;
}
text-decoration
Questa proprietร CSS consente di applicare una "decorazione" al testo. I valori possibili sono:
- none โ (default) nessuna decorazione;
- underline โ mette una linea sotto al testo (testo sottolineato);
- overline โ mette una linea sopra al testo;
- line-through โ testo barrato (euqivalente al tag HTML <strike>).
Vediamo un esempio:
span.sottolineato
{
text-decoration: underline;
}
text-indent
Questa proprietร รจ utilizzata per specificare il rientro da sinistra della prima linea di un blocco di testo. Ammette valori percentuali o numerici accompagnati da unโunitร di misura (ad esempio "px"):
span.tab
{
text-indent: 100px;
}
text-transform
La proprietร text-transform permette di variare il case di un testo. Ammette i seguenti valori:
- none โ (default) nessuna trasformazione;
- capitalize โ mette in maiuscolo la prima lettera di ciascuna parola;
- uppercase โ mostra tutto il testo in maiuscolo;
- lowercase โ mostra tutto il testo in minuscolo.
Qualche esempio:
span.maiuscolo
{
text-transform: uppercase;
}
span.minuscolo
{
text-transform: lowercase;
}
span.iniziali_maiuscole
{
text-transform: capitalize;
}