L’utilizzo dei fogli di stile CSS nella costruzione di un sito, ottimizza enormemente il lavoro. I web master saranno poi facilitati se si devono fare modifiche successive e avranno un maggior controllo sul layout del sito. Fra le prime cose che si possono fare con i CSS ci sono senza dubbio quelle che modificano l’aspetto del testo. In questo articolo vedremo con ordine le diverse proprietà che si possono applicare.
Tipo di font
Cominciamo dalla scelta del font da utilizzare per le nostre pagine. In primo luogo ricordiamo che, se vogliamo modificare il font di un’intera pagina, occorrerà creare la relativa regola per il tag <body>.
La proprietà da usare per indicare il font che si vuole usare è font-family. Per esempio, per usare l’Arial per tutta una pagina, scriveremo:
body {font-family: arial}
Conviene sempre indicare più tipi di carattere, per evitare che il font scelto non sia disponibile sul computer di qualche utente. Il font che voi indicate, infatti, sarà utilizzato solo se è installato anche sul PC dell’utente finale. In caso contrario, viene utilizzato il font base di sistema, che può essere molto diverso da quello scelto e quindi modificare in modo radicale l’aspetto della vostra pagina.
Per evitare problemi di questo tipo, in genere si indica, in ordine di preferenza, una serie di font simili. In questo modo, se l’utente non dispone del font che avete scelto, verrà ricercato il secondo dell’elenco, poi il terzo e così via.
In genere, in ultima posizione, si indica anche un nome generico di famiglia di font in modo che il browser, in mancanza di meglio, scelga il font disponibile più simile a quelli indicati. In questo modo:
body {font-family: arial, helvetica, verdana, sans-serif}
Nei fogli di stile sono riconosciute le seguenti famiglie:
- serif: font con grazie (serif), come Times New Roman e Garamond;
- sans-serif: font senza grazie, come Arial, Verdana, Avant Garde, Helvetica;
- cursive: font corsivi che imitano la scrittura a mano, come Park Avenue;
- fantasy: font decorativi, come Broadway;
- monospace: font monospazio (ogni lettera occupa lo stesso spazio), come Courier.
Dimensione dei font
Per definire la dimensione dei font di un elemento, utilizzate la proprietà font-size seguita dalla dimensione che desiderate secondo le unità di misura viste nello scorso articolo intitolato “Introduzione ai CSS“, o da uno dei valori predefiniti elencati sotto:
- xx-small;
- x-small;
- small;
- medium;
- large;
- x-large;
- xx-large.
Per rendere semplicemente un testo più grande o più piccolo del font base (senza specificare la dimensione che vogliamo) possiamo usare i valori larger e smaller. Facciamo un esempio. Proviamo a definire la dimensione del font base di tutta la pagina e a rendere piuttosto piccola la dimensione del testo di un paragrafo, con classe piccolo.
body {
font-size: 10pt; }
.piccolo {
font-size: x-small; }
Stile dei font
Per la modifica dello stile del carattere esistono diverse proprietà. Una è font-style, che può assumere i valori:
- italic: usa la variante corsiva del font scelto;
- normal: usa la variante base del font scelto;
- oblique: inclina le lettere del font scelto (non usa la variante corsiva).
In genere ogni font è costituito da più varianti (base, grassetto, corsivo) create direttamente dal produttore del font stesso.
La proprietà specifica che vi permette di aumentare o diminuire lo spessore del caratteri, quindi di ottenere diverse varianti di grassetto o un testo più leggero, è font-weight. I valori possibili sono:
- extra-light;
- demi-light;
- light;
- medium;
- extra-bold;
- demi-bold;
- bold.
Se non volete usare uno dei valori predefiniti appena elencati, potete specificare un numero multiplo di 100, considerando che il valore del testo normale è 400.
Un’altra proprietà che vi permette di influenzare lo stile del carattere è text-decoration. I valori che può assumere sono:
- none: al testo non è applicato alcun effetto (abbiamo visto nello scorso capitolo che si può usare per togliere la sottolineatura dai link);
- underline: sottolineato;
- italic: corsivo
- line-through: barrato.
Il valore none permette, se necessario, di annullare l’effetto di una proprietà eventualmente ereditata da un elemento superiore.
Maiuscole e minuscole
Sono forse meno utilizzate le proprietà che permettono di trasformare il testo in maiuscole e minuscole. In particolare, esiste la proprietà text-transform, che può assumere i seguenti valori:
- capitalize: rende maiuscola la prima lettera di tutte le parole. Utile per i titoli in lingua inglese;
- uppercase: rende tutte le lettere maiuscole;
- lowercase: rende tutte le lettere minuscole;
- none: lascia invariato il testo.
Esiste anche la proprietà font-variant che, se assume il valore small-caps, vi permette di rendere il testo in maiuscoletto (cioè lettere maiuscole della dimensione delle lettere minuscole). font-variant può assumere anche il valore none per eliminare il maiuscoletto.
Colore del font
La proprietà che permette di impostare il colore del font è font-color , seguita da un colore come ad esempio red per il rosso, white per il bianco, black per il nero, usando il codice esadecimale come ad esempio #999999 per il grigio o i suoi valori RGB come abbiamo visto nello scorso articolo “Introduzione ai CSS“. Per aiutarvi a trovare il colore giusto potete ricorrere a molti programmi, se usate ad esempio Photoshop basta fare clic sul colore di primo piano nella barra degli strumenti, scegliere il colore e tra i valori posti a destra troverete anche il codice esadecimale e i valori RGB da usare nel vostro stile, come visibile in figura 1.
Quando avete trovato il codice numerico se usate il valore edadecimale ricordatevi di aggiungere il carattere cancelletto # davanti al numero, altrimenti il colore non viene riconosciuto, in questo modo:
font-color: #2585e6
Allineamento
La proprietà che permette di definire l’allineamento di un testo è text-align. Può assumere i seguenti valori:
- right;
- left;
- center;
- justify.
La proprietà text-align si applica solo agli elementi (X)HTML di tipo blocco. Gli elementi in linea seguono l’allineamento del blocco in cui sono inseriti.
Interlinea
L’interlinea è lo spazio fra due righe, misurato dalle linee di base delle righe stesse. Normalmente i word processor e i browser usano un’interlinea singola, ossia uguale al corpo del carattere aumentato di due punti (per un carattere corpo 12, si avrà un’interlinea di 14 punti), sufficiente per evitare che le aste discendenti di una riga si uniscano alle aste ascendenti della riga successiva.
La proprietà line-height permette di modificare la dimensione dell’interlinea. Accetta valori numerici espressi secondo le unità di misura viste nello scorso articolo “Introduzione ai CSS”. Anche l’interlinea si modifica per gli elementi in blocco.
Spaziatura
Le proprietà word-spacing e letter-spacing permettono rispettivamente di modificare la distanza tra le parole o tra le lettere. Accettano valori numerici espressi con le solite unità di misura. Potete anche ottenere un effetto di avvicinamento di parole e lettere utilizzando valori negativi. Non tutti i browser sono in grado, però, di effettuare un rendering corretto.
Rientri
Se vogliamo rientrare il testo rispetto al margine, possiamo usare la proprietà text-indent, seguita da un valore numerico con le solite unità di misura.
Sfondo del testo
Per il testo può essere impostato un colore di sfondo (o anche un’immagine, ma di questo parleremo meglio nel prossimo articolo). Potremmo così ottenere una sorta di effetto evidenziatore. La proprietà da utilizzare è background-color. Vi proponiamo direttamente un esempio:
<head>
<style type="text/css">
.evidenziato { background-color: #FFFF00; }
</style>
</head>
<body>
<p>Lorem ipsum</p>
<p>Lorem ipsum <b>dolor sit amet</b>, consectetuer adipiscing elit. Suspendisserutrum metus nonummy augue. In hac habitasse platea dictumst. Nulla arcu libero, nonummy non, suscipit a, mollis non, augue.
<span class="evidenziato">Maecenas</span> porttitor urna vel enim. Nam eget tortor. <u>Mauris</u> facilisis suscipit felis.
</p>
</body>
</html>
Il testo inserito nel tag <span class="evidenziato"></span> apparirà con uno sfondo colorato. In questo caso è un giallo carico, come visibile in figura 2.
Modifica del cursore
In conclusione di questo articolo, vogliamo proporvi una modifica che non riguarda proprio il testo, ma un qualsiasi elemento della pagina. È infatti possibile modificare l’aspetto assunto dal cursore quando passa sopra a un determinato elemento. La proprietà da usare, cursor, può assumere i seguenti valori:
- default: la classica freccia;
- crosshair: una croce sottile;
- move: una freccia a quattro punte;
- wait: una clessidra o l’orologio con Macintosh;
- help: la freccia e il punto di domanda;
- text: un cursore con la forma del punto di inserimento del testo;
- progress: la freccia e la clessidra.
Vi consigliamo di usare con moderazione questa proprietà (o magari di non usarla affatto…) per evitare di disorientare i vostri utenti.
Autore: Alessandra Salvaggio – Tratto da: XHTML e CSS Guida all’uso – Edizioni FAG
