|
Home -> Manuali e Tutorials -> Guida CSS -> Classi e Selettori
Scarica il tutorial  | Stampa il tutorial  | Cerca nel sito 
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ì:
| <P CLASS = " text ">....</P> |
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 |
|
|
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 secondo <A class="secondo" HREF="css3.html"> link </A> |
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:
Questo titolo è in verde
Questo titolo è in blu
Questo titolo è in rosso
|
Torna su  | Indice Guida  | Pagina << 6 >>
|
