I link

DiRedazione

Giu 13, 2018

Abbiamo visto come i CSS siano in grado di cambiare attributi al testo, come e con quale facilità sia possibile posizionare con estrema precisione oggetti grafici e testuali. Esiste anche un'altra novità introdotta dai CSS e riguarda la gestione dei links, si tratta di pseudo classi dinamiche.

La tanto odiata sottolineatura e la possibilità di cambiare colore o tipo di font sono soltanto alcune cose che possono essere gestite dai CSS. Compresi i cambiamenti dinamici nel momento esatto in cui il cursore del mouse passa sopra al link.

Prima di tutto vediamo come si adoperano perché differiscono leggermente da quanto appreso fino a questo momento. Anche i Link possono essere dichiarati in una pagina, in un foglio di stile esterno o direttamente in linea. Questa la sintassi:

<style type="text/css">
<!--

a:link    {text-decoration: none; color: brown;}
a:visited {text-decoration: none; color: green;}
a:hover   {color: red;}

-->
</style>

Dove a:link sono i link ancora da visitare (da cliccare). a:visited sono invece i links visitati (già cliccati) e a:hover si riferisce all'evento del mouse nel momento preciso in cui viene posizionato sopra il link.

Risultato: sono un link privo di sottolineatura e di colore marrone Provate a passarci sopra col cursore del mouse, noterete un cambio di colore, in questo caso rosso. Togliete il mouse ed il link tornerà del colore marrone impostato per il link. Adesso fate click su quel link, essendo visitato di conseguenza il suo colore passa al verde. Tutto come da impostazioni.

Non vi piace il colore rosso? 

Sostituite nella pseudoclasse a:hover il parametro red (rosso in inglese) con qualsiasi altro nome "valido" di un colore. Allo stesso modo divertitevi a cambiare il colore dei link visitati e/o di quelli da visitare. I colori possono essere espressi anche con il relativo codice esadecimale preceduto dal simbolo # (pound o cancelletto) vedi anche la sezione dedicata ai parametri di questa stessa guida.

Il rosso viene rappresentato con #ff0000, dove le sei cifre vanno viste come tre coppie ben distinte di valori esadecimali ed esprimono i colori nella forma RGB, (rosso - verde - blu) dove i valori ammessi sono rappresentati da numeri che vanno da 0 a f (16) in notazione esadecimale.

Per cui ff = 16 x 16 = 256 (max valore ottenibile), abbiamo tre coppie ff ff ff = 256 x 256 x 256 = 16,7 Milioni di colori. Non c'entra molto con i links dei css ma almeno sapete il perchè di quelle sigle usate per impostare i colori.

Avete capito bene: 16,7 Milioni di colori, tutti quelli che la vostra scheda video è in grado di visualizzare, sfumature comprese.

Anche per i links, una volta capito il meccanismo, si potranno combinare i vari attributi fino a creare degli effetti di notevole impatto, il tutto con estrema semplicità e senza ricorrere a programmazione avanzata. Da fare molta attenzione a non invertire l'ordine di dichiarazione:

  1. link
  2. visited
  3. hover

Si deve rispettare questo ordine per evitare conflitti, se per esempio si invertisse hover con visitedpassando sopra ad un link già visitato non si avrebbe l'effetto hover del cambio di colore ma il colore fisso assegnato a visited che essendo posizionato dopo sovrascriverebbe l'effetto precedente. 

Ci sarebbero altre due pseudoclassi dinamiche: focus ed active che possono essere applicate ad altri elementi di html oltre a link, non essendo però supportate dal browser IE è forse meglio non farne uso.

Ecco un altro esempio:

<style type="text/css">
<!--

a:link    {text-decoration: none; font-size: 10pt;}
a:visited {text-decoration: none; font-size: 10pt;}
a:hover   {color: red; font-size: 12pt;}

-->
</style>

Risultato: sono un link non sottolineato Se provate a passarci sopra col puntatore del mouse noterete che il font cambia dimensione, passando dai 10pt (punti) del link da visitare ai 12pt del link hover e di colore rosso. Così facendo avrete dato vita ad una vera e propria animazione. Notate che tutto il testo viene spostato per fare posto al font di dimensioni maggiori. Cliccate su questo esempio e leggete i consigli, tanto per avere le idee ancora più chiare.

E' anche possibile avere links all'interno della stessa pagina web con colori e comportamenti diversi. Sarà sufficiente fare uso di classi diverse da assegnare ai vari links:

Le classi per i link si creano in maniera leggermente diversa ma molto simile alle classi viste precedentemente:

<style type="text/css">
<!--

a.xxx:link     { color: #cc66ff; text-decoration: none; }
a.xxx:visited  { color: #cc66ff; text-decoration: none; }
a.xxx:hover    { color: #ffcc00; text-decoration: none; font-size: 14pt;}

-->
</style>

Notate la sintassi, il . punto e i : due punti, dove xxx è il nome assegnato alla classe. Il suo richiamo da html segue la stessa sintassi degli altri elementi di html:

<a class="xxx" href="vostro link">esempio 3</a>

Risultato:

 

Continua: Gli Attributi di style

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Di Redazione

La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

NON seguire questo link o sarai bannato dal sito!