Asbafo
a- a+

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.
 

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>
 
 
 
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.

 

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>
 
 

 

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>
 
 

 

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>
 
 

 

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>
     <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-transform : uppercase}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p>Questo è un<a href="http://www.asbafo.net" target="_blank"> link in minuscolo</a> che si trasforma, </p>
<p>al contatto del mouse in maiuscolo.</p>
     </body>
</html>
 

anteprima

 

Evidenziazione del link

 
L'evidenziazione del link (background-color) consente, come appare chiaro anche dal nome, di evidenziare il link, all'attivarsi di un particolare evento, con un colore, come di pennarello. Il colore va espresso in formato esadecimale preceduto dal simbolo della celletta # oppure nel suo nome in inglese.

Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse l'evidenziazione in celeste del link testuale.

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;
background-color : Aqua}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p>Qui sotto c'è un link che, se viene a contatto con il mouse,</p>
     <p>si evidenzia con un colore:</p>
     <p><a href="http://www.asbafo.net" target="_blank">QUESTO E' IL LINK</a></p>
     </body>
</html>
 
 

 

Cambio del tipo di font

 
Si può associare ad un evento anche il cambio del font da usare.

Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse il cambio del font in "Courier New". Valori ammessi interpretabili da ogni browser:

  • "Courier New" , Courier, monospace;
  • "MS Serif" , "New York" , serif;
  • "Times New Roman" , Times, serif;
  • "MS Sans Serif" , Geneva, sans-serif;
  • Verdana, Geneva, Arial, Helvetica, sans-serif;
  • Arial, Helvetica, sans-serif

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;
font-family : "Courier New" , Courier, monospace}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p>Qui sotto c'è un link che, se viene a contatto con il mouse,</p>
     <p>cambia il tipo di font usato:</p>
     <p><a href="http://www.asbafo.net" target="_blank">QUESTO E' IL LINK</a></p>
     </body>
</html>
 
 

 

Cambio delle dimensioni del font

 
Analogamente si può associare ad un evento anche l'aumento o la diminuzione delle dimensioni del font.

Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse il cambio delle dimensioni del font sino a 20 pixels. Il valore può essere espresso in pixels oppure in percentuale.

Se espresso in pixels la sintassi sarà:

                    font-size : 20px;

Se espresso in percentuale la sintassi sarà:

                    font-size : 20%;
 
Nota: Non sono accettati valori negativi.
 
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;
font-size : 20px}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p>Qui sotto c'è un link che, se viene a contatto con il mouse,</p>
     <p>si ingrandisce sino a 20 pixels:</p>
     <p><a href="http://www.asbafo.net" target="_blank">QUESTO E' IL LINK</a></p>
     </body>
</html>
 
 

 

Cambio dello stile del font

 
Ovviamente si può decidere di associare ad un evento anche una variazione dello stile del font. Valori ammessi sono:
  • normal
  • italic
  • oblique

Con normal il font non subirà modifiche, con italic diventerà corsivo, con oblique corsivo più accentuato.

Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse la modifica dello stile in corsivo.

Vediamo 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;
font-style : italic}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p>Qui sotto c'è un link che, se viene a contatto con il mouse,</p>
     <p>trasforma il proprio font in corsivo:</p>
     <p><a href="http://www.asbafo.net" target="_blank">QUESTO E' IL LINK</a></p>
     </body>
</html>
 
 

 

Grassettatura del font

 
Se è possibile trasformare in corsivo un font, si può anche grassettarlo.

Valori ammessi sono:

  • normal
  • bold
  • bolder

Con normal il font non subirà modifiche, con bold sarà grassettato, con bolder sarà grassettato in maniera più marcata.

Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse la modifica dello stile in un grassetto molto marcato.

Vediamo 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;
font-weight : bolder}
A:active {color: lime;background:#FFFFD1;text-decoration : none}
</style>
     </head>
     <body>
     <p>Qui sotto c'è un link che, se viene a contatto con il mouse,</p>
     <p>viene evidenziato in un grassetto accentuato:</p>
     <p><a href="http://www.asbafo.net" target="_blank">QUESTO E' IL LINK</a></p>
     </body>
</html>
 
 
 
E con l'aspetto dei links abbiamo terminato. Ritroveremo molti di questi attributi quando affronteremo l'aspetto dei caratteri. Non resta che dire che tutti gli esempi mostrati possono essere combinati tra loro, associandone anche più d'uno ad un singolo evento. Qui sotto un esempio complesso. Se hai studiato attentamente la sintassi ti accorgerai da solo cosa accadrà ad ogni evento.

 

Combinazione di più elementi tra loro

 
Visualizziamo subito l'esempio pratico:
 
                <html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
A:link { color: Red; background: #FFFFD1; text-decoration: none;  font-weight: bold }
A:visited {color: Red; background: #FFFFD1; text-decoration: none; font-weight: bold }
A:hover {color: Green; background: #FFFFD1; text-decoration: underline;
font-weight: bolder; font-style: italic; font-size: 20px }
A:active {color: #0000FF; background: #FFFFD1; text-decoration: line-through; letter-spacing: 3px; background-color: Aqua }
</style>
     </head>
     <body>
     <p>ESEMPIO COMPOSITO CON</p><br>
     <p>ATTRIBUTI MULTIPLI AD OGNI EVENTO</p><br><br>
    <p><a href="http://www.asbafo.net" target="_blank">QUESTO E' IL LINK</a></p>
     </body>
</html>
 
Se sei stato attento alle spiegazioni saprai in anticipo che:

Lo sfondo della pagina è giallo chiaro ed il testo nero:

                { background:#FFFFD1; color:#000000 }

Il link apparirà rosso, senza sottolineatura ed in grassetto:

                {color:Red; background:#FFFFD1; text-decoration:none; font-weight:bold}

Uguale aspetto avrà il link di un collegamento già visitato, per le considerazioni che abbiamo già fatto:

                {color:Red; background:#FFFFD1; text-decoration:none; font-weight:bold}

A contatto del mouse il colore cambierà in verde, il link sarà sottolineato, in  grassetto accentuato, in corsivo ed ingrandito sino a 20 pixels:

                {color:Green; background:#FFFFD1; text-decoration:underline;
font-weight:bolder; font-style:italic; font-size:20px}

Quando sarà cliccato, il colore cambierà in blu, avrà una linea orizzontale sulla scritta, i caratteri verranno spaziati tra di loro di 3 pixels e sarà evidenziato in celeste:

                {color: #0000FF; background:#FFFFD1; text-decoration:line-through;   letter-spacing:3px; background-color:Aqua}
 
Se l'avevi già scoperto da solo, i nostri complimenti, ma purtroppo per te non abbiamo ancora finito...
 
 

 



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Staff
Ti interessano altri articoli su questo argomento?
Chiedi alla nostra Redazione!