Homepage -> Guida CSS (Fogli di Stile)

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:



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:



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>

Questo è un    LINK BLU SENZA SOTTOLINEATURA

Disposizione del testo

La disposizione del testo ( layout-flow ) crea un effetto curioso, quello di ruotare il link... verticalmente!
I valori ammessi sono:




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°




Spaziatura tra i caratteri

La spaziature tra le lettere ( letter-spacing ) consente di distanziare tra loro le lettere che formano il link testuale all'attivarsi di un particolare evento. Il valore è espresso in pixels.
Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse una spaziatura tra le lettere che formano il link di 3 pixels.

Ecco un esempio:


<html>
<head>

<style type = "text/css">
BODY { color:#000000 }
A:link { color: blue;  text-decoration : none}
A:visited {color: blue;  text-decoration :none}
A:hover {color: Red;  text-decoration : none; letter-spacing : 3px}
A:active {color: lime;  text-decoration : none}
</style>

</head>
<body>
Questo è un <A href = "#" target = "_blank"> LINK BLU </A> che, a contatto con il mouse, distanzia le sue lettere di 3 pixels.

</body>
</html>

Questo è un   LINK BLU   che, a contatto con il mouse, distanzia le sue lettere di 3 pixels.

Rientro del Testo

Il rientro del testo ( text-indent ) consente di far effettuare un movimento laterale al link testuale all'attivarsi di un particolare evento. E' un elemento interessante se si vogliono creare dei menù testuali verticali. Il valore è espresso in pixels.
Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse un rientro del link di 10 pixels.

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; text-indent : 20px}
A:active {color: lime; text-decoration : none}
</style>

</head>
<body>
<A href = "#" target = "_blank"> LINK 1 </A>
</body>
</html>

LINK 1

Al contatto del mouse, si sposta verso destra di 10 pixels.

Trasformazione del Testo

La trasformazione del testo ( text-transform ) consente di modificare da minuscole in maiuscole o viceversa le lettere che formano il link testuale all'attivarsi di un particolare evento. E' un elemento anche questo interessante se si vogliono creare dei menù testuali.
I valori ammessi sono:



Il valore capitalize trasforma la prima lettera di ogni parola che forma il link testuale in maiuscola, il valore uppercase trasforma tutte le lettere in maiuscole, il valore lowercase tutte in minuscole.
Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse la trasformazione di tutte le lettere del link testuale da minuscole in maiuscole.

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; text-transform : uppercase }
A:active { color: lime; text-decoration : none }
</style>

</head>
<body>
Questo è un <A href = "#" target = "_blank"> link in minuscolo </A> che si trasforma, al contatto del mouse in maiuscolo.
</body>
</html>

Questo è un link in minuscolo che si trasforma, al contatto del mouse in maiuscolo.



Evidenziare un link

L'evidenziazione del link ( background-color ) consente, come appare chiaro anche dal nome, di evidenziare il link, all'attivarsi di un particolare evento, con un colore, come di pennarello. Il colore va espresso in formato esadecimale preceduto dal simbolo della celletta # oppure nel suo nome in inglese.
Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse l'evidenziazione in celeste del link testuale.

Ecco l'esempio:


<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; background-color : Aqua }
A:active { color: lime;  text-decoration : none }
</style>

</head>
<body>
Qui sotto c'è un link che, se viene a contatto con il mouse, si evidenzia con un colore: <A href = "#"> QUESTO E' IL LINK </A>
</body>

Qui sotto c'è un link che, se viene a contatto con il mouse, si evidenzia con un colore: QUESTO E' IL LINK

Cambio del tipo di Font

Si può associare ad un evento anche il cambio del font da usare.
Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse il cambio del font in "Courier New". Valori ammessi interpretabili da ogni browser:




Ecco l'esempio:


<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; font-family : "Courier New", Courier, monospace }
A:active { color: lime; text-decoration : none }
</style>

</head>
<body>
Qui sotto c'è un link che, se viene a contatto con il mouse, cambia il tipo di font usato: <A href = "#"> QUESTO E' IL LINK </A>
</body>

Qui sotto c'è un link che, se viene a contatto con il mouse, cambia il tipo di font usato:
QUESTO E' IL LINK

Cambio della dimensione del Font

Analogamente si può associare ad un evento anche l'aumento o la diminuzione delle dimensioni del font.
Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse il cambio delle dimensioni del font sino a 20 pixels. Il valore può essere espresso in pixels oppure in percentuale.

Se espresso in pixels la sintassi sarà:


font-size : 20px;


Se espresso in percentuale la sintassi sarà:


font-size : 20%;


Nota: Non sono accettati valori negativi.

Ecco l'esempio:


<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; font-size : 20px }
A:active { color: lime; text-decoration : none }
</style>

</head>
<body>
Qui sotto c'è un link che, se viene a contatto con il mouse, si ingrandisce sino a 20 pixels: <A href = "#"> QUESTO E' IL LINK </A>
</body>

Qui sotto c'è un link che, se viene a contatto con il mouse, si ingrandisce sino a 20 pixels:
QUESTO E' IL LINK




