Guida Fogli di Stile CSS

Guida CSS Fogli di stile - Ver. 4.1.3 - Ottobre 2008

Le classi Se abbiamo optato per un foglio di style esterno o interno, non è detto che dobbiamo necessariamente ridefinire tutti o alcuni degli elementi (tags) di Html, anzi, lasciamoli pure stare così come sono e creiamone di nuovi facendo uso delle classi. Un sistema decisamente più comodo e pratico ve lo assicuro. Se ne possono creare quante e quelle che ci pare, così facendo si sfrutteranno al meglio tutte le potenzialità dei CSS (fogli di style).

E' possibile definire con estrema semplicità delle proprie classi di stile, saranno queste ad essere richiamate dall'interno dei vari elementi html. Pensate al fatto che lo stesso elemento potrebbe richiamare quando una classe e quando un'altra classe, come dire: 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 avremo bisogno di adoperarlo. (i nomi delle classi devono iniziare con un carattere alfabetico e non con un numero)

Vediamo praticamente come fare, immaginiamo di volere qualcosa che serva per la nostra firma, 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 descrivere la nostra 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:

Significa che adopererà 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 con quello standard di default.

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)

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 è addirittura meglio che in punti perchè si adatterà perfettamente alla risoluzione video, qualunque essa sia. Da notare che non ci sono limiti alle dimensioni come accadeva per il font in html, dove come valore max era 7. Se esprimete le dimensioni in punti (pt) non scendete sotto al valore 9 perchè i sistemi MAC non visualizzano font di dimensioni inferiori a 9pt.

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.

E adesso? Adesso la classe è pronta, non resta che richiamarla ogni volta che serve... Come?

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

... 

Tutto ciò che verrà scritto all'interno di questo paragrafo, rispetterà i parametri, anzi gli stili, della classe firma, mi raccomando di non dimenticare la chiusura dell'elemento o le impostazioni di firma saranno estese a tutto il resto del documento. Così facendo gli altri elementi p non subiranno alcuna variazione perchè la classe firma sarà associata soltanto a questo elemento p in particolare.

Avrete certamente capito che a questo punto qualsiasi elemento di html altro non è che un contenitore vuoto all'interno del quale inserire tutto quello che ci pare e piace. Potremo continuare ad usare altri con classi diverse ed avere così paragrafi formattati in modo completamente diverso. Basterà semplicemente cambiare il nome della classe facendogli richiamare una classe creata precedentemente. Da questo modo di lavorare la vera versatilità e potenza svolta dai fogli di style.

Un esempio:

questo testo rispetta gli attributi della classe firma 

Si possono addirittura combinare le varie classi nidificandole al loro interno grazie ai contenitori quali  , la cosa però non sempre è fattibile e per questo si raccomanda una certa dimestichezza onde evitare pasticci indecifrabili.

Vi sarete resi conto che non è poi così difficile, possiamo creare tutte le classi che ci servono e battezzarle con i nomi che vogliamo per poi assegnare loro i parametri più svariati. 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 assegnargli la giusta classe (o crearne una nuova specifica) che faccia al caso vostro.

Ci sono anche classi più rigide perchè associate a priori ad un solo elemento o ad una lista ben precisa di elementi, in questo caso il nome della classe non produrrà alcun effetto se non quando viene richiamato dagli elementi prestabiliti. Vediamo un paio di esempi, volendo associare una classe al solo elemento paragrafo. La sintassi per richiamare la classe resta la stessa: tag 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 soltanto con l'elemento 

<div class="destro"> Questo div 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  e/o con quello <div> mentre grassetto funzionerà soltanto con l'elemento 

NOTA: Non è possibile da html associare più di una sola classe allo stesso elemento: risulterà errato. L'attributo class si adopera una sola volta all'interno dello stesso elemento. E' però possibile fare un'operazione del genere all'interno del foglio di style dichiarando la stessa classe con attributi diversi, così facendo la classe dichiarata si porterà dietro (eredita) 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  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 . In questo caso quando userò destro oltre ad allineare a destra il testo sarà anche in grassetto.