Il sito per imparare gratuitamente a fare pagine Web

Le Classi CSS

Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip



© www.web-link.it  Guida CSS Fogli di stile - Ver. 4.8.1   

Le classi  Qualunque sia la nostra scelta, foglio di style esterno o incorporato, non è detto che si debba necessariamente ridefinire tutti o alcuni degli elementi (tags) di Html, anzi, lasciamoli pure stare così come sono e creiamo noi le varianti che ci servono facendo uso delle classi. Questo di far uso di classi è decisamente il sistema più comodo e pratico. Se ne possono creare quante e come ci pare e piace, così facendo si sfruttano tutte le potenzialità dei CSS (fogli di style).

E' possibile definire con estrema semplicità delle proprie classi di stile abbinandole allo stesso elemento di html, saranno poi queste classi ad essere richiamate dall'interno dei vari elementi (tags) di html. Pensate al fatto che lo stesso elemento <p> potrebbe richiamare quando una classe, quando un'altra classe a seconda delle esigenze. Come dire che si ottengono dallo stesso elemento risultati completamente diversi a seconda di quale classe viene ad esso associata.

Esempio: Definiamo una classe, per farlo è sufficiente editare un nome preceduto da un . punto, quale nome?

Non ha importanza, decidetelo voi, meglio se attinente con l'effetto che dovrà produrre in modo tale da essere ricordato con maggiore facilità quando si dovrà adoperarlo.

Nota: i nomi delle classi devono iniziare con un carattere alfabetico e non con un numero e non devono contenere spazi vuoti.

Vediamo praticamente come fare. Immaginiamo di volere qualcosa che serva per la nostra firma, ad esempio quella che io ho messo a fine pagina. Creiamo una classe alla quale assegneremo il nome firma che farà uso di un font piccolo ed inclinato, quindi stile italico, ed un colore rosso ben visibile.

Richiamiamo dal nostro editor il file .css se si trattava di un foglio di stile esterno, altrimenti portatevi all'interno della zona style, posizionandovi fuori da eventuali parentesi graffe. Possiamo ora descrivere la nostra nuova classe firma assegnandole i vari attributi:

.firma {
	font-family: Verdana, Arial, sans-serif;
	color: #ff0000;
	font-size: 9pt;
	text-align: center;
	font-style: italic;
	}

Da notare che fra il .(punto) iniziale e la scritta firma non ci sono spazi vuoti. Vediamo cosa fanno le singole voci inserite in questa nuova classe firma:

font-family: Verdana, Arial, sans-serif;
Significa usare il font Verdana (il primo dichiarato), se questo non fosse installato sul PC del visitatore si cercherà Arial (il secondo dichiarato), nel caso mancasse anche quello si passerà ad uno della famiglia san-serif e così via, si possono specificare fino a tre fonts alternativi, nel caso in cui nessuno dei tre fosse installato sarà visualizzato usando quello standard di default.

color: #ff0000;
Colore rosso, si possono esprimere i colori in formato esadecimale, come in questo caso, facendoli precedere dal segno pound # (cancelletto), oppure scrivendo il relativo nome del colore in lingua inglese. Anche red avrebbe prodotto lo stesso risultato.
Su questa pagina potete trovare i codici esadecimali per i colori più comuni.

font-size: 9pt;
Dimensione del font: 9 punti, potevamo esprimere il valore anche in pixel o in centimetri o anche in altri modi che vedremo in seguito. In pixel forse è meglio che in punti perchè si adatterà perfettamente alla risoluzione video, qualunque essa sia. Da notare che non ci sono limiti alle dimensioni a differenza dei font dichiarati in html, dove il valore max era 7. Se esprimete le dimensioni in punti (pt) non scendete mai sotto al valore 9 perchè i sistemi MAC non visualizzano font di dimensioni inferiori a 9pt.

text-align: center;
Allineamento del testo, in questo caso centrato, si poteva scegliere fra destro, sinistro o giustificato; adoperando i relativi termini in lingua inglese: left, right, justify.

font-style: italic;
Stile Italico, potevamo scegliere anche normal o oblique.

Bene, la classe è pronta e non resta che richiamarla ogni volta che ci serve, vediamo come.

Molto semplice, ogni elemento (tag) di HTML supporta l'attributo class, quindi dovendo scrivere una parte di testo e volendo che questo faccia uso degli attributi appena inseriti nella classe firma, basterà assegnare la classe "firma" all'elemento (tag) prescelto, nel nostro caso un paragrafo:

<p class="firma"> ... </p>

