Links

Css con Front Page
La sintassi
Creare un foglio
Applicare uno stile
Le classi
Gli elenchi
I moduli
I puntatori
Css in linea
Sfondi
Testo
Selettori
Links
Margini e bordi
Fonts
Le tabelle
Le immagini e i piani

Css con FP

Aspetto dei links

Nella lezione precedente abbiamo visto anche come cambiare colore ai links a seconda dell'azione che si compie su di essi. In questa vedremo come modificarne gli elementi e renderli totalmente diversi da come siamo soliti vederli.

Decorazione del testo

La decorazione del testo (text-decoration) è molto utile se si vuole, ad esempio, che un link non sia sottolineato oppure che venga sbarrato e può essere associato anche all'attributo del colore.

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 verde e non sottolineato;

il link visitato, sempre di colore verde 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>

<title>Titolo del documento</title>

BODY { background:#FFFFD1; color:#000000 }

A:link { color: Green;background:#FFFFD1;text-decoration : none}

A:visited {color: Green;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="http://www.mircoweb.altervista.org" target="_blank">LINK VERDE 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>

<title>Titolo del documento</title>

BODY { background:#FFFFD1; color:#000000 }

A:link { color: Green;background:#FFFFD1;text-decoration : none}

A:visited {color: Green;background:#FFFFD1;text-decoration :none}

A:hover {color: Red;background:#FFFFD1;text-decoration : none;

layout-flow : vertical-ideographic}

A:active {color: lime;background:#FFFFD1;text-decoration : none}

</style>

</head>

<body>

<p >Questo è un<a href="http://www.mircoweb.altervista.org" target="_blank"> LINK VERDE</a></p><p>senza sottolineatura che ruota di 90°</p>

</body>

</html>

Spaziatura tra le lettere

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 l'esempio:

<html>

<head>

<title>Titolo del documento</title>

BODY { background:#FFFFD1; color:#000000 }

A:link { color: Green;background:#FFFFD1;text-decoration : none}

A:visited {color: Green;background:#FFFFD1;text-decoration :none}

A:hover {color: Red;background:#FFFFD1;text-decoration : none;

letter-spacing : 3px}

A:active {color: lime;background:#FFFFD1;text-decoration : none}

</style>

</head>

<body>

<p>Questo è un<a href="http://www.mircoweb.altervista.org" target="_blank">

LINK VERDE</a></p>

<p><br>che, a contatto con il mouse,</p>

<p><br>distanzia le sue lettere di 3 pixels.</p>

</body>

</html>

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>

<title>Titolo del documento</title>

BODY { background:#FFFFD1; color:#000000 }

A:link { color: Green;background:#FFFFD1;text-decoration : none}

A:visited {color: Green;background:#FFFFD1;text-decoration :none}

A:hover {color: Red;background:#FFFFD1;text-decoration : none;

text-indent : 20px}

A:active {color: lime;background:#FFFFD1;text-decoration : none}

</style>

</head>

<body>

<p><br>Entrambi, al contatto del mouse, si spostano</p>

<p>verso destra di 10 pixels.</p>

</body>

</html>

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:

capitalize

uppercase

lowercase

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>

<title>Titolo del documento</title>

BODY { background:#FFFFD1; color:#000000 }

A:link { color: Green;background:#FFFFD1;text-decoration : none}

A:visited {color: Green;background:#FFFFD1;text-decoration :none}

A:hover {color: Red;background:#FFFFD1;text-decoration : none;

text-transform : uppercase}

A:active {color: lime;background:#FFFFD1;text-decoration : none}

</style>

</head>

<body>

<p>Questo è un<a href="http://www.mircoweb.altervista.org" target="_blank"> link in minuscolo</a> che si trasforma, </p>

<p>al contatto del mouse in maiuscolo.</p>

</body>

</html>

Evidenziazione del 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:

<html>

<head>

<title>Titolo del documento</title>

BODY { background:#FFFFD1; color:#000000 }

A:link { color: Green;background:#FFFFD1;text-decoration : none}

A:visited {color: Green;background:#FFFFD1;text-decoration :none}

A:hover {color: Red;background:#FFFFD1;text-decoration : none;

background-color : Aqua}

A:active {color: lime;background:#FFFFD1;text-decoration : none}

</style>

</head>

<body>

<p>Qui sotto c'è un link che, se viene a contatto con il mouse,</p>

<p>si evidenzia con un colore:</p>

<p><a href="http://www.mircoweb.altervista.org" target="_blank">QUESTO E' IL LINK</a></p>

</body>

</html>

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:

"Courier New", Courier, monospace;

"MS Serif", "New York", serif;

"Times New Roman", Times, serif;

"MS Sans Serif", Geneva, sans-serif;

Verdana, Geneva, Arial, Helvetica, sans-serif;

Arial, Helvetica, sans-serif

Ecco l'esempio:

<html>

<head>

<title>Titolo del documento</title>

BODY { background:#FFFFD1; color:#000000 }

A:link { color: Green;background:#FFFFD1;text-decoration : none}

A:visited {color: Green;background:#FFFFD1;text-decoration :none}

A:hover {color: Red;background:#FFFFD1;text-decoration : none;

font-family : "Courier New", Courier, monospace}

A:active {color: lime;background:#FFFFD1;text-decoration : none}

</style>

</head>

<body>

<p>Qui sotto c'è un link che, se viene a contatto con il mouse,</p>

<p>cambia il tipo di font usato:</p>

<p><a href="http://www.mircoweb.altervista.org" target="_blank">QUESTO E' IL LINK</a></p>

</body>

</html>

Cambio delle dimensioni 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:

<html>

<head>

<title>Titolo del documento</title>

BODY { background:#FFFFD1; color:#000000 }

A:link { color: Green;background:#FFFFD1;text-decoration : none}

A:visited {color: Green;background:#FFFFD1;text-decoration :none}

A:hover {color: Red;background:#FFFFD1;text-decoration : none;

font-size : 20px}

A:active {color: lime;background:#FFFFD1;text-decoration : none}

</style>

</head>

<body>

<p>Qui sotto c'è un link che, se viene a contatto con il mouse,</p>

<p>si ingrandisce sino a 20 pixels:</p>

<p><a href="http://www.mircoweb.altervista.org" target="_blank">QUESTO E' IL LINK</a></p>

</body>

</html>

Cambio dello stile del font

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

normal

italic

oblique

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:

<html>

<head>

<title>Titolo del documento</title>

BODY { background:#FFFFD1; color:#000000 }

A:link { color: Green;background:#FFFFD1;text-decoration : none}

A:visited {color: Green;background:#FFFFD1;text-decoration :none}

A:hover {color: Red;background:#FFFFD1;text-decoration : none;

font-style : italic}

A:active {color: lime;background:#FFFFD1;text-decoration : none}

</style>

</head>

<body>

<p>Qui sotto c'è un link che, se viene a contatto con il mouse,</p>

<p>trasforma il proprio font in corsivo:</p>

<p><a href="http://www.mircoweb.altervista.org" target="_blank">QUESTO E' IL LINK</a></p>

</body>

</html>

Grassettatura del font

Se è possibile trasformare in corsivo un font, si può anche grassettarlo.

Valori ammessi sono:

normal

bold

bolder

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:

<html>

<head>

<title>Titolo del documento</title>

BODY { background:#FFFFD1; color:#000000 }

A:link { color: Green;background:#FFFFD1;text-decoration : none}

A:visited {color: Green;background:#FFFFD1;text-decoration :none}

A:hover {color: Red;background:#FFFFD1;text-decoration : none;

font-weight : bolder}

A:active {color: lime;background:#FFFFD1;text-decoration : none}

</style>

</head>

<body>

<p>Qui sotto c'è un link che, se viene a contatto con il mouse,</p>

<p>viene evidenziato in un grassetto accentuato:</p>

<p><a href="http://www.mircoweb.altervista.org" target="_blank">QUESTO E' IL LINK</a></p>

</body>

</html>

E con l'aspetto dei links abbiamo terminato. Ritroveremo molti di questi attributi quando affronteremo l'aspetto dei caratteri. Non resta che dire che tutti gli esempi mostrati possono essere combinati tra loro, associandone anche più d'uno ad un singolo evento. Qui sotto un esempio complesso. Se hai studiato attentamente la sintassi ti accorgerai da solo cosa accadrà ad ogni evento.