Testo
| text-decoration |
Di seguito verranno illustrati i valori dell'attributo text-decoration. Siccome trovano il loro principale impiego applicati ai link, gli esempi a seguire verranno impostati proprio a questi ultimi.
<A HREF=# STYLE="text-decoration: underline">Collegamento</A>
Potra' sembrare superfluo, ma non bisogna dimenticare che annullerebbe l'effetto di un diverso stile assegnato in precedenza.
<A HREF=# STYLE="text-decoration: underline overline">Collegamento</A>
<A HREF=# STYLE="text-decoration: none">Collegamento</A>
| Allineamento |
Possiamo utilizzare essenzialmente due attributi per allineare il testo in senso orizzontale. Il primo (text-align), risponde in modo analogo al classico ALIGN di HTML applicato all'interno di alcuni tag quali ad esempio DIV e P, permettendo cosi' di allineare anche altri elementi. I possibili valori sono justify, left, center e right. Ecco sintassi ed esempio.
<DIV STYLE="text-align: center"> Testo <IMG SRC=img/dot.gif> </DIV>
Il secondo elemento e' piu' interessante perche' ci permette di posizionare con estrema precisione e semplicita' (sempre in senso orizzontale) risparmiandoci il compito di escogitare sotterfugi tipo tabelle, no-break space ( ) e gif trasparenti.
<P STYLE="text-indent: 150px"> Testo indentato 150 pixel </P>
Testo indentato 150 pixel
| Spaziatura verticale |
Anche questo attributo puo' assumere una certa importanza: permette infatti di spaziare il testo in senso verticale, esimendoci ancora una volta dal compito di scrivere codice non perfettamente idoneo allo scopo (vedi sopra).
<P STYLE="line-height: 80px"> Testo da spaziare </P>Testo da spaziare Testo da spaziare Testo da spaziare Testo da spaziare Testo da spaziare Testo da spaziare Testo da spaziare Testo da spaziare Testo da spaziare Testo da spaziare Testo da spaziare Testo da spaziare
Per chiudere il capitolo riguardante il testo illustriamo di seguito alcuni comandi forse un po' meno significativi dal punto di vista prettamente utilitaristico, ma che potrebbero comunque rivelarsi utili in alcune occasioni.
Letter-spacing:<P STYLE="letter-spacing: 10px"> Letter-spacing </P>
Letter-spacing
Text-transform: lowercase
<P STYLE="text-transform: lowercase"> TRASFORMA IN MINUSCOLO UNA FRASE SCRITTA IN MAIUSCOLO </P>
TRASFORMA IN MINUSCOLO UNA FRASE SCRITTA IN MAIUSCOLO
Text-transform: uppercase
<P STYLE="text-transform: uppercase"> trasforma in maiuscolo una frase scritta in minuscolo </P>
trasforma in maiuscolo una frase scritta in minuscolo
Text-transform: capitalize
<P STYLE="text-transform: capitalize"> rende in maiuscolo la prima lettera di ogni parola </P>
rende in maiuscolo la prima lettera di ogni parola
© 2002 Poletti Stefano