Nella pagina File Di Stile Con CSS abbiamo visto cosa sono i file css, a cosa servono e come crearli.
Le classi stile CSS
Finora si sono applicati i CSS ai tag standard dell’HTML.
Ma supponete di trovarvi nella condizione, per esempio, di volere i link inseriti nel testo in blu; quelli, però, che si trovano in un’altra parte della pagina, in bianco su fondo blu. Potete allora definire una classe di link specifica. Questo viene fatto aggiungendo dopo il tag il nome della classe, separato da un punto:
| a.bianco { color: white; text-decoration: none; } a.bianco:hover { color: white; text-decoration: underline; } |
Nell’HTML per indicare che il link in questione appartiene alla classe “bianco” occorrerà mettere un apposito paramentro nel tag, così:
| <a href=”pagina.html” class=”bianco”>Pagina</a> |
Potete definire quante classi volete, decidendo i nomi a vostro piacimento. Denominate sempre le classi in base all’uso che intendete farne, non in base al loro aspetto.
La contestualità stile CSS
C’è un altro modo di utilizzare i CSS, ancora più elegante ed efficace: attraverso la contestualità. Finora si è definito lo stile di tag base, oppure di classi assegnate sui tag base. Ma è possibile fare di più: definire lo stile di tag solo quando si trovino all’interno di altri tag. Riprendendo l’esempio del link bianco che si è usato sopra, si potrà avere qualcosa del genere:
| <table bgcolor=”#000066”> <tr><td> <a href=”pagina1.html” class=”menulaterale”>Pagina 1</a> </td></tr> <tr><td> <a href=”pagina2.html” class=”menulaterale”>Pagina 2</a> </td></tr> </table> |
È molto probabile che i link della classe “menulaterale” saranno utilizzati solo all’interno di questa tabella. Allora, anziché definire una classe per i link, potete definire una classe per la tabella. Così:
| table.menulaterale { background-color: #000066; } table.menulaterale a { color: white; text-decoration: none; } table.menulaterale a:hover { color: white; text-decoration: underline; } |
Questo dice al browser che tutti i tag <a> all’interno della <table> di classe “menulaterale” dovranno essere presentati nella forma descritta. Nell’HTML avrete:
| <table class=”menulaterale”> <tr><td><a href=”pagina1.html”>Pagina 1</a></td></tr> <tr><td><a href=”pagina2.html”>Pagina 2</a></td></tr> </table> |
Come si può vedere, viene dichiarata solo la classe della tabella, mentre i tag dei link sono stati semplificati. L’utilità di questo modo di usare i CSS è più importante di quanto possa apparire a prima vista. Esempio pratico? Per fare una pagina ottimizzata per la stampa prendete il testo della pagina standard e, senza toccarne l’HTML, inseritelo all’interno di
| <div class=”stampa”> … </div> |
dopodiché definite solo gli stili che volete modificare, aumentando il carattere o cambiando la font:
| div.stampa p { font-size: 12pt; font-family: “Times New Roman”, serif; } |
Uno stile CSS per tutto il sito
Ci sono due modi per inserire la tabella dei CSS in un documento HTML: all’interno del documento stesso, in genere nella parte <head>, racchiudendola nei tag <style> … </style>; oppure al di fuori di esso, in un file apposito che viene legato al documento HTML inserendovi, sempre nella parte <head>, un link di
questo tipo:
| <link rel=”stylesheet” href=”stili.css”> |
Gli stili saranno inseriti nel file “stili.css”. In questo modo sarà possibile agganciare non solo una, bensì tutte le pagine del sito allo stesso foglio stile, guadagnando in uniformità, traffico consumato e facilità di manutenzione.
Errori comuni dei file Css
Alcuni errori da evitare quando si usano i CCS dipendono dal fatto che la sintassi dei CSS è simile, ma in realtà diversa, dalla sintassi dell’HTML. Alcuni browser ci passano sopra, ma altri no. Un errore molto comune è usare le virgolette nelle definizioni dei colori (per esempio “#000099”).
In HTML le virgolette sono opzionali, nella definizione dei CSS non vanno usate.
Netscape e Mozilla sbagliano tutti i colori, se trovano le virgolette.Attenzione poi ai nomi delle classi, e in particolare all’uso di maiuscole e del trattino basso ( _ ).
Per quanto riguarda le maiuscole, usatele con molta cautela, perché alcuni browser non fanno differenza, altri sì. Se non siete sicuri prendete l’abitudine di usare sempre le minuscole, o definite delle regole precise in modo da non sbagliare.
Il trattino basso, usato spesso per separare le parole, nei CSS non è un carattere valido. La sintassi prevede solo l’uso di lettere (a-z), numeri (0-9) e trattino alto (-).
Tutto sui CSS
Sul sito del W3C (il World Wide Web Consortium) è possibile trovare la documentazione completa sui CSS, con la sintassi e tutti i comandi disponibili, all’indirizzo http://www.w3.org/Style/CSS/ Per chi non ama il fai-da-te sono scaricabili, anche gratuitamente, molti piccoli editor visuali per creare i fogli stile facilmente e senza il rischio di errori.
Molto comodo e facile da usare, un editor visuale che permette di comporre i fogli stile facilmente e rapidamente, senza quelle limitazioni comuni ad altri editor del genere, che non sempre prevedono tutte le possibilità offerte dai CSS.
Editors CSS gratis
Simple CSS – uno strumento gratuito di authoring CSS
Simple CSS permette di creare facilmente fogli di stile CSS da zero, e / o di modificare quelli esistenti, utilizzando un familiare point-and-click.
Sviluppare CSS Stylizer
CSS Stylizer viene fornito con una serie di strumenti a portata di mano che proprio non esistono altrove. Automatizza le cose come Sostituzione immagini.
EngInSite CSS Editor è un sistema completamente integrato di sviluppo Cascading Style Sheets (CSS), strumento, progettato per risparmiare tempo e liberare la vostra creatività. Integrazione con W3C HTML Validator Codice Completamento automatico per i prestatori di specifiche differenti