Menù Principale

Chiudi il Webmaster

Chiudi Politica a Latisana

Chiudi Links e Banners

Chiudi Pubblicità Amici

WebTools - Scripts

Chiudi Dossier Antivirus

Chiudi Grafica & Design

Chiudi Guida PHP

Chiudi Guida ai Css

Chiudi Guide al Javascript

Chiudi HTML - XHTML - XML

Chiudi Software Programmi Utili

Chiudi Tools Webmaster

Chiudi Utilità Varie

Chiudi Utilità e Script in Flash

Chiudi Video Guide Manuali

Altri Miei Siti

Pubblicità Amici !
LegaNord Latisana anclignano pertegada calcio yorkshire susy


Don.Severino Valvason
il vostro Webmaster
Webmaster - Infos
Mini Tchat
Entra in Chat
Photo Gallery

Guida ai Css - I LINKS in Css

I Links - in Css." ESEMPI " Pratici

I links  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 però anche un'altra novità introdotta dai CSS, riguarda la gestione dei links.

La tanto odiata sottolineatura, la possibilità di cambiare colore o il tipo di font sono solo alcune cose che possono essere gestite dai CSS, e magari proprio nel momento esatto in cui il cursore del mouse passa sopra al link stesso.

Prima di tutto vediamo come si adoperano, si perché differiscono leggermente da quanto appreso fino a questo momento, possono essere dichiarati in una pagina o in un foglio di stile esterno, questa la relativa sintassi:

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

A:LINK    {text-decoration : none}
A:VISITED {text-decoration : none; Color : green}
A:HOVER   {Color : red}

-->
</style>

Dove A:LINK sono i link ancora da visitare o da cliccare, A:VISITED sono invece i links visitati o cliccati mentre  A:HOVER si riferisce all'evento del mouse nel momento preciso in cui viene posizionato sopra il link .


Risultato: Sono un LINK non sottolineato e di colore verde  Provate a passarci sopra col puntatore del mouse... non succede nulla?

Dimenticavo di dirvi che HOVER, quello che cambia colore, non è riconosciuto da tutti i browser, NetScape per esempio è uno di questi, per cui soltanto gli utenti Microsoft Internet Explorer, Google, Firefox, Opera, Brave ecc.. potranno vederlo.

Non vi piace il colore rosso?

Sostituite red con qualsiasi altro nome valido di un colore, oppure 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 easadecimale preceduto dal simbolo # pound (cancelletto) vedi anche la sez. dedicata ai 
 parametri.


Il rosso per esempio equivale a #ff0000, dove le sei cifre vanno viste come tre coppie ben distinte di valori esadecimali ed esprimono i colori nella formula RGB, (rosso - verde - blu) dove i valori ammessi sono rappresentati da 00 ~ ff in notazione esadecimale per ogni coppia di numeri. Per cui ff = 16 x 16 = 256 (max valore ottenibile), da qui: ff ff ff = 256 x 256 x 256 = 16,7 Mil di colori.

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

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. Ecco un altro esempio:

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

A:LINK    {text-decoration : none; font-size : 10 pt;}
A:VISITED {text-decoration : none; Color : green; font-size : 10 pt;}
A:HOVER   {Color : red; font-size : 12 pt;}

-->
</style>

Risultato: sono un link non sottolineato e di colore verde  Se provate a passarci sopra col puntatore del mouse, il font passerà dai 10 pt (punti) del link da visitare ai 12 pt del link HOVER, in questo modo 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   tanto per avere le idee ancora più chiare.

E' anche possibile avere link di colore diverso con comportamenti diversi all'interno della stessa pagina web, è sufficiente fare uso delle classi diverse a seconda del link:

In questo caso 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 : 14 pt;}
-->
</style>

Dove xxx è il nome della classe ed il suo richiamo per il link seguirà questa sintassi:

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

 


Data creazione : 23/11/2021 @ 20:48
Ultima modifica : 24/11/2021 @ 00:05
Categoria : Guida ai Css
Pagina letta 9 volte


Stampa pagina Stampa pagina

 
Opinioni su questo articolo

Nessuno ha lasciato un commento.
Diventa il primo a farlo!

 
Comunicazioni del Webmaster !
 
Slideshow notice
  • tesseramento-online.jpg

    Tesseramento 2015 Lega Nord online

  • enea-codotto.jpg
 
Contatteci
Connessione...
 Lista utenti registrati Utenti : 117

Username:

Password:

[ Registrazione ]


Utente online:  Utente online:
Anonimi online:  Anonimi online: 10

Visite totali Visite totali: 1762504  

Webmaster - Infos

Ip: 3.92.28.52

NewsLetters
Per ricevere informazioni sulle novità di questo sito, puoi iscriverti alla nostra Newsletter.
Captcha
Ricopia il codice :
Traduction Site
Eventi Calendario
Sondaggio
cosa pensi del Sito ?
 
Eccellente !
Ottimo
nella Media
Boh.....
C'è di Meglio
Risultati
Visites

   visitatori

   visitatori online

^ Torna in alto ^