[GUIDA CSS #9] Classi e ID


[GUIDA CSS #9] Classi e Id

Abbiamo visto nelle precedenti lezioni che strumento potente possono diventare i fogli di stile se correttamente utilizzati. La vera “forza” dei CSS, tuttavia, sta in due tipi speciali di selettori che non abbiamo analizzato la volta scorsa: Classi e ID. Partiamo con ordine: nella sintassi HTML ci sono due tipi di attributi che potete utilizzare (class e ID), tuttavia questi attributi non hanno alcun tipo di valore se non utilizzati in concomitanza con i CSS. Per fare un esempio:

<p class=”paragrafo”>Qui il primo paragrafo</p>
<p id=”paragrafodue”>Qui il secondo paragrafo</p>

Entrambi i paragrafi, in questo caso, non verranno formattati in nessun modo per il semplice fatto che la classe “paragrafo” e l’ ID “paragrafodue” non trovano una corrispondenza con i fogli di stile. Vediamo ora un altro esempio nel quale i due paragrafi vengono formattati come desideriamo:

<style type=”text/css”>
#paragrafodue {color: #000000;}
.paragrafo {color: #FFFFFF;}
</style>
<p class=”paragrafo”>Qui il primo paragrafo</p>
<p id=”paragrafodue”>Qui il secondo paragrafo</p>

In questo caso, per il primo paragrafo il colore del testo sarà bianco, per il secondo invece sarà nero. Non badate ora alla sintassi (ci arriveremo fra poco), l’ importante è che capiate il funzionamento basilare di Classi e ID. Prima di addentrarci nel vivo dell’ argomento c’è un’ ulteriore precisazione da fare: l’ ID si può utilizzare per un singolo elemento nella struttura HTML, mentre la classe anche per più elementi. Di conseguenza un CSS del genere darà problemi:

<p id=”paragrafodue”>Qui il primo paragrafo</p>
<p id=”paragrafodue”>Qui il secondo paragrafo</p>

Mentre un foglio di stile come quello che segue non darà nessun problema:

<p class=”paragrafodue”>Qui il primo paragrafo</p>
<p class=”paragrafodue”>Qui il secondo paragrafo</p>

Sulla base di questi concetti decidete in anticipo se utilizzare classi o ID. Poste ora le basi per la scrittura di questi due particolari selettori vediamo insieme le regole sintattiche.

Per definire una classe nel vostro foglio di stile vi basterà far precedere il nome di questa dal punto. Questa è la sintassi più utilizzata, quella di base. Esempio a seguire:

.paragrafo {color: #000000;}

Un minimo di strategia è richiesta invece quando andrete a scrivere classi utilizzando gli altri due metodi che vi elencherò di seguito. Il primo, si basa sulla scrittura dell’ elemento HTML da formattare prima del punto. Esempio:

p.paragrafo {color: #000000;}

In questo caso il CSS formatterà solamente i paragrafi che contengono la classe “paragrafo“, il ché è molto più restrittivo della regola genere di scrittura delle classi. Un terzo e ultimo modo per scrivere una classe si basa sull’ utilizzo di classi multiple. Guardate l’ esempio qui di seguito:

p.paragrafo.prova {color: #000000;}

In questo caso, verrà formattato solamente il paragrafo che conterrà entrambe le classi, sia “paragrafo”, sia “prova” (non c’è un ordine preciso nello scrivere i nomi delle classi). Come potete constatare voi stessi è una metodologia ancora più restrittiva della precedente, usatela solo in casi particolari. Ecco il paragrafo HTML che verrà formattato:

<p class=”paragrafo prova”>Qui il primo paragrafo</p>

La sintassi per scrivere un ID è molto semplice. Come potete immaginare dal primo esempio che ho fatto, esso è preceduto dal cancelletto come nell’ esempio seguente:

#paragrafo {color: #FFFFFF;}

Come per le classi, anche per l’ ID è possibile indicare prima del simbolo di cancelletto l’ elemento HTML su cui interagirà il nostro ID, tuttavia è abbastanza inutile utilizzare questa tecnica poiché, come ho già detto, l’ utilizzo dell’ ID è univoco in ogni caso. A presto con il prossimo articolo 😉

<- Lezione precedente (Analizziamo i selettori)
Lezione successiva (Classi speciali: le pseudo-classi) ->

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *