Le classi

Abbiamo imparato ad applicare una speciale formattazione ai vari TAG HTML.
Ora siamo in grado, ad esempio, di specificare (tramite un foglio di stile esterno) che i bordi di tutte le tabelle dovranno essere di color verde.

Questo è sicuramente un vantaggio perché non dovremo ricorrere alla formattazione delle singole tabelle di tutto il nostro web.

Ma cosa succede se sorge la necessità di formattare alcune tabelle con un colore differente?
Semplice, viene spontaneo rispondere, è sufficiente:

• aprire la pagina che contiene la tabella in questione
• fare clic destro sulla tabella e selezionare Proprietà tabella
• a questo punto, premendo il pulsante Stile, avremo accesso allo stile della Tabella
• possiamo quindi definire un nuovo colore di sfondo

A questo punto il browser del futuro navigatore noterà che c’è un contrasto tra il colore impostato dal foglio di stile esterno ed il colore impostato per quella singola tabella Alfa. In casi di conflitto come questo il browser darà la precedenza alle opzioni “particolari” mettendo in secondo piano quelle “generali“.

Questo significa che il bordo della tabella assumerà il colore appena specificato mentre tutte le altre tabelle del sito web (essendo prive di istruzioni “particolari”) faranno riferimento al consueto foglio di stile esterno.

Problema risolto, quindi.
Ma cosa succederebbe se si presentasse la necessità di creare due diverse classi di tabelle?

Cosa potremmo fare, cioè, per decidere nel foglio di stile la formattazione di due differenti tipi di tabelle? Come possiamo, cioè, specificare (nel foglio di stile esterno) che il nostro sito web conterrà due tabelle: la prima con bordi verdi e la seconda con bordi rossi (ad esempio)?

I fogli di stile permettono questo “sdoppiamento” dei Tag HTML tramite l’uso delle classi.

Per creare una classe basta aggiungere (separata da un punto) l’etichetta della classe subito dopo il nome del Tag.

Torniamo, quindi, alla finestra del nostro foglio di stile esterno.

Premiamo il pulsante Nuovo per definire la formattazione di un nuovo Tag HTML

• Nella finestra che si apre dobbiamo definire, come di consueto, il nome del Tag HTML al quale si riferisce la formattazione che stiamo impostando
• digitiamo quindi il nome del Tag aggiungendo l’identificativo della classe (separando le due parole con un punto).
• possiamo scrivere, ad esempio, table.rossa
• procediamo quindi all’impostazione dello stile usando il consueto pulsante Formato

 

• Una volta termina la definizione dello stile confermiamo con Ok e torniamo alla finestra precedente
• ripetiamo il procedimento definendo, questa volta, la classe table.verde
• una volta finito confermiamo tutto con Ok e chiudiamo il foglio di stile

Dobbiamo ora tornare al nostro sito web e scegliere la classe delle varie tabelle che abbiamo creato.

• apriamo quindi una pagina contenente una tabella
• facciamo clic destro sulla tabella e selezioniamo Proprietà tabella

• nella finestra che si apre usiamo la finestra Classe per definire, appunto, la classe della tabella selezionata
• digitiamo, ad esempio, rossa se vogliamo applicare a quella tabella la formattazione applicata a table.rossa
• digitiamo, invece, verde per applicare la formattazione dell’altra classe

Le potenzialità di questa tecnica sono altissime e, se costruiamo il nostro sito web usando sin dall’inizio la distinzione delle classi (definendo cioè la classe di ogni oggetto) saremo poi avvantaggiati quando dovremo aggiornarne la grafica.