Asbafo
a- a+

I selettori


Selettori delle classi

 
I selettori delle classi (class selectors) sono molto usati nei fogli di stile. In uno degli esempi della precedente lezione abbiamo visto che si possono assegnare colori differenti a ciascun tipo di elemento. Abbiamo visto che assegnando il colore rosso ai Titoli (tag <h1>) tutti i titoli assumeranno quella colorazione.

Ma se volessimo che intestazioni dello stesso livello, cioè sempre comprese tra i tag <h1>, avessero colori differenti tra loro? Beh, allora dobbiamo ricorrere alle classi.

Le classi, inserite all'interno di un tag HTML, modificano gli attributi del testo incluso in esso, indipendentemente dalle impostazioni generali del foglio di stile: in altre parole sono prioritarie.

Vediamo un esempio pratico:

 
                <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 { ; background:#FFFFD1 }
     </style>
     </head>
     <body>
     <h1 class="verde">Il titolo è in verde</h1>
     <h1 class="blu">Il titolo è in blu</h1>
     <h1 class="rosso">Il titolo è in rosso</h1>
     </body>
</html>
 
 
 
Nota: Quando definisci una classe DEVI farne precedere il nome da un punto ( . )
Il nome puoi modificarlo come meglio credi, non deve necessariamente coincidere con il colore, come nell'esempio. Avresti potuto chiamare le tre classi
.pluto
.pippo
.paperino
ed il risultato sarebbe stato identico, ovviamente cambiando il nome di riferimento anche all'interno dei tag <h1>.

 

Una volta definita una classe, questa può essere impiegata in tag differenti di una pagina HTML. Usando lo stesso esempio precedente possiamo ottenere differenti risultati.
 
                <html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     body { background:#FFFFD1; color:#00FF00 }
     .verde { color:green; background:#FFFFD1 }
     .blu { color:blue; background:#FFFFD1 }
     .rosso { ; background:#FFFFD1 }
     </style>
     </head>
     <body>
     <h1 class="verde">Il titolo è in verde</h1>
     <em class="blu">La scritta in corsivo è in blu</em>
     <p class="rosso">Il paragrafo normale è in rosso</p>
     </body>
</html>
 
 

 

Le classi possono anche essere assegnate ad un unico elemento di stile. Vediamo un esempio pratico:
 
                <html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     body { background:#FFFFD1; color:#000000 }
     h1.verde { color:green; background:#FFFFD1 }
     </style>
     </head>
     <body>
     <h1>Questo titolo non è verde</h1>
     <h1 class="verde">Questo titolo è verde</h1>
     </body>
</html>
 
 
 
Nota: Forse ti chiederai come mai il primo titolo è di colore nero. Perché, non essendo definito nessuno stile per i Titoli in generale, prende il colore predefinito per il testo dal foglio di stile ovvero color:#000000 che equivale al nero.

 

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 { ; 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>
 
 
 
Note: Attenzione a cambiare riferimento anche all'interno dei relativi tag HTML: non più class, ma id.

 

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 { ; background:#FFFFD1 }
     A:visited { ; 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 {; background:#FFFFD1}
determina il colore del link nella pagina, nel nostro caso in rosso.

La stringa:

                A:visited {; 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.

 
 
 
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 { ; background:#FFFFD1 }
     A.primo:visited { ; 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>
 
 
 
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...

 



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Redazione
Condividi le tue opinioni su questo articolo!