Introduzione ai CSS - Stile del testo
Wednesday 9 January 2008 Marco Bertoni, ultimo aggiornamento: Tuesday 19 August 2008.
Scelte le dimensioni e la famiglia di caratteri, aggiungiamo un po' di stile. Un altro articolo sulla tipografia CSS.
Corsivo
La proprietà font-style consente di rendere il testo in corsivo ed ha quattro valori possibili: normal, italic, oblique e inherit.
L'effetto corsivo1 può essere ottenuto in due modi:
- Utilizzando la variante corsiva del carattere (valore
italic). - Oppure inclinando di circa 15 gradi il carattere normale (valore
oblique).
Se il valore associato alla regola è italic, ma non esistono varianti corsive del carattere, allora il browser ripiegherà su oblique (e viceversa).
Le famiglie di caratteri sans-serif considerano generalmente identici i valori italic e oblique mentre le famiglie serif li distinguono.
Maiuscoletto
La proprietà font-variant imposta il carattere maiuscoletto, i valori sono normal e small-caps. Un carattere maiuscoletto ha lettere minuscole simili alle maiuscole, ma più piccole e con proporzioni differenti.
Siccome la maggior parte dei caratteri non ha varianti maiuscoletto, nella specifica CSS 2.1 si afferma che è accettabile generare il carattere maiuscoletto a partire da un carattere normale, rimpiazzando le lettere minuscole con lettere maiuscole scalate.
Infine, come ultima risorsa, possono essere utilizzate dallo User Agent lettere maiuscole per rimpiazzare un carattere maiuscoletto mancante.
Peso del testo
La proprietà font-weight seleziona il peso del carattere. I valori possibili sono:
normal- E' lo stato normale. Corrisponde al valore numerico
400. bold- Grassetto. Corrisponde generalmente al valore
700. - range numerico
- Peso variabile espresso numericamente dal più leggero
100al più pesante900. La maggior parte dei browser supporta solo alcuni dei valori del range numerico. bolder- Imposta un peso maggiore del valore ereditato.
lighter- Peso minore del valore ereditato.
inherit- Assicura che il valore sia ereditato.
Chi desidera approfondire può consultare la specifica CSS.
Allineamento orizzontale del testo
La proprietà text-align controlla l'allineamento orizzontale del contenuto testuale di un elemento. I valori possibili sono:
left- Allinea il testo a sinistra.
right- Allinea il testo a destra.
center- Allinea il testo al centro.
justify- Giustifica il testo (allineamento sia a sinistra che a destra)
inherit- Assicura che il valore sia ereditato.
Il testo giustificato non dovrebbe essere utilizzato nella tipografia web.
Questo perché nella tipografia tradizionale quando il testo è giustificato è mantenuto uno spazio coerente tra le parole (per esempio sillabando ecc.). Sul web questo non è ancora possibile, quindi il rischio è che il testo risulti notevolmente meno leggibile a causa della accentuata variabilità nelle dimensioni dello spazio bianco tra le parole.
Allineamento verticale del testo
La proprietà vertical-align controlla l'allineamento verticale delle lettere e delle immagini e si applica agli elementi in linea (affronteremo in un articolo successivo la differenza tra elementi in linea e a blocco).
I valori possono essere una parola chiave, una misura di lunghezza o una percentuale (relativa all'interlinea dell'elemento). Vediamo il significato delle parole chiave:
baseline- Allinea la linea di base dell'elemento figlio con quella del genitore. E' il valore predefinito.
sub- Allinea la linea di base dell'elemento con la posizione prevista dal tipo di carattere del genitore per il pedice.
sup- Allinea la linea di base dell'elemento con la posizione prevista dal tipo di carattere del genitore per l'apice.
text-top- Allinea il top dell'elemento con il top delle lettere più alte del genitore.
middle- Allinea la metà verticale dell'elemento (immagine) con la metà dell'altezza delle lettere minuscole del genitore (
0.5exsopra la linea di base). text-bottom- Allinea il bottom dell'elemento con il bottom del tipo di carattere del genitore.
top- Il top dell'elemento è allineato con il top della "cosa" più alta nella riga.
bottom- Allinea il bottom dell'elemento con il bottom della "cosa" più bassa nella riga.
Decorazione
La proprietà text-decoration controlla le decorazioni aggiunte al testo di un elemento utilizzando il colore dell'elemento stesso. I valori possibili sono:
underline- Sottolineatura.
overline- Sovralineatura.
line-through- Il testo è attraversato da una riga.
blink- Il testo lampeggia.
E' anche possibile associare all'elemento due decorazioni in un'unica dichiarazione.
p { text-decoration: underline overline; }
Uso delle lettere maiuscole
La proprietà text-transform controlla l'uso delle maiuscole nel testo. I valori possibili sono:
capitalize- Trasforma il primo carattere di ogni parola in maiuscolo.
uppercase- Trasforma tutti i caratteri in maiuscolo.
lowercase- Trasforma tutti i caratteri in minuscolo.
none- Nessuna trasformazione (utile per annullare l'effetto).
Contribuisci alla serie di articoli Introduzione ai CSS
Note
- Il nome "italic" deriva al fatto che questo tipo di carattere fu inventato nel rinascimento in Italia dal tipografo veneziano Aldo Manuzio [indietro]
Thursday 10 January 2008 7:57
Ricordiamo anche il bug di IE6/7 con lo stile italic: in pratica, in una pagina o in un box che contiene del testo in italic si potrebbe verificare 1) l’allargamento del box se questo ha una dimensione specificata 2) la comparsa di una barra di scorrimento orizzontale a determinate risoluzioni di schermo. la soluzione consiste nel dare
overflow:visibleal contenitore o direttamente all’elementobodyse il contenitore coincide con tale elemento.Ulteriori informazioni su questo link.
Thursday 10 January 2008 9:45
Ottimo! Thanks Grabriele ;)