Alcuni Effetti sui Links
utilizzando style "CSS"
I CSS, ovvero Cascading Style Sheets  sono ormai divenuti molto comuni sul web, servono per migliorare l'aspetto estetico e al tempo stesso facilitare la creazione e/o la manutenzione di siti grandi o piccoli che possano essere.
A style incorporato cioè quando allo stesso stile fanno riferimento diversi elementi (tags) html. Sarebbe infatti estremamente dispersivo, oltre che laborioso, definire lo stesso stile più volte all'interno della stessa pagina quando poi servirebbe sempre per lo stesso identico scopo. Molto meglio definirlo una sola volta, ad inizio pagina. Così facendo tutti gli elementi della pagina interessati seguiranno quello stesso stile.
In questo caso le istruzioni non saranno più inserite all'interno dello specifico singolo elemento (tag) ma ad inizio pagina, dichiarate dagli elementi (tags) <style> e </style> posti all'interno della sezione <head> </head>
Esiste però 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 il tipo di font sono soltanto alcune cose che possono essere gestite dai CSS, e magari decidere di farlo proprio nel momento esatto in cui il cursore del mouse passa sopra al link stesso.
Prima di tutto vediamo come si adoperano, anche loro possono essere dichiarati in una pagina 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 già cliccati mentre 
A:HOVER si riferisce all'evento del mouse nel momento preciso in cui viene posizionato sopra il link.

Qui di seguito vado a esporre alcuni casi applicati sui Links i più utilizzati.


Testo senza sottolineatura

Testo di prova
<style type="text/css">
A:link, A:visited { text-decoration: none } </style>

Testo che s' ingrandisce
con sottolineatura

Testo di prova
<style type="text/css">
A:link { font-size: 16px }
A:visited { font-size: 16px }
A:hover { font-size: 20px }</style>

Testo senza sottolineatura
al passaggio del mouse si sottolinea

Testo di prova
<style type="text/css">
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline } </style>

Testo cambia colore

Testo di prova

<style type="text/css">
A:hover { color: #FF0000 } </style>

Testo sottolineato al passaggio sparisce sottolineatura

Testo di prova
<style type="text/css">
A:link, A:visited { text-decoration: underline }
A:hover { text-decoration: none } </style>

Testo cambia colore e sfondo

Testo di prova
<style type="text/css">
A:hover { color: #FFFF00; background:blue } </style>

Testo che s' ingrandisce e
sparisce la sottolineatura al
passaggio del mouse

Testo di prova
<style type="text/css">
A:link { font-size: 16px }
A:visited { font-size: 16px }
A:hover { font-size: 20px;
text-decoration: none }</style>

 

 

 

 

Le immagini sono copyright dei rispettivi proprietari