Homepage -> Guida CSS (Fogli di Stile)

CLASSI e SELETTORI

Classi

Per spiegare il loro uso nei fogli di stile si può ricorrere a questo semplice esempio: immaginate di aver impostato un font Verdana ed un colore del testo nero, e di voler usare un diverso font o colore per il testo in un particolare paragrafo, dovrete definire prima una classe nel foglio di stile:

.text { font-family:" Times New Roman "; font-size:" 10pt ";}

che dovrà essere poi richiamata nel paragrafo in questione così:

Notate come la classe vada definita nel foglio di stile con un nome preceduto da un punto.
Si può quindi apprendere perchè i fogli di stile vengano detti anche " a cascata ": usando una classe definita nell'HEAD della pagina (CSS interno) o il Tag <FONT> in una parte della pagina (CSS in linea), il testo assumerà le caratteristiche di stile definite proprio da queste ultime e non dal foglio di stile esterno.
In breve gli stili interni prevalgono sulle classi dei CSS interni ed esterni.

Le Pseudo-classi

I selettori delle pseudo-classi sono usati per cambiare colore ai links nelle tre possibili condizioni: non-visitato, visitato, a contatto con il mouse, al click:

A:link { color: red; }

Determina il colore del link nella pagina, nel nostro caso in rosso

A:visited { color: yellow; }

Determina il colore del link una volta visitato, nel nostro caso giallo

A:hover { color: green; }

Determina il colore del link al contatto del mouse, nel nostro caso verde

A:active { color: lime; }

Determina il colore del link al click, nel nostro caso verde acceso

esempio

Combinazione di classi e pseudo-classi

Si possono combinare tra loro anche classi e pseudo-classi; ad esempio se si vuole che un primo link abbia certe caratteristiche ed un secondo delle altre occore aggiungere queste voci nel foglio di stile:

A.primo:link { color: red; }

A.primo:visited { color: red; }

A.primo:hover { color: maroon; }

A.primo:active { color: lime; }

A.secondo:link { color: blue; }

A.secondo:visited { color: blue; }

A.secondo:hover { color: navy; }

A.secondo:active { color: green; }

e scrivere questo testo nel <BODY> :

Questo è il primo <A class="primo" HREF="css3.html"> link </A>

Questo è il primo link

Questo è il secondo <A class="secondo" HREF="css3.html"> link </A>

Questo è il secondo link

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 ).
Un selettore ID o identificatore, svolge funzione di etichetta di un contenitore, si possono cioè assegnare dei parametri e marcarli con un ID così che quando serviranno quei parametri, basterà richiamare il nome del selettore (ID) e con lui saranno richiamati tutti i valori ad esso associati, valori specificati una sola volta nel foglio di style interno o esterno che sia.

L'uso degli ID, così come quello delle classi, può essere associato a qualsiasi elemento valido di HTML anche se di norma lo si adopera con l'elemento <DIV>.

Vediamo un esempio:

<head>
<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>

Di output: