Introduzione | Guida CSS

Introduzione =

Dietro il semplice acronimo CSS (Cascading Style = Sheets -=20 Fogli di stile a cascata) si nasconde uno dei = fondamentali=20 linguaggi standard del W3C. La sua storia cammina su binari = paralleli=20 rispetto a quelli di HTML, di cui vuole essere l'ideale = complemento.=20 Da sempre infatti, nelle intenzioni degli uomini del = Consortium,=20 HTML, cos=EC come la sua recente evoluzione, XHTML, dovrebbe = essere=20 visto semplicemente come un linguaggio strutturale, = alieno da=20 qualunque scopo attinente la presentazione di un = documento.=20 Per questo obiettivo, ovvero arricchire l'aspetto visuale ed = estetico di una pagina, lo strumento designato sono appunto = i CSS.=20 L'ideale perseguito da anni si pu=F2 sintetizzare con una = nota=20 espressione: separare il contenuto dalla presentazione.

La prima specifica ufficiale di CSS (CSS1)=20 risale al dicembre del 1996. Nel maggio 1998 =E8 stata la = volta della=20 seconda versione: CSS2. Niente stravolgimenti, ma = molte aggiunte=20 rispetto alla prima. CSS2 non =E8 altro che CSS1 = pi=F9=20 alcune nuove propriet=E0, valori di propriet=E0 e = definizioni per stili=20 non canonici come quelli rivolti alla stampa o alla = definizione di=20 contenuti audio. E' attualmente allo stato di Working Draft = la nuova=20 specifica CSS3.

A cosa servono

Inizio questa sezione con un'affermazione perentoria: se = siete=20 seriamente interessati alle tecnologie web non potete = ignorare i=20 CSS. Chi conosce un minimo di HTML =E8 pienamente = consapevole dei=20 limiti di questo linguaggio sul lato della pura = presentazione. A=20 dire il vero, non =E8 giusto parlare di limiti: HTML non =E8 = nato per=20 questo. E' stato per=F2 piegato a fare cose che = intrinsecamente non=20 era in grado di fare. Bene: quasi tutto quello che con HTML = non=20 potete realizzare, riuscirete a farlo con i fogli di = stile.

Finalmente, ad esempio, potrete dare al testo delle = vostre pagine=20 un aspetto da word-processor: non solo con il colore = o i=20 font che preferite, ma con un sistema di = interlinea=20 pratico e funzionale, con le decorazioni che = desiderate,=20 riuscendo a spaziare lettere e parole, impostando = stili=20 diversi per titoli e paragrafi, sfruttando i benefici=20 dell'indentatura o della giustificazione.

Ancora, potrete finalmente distanziare gli elementi della = vostra=20 pagina in maniera semplice e intuitiva con un potente = meccanismo di=20 gestione dei margini. Tonnellate di gif trasparenti = usate per=20 spaziare possono essere finalmente gettate nel cestino del = vostro=20 computer. E se i margini non bastano sarete in grado ora di=20 aggiungere bellisimi bordi non solo alle tabelle, ma = a tutti=20 gli elementi di una pagina.

Per non parlare degli sfondi: li potrete applicare = a=20 quello che volete. E dimenticate quelle brutte = micro-textures.=20 Finalmente potrete sbattere su una pagina, magari ben = piazzato al=20 centro, quel vostro bellissimo disegno di 600x400 pixel = senza=20 doverlo necesseriamente vedere trasformato in orribili = riquadri=20 ripetuti sulla pagina.Ora siete voi a decidere come usare=20 un'immagine di sfondo: la potete ripetere in una sola = direzione, in=20 due o per niente! Facile e comodo.

La cosa pi=F9 bella =E8 che la gestione del sito = non sar=E0 mai=20 pi=F9 un incubo. Se quel bellissimo disegno di prima vi = stufa, non=20 dovrete pi=F9 andare a modificare una per una 300 pagine! I = CSS sono=20 separati dal documento. Aprite un foglio di stile, cambiate=20 l'immagine e il gioco =E8 fatto. Il risultato sono pagine = pi=F9 leggere=20 e facili da modificare. Milioni di byte di banda risparmiati = per la=20 gioia degli utenti.

Se poi avete a cuore l'accessibilit=E0 i CSS=20 sono uno strumento portentoso, anche grazie al fatto di = poter essere=20 gestiti con linguaggi di scripting avanzati in grado di = modificare=20 con un solo click l'aspetto di una pagina.

Spero e credo che queste semplici considerazioni possano=20 invogliarvi a procedere nella lettura di questa guida di = base in cui=20 troverete la spiegazione di tutte le propriet=E0 e dei = meccanismi che=20 regolano questo meraviglioso strumento. Quando avrete = superato il=20 livello di apprendistato non dimenticate di dare un'occhiata = alla sezione PRO = di HTML.it.=20 Tanti articoli di approfondimento vi aspettano per farvi = sfruttare=20 al meglio le potenzialit=E0 del linguaggio.

Guida alla consultazione

Un primo avviso: per una lettura consapevole della guida = =E8=20 richiesta una buona conoscenza di HTML e XHTML. In fini dei = conti i CSS=20 agiscono su questi linguaggi e non hanno alcun senso se = separati da=20 essi.

La guida =E8 suddivisa in tre parti:

1. Nella prima affronteremo i concetti di base, = ovvero i=20 meccanismi e i costrutti che regolano il linguaggio e la sua = interazione con (X)HTML.

2. La seconda parte comprende l'elenco ragionato = delle=20 propriet=E0 CSS2 suddivise per ambito di applicazione = (sfondo, colore,=20 testo, etc)

3. Nella terza forniremo suggerimenti e proposte = di=20 approfondimento con bibliografia e webbografia.

Quasi tutte le lezioni sono corredate di pagine di = esempio. Esse=20 non vanno considerate come un semplice matariale accessorio, = ma sono=20 parte integrante e costitutiva della guida. = Contengono sempre=20 note di commento ulteriore ed esempi di codice sugli = argomenti=20 trattati. Abbiamo anzi pensato di farvi un regalo. Le = abbiamo=20 raccolte, insieme ai CSS che ne definiscono lo stile, in un = file=20 zip. Scaricatele. Studiatevi comodamente il codice (X)HTML e = quello=20 dei fogli di stile. Giocateci un p=F2. Modificate le = propriet=E0 e fate=20 i vostri esperimenti. Vi assicuro che =E8 il modo migliore = per=20 imparare.

Scarica il file "test.zip".

Nel proporre il riferimento alle propriet=E0 ci siamo = limitati=20 all'esposizione della loro sintassi e del funzionamento di = base. Non=20 vengono affrontati in questa sede problemi di = compatibilit=E0 o di bug=20 di singoli browser nel trattamento di tali propriet=E0 = (salvo casi=20 importanti). Rimandiamo alle risorse citate nell'ultima = parte per=20 approfondimenti sulla questione.

Un aspetto che tengo a sottolineare =E8 quello della = traduzione:=20 abbiamo tentato di tradurre in italiano i nomi di molte = parole=20 chiave, ma abbiamo sempre dato il corrispondente in inglese. = Il=20 motivo =E8 semplice: la bibliografia e le risorse online = sono quasi=20 tutte in quella lingua e una non consapevolezza di certi = termini=20 potrebbe evidentemente spiazzarvi.

A questo punto non mi rimane che esprimervi il canonico = "Buona=20 lettura". Aggiungendo, come sempre, la mia disponibilit=E0 e = massima=20 apertura per aiuti, suggerimenti, critiche e consigli. Buona = lettura!

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =