|
Home -> Manuali e Tutorials -> Guida CSS -> Links (2/5)
Scarica il tutorial  | Stampa il tutorial  | Cerca nel sito 
DECORARE I LINKS CON I CSS
Spaziatura tra i caratteri
La spaziature tra le lettere ( letter-spacing ) consente di distanziare tra loro le lettere che formano il link testuale all'attivarsi di un particolare evento. Il valore è espresso in pixels.
Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse una spaziatura tra le lettere che formano il link di 3 pixels.
Ecco un esempio:
<html>
<head>
<style type = "text/css">
BODY { color:#000000 }
A:link { color: blue; text-decoration : none}
A:visited {color: blue; text-decoration :none}
A:hover {color: Red; text-decoration : none; letter-spacing : 3px}
A:active {color: lime; text-decoration : none}
</style>
</head>
<body>
Questo è un <A href = "#" target = "_blank">
LINK BLU </A> che, a contatto con il mouse, distanzia le sue lettere di 3 pixels.
</body>
</html>
|
Questo è un
LINK BLU che, a contatto con il mouse, distanzia le sue lettere di 3 pixels.
|
|
Rientro del Testo
Il rientro del testo ( text-indent ) consente di far effettuare un movimento laterale al link testuale all'attivarsi di un particolare evento. E' un elemento interessante se si vogliono creare dei menù testuali verticali. Il valore è espresso in pixels.
Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse un rientro del link di 10 pixels.
Ecco l'esempio:
<html>
<head>
<style type = "text/css">
A:link { color: blue; text-decoration : none}
A:visited {color: blue; text-decoration :none}
A:hover {color: Red; text-decoration : none; text-indent : 20px}
A:active {color: lime; text-decoration : none}
</style>
</head>
<body>
<A href = "#" target = "_blank"> LINK 1 </A>
</body>
</html>
|
LINK 1
Al contatto del mouse, si sposta verso destra di 10 pixels.
|
|
Trasformazione del Testo
La trasformazione del testo ( text-transform ) consente di modificare da minuscole in maiuscole o viceversa le lettere che formano il link testuale all'attivarsi di un particolare evento. E' un elemento anche questo interessante se si vogliono creare dei menù testuali.
I valori ammessi sono:
- capitalize
- uppercase
- lowercase
Il valore capitalize trasforma la prima lettera di ogni parola che forma il link testuale in maiuscola, il valore uppercase trasforma tutte le lettere in maiuscole, il valore lowercase tutte in minuscole.
Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse la trasformazione di tutte le lettere del link testuale da minuscole in maiuscole.
Ecco l'esempio:
<html>
<head>
<style type = "text/css">
A:link { color: blue; text-decoration : none }
A:visited { color: blue; text-decoration :none }
A:hover { color: Red; text-decoration : none; text-transform : uppercase }
A:active { color: lime; text-decoration : none }
</style>
</head>
<body>
Questo è un <A href = "#" target = "_blank"> link in minuscolo </A> che si trasforma, al contatto del mouse in maiuscolo.
</body>
</html>
|
|
|
Torna su  | Indice Guida  | Pagina << 8 >>
|
