Creare effetti grafici modificando i link con i CSS o style.
ALLWEB free
Directory Web Script Linguaggi
Italiano Inglese Tutte
 
 24 Mar 2017
aggiungi in preferiti  
Home    Mappa directory    Script




CSS e link:

Come sicuramente avrete visto navigando in internet i link possono variare al passaggio mouse o dopo il clic del navigatore.
In questa sezione analizziamo come è possibile effettuare queste variazioni grafiche e dove inserire il codice per crearle.

Prima di vedere gli attributi dobbiamo spendere due parole sui Link.
Tipi di link:
A:LINK { attributi } Come si presenta inizialmente.
A:VISITED { attributi } Come si presenta se cliccato.
A:HOVER { attributi } Come si presente se il puntatore vi è sopra.



Modificando i tre tipi di link si possono ottenere degli strani effetti grafici.
Esempi:
prova Questa è la classe puno
prova Questa è la classe pdue
prova Questa è la classe ptre



Vediamo le classi con le quali abbiamo costruito i link:
A.puno:link { font-family : Arial, verdana, Helvetica; text-decoration:none; font-size : 14px}
A.puno:visited { font-family : Arial, verdana, Helvetica; color : yellow;text-decoration:none; font-size : 14px}
A.puno:hover { font-family : Arial, verdana, Helvetica; color : blue;text-decoration:underline; font-size : 14px}

A.pdue:link { font-family : Arial, verdana, Helvetica; text-decoration:none; font-size : 14px}
A.pdue:visited { font-family : Arial, verdana, Helvetica; color : red;text-decoration:none; font-size : 14px}
A.pdue:hover { font-family : Arial, verdana, Helvetica; color : blue;text-decoration:underline; font-size : 30px}

A.ptre:link { font-family : Arial, verdana, Helvetica; text-decoration:none; font-size : 14px}
A.ptre:visited { font-family : Arial, verdana, Helvetica; color : green;text-decoration:none; font-size : 14px}
A.ptre:hover { background:red; font-family : Arial, verdana, Helvetica; color : blue;text-decoration:underline; font-size : 20px}



Inserimento STYLE di link in body:

Come già accennato nel paragrafo Css in body inserire gli style per i tag di link nel body è molto semplice, basta solo inserire il comando style=" " nel tag <a>.

esempio:

<a href="#" style="text-decoration:none; color:green; ...">    ABC</a>
In questo caso otteniamo il risultato:
    ABC

Se non inseriamo STYLE:
    ABC

Inserire attributi style come descritto sopra è molto utile quando abbiamo più immagini affiancate o quando più parole su più righe puntano allo stesso link.
Se non lo usiamo (dipende dall'impaginazione) possiamo ottenere lo sgradevole effetto di sottolineatura di spazi vuoti (Lo spazio è un carattere).