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.

4.2 Selettori delle identità

Presa familiarità con le classi, passiamo ai selettori delle identità (ID selectors). Le caratteristiche sono sempre le stesse e ciò che vale per le classi vale anche per i selettori. L'unica differenza sostanziale è nella sintassi del comando che, anziché avere un punto prima del nome della classe, ha una celletta # e nel fatto che un selettore di identità può essere inserito una volta sola in ogni documento (ovviamente si possono inserire selettori aventi nomi diversi).

Prendiamo un esempio già visto:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     body { background:#FFFFD1; color:#000000 }
     #verde { color:green; background:#FFFFD1 }
     #blu { color:blue; background:#FFFFD1 }
     #rosso { color:red; background:#FFFFD1 }
     </style>
     </head>
     <body>
     <h1 id="verde">Questo titolo è in verde</h1>
     <h1 id="blu">Questo titolo è in blu</h1>
     <h1 id="rosso">Questo titolo è in rosso</h1>
     </body>
</html>

anteprima

Note: Attenzione a cambiare riferimento anche all'interno dei relativi tag HTML: non più class, ma id.

4.2 Selettori delle pseudo-classi

I selettori delle pseudo-classi (pseudo classes selectors) sono usati per cambiare colore ai links, nelle varie condizioni: a riposo, a contatto del mouse, al click, visitati. Prendiamo la nostra solita pagina e, dopo aver inserito il foglio di stile, creiamo un link con il tag HTML <a>:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     body { background:#FFFFD1; color:#000000 }
     A:link { color: red; background:#FFFFD1 }
     A:visited { color: red; background:#FFFFD1 }
     A:hover { color: green; background:#FFFFD1 }
     A:active { color: lime; background:#FFFFD1 }
     </style>
     </head>
     <body>
     <p>Visita la mia pagina <a href= "http://www.asbafo.net"
      target="_blank">CLICCANDO QUI</a></p>
     </body>
</html>

La stringa:
A:link {color: red; background:#FFFFD1} determina il colore del link nella pagina, nel nostro caso in rosso.

La stringa:
A:visited {color: red; background:#FFFFD1} determina il colore del link una volta visitato, nel nostro caso ancora rosso.

La stringa:
A:hover {color: green; background:#FFFFD1} determina il colore del link al contatto del mouse, nel nostro caso verde.

La stringa:
A:active {color: lime; background:#FFFFD1} determina il colore del link al click, nel nostro caso verde acceso.

anteprima

Nota 1: Queste pseudo-classi DEVONO essere inserite nell'ordine di cui sopra, pena il mancato funzionamento.

Nota 2: La frase "Visita la mia pagina" è colorata in nero perché, non essendo applicato nessun foglio di stile al paragrafo, prende il colore predefinito per il testo dal foglio di stile color:#000000 cioè nero.

Nota 3: Queste pseuso-classi possono avere anche una sintassi diversa senza che ne venga danneggiato il funzionamento:

A:link equivale a :link
A:visited equivale a :visited
A:hover equivale a :hover
A:active equivale a :active

Si possono combinare tra loro anche classi e pseudo classi. Supponiamo che tu desideri avere nella pagina un link rosso ed un link blu.
Vediamo l'esempio pratico:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     body { background:#FFFFD1; color:#000000 }
     A.primo:link { color: red; background:#FFFFD1 }
     A.primo:visited { color: red; background:#FFFFD1 }
     A.primo:hover { color: maroon; background:#FFFFD1 }
     A.primo:active { color: lime; background:#FFFFD1 }
     A.secondo:link { color: blue; background:#FFFFD1 }
     A.secondo:visited { color: blue; background:#FFFFD1 }
     A.secondo:hover { color: navy; background:#FFFFD1 }
     A.secondo:active { color: green; background:#FFFFD1 }
     </style>
     </head>
     <body>
<p>Questo è il primo<a class="primo" href="http://www.asbafo.net" target="_blank">LINK ROSSO</a></p><br>
<p>questo è il secondo<a class="secondo" href="http://www.asbafo.net" target="_blank">LINK BLU</a></p>
     </body>
</html>

anteprima

Torneremo sull'aspetto dei links nella prossima lezione a loro dedicata, in quanto gli effetti che si possono ottenere con un foglio di stile sono ben altri rispetto a quanto visto con i soli colori...