dal 2015 - visita n. 2060
Fogli di stile
Fogli di stile

 

Introduzione

HTML soffre di limiti propri di un sistema di contrassegno ideato per scopi molto lontani da quelli attualmente richiesti dal Web design. Se questi limiti appaiono marginali agli occhi dei neofiti, risultano fastidiosi, e molto spesso immobilizzanti, per i professionisti formatisi nella grafica tradizionale. Posizionare un'immagine, creare una banda laterale, giustificare del testo in HTML diventa un problema risolvibile esclusivamente con strumenti nati per tutt'altro scopo (le tabelle, per esempio, nel 90% dei casi vengono utilizzate per posizionare elementi nella pagina, invece che per ordinare dati).
Il problema, in termini minimamnete più tecnici, riguarda la classica separazione SGML tra stile, contenuti e struttura. HTML "tradizionale" non soddisfa questa condizione, ma anzi, ne esaspera la confusione.

Ma cosa significa separare lo stile dai contenuti? Consideriamo un sito Web mediamente complesso, con un numero di pagine HTML pari a 100. Poniamo che il testo adottato per l'esposizione degli argomenti sia un "arial" corsivo. Con gli strumenti classici di HTML il codice per ottenere questo risultato e':

<FONT FACE="ARIAL"><I>Testo della pagina</I></FONT>

ripetuto in tutte le 100 pagine del sito, a chiusura e apertura del testo da formattare. Semplice, ovvio e per molti versi banale. Ma cosa succede nel momento in cui scegliamo di modificare il tipo di carattere a tutte le pagine? Non c'e' altra soluzione che aprire le 100 pagine e procedere ad altrettante modifiche, che sostituiscano il nome "arial" con il nuovo font scelto. Un webmaster di medie capacita' puo' impiegare solo qualche decina di minuti, che diventano ore per siti di grandi dimensioni. Bene, questa perdita di tempo e' diretta conseguenza della promiscuita' tra stile e contenuto, laddove il primo (il tag FONT) non e' separato dal secondo (il testo della pagina).
Viene da se' che la soluzione a questo problema e' nella separazione tra i due elementi sopracitati, che nella pratica si risolve adottando i Cascading Style Sheets. D'ora in poi mi servirò dell'acronimo CSS per richiamare questi "fogli di stile a cascata" che da tempo sono stati introdotti nel Web publishing, ma che solo negli ultimi mesi hanno conosciuto una grande diffusione.

Il termine "a cascata" (cascading) richiama una delle caratteristiche principali di questa tecnologia, per cui e' possibile incorporare nel documento differenti fogli di stile, ognuno dei quali, in base a regole gerarchiche, prevale sull'altro.
I CSS sono stati introdotti da Microsoft dalla terza versione di Internet Explorer, e parzialmente supportati da Netscape soltanto dalla quarta versione dell'omonimo browser. Chi accede con un browser obsoleto ad un documento formattato con fogli CSS, si trovera' di fronte una pagina gestita dalle opzioni di default del browser (lo sfondo, per esempio, sarà grigio; il tipo di testo "times new romans" ecc).
I CSS sono stati ufficialmente riconosciuti e standardizzati dal W3C (consorzio internazionale per lo sviluppo del Web) nelle raccomandazioni "CSS1" prima, e "CSS2" poi. Si rimanda a questi documenti ufficiali per ulteriori approfondimenti.

La presente guida pone particolare attenzione all'uso pratico che di questi strumenti si fa nel Web publishing. In altre parole questo tutorial vuole fornire da subito gli strumenti per usare i CSS all'interno di Website.

Un'ultima nota in conclusione riguarda i dubbi sull'adozione di un sistema, i fogli di stile, riconosciuti solo dalle ultime versioni dei browser e che quindi rischiano di tagliare fuori parte dei visitatori. Non sono d'accordo con quanti ritengono questo limite insormontabile e rifiutano l'adozione dei CSS. Ritengo che allo sviluppo del Web debba coincidere un costante aggiornamento del software da parte dei navigatori, soprattutto oggi che i due maggiori browser sono gratuiti (addirittura di pubblico dominio il sorgente di Netscape).
Rammento, infine, che i fogli di stile sono compatibili con:

MS Internet Explorer 3 (parzialmente)
MS Internet Explorer 4 e successivi
Netscape navigator 4 (parzialmente)



















Particelle
Introduzione
CSS in linea
CSS incorporati
CSS esterni
Attributi per testo
Attributi per margini
Gestione sfondo
Raggruppare stili
Assegnare classi
Posizionamento dinamico
Controlli del cursore



La maggior parte delle volte si ricerca la felicità come si ricercano gli occhiali quando si hanno sul naso.
Droz

Valid CSS!
pagina generata in 0.002 secondi