Asbafo
a- a+

I selettori


Selettori delle classi

 
I selettori delle classi (class selectors) sono moltousati nei fogli di stile. In uno degli esempi dellaprecedente lezione abbiamo visto che si possonoassegnare colori differenti a ciascun tipo di elemento.Abbiamo visto che assegnando il colore rosso ai Titoli(tag <h1>) tutti i titoli assumeranno quellacolorazione.

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 precedereil nome da un punto ( . )
Il nome puoi modificarlo come meglio credi, non devenecessariamente coincidere con il colore, comenell'esempio. Avresti potuto chiamare le treclassi
.pluto
.pippo
.paperino
ed il risultato sarebbe stato identico, ovviamentecambiando il nome di riferimento anche all'internodei tag <h1>.

 

Una volta definita una classe, questa può essereimpiegata in tag differenti di una pagina HTML. Usandolo stesso esempio precedente possiamo otteneredifferenti 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 unicoelemento 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 essendodefinito nessuno stile per i Titoli in generale, prendeil colore predefinito per il testo dal foglio di stileovvero color:#000000 cheequivale al nero.

 

Selettori delle identità

 
Presa familiarità con le classi, passiamo aiselettori delle identità (ID selectors). Lecaratteristiche sono sempre le stesse e ciò chevale per le classi vale anche per i selettori.L'unica differenza sostanziale è nellasintassi del comando che, anziché avere un puntoprima del nome della classe, ha una celletta # e nelfatto che un selettore di identità puòessere inserito una volta sola in ogni documento(ovviamente si possono inserire selettori aventi nomidiversi).

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 ancheall'interno dei relativi tag HTML: non piùclass, ma id.

 

Selettori delle pseudo-classi

 
I selettori delle pseudo-classi (pseudo classesselectors) sono usati per cambiare colore ai links,nelle varie condizioni: a riposo, a contatto del mouse,al click, visitati. Prendiamo la nostra solita paginae, dopo aver inserito il foglio di stile, creiamo unlink 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 nellapagina, 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 inseritenell'ordine di cui sopra, pena il mancatofunzionamento.

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 pseudoclassi. Supponiamo che tu desideri avere nella paginaun 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 prossimalezione a loro dedicata, in quanto gli effetti che sipossono ottenere con un foglio di stile sono ben altririspetto a quanto visto con i soli colori...

 



Ti potrebbe interessare anche

commenta la notizia