A SBAFO! Manuali o tutorials gratis

Copyright© Seatiger Team 2002
Sono vietate la riproduzione, la pubblicazione e la distribuzione anche parziale del presente manuale
senza il consenso scritto degli autori.

LEZIONE 5

Aspetto dei links

Nella lezione precedente abbiamo visto anche come cambiare colore ai links a seconda dell'azione che si compie su di essi. In questa vedremo come modificarne gli elementi e renderli totalmente diversi da come siamo soliti vederli.

5.1 Decorazione del testo

La decorazione del testo (text-decoration) è molto utile se si vuole, ad esempio, che un link non sia sottolineato oppure che venga sbarrato e può essere associato anche all'attributo del colore.

I valori ammessi sono:

none
underline
overline
line-through

Con il valore none si eliminerà la sottolineatura dei links, con il valore underline si attiverà la sottolineatura (la condizione normale), con il valore overline si otterrà una linea sopra il link anziché sotto, con il valore line-through si otterrà infine una linea orizzontale sopra la scritta relativa al link, come fosse una cancellatura.

Nell'esempio che segue abbiamo supposto che si desideri:

il link in posizione di riposo, di colore verde e non sottolineato;
il link visitato, sempre di colore verde e non sottolineato;
il link al contatto del mouse, di colore rosso ma con una cancellatura;
il link al momento del click, di colore verde acceso e non sottolineato.

Ecco l'esempio:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
A:link { color: Green;background:#FFFFD1;text-decoration : none}
A:visited {color: Green;background:#FFFFD1;text-decoration :none}
A:hover {color: Red;background:#FFFFD1;text-decoration : line-through}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p>Questo è un<a href="http://www.asbafo.net" target="_blank">LINK VERDE SENZA SOTTOLINEATURA</a></p>
     </body>
</html>

anteprima

Nota: La logica farebbe supporre una disposizione diversa dei valori degli attributi, in quanto il segno di cancellatura sarebbe più adatto ad un sito già visitato (e così è). Nell'esempio, puntando il link su "A Sbafo!", il risultato che si sarebbe ottenuto è un link, in posizione di riposo, barrato da un segno di cancellatura, perché, se sei qui, significa che il sito lo hai GIA' visitato e quindi subentrerebbe la pseudo-classe A:visited che è appunto impostata su quel valore.

5.2 Disposizione del testo

La disposizione del testo (layout-flow) crea un effetto curioso, quello di ruotare il link... verticalmente!

I valori ammessi sono:

horizontal (la condizione normale)
vertical-ideographic

Per far osservare questo curioso effetto abbiamo utilizzato la stessa stringa del precedente esempio. L'unica differenza è che, posando il mouse sopra il link, questo ruoterà di 90° e non sarà sottolineato.

Ecco l'esempio:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
A:link { color: Green;background:#FFFFD1;text-decoration : none}
A:visited {color: Green;background:#FFFFD1;text-decoration :none}
A:hover {color: Red;background:#FFFFD1;text-decoration : none;
layout-flow : vertical-ideographic}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p >Questo è un<a href="http://www.asbafo.net" target="_blank"> LINK VERDE</a></p><p>senza sottolineatura che ruota di 90°</p>
     </body>
</html>

anteprima

5.3 Spaziatura tra le lettere

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 l'esempio:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
A:link { color: Green;background:#FFFFD1;text-decoration : none}
A:visited {color: Green;background:#FFFFD1;text-decoration :none}
A:hover {color: Red;background:#FFFFD1;text-decoration : none;
letter-spacing : 3px}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p>Questo è un<a href="http://www.asbafo.net" target="_blank">
LINK VERDE</a></p>
<p><br>che, a contatto con il mouse,</p>
<p><br>distanzia le sue lettere di 3 pixels.</p>
     </body>
</html>

anteprima

5.4 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>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
A:link { color: Green;background:#FFFFD1;text-decoration : none}
A:visited {color: Green;background:#FFFFD1;text-decoration :none}
A:hover {color: Red;background:#FFFFD1;text-decoration : none;
text-indent : 20px}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p><a href="http://www.asbafo.net" target="_blank">LINK 1</a></p>
     <p><a href="http://www.asbafo.net" target="_blank">LINK 2</a></p>
     <p><br>Entrambi, al contatto del mouse, si spostano</p>
     <p>verso destra di 10 pixels.</p>
     </body>
</html>

anteprima