Tutto ciò che sarà scritto all'interno di questo paragrafo rispetterà i parametri, anzi gli stili, della classe firma. Mi raccomando di non dimenticare la chiusura dell'elemento </p> o le impostazioni di firma saranno estese a tutto il resto del documento. Così facendo gli altri elementi <p> non subiranno alcuna variazione perchè ad essi non viene assegnata la classe firma come invece è stato fatto per questo elemento <p> in particolare.

Avrete certamente capito che a questo punto qualsiasi elemento di html altro non sarà che un contenitore vuoto all'interno del quale poter inserire tutto quello che ci pare e piace. Potremo continuare ad usare altri <p> con classi diverse ed avere così paragrafi formattati in modo completamente differente fra di loro. Basterà semplicemente cambiare il nome della classe facendogli richiamare una delle tante create per le varie occorrenze. Da questo modo di lavorare si coglie la vera versatilità e potenza dei fogli di style.

In pratica l'esempio:

<p class="firma">questo testo rispetta gli attributi della classe firma </p>

Produce questo il risultato:

questo testo rispetta gli attributi della classe firma

Ed infatti usa il font Verdana, è di colore rosso, ha dimensioni 9pt, è centrato ed ha lo stile italico.

Si possono anche combinare le varie classi nidificandole una dentro all'altra grazie ai vari contenitori, quali <span> </span> per esempio, la cosa però non sempre è fattibile e per questo si raccomanda di acquisire prima una certa dimestichezza onde evitare pasticci indecifrabili.

A questo punto vi sarete resi conto che non è poi così difficile, possiamo creare tutte le classi che ci servono con i parametri e gli attributi più adeguati alle nostre esigenze e battezzarle con i nomi che vogliamo. Se all'interno del vostro sito, fatto di una o di cento pagine html, vi fosse anche una sola piccola parte di testo che non vi convince, sarà sufficiente creare una nuova classe ed assegnarla a quella parte di codice.

Ci sono anche classi che definiremo più rigide perchè associate a priori ad un particolare elemento o ad una lista ben definita di elementi html, in questo caso il nome della classe non produrrà alcun effetto se non quando viene richiamato dagli stessi elementi predefiniti. Vediamo un paio di esempi, volendo associare una particolare classe al solo elemento <p> paragrafo. La sintassi per richiamare la classe resta la stessa: <p class="nome">, ma nel foglio di stile è possibile stabilire fin da subito a quale tag la classe potrà essere associata.

p.destro {text-align: right;}
p.grassetto {font-weight: bold;}

In questo caso possono essere usate le classi destro e grassetto ma produrranno il loro effetto soltanto con l'elemento <p>

<p class="destro"> Questo paragrafo è allineato a destra.</p>

<div class="destro"> Questo div invece se ne infischia della classe
che allinea a destra.</div>

Volendo associare la stessa classe a più elementi html questi si possono dichiarare nel foglio di style separandoli da una virgola:

p.destro, div.destro {text-align: right;}
p.grassetto {font-weight: bold;}

In questo caso possono essere usate: la classe destro con l'elemento <p> e/o con quello <div> mentre grassetto funzionerà soltanto con l'elemento <p>

<p class="destro"> Questo paragrafo è allineato a destra.</p>

<div class="destro"> Adesso anche questo div è allineato a destra.</div>

NOTA: è possibile richiamare da html più di una sola classe per lo stesso elemento, è sufficiente inserire all'interno di class i nomi delle classi separandoli da uno spazio vuoto, questo perchè così come tutti gli attributi di html anche class si adopera una sola volta all'interno dello stesso elemento.

<p class="destro grassetto">

E' possibile fare la stessa operazione anche dall'interno del foglio di style dichiarando per classi diverse gli stessi attributi, così facendo la classe già esistente si porterà dietro (eredita) tutte le proprietà della stessa classe dichiarata precedentemente.

p.destro {text-align: right;}
.grassetto, p.destro {font-weight: bold;}

In questo caso con la classe destro assegno al solo elemento <p> un allineamento a destra. Poi definisco una nuova classe di nome grassetto, da usare con qualsiasi elemento di html e separandola da una virgola richiamo anche la classe destro che avevo assegnato al tag <p>. In questo caso quando userò destro oltre ad allineare a destra il testo sarà anche in grassetto.

<p class="destro"> Questo p è allineato a destra + grassetto.</p>

<div class="grassetto"> Questo div ha solo il grassetto.</div>

Se vi sembra un po' complicato non preoccupatevi, facendo delle prove e vedendo i risultati a video si capirà meglio il meccanismo, alo momento imparate ad usare le classi semplici, il resto arriverà da solo. Continua: I selettori ID

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi