Scopo
Illustrare alcune proprietà utilizzabili per la formattazione del testo.
CSS mette a dispozione un gran numero di proprietà che consentono di definire:
- stile e dimensione dei caratteri;
- colore e sfondo del testo;
- allineamento, rientro, interlinea, spaziatura;
- orientazione e direzione;
Tipo, stile e dimensione dei caratteri
Informazioni dettagliate su questo argomento possono essere trovate in: CSS3 Fonts Module Level 3
font-family
La proprietà che ha maggior impatto sulla rappresentazione dei caratteri è font-family.
Per font si intende lo stile di un set completo di caratteri tipografici. Ne esistono un numero enorme di tipi che possono essere raggruppati in famiglie. CSS riconosce le seguenti famiglie generiche di font:
- serif
- baskerville, cambria, garamond, georgia, "times new roman", ...
- san-serif
- arial, helvetica, verdana, tahoma, geneva, ...
- cursive
- "lucida handwriting","french script mt","bradley hand itc","freestyle script","vladimir script", ...
- fantasy
- stencil, impact,...
- monospace
- courier, "courier new", "lucida console", monaco, consolas, ...
CSS consente di assegnare a font-family un elenco di valori ognuno dei quali individua un particolare tipo di font. Il browser utilizzerà il primo a sua disposizione secondo l'ordine di definizione. E' possibile assegnare a font-family il nome generico della famiglia di appartenenza per cui le seguenti sono dichiarazioni legittime:
font-family:baskerville, cambria, garamond, georgia, "times new roman", serif;
SERIF SIGNIFICA GRAZIE, sono quei segnetti alle estremità dei caratteri.
0 1 2 3 4 5 6 7 8 9 10 £ $ % & ( ) = ? !
font-family:arial, helvetica, verdana, tahoma, geneva, san-serif;
SAN-SERIF SIGNIFICA SENZA GRAZIE, sono caratteri più spartani, più essenziali.
0 1 2 3 4 5 6 7 8 9 10 £ $ % & ( ) = ? !
"lucida handwriting","french script mt","bradley hand itc","freestyle script","vladimir script", cursive;
LO STILE CORSIVO riproduce per quando possibile la scrittura a mano.
0 1 2 3 4 5 6 7 8 9 10 £ $ % & ( ) = ? !
font-family:stencil, impact, fantasy;
DI FAMIGLIE FANTASY IL MIO BROWSER NE CONOSCE POCHE.
0 1 2 3 4 5 6 7 8 9 10 £ $ % & ( ) = ? !
font-family:courier, "courier new", "lucida console", monaco, consolas, monospace;
SONO FONT CON CARATTERI UNIFORMEMENTE SPAZIATI. Possono essere con o senza grazie.
0 1 2 3 4 5 6 7 8 9 10 £ $ % & ( ) = ? !
font-size
La dimensione dei caratteri può essere espressa in maniera assoluta assegnando a font-size uno dei seguenti valori: xx-small, x-small, small, medium, large, x-large, xx-large.
provo ognuno di essi:
caratteri piccolissimi
caratteri molto piccoli
caratteri piccoli
caratteri medi
caratteri grandi
caratteri molto grandi
caratteri grandissimi
La dimensione assoluta dei caratteri può essere espressa anche in punti tipografici o in pixel:
Dimensione di questi caratteri: 14pt
Dimensione di questi caratteri: 30px
La dimensione dei caratteri può essere espressa anche in forma relativa rispetto alla dimensione standard della font-family assegnando font-size i valori "smaller" e "larger" o in modo percentuale.
Dimensione dei caratteri un po più piccoli dello standard - font-size:smaller;
Dimensione dei caratteri un po più grandi dello standard - font-size:larger;
Dimensione di questi caratteri: 130% rispetto allo standard - font-size:130%;
font-style
La proprietà font style può assumere uno dei seguenti valori: normal, italic, oblique. Il valore di default è normal. L'effetto dell'applicazione dello stile può variare a seconda della font family applicata. Proviamone gli effetti:
STILE NORMAL - Questo paragrafo è scritto con lo stile normal
STILE ITALIC - Questo paragrafo è scritto con lo stile italic
STILE OBLIQUE - Questo paragrafo è scritto con lo stile oblique
STILE NORMAL - Questo paragrafo è scritto con lo stile normal
STILE ITALIC - Questo paragrafo è scritto con lo stile italic
STILE OBLIQUE - Questo paragrafo è scritto con lo stile oblique
L'effetto dell'applicazione dello stile può variare molto a seconda della font family:
STILE NORMAL - Questo paragrafo è scritto con lo stile normal
STILE ITALIC - Questo paragrafo è scritto con lo stile italic
STILE OBLIQUE - Questo paragrafo è scritto con lo stile oblique
STILE NORMAL - Questo paragrafo è scritto con lo stile normal
STILE ITALIC - Questo paragrafo è scritto con lo stile italic
STILE OBLIQUE - Questo paragrafo è scritto con lo stile oblique
STILE NORMAL - Questo paragrafo è scritto con lo stile normal
STILE ITALIC - Questo paragrafo è scritto con lo stile italic
STILE OBLIQUE - Questo paragrafo è scritto con lo stile oblique
font-weight
Consente di variare lo spessore/ la marcatura dei caratteri. puà assumere uno dei seguenti valori: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Ecco l'effetto dell'applicazione di diversi valori di font-weight:
Font-family:serif; font-size di default; font-weight:normal;
Font-family:serif; font-size di default; font-weight:lighter;
Font-family:serif; font-size di default; font-weight:bold;
Font-family:serif; font-size di default; font-weight:bolder;
Font-family:serif; font-size di default; font-weight:100;
Font-family:serif; font-size di default; font-weight:900;
Font-family:cursive; font-size di default; font-weight:normal;
Font-family:cursive; font-size di default; font-weight:lighter;
Font-family:cursive; font-size di default; font-weight:bold;
Font-family:cursive; font-size di default; font-weight:bolder;
Font-family:cursive; font-size di default; font-weight:100;
Font-family:cursive; font-size di default; font-weight:900;
Colore e sfondo del testo, foreground e background
Informazioni dettagliate sulla proprietà che hanno a che fare con i colori possono essere trovate in: CSS3 Color Module Level 3
I valori delle proprietà color e background possono essere assegnate tramite il nome del colore, il suo valore nelle rappresentazioni rgb esadecimale(#xxxxxx) e decimale (rgb(dd,dd,dd)).
| esempio | color name | valore rgb hex | valore rgb dec |
|---|---|---|---|
| ________ | black | #000000 | 0,0,0 |
| ________ | silver | #C0C0C0 | 192,192,192 |
| ________ | gray | #808080 | 128,128,128 |
| ________ | white | #FFFFFF | 255,255,255 |
| ________ | maroon | #800000 | 128,0,0 |
| ________ | red | #FF0000 | 255,0,0 |
| ________ | purple | #800080 | 128,0,128 |
| ________ | fuchsia | #FF00FF | 255,0,255 |
| ________ | green | #008000 | 0,128,0 |
| ________ | lime | #00FF00 | 0,255,0 |
| ________ | olive | #808000 | 128,128,0 |
| ________ | yellow | #FFFF00 | 255,255,0 |
| ________ | navy | #000080 | 0,0,128 |
| ________ | blue | #0000FF | 0,0,255 |
| ________ | teal | #008080 | 0,128,128 |
| ________ | aqua | #00FFFF | 0,255,255 |
Paragrafo scritto con caratteri bianchi su fondo nero, ma cosa succede se arrivo a fondo linea. Basta solo provare a scrivere un paragrafo più lungo.
Paragrafo scritto con caratterei gialli su fondo rosso
Il paragrafo è in una div con background:black, color:white.
Il paragrafo è in una div con background:red, color:yellow.
Allineamento, rientro, interlinea, spaziatura
Informazioni dettagliate sulla proprietà che hanno a che fare con i testi possono essere trovate in : CSS3 Text Module Level 3
Proprietà text-align
text-align può assumere uno dei seguenti valori: start, end, left, right, center, justify, match-parent, start end.
text-align:start; è il valore di default. Proviamo gli altri valori applicandoli alle sezioni di testo che seguono:
text-align:end;
text-align:end; prima di provarlo non ho idea di cosa faccia. La definizione è: il contenuto inline-level è allineato con il bordo finale del line box.
Ora è chiaro.
text-align:left;
text-align:left; La definizione è: il contenuto inline-level è allineato al margine sinistro del line-box.
Da questa definizione non capisco la differenza con start.
Forse il suo effetto dipende dalla proprietà text-orientation o dalla dimensione del text-box
Infatti.
text-align:right;
text-align:right; La definizione è: il contenuto inline-level è allineato al margine destro del line-box.
Da questa definizione non capisco la differenza con end.
Forse il suo effetto dipende dalla proprietà text-orientation o dalla dimensione del text box.
Infatti.
text-align:center;
text-align:center; La definizione è: il contenuto inline-level è centrato all'interno del line-box.
Per questa definizione non dovrebbero esserci problemi.
Il suo effetto è chiaro.
Infatti.
text-align:justify;
text-align:justify; La definizione è: il contenuto inline-level è justificato in accordo al metodo specificato dalla proprietà text-justify. Proprietà, questa, che nelle mie prime intenzioni avevo deciso di trascurare. Forse la proprietà text-justify introduce raffinatezze ulteriori sulla modalità di giustificazione, ma il valore di default dovrebbe funzionare in maniera usuale. Se fosse come penso, ogni linea di testo dovrebbe iniziare e terminare rispettivamente all'inizio ed alla fine del line-box.
Il suo effetto è in linea con quanto mi aspettavo.
Ma più avanti voglio verificare le possibilità offerte dalla proprietà text-justify.
text-align:match-parent;
text-align:match-parent; La definizione è: questo valore si comporta come ereditato dal suo genitore, con l'eccezione che le eventuali proprietà start ed end sono interpretate come left e right rispettivamente. Nel caso in oggetto, non avendo specificato alcun valore per la proprietà text-align dei blocchi contenti il blocco corrente, la proprietà ereditata dovrebbe essere start interpretata come left. Resta il fatto che ancora non ho ben capito la differenza fra start e left.
Il suo effetto è in linea con quanto mi aspettavo.
text-align:start end;
text-align:start end; La definizione è: Specifica l'allineamento start della prima linea e di ogni linea immediatamente
successiva ad un line-break forzato, ed un allineamento end per ogni restante linea. Ora forzo un line-break, vediamo cosa succede:
Se ho ben capito questa linea parte dalla posizione start. La linea successiva si troverà invece allineata a destra. E vero? Non lo so, non
ho capito come funziona e forse non vale la pena perderci più tempo. Il suo effetto pertanto resta, per me, misterioso.
Proprietà text-indent
L'indentazione delle linee di testo dopo un ritorno a capo può essere assegnato tramite un numero assoluto o relativo.
text-indent:5%;
Questo paragrafo si trova all'interno di un blocco di testo peri il quale ho impostato la proprietà text indent al 5%.
Le altre proprietà impostate sono:
background:lime;
color:black;
font-family:garamond, serif;
font-size:16;
Il box contiene più paragrafi, alcuni più lunghi di una linea, altri più corti. Alcune line andranno pertanto a capo automaticamente. Altre sono invece interrotte tramite il tag <br> che provoca un "a capo" forzato senza però interrompere il paragrafo.
Questo è un paragrafo più corto di una linea.
Nella specifica CSS3 Text Module Level 3 vengono descritte due parole chiave: hanging e each-line, ma non sembrano, per il momento, avere effetto
text-indent:5em;
Questo paragrafo si trova all'interno di un blocco di testo peri il quale ho impostato la proprietà text indent a 5em.
Le altre proprietà impostate sono:
background:lightgray;
color:black;
font-family:"lucida handwriting", cursive
font-size:16;
Il box contiene più paragrafi, alcuni più lunghi di una linea, altri più corti. Alcune line andranno pertanto a capo automaticamente. Altre sono invece interrotte tramite il tag <br> che provoca un "a capo" forzato senza però interrompere il paragrafo.
Questo è un paragrafo più corto di una linea.
Nella specifica CSS3 Text Module Level 3 vengono descritte due parole chiave: hanging e each-line, ma non sembrano, per il momento, avere effetto
Proprietà line-height
Controlla lo spazio verticale occupato da ogni linea di testo.Il suo valore può essere espresso in forma assoluta o relativa. A meno di esigenze particolari conviene sempre esprimere le dimensioni in forma relativa, ad esempio in unità em (la dimensione del carattere M per il font corrente). Se non specificato assume un valore "auto" dipendente dalle altre proprietà del testo. Può, tramite la keyword "inherit" ereditare il valore dal suo elemento padre.
line-height:1em;
Nel paragrafo precedente la proprietà line-height non era stata specificata, aveva quindi
assunto il valore "auto". Nel presente paragrafo line-height è impostata a 1em. In questo modo la linea
di testo ha la stessa altezza dei caratteri che la compongono, più qualcosina giusto per non far appiccicare le linee.
line-height:1em;
Come nel paragrafo precedente, line-eight vale 1em, l'unica cosa che cambia
è il valore di font-size. Le proporzioni rimangono le stesse.
line-height:1.2em;
Spaziatura verticale aumentata del 20%.
line-height:120%;
Spaziatura verticale aumentata del 20%.
Proprietà word-spacing
Consente di modificare la spaziatura fra le parole. Può assumere un valore numerico assoluto o relativo o il suo valore di default "normal". Questo paragrafo è scritto con word-spacing:normal;
word-spacing:2em
Questo paragrafo è scritto con spaziatura fra le parole pari a 2em.
word-spacing:2ch
Questo paragrafo è scritto con spaziatura fra le parole pari a 2ch.
Proprietà letter-spacing
Consente di modificare la spaziatura fra le lettere di una parola. Può assumere un valore numerico assoluto o relativo o il suo valore di default "normal". Questo paragrafo è scritto con word-spacing:normal;
word-spacing:2em
Questo paragrafo è scritto con spaziatura fra le parole pari a 2em.
word-spacing:2ch
Questo paragrafo è scritto con spaziatura fra le parole pari a 2ch.
Orientazione e direzione
Informazioni dettagliate sulla proprietà che hanno a che fare con le modalità di scrittura: CSS Writing Modes Level 3
Riporto solo qualche esempio di orientazione del testo. L'argomento mi sembra piuttosto complesso.
box1 Qualche linea di testo
Per verificare il flusso delle linee
Per verificare il flusso dei caratteri
Ancora qualche linea di testo
Un'altra linea di testo 1
box2 Qualche linea di testo
Per verificare il flusso delle linee
Per verificare il flusso dei caratteri
Ancora qualche linea di testo
Un'altra linea di testo 2
box3 Qualche linea di testo
Per verificare il flusso delle linee
Per verificare il flusso dei caratteri
Ancora qualche linea di testo
Un'altra linea di testo 3
box4 Qualche linea di testo
Per verificare il flusso delle linee
Per verificare il flusso dei caratteri
Ancora qualche linea di testo
Un'altra linea di testo 4
box5 Qualche linea di testo
Per verificare il flusso delle linee
Per verificare il flusso dei caratteri
Ancora qualche linea di testo
Un'altra linea di testo 1
box6 Qualche linea di testo
Per verificare il flusso delle linee
Per verificare il flusso dei caratteri
Ancora qualche linea di testo
Un'altra linea di testo 2
box7 Qualche linea di testo
Per verificare il flusso delle linee
Per verificare il flusso dei caratteri
Ancora qualche linea di testo
Un'altra linea di testo 3
box8 Qualche linea di testo
Per verificare il flusso delle linee
Per verificare il flusso dei caratteri
Ancora qualche linea di testo
Un'altra linea di testo 4