I vantaggi dell’uso dei CSS viene resa evidente dalle proprietà dei testi, proprietà che permettono il controllo tipografico accurato, semplice per tutti ma allo stesso tempo potente. Con i css infatti è possibile controllare qualunque aspetto tipografico permettendo una resa avanzata dei testi usando le seguenti proprietà:

text-align:

text-align: left | center | right | justify

Esempi:

{text-align:justify;}

Permette di allineare il testo rispettivamente a sinistra, centrato, a destra e giustificato. 

text-decoration:

text-decoration: none | underline | overline | line-through | blink

Esempi:

a {text-decoration:underline;}
a:visited {text-decoration:line-through;}
a:hover {text-decoration:none;}

per stampare il testo: senza nessuna decorazione, sottolineato, sopralineato, barrato e lampeggiante. L’uso di blink è da evitare poiché potrebbe creare problemi fisici ad alcuni e perché, obiettivamente, è fastidioso non poco.

text-transform:

text-transform: none | uppercase | lowercase | capitalize

permette di trasformare il testo in: tutto maiuscolo (uppercase), tutto minuscolo (lowercase), ogni prima lettera in maiuscolo (capitalize) o lasciare il testo formattato come da xHTML.

line-height:

line-height: normal | <valore> | <valore percentuale>

Esempi:

{line-height: 20px;}
{line-height: 200%;}

per impostare l’interlinea del testo.

word-spacing:

word-spacing: normal | <lunghezza>

permette di aumentare o diminuire lo spazio tra le parole. Di default ha valore 0. Impostando un valore positivo tale lunghezza si aggiunge alla distanza solita, impostandone uno negativo si dimuisce.  Attenzione:

{word-spacing:10px;}

imposta una distanza tra le parole di 10px PIU’ il valore standard, non 10px in assoluto.

letter-spacing:

letter-spacing: normal | <lunghezza>

Come sopra. Di default ha valore 0 che sta ad indicare lo spazio tra le lettere standard. Anche in questo caso la lunghezza indicata va a sottrarsi o ad aggiungersi al valore di default.

text-indent:

text-indent: <lunghezza> | <percentuale>

Permette di stabilire il rientro del capoverso di un paragrafo o di un qualunque blocco di testo.

vertical-align:

vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | <valore> | <percentuale>

Inziamo subito a dire cosa NON è: non corrisponde al valign delle tabelle SE non usato nelle tabelle. Non allinea al centro di un blocco un’immagine, tanto per esser chiari, ma indica l’allineamento verticale di un elemento online rispetto ai contigui. Per esser chiari, fa ciò che si fa con gli apici o pedici.

I possibili valori accettati sono:

• baseline (allinea l’elemento alla linea base dell’elemento contiguo)
• bottom (l’elemento viene allineato con il più basso degli elementi della linea)
• middle (l’elemento viene piazzato al centro dell’elemento contenitore)
• sub (pedice)
• super (apice)
• text-bottom (l’elemento viene allineato con la parte bassa della linea di testo)
• text-top (l’elemento viene allineato con la parte alta della linea di testo)
• top (l’elemento viene allineato con il più alto degli elementi della linea)
• valore (il tal caso viene allineato secondo il valore indicato. accetta anche valori negativi)
• percentuale (allinea l’elemento di un x% rispetto al valore del line-height dichiarato.)

Esempi:

{vertical-align:middle;}

Approfondimento: Allineamento verticale con i CSS.

white-space:

{white-space: normal | pre | nowrap}

Se nel testo xhtml si inseriscono più spazi successivi, o anche ritorni a capo, questi saranno ignorati e verrà mostrato a schermo un solo spazio. Con tale proprietà si modifica tale comporamento. Con normal due o più spazi o ritorni capo vengono mostrati in un unico carattere di spazio, no-wrap fa sì che il ritorno a capo del testo si ripercuota nella pagina mostrata, mentre più spazi successivi vengono stampati come un unico spazio, con pre si imposta il ritorno a capo e gli spazi così come scritti nel codice.

Torna all'indice di: guida css

Pubblicato nella categoria Css. Feed Commenti RSS 2.0.