A SBAFO! Manuali o tutorials gratis

Copyright© Seatiger Team 2002
Sono vietate la riproduzione, la pubblicazione e la distribuzione anche parziale del presente manuale
senza il consenso scritto degli autori.

5.9 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>
     <style type="text/css">
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.asbafo.net" target="_blank">QUESTO E' IL LINK</a></p>
     </body>
</html>

anteprima

5.10 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>
     <style type="text/css">
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.asbafo.net" target="_blank">QUESTO E' IL LINK</a></p>
     </body>
</html>

anteprima

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.

5.11 Combinazione di più elementi tra loro

Visualizziamo subito l'esempio pratico:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY { background:#FFFFD1; color:#000000 }
A:link { color: Red; background: #FFFFD1; text-decoration: none; font-weight: bold }
A:visited {color: Red; background: #FFFFD1; text-decoration: none; font-weight: bold }
A:hover {color: Green; background: #FFFFD1; text-decoration: underline;
font-weight: bolder; font-style: italic; font-size: 20px }
A:active {color: #0000FF; background: #FFFFD1; text-decoration: line-through; letter-spacing: 3px; background-color: Aqua }
</style>
     </head>
     <body>
     <p>ESEMPIO COMPOSITO CON</p><br>
     <p>ATTRIBUTI MULTIPLI AD OGNI EVENTO</p><br><br>
    <p><a href="http://www.asbafo.net" target="_blank">QUESTO E' IL LINK</a></p>
     </body>
</html>

Se sei stato attento alle spiegazioni saprai in anticipo che:

Lo sfondo della pagina è giallo chiaro ed il testo nero:
{ background:#FFFFD1; color:#000000 }

Il link apparirà rosso, senza sottolineatura ed in grassetto:
{color:Red; background:#FFFFD1; text-decoration:none; font-weight:bold}

Uguale aspetto avrà il link di un collegamento già visitato, per le considerazioni che abbiamo già fatto:
{color:Red; background:#FFFFD1; text-decoration:none; font-weight:bold}

A contatto del mouse il colore cambierà in verde, il link sarà sottolineato, in grassetto accentuato, in corsivo ed ingrandito sino a 20 pixels:
{color:Green; background:#FFFFD1; text-decoration:underline;
font-weight:bolder; font-style:italic; font-size:20px}

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:
{color: #0000FF; background:#FFFFD1; text-decoration:line-through; letter-spacing:3px; background-color:Aqua}

Se l'avevi già scoperto da solo, i nostri complimenti, ma purtroppo per te non abbiamo ancora finito...

anteprima