Asbafo
a- a+

Aspetto dei links


Nella lezione precedente abbiamo visto anche comecambiare colore ai links a seconda dell'azione chesi compie su di essi. In questa vedremo comemodificarne gli elementi e renderli totalmente diversida come siamo soliti vederli.
 

Decorazione del testo

 
La decorazione del testo (text-decoration) èmolto utile se si vuole, ad esempio, che un link nonsia 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 disposizionediversa dei valori degli attributi, in quanto il segnodi cancellatura sarebbe più adatto ad un sitogià visitato (e così è).Nell'esempio, puntando il link su "ASbafo!" , il risultato che si sarebbe ottenutoè un link, in posizione di riposo, barrato da unsegno di cancellatura, perché, se sei qui,significa che il sito lo hai GIA' visitato e quindisubentrerebbe la pseudo-classe A:visited che èappunto impostata su quel valore.

 

Disposizione del testo

 
La disposizione del testo (layout-flow) crea un effettocurioso, 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) consentedi distanziare tra loro le lettere che formano il linktestuale 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 fareffettuare un movimento laterale al link testualeall'attivarsi di un particolare evento. E' unelemento interessante se si vogliono creare deimenù 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) consentedi modificare da minuscole in maiuscole o viceversa lelettere che formano il link testuale all'attivarsidi un particolare evento. E' un elemento anchequesto interessante se si vogliono creare deimenù 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, dievidenziare il link, all'attivarsi di unparticolare evento, con un colore, come di pennarello.Il colore va espresso in formato esadecimale precedutodal simbolo della celletta # oppure nel suo nome ininglese.

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 cambiodel 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 anchel'aumento o la diminuzione delle dimensioni delfont.

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 unevento 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 quandoaffronteremo l'aspetto dei caratteri. Non resta chedire che tutti gli esempi mostrati possono esserecombinati tra loro, associandone anche piùd'uno ad un singolo evento. Qui sotto un esempiocomplesso. Se hai studiato attentamente la sintassi tiaccorgerai 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 inanticipo 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 nostricomplimenti, ma purtroppo per te non abbiamo ancorafinito...
 
 

 



Ti potrebbe interessare anche

commenta la notizia