Rev. 3.0 - Agosto 2005 Ver. 1.0 - Novembre 1999
Le classi
Se abbiamo optato per un foglio di style, esterno o interno che sia, non è detto che dobbiamo necessariamente ridefinire tutti o alcuni elementi (tags) di Html, anzi, lasciamoli stare così come sono e creiamone di nuovi facendo uso delle classi, un sistema molto più comodo e pratico, ve lo assicuro; visto poi che se ne possono creare quante e quelle che ci pare, così facendo si sfrutteranno al meglio le potenzialità dei CSS (fogli di style).
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.
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 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à a san-serif e così via, si possono specificare fino a tre fonts alternativi, nel caso in cui nessuno dei tre fosse installato verrà visualizzato 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 nomi e codici esadecimali per i colori più comuni) font-size: 10pt;
Dimensioni del font: 10 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 dove come valore max era 7 (parliamo di html). 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-weight: lighter;
Consistenza del font, lighter; leggera, potevamo adoperare: normal, bolder, bold o anche numeri: 400, 500 ecc. ecc. font-style: italic;
Stile Italico, avevamo a disposizione anche :normal, oblique. E adesso? Adesso la classe è pronta, non resta che richiamarla ogni volta che serve... Come?
questo testo rispetta gli attributi della classe firma Si possono addirittura combinare le varie classi nidificandole al loro interno grazie ai contenitori quali <span> </span>, la cosa però non sempre è fattibile e 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.
In questo caso possono essere usate soltanto dall'elemento <p>
Continua: I selettori ID |
||||
Andrea Bianchi |
||||
|