Le proprieta' relative ai font non si riferiscono al tipo di carattere (gia' analizzato nella sezione "Attributi di stile per il testo") ma al loro aspetto e taluni punti relativi al posizionamento.
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.
<DIV STYLE="font-family:arial; letter-spacing:1em">
fauser.edu e' il web scolastico dell'Istituto Tecnico Industriale Statale "G.Fauser".
</DIV>
Attributo text-transform
Questo attributo permette di manipolare le minuscole e le maiuscole del testo grazie a tre parole chiave:
<DIV STYLE="font-family:arial; text-transform:uppercase">
fauser.edu e' il web scolastico dell'Istituto Tecnico Industriale Statale "G.Fauser".
</DIV>
<DIV STYLE="font-family:arial; text-transform:capitalize">
fauser.edu e' il web scolastico dell'Istituto Tecnico Industriale Statale "G.Fauser".
</DIV>
<DIV STYLE="font-family:arial; text-transform:lowercase">
fauser.edu e' il web scolastico dell'Istituto Tecnico Industriale Statale "G.Fauser".
</DIV>
Attributo text-align
Questo attributo ha la funzione di visualizzare il testo in quattro posizioni: left (sinistra), center (centrato), right (destra) e justify (giustificato).
<DIV STYLE="font-family:arial; text-align: right">
Il passaggio verso nuovi scenari tecnologici che richiedono menti d'opera motiva e necessita un impegno corale sui temi della formazione: non si tratta dell'utopia del nuovo mondo, ma di una sfida concreta che richiede una forte alleanza, un forte coinvolgimento comune tra le vecchie e le nuove generazioni. La formazione rappresenta infatti una infrastruttura strategica di importanza vitale per l'avvenire del Paese e del sistema produttivo.
</DIV>
Attributo text-indent
Questo attributo definisce la quantita' di spazio (espressa in valori assoluti em o in pollici) aggiunta immeditamente prima della prima parola.
<DIV STYLE="font-family:arial; text-indent: 5em">
Il passaggio verso nuovi scenari tecnologici che richiedono menti d'opera motiva e necessita un impegno corale sui temi della formazione: non si tratta dell'utopia del nuovo mondo, ma di una sfida concreta che richiede una forte alleanza, un forte coinvolgimento comune tra le vecchie e le nuove generazioni. La formazione rappresenta infatti una infrastruttura strategica di importanza vitale per l'avvenire del Paese e del sistema produttivo.
</DIV>
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 14px, la distanza sara 28px (14px * 2em).
<DIV STYLE="font-family:arial; font-size:14px; width:400px; line-height: 2em">
Il passaggio verso nuovi scenari tecnologici che richiedono menti d'opera motiva e necessita un impegno corale sui temi della formazione: non si tratta dell'utopia del nuovo mondo, ma di una sfida concreta che richiede una forte alleanza, un forte coinvolgimento comune tra le vecchie e le nuove generazioni. La formazione rappresenta infatti una infrastruttura strategica di importanza vitale per l'avvenire del Paese e del sistema produttivo.
</DIV>
Attributo list-style
La proprieta' list-style consente di sostituire i punti elenco standard di HTML con immagini in formato GIF. E' possibile applicare tali punti a tutto l'elenco o soltanto ad una parte di questo.
<style type="text/css">
UL { list-style-image:URL(punto.gif) }
</style>
Link senza sottolineatura
Da sempre i link testuali vengono visualizzati dai browser con una sottolineatura (underline) che ne ribadisce la funzione. Internet Explorer da' la possibilita' di eliminare tale sottolineatura agendo sulle proprieta' del browser. Con i fogli di stile gli svilupattori hanno la possibilita' di eliminare del tutto la sottolineatura attraverso un semplice codice da inserire tra i marcatori BODY del documento:
<style type="text/css">
A:link, A:visited { text-decoration: none }
</style>
Link sottolineato solo al passaggio del mouse
L'esempio visto in precedenza puo' essere rielaborato per rendere le pagina piu' accativante. Fermo restando che i link non abbiano sottolineatura, e' possibile che la ottengano solo quando il mouse vi passa sopra, grazie alle proprieta' A:hover.
<style type="text/css">
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>
In riferimento all'ultimo esempio e' possibile impostare il CSS per l'effetto contrario: i link sono sottolineati di default ma perdono la sottolineatura quando il mouse vi passa sopra:
<style type="text/css">
A:link, A:visited { text-decoration: underline }
A:hover { text-decoration: none }
</style>
Link cambiano colore al passaggio del mouse
Sfruttando ulteriormente la proprieta' A:hover e' possibile creare un effetto mediante il quale i link hanno un colore di default, che cambia quando il mouse vi passa sopra. Il colore puo' essere impostato come parola chiave (red, green, blue ecc.) o come tripletta esadecimale.
<style type="text/css">
A:hover { color: red }
</style>
Link cambiano colore di sfondo al passaggio del mouse
Ancora la proprieta' A:hover che di concerto con le proprieta' di definizione del background genera un effetto molto interessante: quando il puntatore del mouse passa sul link, lo stesso si attiva con un colore di testo e di sfondo impostati.
<style type="text/css">
A:hover { color: white; background:blue }
</style>
Link cambia dimensione al testo quando attivato dal mouse
Ultimo esempio riguardante A:hover. Questa volta il testo viene ingrandito quando il mouse vi passa sopra.
<style type="text/css">
A:link { font-size: 15px }
A:visited { font-size: 15px }
A:hover { font-size: 16px }
</style>
I fogli di stile finora considerati sono incorporati, cioe' posti tra i campi HEAD del documento e riferiti alla totalita' degli elementi presenti nella pagina. Esigenze particolari possono richiedere che soltanto per taluni link vengano attivati tali effetti. Se per esempio i link si vogliono sottolineati, tranne un unico elemento della pagina, si usano i fogli di stile in linea in questo modo:
<A STYLE="text-decoration: none" HREF="http://www.fauser.edu">VISITA FAUSER EDUCATIONAL</A>
Una buona regola e' quella di rendere omogenei gli effetti sui link per tutti i documenti del sito, adottando un metodo che permette un automatismo in questo senso. La soluzione ideale sono i fogli di stile esterni, all'interno dei quali vanno inseriti gli attributi di stile.
Effetti su form
F.A.Q.