|
Home -> Manuali e Tutorials -> Guida CSS -> Links (1/5)
Scarica il tutorial  | Stampa il tutorial  | Cerca nel sito 
DECORARE I LINKS CON I CSS
Decorazione del Testo
La decorazione del testo ( text-decoration ) è molto utile se si vuole, ad esempio, rendere un link non sottolineato oppure che sia sbarrato o casi simili.
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 blue e non sottolineato;
- il link visitato, sempre di colore blue 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>
<style type = "text/css">
BODY { background : #FFFFD1; color : #000000 }
A:link { color: blue; background : #FFFFD1; text-decoration : none }
A:visited {color: blue; 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 = "#" target = "_blank"> LINK BLU SENZA SOTTOLINEATURA </A></p>
</body>
</html>
|
|
|
Disposizione del testo
La disposizione del testo ( layout-flow ) crea un effetto curioso, 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>
<style type = "text/css">
A:link { color: blue; text-decoration : none }
A:visited {color: blue; text-decoration :none }
A:hover { color: Red; text-decoration : none; layout-flow : vertical-ideographic }
A:active { color: lime; text-decoration : none }
</style>
</head>
<body>
<P>Questo è un <A href = "#" target = "_blank"> LINK BLU </A> senza sottolineatura che ruota di 90°</P>
</body>
</html>
|
Questo è un LINK BLU senza sottolineatura che ruota di 90°
|
|
Torna su  | Indice Guida  | Pagina << 7 >>
|
