CSS HOME Effetti sul testo

|  Status Bar

Effetti speciali sul testo

in CSS

Le proprieta' relative ai font non si riferiscono al tipo di carattere gia' analizzato nella sezione Font del testo ma al loro aspetto e taluni punti relativi al posizionamento. Mentre nella sezione "Front del testo" ci siamo preoccupati all'aspetto dello stesso, quì curiamo il posizionamento e la spaziatura del testo all'interno del paragrafo.

Attributo Letter-Spacing

Letter-spacing stabilisce la distanza tra le singole lettere all'interno di un documento. I valori sono espressi in misure em. Si tratta di un'unita' di misura pari alla grandezza della lettera m. Viene usata anche con decimali.
Per esempio la seguente linea di codice all'interno del documento HTML :

<DIV STYLE="font-family:arial; letter-spacing:1em">
Dimosrazione di spaziatura tra i caratteri con 
l'attributo Letter-Spacing in CSS.
</DIV>

Produce il seguente effetto :

Avrei potuto mettere il comando anche nello Head del documento dentro STYLE oppure nel foglio di stile separato (style.css) il risultato non cambia, cambia solo il modo di attaccare lo stile al documento (in linea, incorporato oppure esterno).

Attributo Word-Spacing

L'attributo Word-Spacing stabiliscela distanza tra parole all'interno del documento. I valori sono espressi in em. I valori negativi avvicinano la distanza tra le parole rispetto alle misure standard.
Per esempio la seguente linea di codice fra i tag STYLE del documento HTML :

<STYLE type="text/css">
P EM   { word-spacing: -0.5em }
P.note { word-spacing: 3em }
</STYLE>

Produrrà il seguente effetto :

Ed ecco anche il codice per meglio capire l'esempio :

Attributo text-transform

Questo attributo permette di manipolare le minuscole e le maiuscole del testo grazie a tre parole chiave:

• uppercase: rende maiuscole tutte le lettere dell'elemento considerato.
• lowercase: rende minuscole tutte le lettere dell'elemento considerato.
• capitalize: rende maiuscola solo la prima lettera di ogni parola.

Il seguente esempio rende l'idea :

<STYLE type="text/css">
P.up { text-transform : uppercase }
P.low { text-transform : lowercase }
P.cap { text-transform : capitalize }
</STYLE>

A seconda della classe con cui scriverò nel documento avrò il testo o tutto in maiuscolo o tutto in minuscolo oppure con le lettere iniziali sempre in maiuscolo; le figure quì sotto sono molto più esplicative :

ed ecco il codice HTML dell'esempio :

Attributo text-align

Questo attributo ha la funzione di visualizzare il testo in quattro posizioni:

• left (sinistra)
• right (desta)
• center (centrato)
• justify (giustificato)

ad esmpio :

<STYLE type="text/css">
H1 { text-align: center }
P  { text-align: right }
</STYLE>

consente di allineare al centro tutto il testo con tag H1 e di allineare a destra quello in P.

Attributo text-indent

Questo attributo definisce la quantita' di spazio (espressa in valori assoluti em o in pollici) aggiunta immeditamente prima della prima parola all'inizio del paragrafo.

Per esempio :

<DIV STYLE="font-family:arial; 
		text-indent: 5em">
Testo di prova per ....
</DIV>

Viene così visualizzato :

Attributo line-height

L'attributo line-height definisce la distanza verticale tra le varie linee di testo. I valori sono espressi in percentuali o in unita' assoluti em. Tali valori sono direttamente proporzionali alla grandezza del testo (font-size). Per cui, nell'esempio che segue, essendo il valore assoluto line-height impostato su 2 e il testo su 18px, la distanza sara 36px (18px * 2em).

Esempio :

<DIV STYLE="font-family:arial; 
               font-size:18px; 
               width:400px; 
               line-height: 2em">
Testo di prova per ....
</DIV>

Verrà così visualizzato :