Cambio dello stile del Font

Ovviamente si può decidere di associare ad un evento anche una variazione dello stile del font. Valori ammessi sono:




Con normal il font non subirà modifiche, con italic diventerà corsivo, con oblique corsivo più accentuato.

Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse la modifica dello stile in corsivo.
Vediamo l'esempio:


<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; font-style : italic }
A:active { color: lime; text-decoration : none }
</style>

</head>
<body>
Qui sotto c'è un link che, se viene a contatto con il mouse, trasforma il proprio font in corsivo: <A href = "#"> QUESTO E' IL LINK </A>
</body>

Qui sotto c'è un link che, se viene a contatto con il mouse, trasforma il proprio font in corsivo:
QUESTO E' IL LINK

Grassettatura del Font

Se è possibile trasformare in corsivo un font, si può anche grassettarlo.
Valori ammessi sono:




Con normal il font non subirà modifiche, con bold sarà grassettato, con bolder sarà grassettato in maniera più marcata.

Utilizzando la stessa stringa di base abbiamo associato all'evento del contatto del mouse la modifica dello stile in un grassetto molto marcato.

Vediamo l'esempio:


<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; font-weight : bolder }
A:active { color: lime; text-decoration : none }
</style>

</head>
<body>
Qui sotto c'è un link che, se viene a contatto con il mouse, viene evidenziato in un grassetto accentuato: <A href = "#"> QUESTO E' IL LINK </A>
</body>

Qui sotto c'è un link che, se viene a contatto con il mouse, viene evidenziato in un grassetto accentuato: QUESTO E' IL LINK

Combinazione di più elementi

Visualizziamo subito l'esempio pratico:


<head>

<style type = "text/css">
A:link { color: blue;  text-decoration: none;   font-weight: bold }
A:visited { color: Red;   text-decoration: none;  font-weight: bold }
A:hover { color: #CCCCCC;  text-decoration: underline;  font-weight: bolder;  font-style: italic;  font-size: 20px }
A:active {color: "#0000FF";  text-decoration: line-through;  letter-spacing: 3px;  background-color: Aqua }
</style>

</head>
<body>
ESEMPIO COMPOSITO CON ATTRIBUTI MULTIPLI AD OGNI EVENTO: <A href = "#"> QUESTO E' IL LINK </A>
</body>

ESEMPIO COMPOSITO CON ATTRIBUTI MULTIPLI AD OGNI EVENTO:
QUESTO E' IL LINK

Il link apparirà blu, senza sottolineatura ed in grassetto; quando già visitato avrà lo stesso aspetto solo che sarà rosso. A contatto del mouse il colore cambierà in grigio chiaro, ed il link sarà sottolineato, in grassetto accentuato, ed in corsivo ingrandito sino a 20 pixels. Quando sarà cliccato, il colore cambierà in blu, avrà una linea orizzontale sulla scritta, i caratteri verranno spaziati tra di loro di 3 pixels e sarà evidenziato in celeste.




Ecco altri esempi:



A:link {
BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #808080; TEXT-DECORATION: none;
} A:active {
BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #808080; TEXT-DECORATION: none;
}
A:visited {
BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #808080; TEXT-DECORATION: none;
}
A:hover {
FILTER: fliph; COLOR: #CCCCCC; HEIGHT: 0px; TEXT-DECORATION: none;
}
link

A:link {
BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #808080; TEXT-DECORATION: none;
}
A:active {
BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #808080; TEXT-DECORATION: none;
}
A:visited {
BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #808080; TEXT-DECORATION: none;
}
A:hover {
COLOR: #CCCCCC; TEXT-DECORATION: none; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; BORDER-BOTTOM: 1px dotted; BORDER-RIGHT: 1px dotted; BORDER-COLOR: black;
}
link

A:link {
COLOR: #808080; TEXT-DECORATION: none;
}
A:visited {
COLOR: #808080; TEXT-DECORATION: none;
}
A:active {
COLOR: #808080; TEXT-DECORATION: none
}
A:hover{color:#808080; text-decoration:none; height:0;
filter:DropShadow(Color=#CCCCCC, OffX=2, OffY=2, Positive=1);
}
link

A:link { text-decoration:none; color:"#808080"; background:none; }
A:visited { text-decoration:none; color:"#CCCCCC"; background:none; }
A:hover { text-decoration:none; color:"#CCCCCC"; background:url('stella.gif');
}
link

A { font-family: Verdana,Arial; font-weight:bold; text-decoration:none;
color: #E78B00; height:1px; font-size: x-small;}
A:hover { font-family: Verdana,Arial; font-weight:bold; text-transform:none;
text-decoration:none; filter: dropshadow(offx=-1,offy=0,color=#FFFFFF,positive=true),
dropshadow(offx=0,offy=-1,color=#FFFFFF,positive=true),
dropshadow(offx=0,offy=1,color=#FFFFFF,positive=true),
dropshadow(offx=1,offy=0,color=#FFFFFF,positive=true); }
Cliccami