Stilizzare e formattare il testo coi CSS
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;
}
