|
Le proprieta' relative ai font
non si riferiscono al tipo di carattere 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">
Questo e' il sito italiano piu'
visitato e autorevole sul Web publishing. Decine di tutorial,
centinaia di Javascript, di applet Java,
HTML.
</DIV>
Questo è il risultato:
Questo e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java.
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:
<DIV STYLE="font-family:arial;
text-transform:uppercase">
Questo e' il sito italiano
piu' visitato e autorevole sul Web publishing. Decine di tutorial,
centinaia di Javascript, di applet Java,
HTML.
</DIV>
capitalize: rende maiuscola solo la prima lettera di ogni
parola:
<DIV STYLE="font-family:arial;
text-transform:capitalize">
Questo e' il sito italiano
piu' visitato e autorevole sul Web publishing. Decine di tutorial,
centinaia di Javascript, di applet Java,
HTML.
</DIV>
uppercase: rende minuscole tutte le lettere
dell'elemento:
<DIV STYLE="font-family:arial;
text-transform:lowercase">
Questo e' il sito italiano
piu' visitato e autorevole sul Web publishing. Decine di tutorial,
centinaia di Javascript, di applet Java,
HTML.
</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">
Questo e' il sito italiano piu'
visitato e autorevole sul Web publishing. Decine di tutorial,
centinaia di Javascript, di applet Java
.
</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">
Questo e' il sito italiano piu' visitato e
autorevole sul Web publishing. Decine di tutorial, centinaia di
Javascript, di applet Java,
HTML.
</DIV>
Questo è il risultato:
Questo e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java.
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">
Questo e' il sito italiano piu' visitato e
autorevole sul Web publishing. Decine di tutorial, centinaia di
Javascript, di applet Java.
</DIV>
Questo è il risultato:
Questo e' il sito italiano piu' visitato e autorevole sul Web publishing. Decine di tutorial, centinaia di Javascript, di applet Java.
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' accattivante. 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.****.it">VISITA
....</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.
|
