Sei sulla pagina 1di 41

Massimiliano Carnevale

http://www.maniegrafiche.it

Guida pratica ai CSS


Come usare da zero i fogli di stile con stile.

Alcuni diritti riservati.

E' consentita la riproduzione, la distribuzione, l'esposizione e la comunicazione al pubblico in ottemperanza alla licenza: Creative Commons Attribuzione Non Commerciale Non opere derivate 2.5 Italia: in poche parole potete distribuirla, esporla, pubblicarla ovunque voi vogliate a condizione che venga chiaramente indicato l'autore, per scopi non di lucro e senza modifiche. Non sono escluse modifiche a tali termini, quali ad esempio pubblicazione, vendita, modifica da concordare con l'autore.

1.

Introduzione al mondo dei CSS

Indice

2. Includere i CSS 3. Metodo @import 4. Regole dei Css 5. !. Le classi e gli ID Le propriet" dei caratteri #$ont% . I selettori css &. 'ropriet" dei colori (. 'ropriet" dei testi 1). 'ropriet" dei *ordi 11. Liste 12. +a*elle 13. ,o-.model 14. Dimensionamento e misure 15. Css per la stampa 1 . Consigli di scrittura dei $ile .css 1!. /sempi pratici di *ase

Come Creare un sito a 2 colonne ta*leless /sempio di creazione di un $orm ta*leless 0llineamento 1erticale con i css Come creare un sito a 3 colonne con i css

1&. /sempio pratici a1anzati

1(. Risorse 2). 2ote sull3autore

Introduzione al mondo dei CSS


4ino a poco tempo $a la maggior parte delle pagine 5e* erano un misto di contenuti e presentazione con l3aspetto gra$ico costituito su ta*elle6 tutto ci7 pote1a e pu7 comportare di$$icolt" 8uali9 problemi di modifica di un la:out; problemi di ritrovare parti di codice affogate in tabelle e sottotabelle; pesantezza delle stesse a causa dello stesso moti1o. I css permettono di o11iare a tale incon1eniente9 con essi si pu7 costruire il contenuto e successi1amente applicar1i lo stile ric<iesto semplicemente 1ariando la pagina dello stile. +utto 8uesto porta poi ad altri 1antaggi9 = possibile associare uno stile per ogni dispositivo che richieda la pagina6 uno per i *ro5ser classici; uno per le 5e* t1; uno per i tele$onini e 1ideo$onini. >olendo poi si possono creare molti stili anc<e per lo stesso dispositi1o. Si potre**e creare una 1ersione pi? leggera; con poc<e immagini o in *assa risoluzione per c<i a**ia una connessione lenta ed una pi? pesante; con risoluzioni maggiori per i $ortunati possessori di *anda larga. I 1antaggi sono molti anc<e con$rontati con #i poc<i% s1antaggi. Seguiteci9 cerc<eremo di $armi apprendere 8uesto nuo1o mondo con $acilit" ed in modo progressi1o. Come si dice9 = pi? $acile a dirsi c<e a $arsi.

Includere i css
In 8uesto capitolo inizieremo a 1edere un po@ di codice; in particolare 1edremo come inserire i css nelle nostre pagine. /sistono 4 metodi per utilizzare i css9 1. richiamarli direttamente nelle pagine come stile dellelemento usando lattributo style 2. utilizzare lelemento <style> nellhead dei nostri documenti XHTML 3. richiamando una pagina di stili esterna attraverso lelemento <link> 4. utilizzando la direttiva @import in <style>. +utti e 4 i metodi permettono di $are la stessa cosa anc<e se con alcune di$$erenze. Il 1antaggio di utilizzare $ogli di stili esterni = comun8ue note1ole9 nel caso in cui 1olessimo cam*iare looA ad un documento ci *aster" modi$icare il $oglio di stile. Molto simile = il comportamento della diretti1a @import c<e in pi? esclude alcuni 1ecc<i *ro5ser c<e non <anno implementato i css in modo corretto. 'ersonalmente = il metodo c<e pre$erisco. Bli altri due metodi ci possono esser utili per pro1are al 1olo ci7 c<e a**iamo pensato9 son molto 1eloci e pratici per tale moti1o ma non mi sento di consigliar1eli se non in casi particolarissimi c<e appro$ondiremo in seguito. 0ltro punto importante c<e iniziamo ad accennare = l@ereditariet" e la priorit" delle regole impostate dai css9 se diamo due stesse regole allo stesso elemento; magari una nel $oglio di stile esterno ed una nell@elemento <style> il motore interpreter" 8uello a maggior priorit". In tal caso la regola inserita in Cst:leD andr" a sovrascrivere 8uella del css esterno. 2on preoccupate1i comun8ue anc<e 8uesto argomento sar" ric<iamato successi1amente.

Ritorniamo all@argomento principale di 8uesta lezione e 1ediamo come inserire praticamente i nostri stili. 1. Richiamare i css nelle pagine utilizzando l attributo style. L@uso in tal caso = molto semplice. Supponiamo di 1oler colorare di rosso un paragra$o. Con 8uesto metodo *asta dic<iarlo direttamente nell@elemento CpD9
Cp st:leE@color9red@DFello GorldHCIpD

ed il gioco = $atto. !. "tilizzare l elemento <style> nell head dei nostri documenti #$%&'. Con 8uesto metodo = su$$icente inserire le propriet" direttamente nell@ head9
<html> <head> <style type=text/css media=all> p {color:red; } </style> </head> <body> <p>Hello World!</p> </body> </html>

St:le pu7 a1ere due attri*uti9 type o**ligatorio; c<e <a la $unzione di speci$icare il tipo6 in pratica sar" per7 sempre e solo text/css e media c<e ser1e a speci$icare a 8uale piatta$orma applicare un $oglio di stile #ci torneremo in seguito%. (. richiamare una pagina di stili esterna attraverso l elemento <lin)>.
<link rel=stylesheet type=text/css href=css.css media=all>

Juesto metodo pre1ede 4 possi*ili attri*uti9 type e media con la stessa $unzione appena 1ista; href c<e ser1e a speci$icare i percorso del $oglio di stile #o**ligatorio% e rel c<e speci$ica la relazione tra il $oglio di stile ed il documento <tml. 'u7 assumere due 1alori9 stylesheet e alternate stylesheet. *. utilizzare la direttiva +import in <style> Juesto metodo; il mio pre$erito; pre1ede di indicare il percorso del $oglio di testo entro parentesi tonde nell@elemento st:le nella $orma
<style> @import url http!//miosito.ext/css.css"# </style>

Maggiori appro ondimenti potrete trovarli per !uesto metodo nel prossimo articolo. 0**iamo imparato come inserire i css nelle nostre pagine9 prossimamente 1edremo come s$ruttare i css nel massimo della loro potenza. 'rima per7 occorrer" iniziere a capire la classi$icazione degli elementi di un documento. +utto 8uesto lo 1edremo in una delle prossime lezioni.

&etodo +import
L@uso del motodo @import pu7 esser s$ruttato anc<e per permettere l@accesso o l@esclusione di alcuni *ro5ser. Iniziamo con il dire c<e il G3C ammette una certa possi*ilit" di discrezione nel codice di importazione. 0mmette ad esempio le $orme +import url,-style.css-./ +import url,style.css./ o anc<e +import -style.css-/ . Ci sono per7 anc<e altre $orme accettate in modo di1erso da *ro5ser a *ro5ser. Juesto potr" aiutarci in un modo molto semplice per creare $ogli di stile di1ersi per di1ersi *ro5ser. Se; ad esempio; 1olessimo creare due css uno per Internet /-plorer 1ersione 4; 5 e 5.5 potremmo ric<iamarlo con la sintassi +import0 url,-style1ie.css-./; mentre se 1olessimo inserire un $oglio di stile per tutti gli altri tranne i precendenti *aster" ric<iamare il css in 8uesto modo9 +import -style.css-2332/. "#edremo successivamente che ci sono altri metodi altrettanto e icaci$ ma avere a disposizione due tecniche per are la stessa cosa% non potr& che esserci utile% no'( /@ da notare c<e tale metodo pu7 esser applicato in moltissimi casi. In 8uesta pagina son catalogate 33 possi*ilit" di1erse. L@autore <a indicato anc<e se tali possi*ilit" son appro1ate dal 1alidatore G3C. Come leggere la ta*ellaK Semplicemente9 per ogni regola di @import son indicate con una L i *ro5ser c<e la supportano. Mescolando adeguatamente le 1arie regole potremmo costruire un $oglio di stile di1erso per ogni *ro5ser; una comodit" c<e ci $ar" utile tra un p7 8uando noteremo come *ro5ser di1ersi interpretino la strssa regola in modi; per cosM dire; creati1i.

Regole dei Css


Siamo arri1ati al punto di do1er applicare delle regole alle nostre pagine. Come si $a a dire attra1erso i css c<e il nostro paragra$o de1e contenere testo di colore rossoK )ome acciamo a dire di applicare uno s ondo giallo ed un margine nullo a tutti i titoli h*' )ome diciamo al css che tutti i titoli h* ed h+ devono avere padding nullo' p , color- red$. nel primo caso; h* , bac/ground0color- yello1$ margin- 2$ . nel secondo e h14 h! 5 padding6 7/ 8 nell@ultimo. +utto 8uaH >ediamo nel dettaglio la prima regola9

p N color 9 red6 O

selettore propriet" 1alore Come a1rete notato la regola = di1isa in due parti9 la prima = il selettore; cio= la parte c<e indica a 8uale sezione del documento applicare la regola #o le regole% indicata dal blocco delle dichiarazioni racc<iuso tra parentesi gra$$e. Il *locco delle dic<iarazioni = un insieme di dic<iarazioni $ormato da una propriet" e da un 1alore da assegnare alla stessa; di1isi tra loro da due punti e terminato da un punto e 1irgola. Regole successi1e possono e1identemente applicate come nel caso del titolo <1 del secondo esempio. /@ possi*ile associare le stesse regole a pi? selettori come indicato nel terzo esempio ed applicare regole di1erse a seconda della disposizione degli elementi nella pagina;

argomento c<e potrete appro$ondire nella pagina I selettori. Pn caso particolare di regola = ri$erita a tutte 8uelle propriet"; 8uali ad esempio margin; padding; *order; c<e potre**ero a1ere 1alori di1ersi nei 8uattro lati. /@ possi*ile 8uindi associare 1alori 1aria*ili ai *ordi destro; sinistro; superiore ed in$eriore con 8uesta sintassi9
p$ mar%in&top! '# mar%in&ri%ht! (px# mar%in&bottom! )px# mar%in&left! *px# +

La cosa interessante = c<e in tali situazioni = possi*ile applicare una regola comune e QrisparmiareQ codice con la c.d. sintassi abbreviata in tal modo9
p$ mar%in! ' (px )px *px# +

con i 1alori per; rispetti1amente; il lato alto% destro% basso e sinistro #in senso orario partendo dall@alto per capirci 9% % /@ possi*ile associare una regola solo per i lati alto e *asso ed una per destro e sinistro9
p$ mar%in! *px '# +

con il primo valore ri erito ai lati orizzontali ed il secondo per !uelli verticali. Se si indicano in$ine solo tre 1alori;
p$ mar%in! )px ,'px (px# +

essi saranno ri eriti rispettivamente al lato superiore% al lato destro e sinistro ed al lato in eriore6 in pratica = e8ui1alente a scri1ere9 p Nmargin9 3p- 1)p- 2p- 1)p-6O.

'e classi e gli I9


Classi ed ID sono due attri*uti del codice -F+ML; importantissimi per i $ogli di stile. 'ermettono in$atti di associare un@insieme di regole ad un solo selettore #ID% o ad un gruppo #class%. Immaginiamo di 1oler assegnare a tutti i commenti di un *log il colore grigio ed una grandezza di 1)p-. Senza l@esistenza di 8uesti due particolari selettori non riusciremmo a $arlo con i css; do1remmo usare il tag $ont #orroreHHH%. Con i CSS ci *asta assegnare una classe ai commenti; c<iamandola ad esempio 3commenti3 e dic<iare tali propriet" nel css in 8uesto semplice modo9
-F+ML9 RS.T <p class=-commenti->.rimo commento</p> <p class=-commenti->/econdo commento</p>

e cosM 1ia
CSS9 commenti $color!%ray! font&si0e!,'px#+

2otate il puntino #.% prima del nome della classe9 ser1e ad esplicitare c<e le regole inserite saranno ri$erite a tutti gli elementi con 8uella classe esplicita. : importante far notare che la classe cos; definita si applicher< a =ualsiasi elemento della pagina con attributo class>-commenti-. Scri1endo 8uindi 8uesto codice -F+ML
<p class=-commenti->1ommento</p> 2la bla <di3 class=-commenti->2locco di testo</di3>

0nc<e il contenuto del di1 sar" stampato con le stesse propriet" sta*ilite per i commenti. Juesto pu7 esser 1oluto o meno9 in tal caso *astere**e assegnare nel css9
p.commenti $propriet4!3alori+

a$$inc<U le regole della classe commenti 1engano applicate solo ai paragra$i #CpD%. Pna sorta di classe particolare = l@ID; c<e si di$$erenzia di *ase dalla classe per il $atto c<e = applica*ile SVLV ad un elemento = l@ID. In pratica pu? essere applicato "@IABCC&:@%: ad un solo elemento. 'er de$inirlo nell@-F+ML
<p id=-id&numero,->5esto </p>

e nel css
6id&numero, $propriet4!3alore#+

Stesse norme per le classi; con la di$$erenza di do1er anteporre in 8uesto caso il cancelletto #W% al posto del punto.

I selettori css
0**iamo gi" 1isto nell@articolo dedicato alle regole dei CSS cosa siano i selettori9 un oggetto a cui = possi*ile associare 1alori e propriet". /sistono 1ari tipi di selettori9

Selettore "niversale "4niversal 5elector( Selettore di :lementi "Type 5electors( Selettori 9iscendenti "6escendant 5electors( Selettore Diglio ")hild 5electors( EseudoFclasse 6firstFchild "The - irst0child pseudo0class( EseudoFclassi dei lin)s "The lin/ pseudo0class( Selettori Cdiacenti "7d8acent 5electors( Selettori di Cttributi "7ttribute 5electors( Selettori di Classi ")lass 5electors( Selettori di I9 "96 5electors( EseudoFclassi 6firstFline e 6first6letter "The - irst0line e - irst-letter pseudo0 class(

Selettore "niversale 3
'ermette di associare a tutti gli elementi della pagina delle regole. /s9
7 $color!black# mar%in!'# +

7ssocia a !ualsiasi elemento della pagina il colore nero e margine nullo.

Selettore di :lementi
/@ il pi? di$$uso. 'ermette di associare regole ad uno o pi? elementi9
h, h( h) h: h* h; $ $ $ $ $ $ font&style! font&style! font&style! font&style! font&style! font&style! 8eor%ia9 8eor%ia9 8eor%ia9 8eor%ia9 8eor%ia9 8eor%ia9 serif# serif# serif# serif# serif# serif# + + + + + +

C@= la possi*ilit" di associare l@insieme di regole a pi? elementi separandoli con una 1irgola9
h,9 h(9 h)9 h:9 h*9 h; $ font&style! 8eor%ia9 serif# +

scrittura e8ui1alente alla precedente.

Selettori 9iscendenti
Juesta opzione ci permette di associare regole a particolari elementi se e solo se contenuti in altri elementi de$initi9
di3 stron% $ color! red# +

0ssocia il colore rosso solo agli elementi strong contenuti in di1.


<body> <stron%>Questo non sar rosso in quanto non contenuto in un un div</stron%> <di3><l testo successi3o9 <stron%>questo in particolare</stron%> sar4 mostrato in rosso</di3> <di3>=nche <p><stron%>questo testo</stron%></p> sar4 mostrato in rosso# non > importante che i due elementi siano adiacenti o figli.</di3> </body>

Selettore Diglio
'otre**e essere una *uona soluzione a molti pro*lemi; purtroppo non = supportato; cosM come il selettore adiacente; da Internet /-plorer. Secondo le speci$ic<e permette di associare regole ad elementi solo se contenuti da un altro indicato nel selettore e da nessun altro.
di3 > stron% $ color! red# + /s9 <body> <di3><l testo successi3o9 <stron%>questo in particolare</stron%> sar4 mostrato in rosso</di3> <di3>=nche <p><stron%>questo testo</stron%></p> ?@? sar4 mostrato in rosso in Auanto tra di3 e stron% c> un altro elemento9 mentre <stron%>questo testo</stron%> 3icecersa lo sar4.</di3> </body>

EseudoFclasse 6firstFchild
Molto simile al selettore $iglio; solo c<e tale regola 1ale SVLV per il primo $iglio; indipendentemente dalla distanza cui = posto dall@altro. /s9
di3 > stron%!first&child $ color! red# +

EseudoFclassi dei lin)s


/@ pro*a*ilmente una delle $eature pi? interessanti dei Css9 permette di associare ai linAs #ed anc<e agli altri elementi; tranne 9linA e 91isited; in teoria6 in pratica 1isto il non supporto di I/ solo all@elemento 0% regole di1erse a seconda se il linA non G stato visitato ,6lin).4 gi< seguito ,6visited.4 attivo ,6active.4 al passaggio del mouse ,6hover. e se selezionato ,6focus.. /s9
a!link $ color! blue# + a!3isited $ color! purple# + a!acti3e $ color! black# + a!ho3er $ color! red# + a!focus $ color! %reen# +

Selettori Cdiacenti
Fa la stessa limitazione dei selettori $igli9 non = supportato da Internet /-plorer. Secondo le speci$ic<e permette di associare regole ad elemento solo se contenuto su*ito dopo l@altro indicato.
di3 B stron% $ color! red# +

/s9
<di3> <stron%>Questo testo sar mostrato in rosso</stron%> mentre </di3> <di3> il prossimo <stron%>testo</stron%></p> no9 in Auanto non immediatamente 3icino allelemento di3 </di3>

Selettori di Cttributi
Selettore da11ero interessante per i possi*ili s1iluppi 1erso l@XML ma purtroppo di poca utilit" 1isto c<e poc<issimi *ro5ser attualmente non lo supportano. 'ermette di associare regole di1erse all@elemento se dotato di attri*uti o 1alori degli stessi.
F1RtitleT N color9 red6 O F1RtitleEYpippoYT N color9 green6 O

La prima regola associa il colore rosso a tutti gli elementi <1 dotati di title% mentre la seconda regola 1arr" solo per gli elementi <1 il cui titolo = esattamente pippo. 'otre**e essere molto utile per assegnare 1alori di1ersi agli elementi input di un $orm; per 1ariare lo stile del pulsante su*mit rispetto ad un campo testo ad esempio6 purtroppo ad oggi = con1eniente per la stessa operazione assegnare delle classi di1erse ai tag.

Selettori di Classi
'ermette di assegnare regole a 8ualun8ue elemento a cui a**iamo assegnato una classe9
7.nomeclasse $ color! red#+ o9 in forma eAui3alente .nomeclasse $ color! red#+

/@ possi*ile o11iamente assegnare regole solo ad uno o pi? elementi con classe nomeclasse; usando la sintassi9
stron%.nomeclasse $color! purple# +

Selettori di I9
Selettore molto simile al precedente con l@o11ia di$$erenza c<e le regole saranno assegnate solo ad un particolare ID9
6nomeclasse $color! purple# +

EseudoFclassi 6firstFline e 6first6letter


Vpzione molto interessante c<e limita le regole rispetti1amente alla prima linea del testo nel primo caso ed alla prima lettera nel secondo per e$$etti simili a 8uelli tipogra$ici. /s9
p!first&line $ text&transform! uppercase# + p!first&letter $ font&si0e! )''C# color!red# +

tras$orma la prima riga dei paragra$i #p% in maiuscolo e rende la prima lettera degli stessi 3 1olte pi? grande e di colore rosso.

'e propriet< dei caratteri ,font.


In 8uesta lezione 1edremo come cam*iare la $orma estetica dei caratteri tipogra$ici utilizzati nelle 1ostre pagine 5e*. 4ondamentalmente utilizzeremo e modi$ic<eremo 8ueste propriet"9

font-family font-style font-variant font-weight font-size font

font6
font! <si0e> D / <line&hei%ht> E F <family> F D <style> F <3ariant> F <Gei%ht> E es: font: 12px/18px bolder italic arial;

Con $ont = possi*ile indicare in $orma compatta tutte le propriet" dei caratteri con le stesse regole c<e tro1ate successi1amente. fontFfamily6
font&family! <nome carattere> F <font %enerico># Es: font-family: Verdana, Arial, sans-serif;

Ptilizzando $ont.$amil: riusciremo a dare un aspetto ai caratteri utilizzati nella pagina. I *ro5ser mostreranno il primo carattere; da sinistra; tra 8uelli utilizzati dal sistema operati1o in uso. 2ell@esempio precedente stamper" i caratteri in 1erdana; se non installato; arial altrimenti utilizzer" il $ont di de$ault per il gruppo sans.seri$. Ricordate 8uindi di pro1are tutti i caratteri aggiungendone uno la 1olta a sinistra per controllare l@aspetto estetico a1endo cura di indicare una $amiglia generica alla $ine. I caratteri possono esser raggruppati in due grandi categorie9 grazie o seri$; c<e <anno la caratteristica di a1ere dei QriccioliQ di a**ellimento e *astoni o sans.seri$. In realt" = possi*ile indicare anc<e altre 3 $amiglie di $ont9 monospace #a spaziatura $issa%; cursi1e e $antas:; $amiglie c<e mi sento di sconsigliar1i ampiamente; tranne alcune eccezioni

particolari. 5e il ont ha un nome composto da due o pi: termini% ad es. Times ne1 roman% occorre metterlo tra 3.
Es: font-family: " imes ne! "oman", serif;

fontFsize6
font&si0e! <dimensione> F xx&small F x&small F small F medium F lar%e F x&lar%e F xx&lar%e F lar%er F smaller dove dimensione pu; essere una lunghezza% oppure una percentuale.

Larger e smaller son parametri relati1i e ser1ono o11iamente ad aumentare o diminuire la dimensione dei $ont rispetto all@elemento contetitore. Cpprofondimenti6 Dimensionamento e misure fontFstyle6
font&style! normal F italic F obliAue# Es: font-style: italic;

Ser1e a dare lo stile ai caratteri9. Sostituisce il tag <tml CiD. V*li8ue e cursi1e attualmente nella maggior parte dei *ro5ser son e8ui1alenti. fontFvariant6
font&3ariant! normal F small&caps#

+ale soluzione ser1e a dare l@e$$etto 3maiuscoletto3 al testo9 le lettere maiuscole restano tali; 8uelle minuscole son riprodotte in maiuscolo ma in un corpo pi? piccolo. fontFHeight6
font&Gei%ht! normal F bold F bolder F li%hter F ,'' F ('' F )'' F :'' F *'' F ;'' F H'' F I'' F J''# Es: font-!eig#t: $%%;

Con tale propriet" $acciamo stampare i caratteri con peso di1erso. In e$$etti i *ro5ser attuali distinguono tra il peso standard e il *old. 'ertanto la scelta si riduce a scegliere tra normal e *old; tenendo in mente c<e *older e lig<ter; attri*uti relati1i possono aumentare o diminuire il peso del carattere rispetto all@elemento contenitore. Sostituisce il tag <tml C*D. 0tt9 $ont.5eig<t9*old ed il tag CstrongD non sono e8ui1alenti anc<e se possa sem*rare cosM6 $ont.5eig<t agisce sull@aspetto del $ont; CstrongD sul contenuto semantico del testo racc<iuso. 5cript visuale per la gestione dei caratteri.

Eropriet< dei colori


I colori possono esser de$initi nei css attra1erso una parola c<ia1e; attra1erso la codi$ica RB, in due metodi9 con un codice esadecimale oppure indicando la percentuale di Rosso; 1erde #Breen% e ,lue c<e compongono il colore.

La sintassi da utilizzare =9

color9 )ey color9 Irrggbb color9 Irgb " orma ridotta( color9 rgb ,r4 g4 b4. color9 rgb ,rJ4gJ4bJ.
$color! red#+ $color!6KK''''#+ $color!6K''#+ $color! r%b (**9'9'"# + $color! r%b ,''C9'9'"#+ Tutti i codici riportati indicano il colore rosso.

<sempi-

'raticamente i colori 1engono indicati in una scala da ) a 255; in cui ) indica nessuna presenza e 255 presenza completa del primario. +ali numeri possono esser indicati in percentuale; in $orma decimale o esadecimale #44E255%. 0ttenzione ad aggiungere il W 8uando si usa la sintassi esadecimale9 anc<e se I/ mostra il colore se si scri1e Ncolor94))6O ci7 non 1uol dire c<e sia corretto. La $orma ridotta in$ine = un modo di scri1ere un codice <e- alleggerendo il peso 8uando i codici si ripetono9 W4C( = la $orma contratta di W44CC((; ad esempio. Tabella nome colori 0= codici esadecimali% codici rgb. Il modello RB, = un modello additi1o in cui ogni colore = de$inito dalla somma dei 3 colori primari. La completa somma di tutti e 3 da il *ianco; la somma di due primari da i 3 primari sottratti1i9 Biallo; Ciano e Magenta. 7ppro ontimenti- GiAipedia9 RB,

Colore e bac)ground
Il colore = applicato alle due propriet"9 color e *acAground; c<e de$iniscono il colore del testo e lo s$ondo. color6
color! <3alore>#

Do1e il 1alore pu7 esser assegnato utilizzando uno dei metodi sopra illustrati. bac)ground6
back%round! <color> F <url> F <repeat> F <position> F <scroll> Es: bac&gro'nd: ()%% 'rl*+immaginedisfondo+, fixed no-repeat center left fixed;

CcolorD pu7 assumere un 1alore come su indicato; pu7 essere transparent per indicare uno s$ondo trasparente o none per non dare nessuno s$ondo.

CurlD = il percorso dell@immagine di s$ondo; da usare nella $orma url #C1aloreD%; do1e 1alore pu7 esser inserito tra Z; Y; o senza; e pu7 esser un percorso assoluto o relativo alla posizione del css. CrepeatD pu7 esser uno dei seguenti 1alori9 repeat; opzione di de$ault c<e $a ripetere l@immagine in orizzontale e 1erticale; noFrepeat9 nessuna ripetizione6 repeatFK4 repeatF y6 permettono la ripetizione lungo l@asse orizzontale #-% o 1erticale #:%. CpositionD indica la posizione dell@immagine di s$ondo. pu7 assumere 1alori numerici; percentuali o uno dei seguenti9 top4 center4 bottom per il posizionamento 1erticale; left4 center4 right per 8uello orizzontale. CscrollD pu7 assumere i 1alori scroll #opz. di de$ault% e fiKed per indicare se l@immagine de**a seguire o no lo scrolling della pagina. Le stesse propriet" possono esser indicate singolarmente con9

*acAground.color9 CcolorD6 *acAground.image9 CurlD6 *acAground.position9 CpositionD6 *acAground.repeat9 CrepeatD6 *acAground.attac<ment9 CscrollD6

Eropriet< dei testi


I 1antaggi dell@uso dei CSS 1iene resa e1idente dalle propriet" dei testi; propriet" c<e permettono il controllo tipogra$ico accurato; semplice per tutti ma allo stesso tempo potente. Con i css in$atti = possi*ile controllare 8ualun8ue aspetto tipogra$ico permettendo una resa a1anzata dei testi usando le seguenti propriet"9 teKtFalign6
text&ali%n! left F center F ri%ht F Lustify

<sempi$text&ali%n!Lustify#+

'ermette di allineare il testo rispetti1amente a sinistra; centrato; a destra e giusti$icato. teKtFdecoration6


text&decoration! none F underline F o3erline F line&throu%h F blink

<sempia $text&decoration!underline#+ a!3isited $text&decoration!line&throu%h#+ a!ho3er $text&decoration!none#+

per stampare il testo9 senza nessuna decorazione; sottolineato; sopralineato; *arrato e lampeggiante. L@uso di *linA = da e1itare poic<U potre**e creare pro*lemi $isici ad alcuni e perc<U; o*ietti1amente; = $astidioso non poco. teKtFtransform6
text&transform! none F uppercase F loGercase F capitali0e

permette di tras$ormare il testo in9 tutto maiuscolo #uppercase%; tutto minuscolo

#lo5ercase%; ogni prima lettera in maiuscolo #capitalize% o lasciare il testo $ormattato come da -F+ML. lineFheight6
line&hei%ht! normal F <3alore> F <3alore percentuale>

<sempi$line&hei%ht! ('px#+ $line&hei%ht! (''C#+

per impostare l@interlinea del testo. HordFspacing6


Gord&spacin%! normal F <lun%he00a>

permette di aumentare o diminuire lo spazio tra le parole. Di de$ault <a 1alore ). Impostando un 1alore positi1o tale lung<ezza si aggiunge alla distanza solita; impostandone uno negati1o si dimuisce. Cttenzione9
$Gord&spacin%!,'px#+

imposta una distanza tra le parole di 1)p- 'IP@ il 1alore standard; non 1)p- in assoluto. letterFspacing6
letter&spacin%! normal F <lun%he00a>

Come sopra. Di de$ault <a 1alore ) c<e sta ad indicare lo spazio tra le lettere standard. 0nc<e in 8uesto caso la lung<ezza indicata 1a a sottrarsi o ad aggiungersi al 1alore di de$ault. teKtFindent6
text&indent! <lun%he00a> F <percentuale>

'ermette di sta*ilire il rientro del capo1erso di un paragra$o o di un 8ualun8ue *locco di testo. verticalFalign6
3ertical&ali%n! baseline F bottom F middle F sub F super F text&bottom F text&top F top F <3alore> F <percentuale>

Inziamo su*ito a dire cosa 2V2 =9 non corrisponde al 1align delle ta*elle S: non usato nelle tabelle. 2on allinea al centro di un *locco un@immagine; tanto per esser c<iari; ma indica l@allineamento 1erticale di un elemento online rispetto ai contigui. 'er esser c<iari; $a ci7 c<e si $a con gli apici o pedici. I possi*ili 1alori accettati sono9

baseline #allinea l@elemento alla linea *ase dell@elemento contiguo% bottom #l@elemento 1iene allineato con il pi? *asso degli elementi della linea% middle #l@elemento 1iene piazzato al centro dell@elemento contenitore% sub #pedice% super #apice%

teKtFbottom #l@elemento 1iene allineato con la parte *assa della linea di testo% teKtFtop #l@elemento 1iene allineato con la parte alta della linea di testo% top #l@elemento 1iene allineato con il pi? alto degli elementi della linea% valore #il tal caso 1iene allineato secondo il 1alore indicato. accetta anc<e 1alori negati1i% percentuale #allinea l@elemento di un -[ rispetto al 1alore del line.<eig<t dic<iarato.%
$3ertical&ali%n!middle#+

<sempi-

0ppro$ondimento9 0llineamento 1erticale con i CSS. HhiteFspace6


$Ghite&space! normal F pre F noGrap+

Se nel testo -<tml si inseriscono pi? spazi successi1i; o anc<e ritorni a capo; 8uesti saranno ignorati e 1err" mostrato a sc<ermo un solo spazio. Con tale propriet" si modi$ica tale comporamento. Con normal due o pi? spazi o ritorni capo 1engono mostrati in un unico carattere di spazio; noFHrap $a sM c<e il ritorno a capo del testo si ripercuota nella pagina mostrata; mentre pi? spazi successi1i 1engono stampati come un unico spazio; con pre si imposta il ritorno a capo e gli spazi cosM come scritti nel codice.

Eropriet< dei bordi


I *ordi possono esser de$initi da tre propriet"9

*order.5idt<9 CdimensioneD6 *order.color9 CcoloreD6 *order.st:le9 CstileD6

c<e 1engono applicati a tutti i *ordi del *o-. <9imensione> pu7 essere una lung<ezza come de$initita in 8uesto articolo oppure i 1alori

thin #sottile% medium #medio% thic) #spesso% none #nessuno% solid #continuo% double #doppio% dashed #tratteggiato% dotted #punteggiato% inset #incassato% outset #in rilie1o% groove #scanalato Rin *assoT% ridge #scanalato Rin altoT%

<Stile> pu7 essere9


<Colore> in$ine pu7 de$inito come indicato in 8uesto articolo. /siste anc<e una $orma compatta9
border! <dimensione> <colore> <style>.

Ptilizzando tali propriet" assegnamo le caratteristic<e a tutti e 4 i lati9


Es: border: -px red solid;

crea un *ordo uni$orme di 4 pi-el di colore rosso. Se 1olessimo assegnare lo stesso *ordo solo a 8uello in$eriore potremmo usare la notazione9
border-bottom: -px red solid;

/@ possi*ile inolte assegnare propriet" di1erse nel seguente modo9


border-!idt#: 1px 2px .px -px;

c<e son ri$eriti; rispetti1amente al *ordo superiore; destro; in$eriore e sinistro. /s. pratici9
border:1px solid rgb( !!" #$" #%& border-width:'px& border-style:dotted& border-color:red blue green purple& border-bottom:1em double rgb(1!'" 1!'" 1!'%&

5cript che consente di creare in orma visuale i bordi voluti.

'iste
Le liste in <tml sono distinte in liste ordinate # ColD % e liste non ordinate # CulD %. /sempi possono essere9 1. item 1 2. item 2 3. item 3

item 1 item 2 item 3


<ol> <li>item ,</li> <li>item (</li> <li>item )</li> </ol>

c<e corrispondono rispetti1amente al codice -<tm9

e
<ul> <li>item ,</li> <li>item (</li> <li>item )</li> </ul>

Con i css = possi*ile de$inire $ondamentalmente il tipo di rappresentazione della lista con la propriet" listFstyle e le categorie speci$ic<e

listFstyleFposition9 Rinside \ outsideT listFstyleFtype9 Rnone \ disc \ circle \ s8uare \ decimal \ decimal.leading.zero \ lo5er.roman \ upper.roman \ lo5er.alp<a \ upper.alp<a \ lo5er.greeA \ lo5er.latin \ upper.latin \ <e*re5 \ armenian \ georgian \ c]A.ideograp<ic \ <iragana \ AataAana \ <iragana.iro<a \ AataAana.iro<aT listFstyleFimage9 CurlD

List0style0position ci da la possi*ilit" di inserire il marcatore all@interno o all@esterno del *locco CliD. List0style0type = pro*a*ilmente la propriet" pi? s$ruttata nei css; nonc<U la pi? interessante c<e ci permette di sta*ilire se9

non utilizzare nessuno stile #none%6 utilizzare un disco #disc%; opzione di de$ault6 utilizzare un cerc<io #circle%6 utilizzare un 8uadrato #s8uare% non utilizzare nessuno stile #none%6 utilizzare i numeri decimali #decimal%; opzione di de$ault6 utilizzare i numeri decimali partendo da zero #decimal.leading.zero%6 utilizzare i numeri romani in minuscolo #lo5er.roman% o in maiuscolo #upper.roman%6 utilizzare le lettere dell@al$a*eto in minuscolo #lo5er.alp<a%6 o o11iamente in maiuscolo #upper.alp<a%6 utilizzare le lettere latine; grec<e; e*ree; armene; georgiane; cirillic<e; gli ideogrammi giapponesi e cosM 1ia.

per le liste non ordinate e


List0style0image in$ine ci da l@occasione di utilizzare immagini al posto dei classici marcatori; opzione molto carina ma da s$ruttare con attenzione per e1itare pastrocc<i gra$ici inguarda*ili. 4no dei problemi pi: di usi che si incontra !uando si inizia a lavorare con i css sulle liste > la loro apparente di icolt& di mostrarle simili su vari bro1ser a causa del diverso valore di de ault degli stessi riguardo i margini ed il padding delle liste e dei vari elementi della lista. 9n seguito pubblicheremo un esempio pratico% per ora il consiglio > di impostare il padding ed il margin sia ad ?ul= che ?li= "ed ovviamente anche a ?ol= nel caso si usi una lista ordinata( e ride inirli di volta in volta in base alle necessit&. /siste in$ine un tipo di lista usata poc<issimo c<e = la cosiddetta Ylista di definizioneY; de$inita dal tag CdlD con due tag caratteristici9 CdtD titolo della de$inizione CddD de$inizione 1era e propria /s.
<dl> <dt>Mista</dt> <dd>elenco di cose o di persone9 cifre9 dati e simboli</dd> <dt>Nefini0ione</dt> <dd>specifica0ione esatta9 determina0ione</dd> </dl>

a cui corrisponder" Lista elenco di cose o di persone; ci$re; dati e sim*oli De$inizione speci$icazione esatta; determinazione

Come si nota pu7 esser utilmente impiegata per la creazione di glossari; per separare i partecipanti ad una con1ersazione e cosM 1ia. Senza css 8uesti tag si comporteranno come elementi di *locco; come d@altronde succede per le liste ordinate e non.ordinate ed = pertanto possi*ile utilizzare le stesse propriet" c<e utilizzeremo per 8ualsiasi elemento *locco; cosa c<e le rende particolarmente interessanti.

%abelle
I css permettono design ta*leless; cio= senza ta*elle; c<e ritornano $inalmente ad assumere il 1alore per le 8uali son state progettate9 mostrare dati ta*ellari; statistici. 0nc<e per le ta*elle esistono speci$ic<e propriet" CSS9 tableFlayout6
table&layout! auto F fixed

c<e permette alle ta*elle; alle rig<e o alle colonne delle stesse; di adattarsi al contenuto o di restare $isse in *ase; in altezza o larg<ezza a ci7 c<e si = indicato. emptyFcells6
empty&cells! shoG F hide

per scegliere se mostrare o meno le celle 1uote. borderFcollapse6


border&collapse! collapse F separate

indica se $ar collassare i *ordi in un unico *ordo o separarli in pi? li1elli. borderFspacing6
border&spacin%! <lun%he00a> <lun%he00a>

da usare o11iamente con border0collapse-separate per indicare lo spazio tra i *ordi. Si possono speci$icare due 1alori9 1 per la spaziatura destra e sinistra ed il secondo per 8uella in alto e *asso6 se si indica un solo 1alore 1ale per tutti e 4 i *ordi. captionFside6
caption&si0e! top F ri%ht F bottom F left

per indicare in c<e lato mostrare il 1alore di caption della ta*ella.

LoKFmodel
011icinandoci ai css 8uesto sar" uno dei concetti pi? di tutti ci assilleranno. Cosa si intende per *o-.modelK Immaginiamo la pagina come una pagina tipogra$ica per iniziare #esempio9 un 8uotidiano%. In esso ogni elemento presente pu7 esser ra$$igurato come una scatola; ognuna delle 8uali pu7 contenerne altre. Con i css do**iamo ragionare nello stesso modo. Vgni pagina <tml = $ormata da un *o- principale; dentro il 8uale son presenti il *oC*od:D riempito a sua 1olta di altre elementi.

Juesti possono esser di due tipi9 bloc)Flevel #*locc<i% o inline. Jual = la di$$erenzaK Semplice9

un elemento bloc/ level si posiziona sotto il blocco precedente% !uello inline a ianco$ un blocco occupa in larghezza tutto lo spazio dellelemento che lo contiene% linline solo !uello e ettivo del suo contenuto$ un blocco pu; contenere altri blocchi ed elementi inline% linline solo altri inline$ un blocco possiede delle dimensioni con igurabili tramite propriet& !uali height e 1idth% un inline no.

/lementi tipicamente *locA.le1el sono9 ul; ol; $orm; p #anc<e se 8uesto $a eccezione in 8uanto no pu7 contenere altri *locc<i al suo interno% e di1; il *locco generico. /lementi inline sono9 a; em; strong; * e span; elemento inline generico. /lenco appro$ondito degli elementi Rin ingleseT. C@= da notare c<e = possi*ile modi$icare tale propriet" con il comando displa:6 display6 bloc); rende esplicito un elemento come *locA.le1el; display6inline $a il contrario. Pna particolare propriet" dei CSS = float9 cio=; letteralmente QgalleggiamentoQ. +ale propriet" permette di disporre del testo attorno all@elemento. L@esempio successi1o spieg<er" meglio di mille parole il concetto

2otate c<e mentre l@immagine rossa sar" seguita da una linea di testo; con la propriet" Y loat-le t$Y ordiniamo al testo di circondare l@immagine. La propriet" clear in1ece permette di sta*ilire se un *locco de**a esser circondato da testo. 'raticamente permette di ripristinare l@allineamento a seguito dell@uso di $loat. 4loat9 pu7 assumere 1alori # rig<t \ le$t \ none% mentre clear pu7 a1ere 1alori # rig<t \ le$t \ *ot< \ none %. Pn aspetto $ondamentale da capire il prima possi*ile = la con$ormazione di un *locco. 0ppro$itteremo dell@immagine presente sul sito del G3C9

2otiamo c<e ogni *locco = $ormato da 4 sezioni concatenate9


Contenuto 'adding ,ordo Margin

Il padding = ci7 c<e c@= tra il *ordo del *locco ed il contenuto. Il margine = ci7 c<e c@= tra i 1ari *locc<i. Impostando la larg<ezza #5id<t% attra1erso i css si imposta la dimensione 0L SVLV contenuto. Juindi un *locco con 5idt<9 4))p-; padding9 5)p-6 *order9 1)p-6 margin9 3)p- occuper" uno spazio totale di 4()p-; non 4)) come si potre**e esser portati a pensare le prime 1olte. V11iamente lo stesso discorso 1ale per l@altezza. +utto $acileK 2o. Internet e-plorer $ino alla 1ersione 5 #e se non impostato il doct:pe anc<e nella 1ersione % considera1a /RRV2/0M/2+/ 5idt< come la larg<ezza di contenutoLpaddingL*ordo. Juesto <a portato molti errori di interpretazione ed <a costretto molti a tro1are una soluzione in1entando <acA per risol1ere il *aco. Pno dei pi? $amosi $u la $amosa Regola di %ante). Come $unzionaK Si s$rutta uno dei tanti altri *ac<i di e-plorer per $argli $are ci7 c<e 1ogliamo. >ediamola in pratica con l@esempio precedente9
di3.blocco $ Gidth!:;'px# 6dimensione per <O* paddin%!*'px# border!,'px# mar%in!)'px 3oice&family! -P-+P--# 3oice&family! inherit# Gidth!:''px# + body>di3.blocco $ Gidth! :''px# +

I/ 5 interpreter" la dimensione di 4 )p- ed ignorer" tutto ci7 c<e c3= dopo voice0 amily-

3@3.@33$ a di$$erenza degli altri *ro5ser c<e leggeranno anc<e il resto e tro1ando 5idt<94))p- riassegneranno la larg<ezza corretta. 'er completezza di in$ormazione; ci son anc<e *ro5ser; 8uali alcune 1ersioni di Vpera; c<e nonostante interpritino correttamente il *o-.model non riescono a leggere oltre il comando 1oice.$amil:9 Y^YO^YY6 9 a ci7 ser1e la regola successi1a *od:Ddi1.*locco Ci son altre tecnic<e da utilizzare9 8uella c<e io pre$erisco = la cosiddetta Simpli$ied ,oModel FacA #S,MF%9
di3.blocco $ Gidth! :''px# PGidth! :;'px# GPidth! :''px# +

Jual = il principioK La prima dic<iarazione; senza escape #5idt<94))p-6% 1err" letta dai *ro5ser 8uali Vpera 5; ad esempio; c<e non leggono ci7 c<e segue lo slas<#^%6 ^5idt<9 4 )p-6 sar" letto da tutti; tranne Vpera5 appunto e poc<i altri e ridi$iner" la larg<ezza del *o-; 5^idt<94))p- sar" seguita da tutti gli altri *ro5ser tranne; appunto; I/ 5. 5empli icando- il valore corretto sar& inserito nella prima e terza propriet&$ !uello per 9< A nella seconda. +ale tecnica 1ale per 8ualsiasi propriet"; ma; e c@= un ma; secondo le regole 53c uno slas< non pu7 precedere le lettere9 a; *; c; d; e; $. Juindi potr" esser s$ruttata per l@altra propriet" c<e ci interessa per la de$inizione del la:out; <eig<t e non; ad esempio; per $ont.$amil:; cosa c<e ci dispiacer" poco in e$$etti. 9%

9imensionamento e misure
Le misure e le dimensioni nei css; utilizzate in molti am*iti tra i 8uali e non solo9 *ordi; altezza e larg<ezza dei *locc<i; grandezza dei caratteri; margini; padding; possono essere espresse in $orma relati1a oppure assoluta nella $orma9 numero seguito da due lettere c<e indicano l@unit" di misura. 0ttenzione agli errori $re8uenti c<e possono creare pro*lemi di 1isualizzazione; in particolare9 tra i numeri e la misura non possono esserci spazi. Se la misura = zero non de1e esser seguito da unit" di misure.
Os.! corrette! ,(px# ,.:*em# '# errate! ,( px9 ,. :*em9 'px#

9imensioni assolute6

cm6 centimetri6 mm6 millimetri6 in6 inc<es; pollici; do1e un pollice E 25;4 mm pt6 punti; cio= la !2a parte di un inc<; circa ).35mm6 in pratica 3pt _ 1mm pc6 picas; un sesto di inc<; circa 4;2 mm

+ali dimensioni son ottime se usate nella stampa e nei dispositi1i a dimensione $issa; son sconsiglia*ili 1ice1ersa a 1ideo dato c<e essi son per loro natura di1ersi uno dall@altro. Dimensioni assolute comportano a sc<ermo 1isioni di1erse delle proprie pagine da computer a computer. +enete sempre in mente c<e il 5e* non = la tipogra$ia classica e c<e = praticamente impossi*ile creare siti c<e siano per$ettamente simili su 8ualsiasi computer.
9imensioni relative6

em6 dimensione di una lettera m del carattere utilizzato pK6 pi-el

J6 percentuale

La dimensione dei pi-el dipende dalla risoluzione dei dispositi1i utilizzati. Pn pi-el = la pi? piccola particella QunicaQ dello stesso. 0 1ideo son i 1ari elementini luminosi c<e messi assieme $ormano un@immagine. Pn em = la dimensione di una lettera m del set di caratteri utilizzato. Se impostiamo una misura in em essa = ri$erita alla dimensione dei $ont del li1ello contenitore. 'raticamente9
body $font&si0e!('px#+ di36di3, $font&si0e!,.*em#+ di36di3( $font&si0e!'.Iem#+ <body> <di3 id=-di3,->2la bla<di3 id=-di3(->2la bla</di3></di3> </body>

Il *od: a1r" dimensioni !7pK. Di11 a1r" dimensione di una volta e mezza 8uella di *od:; cio= (7pK6 Di12 7.Mvolte 8uella del suo contenitore 8uindi 3)Q).&E!*pK. Le dimensioni percentuali seguono lo stesso ragionamento su indicato. Le misure relati1e son 8uelle pi? utilizzate nelle pagine. Il mio consiglio = 8uello di impostare una dimensione per il *od: in pi-el ed usare em per tutte le altre sezioni. Le misure in pi-el do1re**ero esser usate solo per le dimensioni dei *ordi dei *locc<i.

Css per la stampa


La stampa di pagine 5e* presenta spesso delle di$$icolt". So1ente il 5e* master si preoccupa dell@impaginazione a sc<ermo; magari utilizzando la:out li8uidi dimenticando c<e la stampa <a caratteristic<e di1erse. Come o11iare al pro*lemaK +empo $a era d@uso creare pagine apposite per la stampa; generandole lato ser1er e togliendo gli elementi di na1igazione #menu; <eader e $ooter; tipicamente%. Lo stesso; e molto di pi? pu7 esser $atto 1ia CSS9 1ediamo passo passo come $are9 @ascondere blocchi ed elementi alla stampa. Studiamo la pagina e segnamoci 8uali sono i *locc<i e gli elementi gra$ici da nascondere alla stampante. Creiamo un nuo1o $ile css ed impostiamo ad essi la propriet" display6none/ Impostare le dimensioni in misure assolute Diamo larg<ezza automatica al *locco da stampare; impostiamo la grandezza dei caratteri possi*ilmente in punti; 12 potre**e essere una *uona soluzione; ricordiamoci c<e molti stampano in *ianco e nero; 8uindi se necessario cam*iamo i colori ai *locc<i. Erestare attenzione agli elementi flottanti ed agli sfondi Le stampe son spesso impostate automaticamente; e giustamente; sul non stampare le immagini di s$ondo. Se usiamo elementi c<e 1orremmo mostrare con immagini in sotto$ondo o se usiamo tecnic<e di image replacement; teniamolo presente e riscri1iamo le regole nel css di stampa. 0ttenzione inoltre agli elementi $lottanti o con posizione assoluta c<e potre**ero dar pro*lemi di posizionamento. So1rascri1iamo tali regole con altre c<e permettano la loro collocazione nel normale $lusso di in$ormazioni Cggiungere l url dei lin) ,opz.. I collegamenti a stampa o11iamente non possono esser seguiti per7 potre**e esser necessario indicare do1e puntano tali collegamenti. I css permettono di mostrare il

contenuto dell@attri*uto <re$ usando tale codice9


a!link!after $ content! - D- attr href" -E-# +

c<e <a per7 due controindicazioni9 alcuni *ro5ser la ignorano; e se 1i 1iene in mente I/ non s*agliate di certo; e soprattutto se l@<re$ = un collegamento relati1o sar" stampato in 8uesta $orma e non in $orma assoluta. Detto pi? semplicemente se linAate pagine con la $orma YIinde-.<tmlY tro1erete stampato tale 1alore. Come o11iareK ,e<; non usare collegamenti relati1i sare**e la soluzione ideale oppure usando un tricA
aDhref=Q=-/-E!after $ content! - Dhttp!//GGG.sito.com- attr href" -E -# +

c<e sta per9 se l@<re$ inizia per I stampa il <ttp9II555.sito.com prima del 1alore dell@attri*uto. Collegare il css per la stampa alle pagine Pna 1olta scritte tutte le regole = necessario associare il $ile css creato per la stampa alle pagine -F+ML9
<link rel=-stylesheet- type=-text/css- media=-print- href=-print.css- />

attenzione alle altre regole scritte per gli altri media9 potreste a1ere delle sorprese9 se associamo un css senza speci$icare il media o impostandolo a tutti 8ueste regole saranno applicate anche alla stampa. 'er non incorrere in rappresentazioni non 1olute una *uona soluzione = associare le regole per il 1ideo utilizzando l@@import. Cio=9
<style type=-text/css- media=-all->@import -%enerale.css-#</style> <link rel=-stylesheet- type=-text/css- media=-print- href=-print.css- />

,ene. Vra do1reste a1ere delle pagine per$ette per la stampa. Ma i css ci permettono di pi?9 ci danno la possi*ilit" di controllare il $lusso di stampa e; 1olendo; $orzare la stampa di un *locco all@inizio della pagina successi1a. 0 tale scopo ci 1engono incontro le regole9
pa%e&break&after! auto F alGays F a3oid F left F ri%ht F inherit# pa%e&break&before! auto F alGays F a3oid F left F ri%ht F inherit# pa%e&break&inside! alGays F auto F inherit#

c<e $orzano o impediscono l@interruzione della stampa nella pagin del *locco considerato; rispetti1ament dopo #a$ter% prima #*e$ore% o dentro #inside%. I 1alori indicano9

auto9 non $orza nU impedisce l@interruzione al5a:s9 $orza sempre l@interruzione di pagina a1oid9 e1ita sempre l@interruzione le$t9 $orza una #o due% interruzione di pagina in modo c<e la pagina successi1a sia stampata come una pagina sinistra rig<t9 $orza una #o due% interruzione di pagina in modo c<e la pagina successi1a sia stampata come una pagina destra in<erit9 eredita la stessa propriet" dal *locco genitore.

Consigli di scrittura dei file .css


VA. 4in 8ui nulla di c<e. Come a1rete notato; i css non <anno nulla di trascendentale ed il loro uso = su$$icentemente semplice. 0 8uesto punto potre**ero sorgerci domande 8uali9

C<e programma usare per scri1ere il codice dei CSSK Come scri1erli e possi*ilimente ottimizzarliK Come 1eri$icare la corretta 1isualizzazione su *ro5ser di1ersiK

7lla prima domanda non posso che dare una risposta molto soggettiva. Io personalmente utilizzo notepadLL scri1endo tutto il codice a mano; cosa c<e tra l@altro $accio anc<e con l@<tml ed il p<p; non perc<U sia un tale*ano del codice ma per una 8uestione di velocit< di scrittura e di controllo accurato dello stesso. V11iamente s$rutto alcune caratteristic<e del programma imprenscindi*ili9 colorazione del codice; $unzioni di undo e redo a pi? li1elli; sostituzione su tutto il documento anc<e attra1erso l@uso di espressioni regolari per dirne alcune. )osa consiglio' Bualun!ue text0editor- pico% nano% vim% dream1eaver% notepadCC% !uanta% phpedit e cosM 1ia. 'ro1ateli; cercate 8uello c<e 1i sem*ra pi? comodo; ergonomico; usa*ile e poi continuate ad usare solo 8uello. 'er la 1isualizzazione *asta un semplice 45 sul *ro5ser. 2on = indispensa*ile c<e il 1ostro editore a**ia pre1ie5 integrate. /sistono in$ine programmi c<e 1i permettono di creare i css in $orma 1isuale senza conoscere tutte le propriet"9 tra i tanti a me piace SimpleCSS. 'u7 esser comodo per c<i = alle prime armi per imparare a memoria i 1alori e le propriet"; a condizione c<e una 1olta superata la prima $ase; si passi ad un 1ero editore di testi. Il tutto o11iamente IMFV; o11ero; per me; secondo me. 0nc<e il secondo punto s$iora le pre$erenze personali. 'osso in generale dare alcuni consigli su come opero io. 2on = detto c<e sia il metodo migliore; anzi. Secondo alcune scuole di pensiero i css do1re**ero occupare il minor spazio possi*ile; cercando 8uindi di accumulare le regole per 8uanto possi*ile. Io; soprattutto per siti con CSS a**astanza impegnati1i tento di solito a di1iderli in pi? parti; scri1endone uno generale; uno solo per la stampa; se ci sono sezioni su$$icentemente distanti come stile gra$ico; uno per sezione ed a 1olte uno per alcuni bro1ser #224 e I/5 nello speci$ico% 8uando ric<iesto dal committente o dal target del sito. Cerco poi di @B@ scrivere le regole selettore per selettore4 una cosa tipo <1 N margin91em 1em6 $ont.size91.!em6 *order.*ottom91p- solid gra:6 O ma di suddi1erli nel css; o se molto corposi in pi? css; a seconda di ci7 c<e dic<iarano9 colori4 bordi4 boKF model4 testo. 'u7 sem*rare un la1oro inutile ma 1i assicuro c<e G molto comodo =uando poi torniamo a manutere il sito avere tutte le propriet< sotto mano e sott occhio e non andare di Ctrl.4 a cercarlo nel testo di un documento di 5)) rig<e. In$ine; e 1e ne accorgerete prestoS; a11ertirete la necessit" di controllare la resa di 8uanto scritto su molti *ro5ser di1ersi; 8uali; ma non solo9 I/5.)1 e successi1i; Vpera ! e successi1i #se non dalla 5%; 4ire$o-; 2etscape; Sa$ari; `on8ueror; Baleon e c<i ne <a ne metta. Molto dipende dal Sistema Vperati1o c<e utlizzate9 l@ideale sare**e di a1ere 1arie postazioni con sistemi operati1i di1ersi e pi? computer. VA oA; spesso = $antascienza. Come $are alloraK Su piatta$orma Gindo5s non do1reste a1er pro*lemi con 4ire$o-; 8ualsiasi 1ersione; Vpera e Sa$ari c<e possono coesistere anc<e in pi? 1ersioni e pi? piatta$orme. Nualche problema in piO ce lo da Internet :Kplorer che sovrascrive la precedente installazione. 4ortunatamente esistono <acA per a1ere pi? 1ersioni di I/ sullo stesso 'C. 0ppro$ondimenti. 'er Mac; Intel in particolare; esiste 'arallels c<e permette di a1ere due Gindo5s e Mac

sulla stessa sessione di la1oro. Con lo stesso principio la1ora GmGare9 permette di a1ere pi? macc<ine 1irtuali sullo stesso dispositi1o; con la possi*ilit" 8uindi; di a1ere 5indo5s e linu- sulla stessa macc<ina. 'er i Linari puri e duri esiste in$ine la possi*ilit" di utilizzare I/s4Linu-. In$ine esistono ser1izi 5e* c<e ci danno l@anteprima su 1ari *ro5ser; semplicemente; indicandogli la pagina da controllare ed i *ro5ser c<e ci interessano6 addirittura alcuni ci permettono di scegliere se mostrare il rendering con $las<; ]a1ascript e ]a1a disa*ilitati o meno. Vttimo in tal senso = ,ro5sers<ots. Segnalo in$ine e1olt un sito c<e raccoglie moltissime 1ersioni di *ro5ser; utile ad esempio; a c<i non <a sottomano 224 e non sa do1e andarlo a cercare.

Appendice A: Esempi

Come Creare un sito a ! colonne tableless


In 8uesto articolo 1edremo un esempio pratico e di di$$icolt" medio *assa di creazione di un la:out ta*leless a due colonne; con <eader in alto e $ooter in *asso. C<iaramente potrete riutilizzare il codice mostrato per 8ualsiasi 1ostro progetto. Iniziamo a de$inire la struttura della pagina -<tml; inserendo il giusto doct:pe per -<tml 1.1; de$inendo la lingua italiana ed il c<arset come P+4.& ed aggiungendo il linA al css; inserito nella stessa director: del $ile e 4 *locc<i per <eader; $ooter e le due colonne; messi in un *locco contenitore9
<!N@15R.O html .S2M<1 -&//W)1//N5N TH5UM ,.,//O?-http!//GGG.G).or%/5V/xhtml,,/N5N/xhtml,,.dtd-> <html xmlns=-http!//GGG.G).or%/,JJJ/xhtml- xml!lan%=-it-> <head> <title>.ro3a layout ( colonne</title> <meta http&eAui3=-1ontent&5ype- content=-text/html# charset=utf&I- /> <link type=-text/css- rel=-stylesheet- href=-style.css- title=-/tyle- media=-all- /> </head> <body> <di3 id=-contenitore-> <di3 id=-header->Wnbsp#</di3> <di3 id=-colsx->Wnbsp#</di3> <di3 id=-coldx->Wnbsp#</di3> <di3 id=-footer->Wnbsp#</di3> </di3> </body> </html>

Modi$ic<iamo il css dando i colori di s$ondo ai 1ari *locc<i9


*ianco al *od: #non = ridondante; 1isto c<e molti; me compreso non assegnano colori al css prede$inito dal *ro5ser% W402C3/ all@<eader W4() alla colonna sinistra W) ) a 8uella di destra W((( al $ooter al contenitore non diamo alcun 1alore lasciando 8uindi 1isi*ile il colore dello s$ondo del *od:.
body $back%round!Ghite#+ di36contenitore $+ di36header $back%round!6:=(1)O#+ di36colsx $back%round!6KJ'#+ di36coldx $back%round!6';'#+ di36footer $back%round!6JJJ#+

Il css a 8uesto punto sar" 8uesto9

/d il risultato sar" 8uesto #clicca sulle immagini per vederle a grandezza maggiore%9

De$iniamo ora le larg<ezze dei 1ari *locc<i. Ipotizzo c<e tutto il sito a1r" larg<ezza totale di ())p- #o11iamente potremmo anc<e de$inire la dimensione in percentuale o 1alori di1ersi%9 Il css sar"9
body $back%round!Ghite#+ di36contenitore $Gidth!J''px#+ di36header $back%round!6:=(1)O#+ di36colsx $back%round!6KJ'# Gidth!;*'px# float!left#+ di36coldx $back%round!6';'# Gidth!(*'px# float!left#+ di36footer $back%round!6JJJ# clear!left#+

In rosso le parti aggiunte. 2oterete c<e utilizziamo le propriet" float e clear per $ar sM c<e le colonne si a$$ianc<ino una all@altra ed il $ooter si riposizioni correttamente al di sotto di entram*e. Il risultato $inora9

Salta su*ito all@occ<io c<e sotto la colonna sinistra a**iamo dello spazio *ianco9 ci7 = do1uto al $atto c<e non a**iamo de$inito un@altezza e 8uindi il *locco; una 1olta riempito dal testo $ittizio; $inir" lasciando intra1edere ci7 c<e 1i = sotto. Lo stesso pro*lema; in1erso a1remo nel caso in cui l@altezza della colonna destra sia minore dell@altra. Soluzioni possi*ili possono essere9 1. de$inire un@altezza comune ed aggiungere le scroll*ar simulando i $rame 2. de$inire un@altezza minima ai *locc<i con min.<eig<t; utilizzando l@<acA per i *ro5ser di casa Microso$t; tenendo in mente c<e comun8ue a1remmo pro*lemi con altri *ro5ser come sa$ari 3. dare un colore di s$ondo al contenitore uguale al *locco di minore altezza; a1endo *en presente c<e se l@altro <a altezza maggiore a1remo dei pro*lemi.

Seguiremo la strada numero 3 ipotizzando c<e il *locco di destra a**ia altezza maggiore e

comun8ue non preoccupandoci troppo del caso opposto. 0ltra cosa c<e notiamo = c<e il tutto = allineato a sinistra. >olendo allinearlo a destra do1remmo usare la proprit" margin6 7 auto/ al *locco contenitore; propriet" c<e dice allo stesso di posizionarsi a distanza ) da sopra e sotto ed automaticamente da destra e sinistra dal contenitore in modo centrato. I/ non segue 8uesta propriet" correttamente e per supplire al pro*lema inseriamo nel *od:9 teKtFalign6center; c<e posiziona tutto ci7 c<e c@= nel *od: al centro. Successi1amente reimpostiamo teKtFalign6left/ in contenitore per dare allineamento a sinistra agli oggetti presenti. Css con le modi$ic<e al momento9
body $back%round!Ghite# text&ali%n!center#+ di36contenitore $back%round!6KJ'# Gidth!J''px# mar%in!' auto# text&ali%n!left# + di36header $back%round!6:=(1)O#+ di36colsx $back%round!6KJ'# Gidth!;*'px# float!left#+ di36coldx $back%round!6';'# Gidth!(*'px# float!left#+ di36footer $back%round!6JJJ# clear!left#+

0nteprima9

Ci siamo 8uasi9 impostiamo ora un $amiglia ai caratteri; inseriamo il titolo della pagina ed il sottotitolo; il padding ai *locc<i e ci $ermiamo 8ui.
body $back%round!Ghite# text&ali%n!center# font&family!Hel3etica9 arial9 sans&serif#+ di36contenitore $back%round!6KJ'# Gidth!J''px# mar%in!' auto# text&ali%n!left# + di36header $back%round!6:=(1)O# hei%ht!*em#+ h, $color!Ghite# text&ali%n!ri%ht# paddin%!,em ,em ' '# font&family!8eor%ia9 serif#+ di36colsx $Gidth!;)'px# PGidth!;*'px# GPidth!;)'px# float!left# paddin%!,'px#+ di36coldx $back%round!6';'# Gidth!((Ipx# PGidth! (*'px# GPidth!((Ipx# float!left# paddin%!,'px# border&left!(px solid Ghite#+ di36footer $back%round!6JJJ# clear!left# border&top!)px solid 6:=(1)O# text&ali%n!center# +

In rosso 1ediamo le ultime modi$ic<e6 a**iamo


impostato la $amiglia di caratteri come <el1etica; in mancanza del 8uale 1edremo l@arial o il generico *astoni impostato dal *ro5ser6 assegnato un@altezza di 5 1olte l@altezza media di una riga all@<eader6 creato una regola per l@<1 del titolo del sito9 colore *ianco; allineato a destra; con padding di 1em da sopra e da destra e con $ont Beorgia o il *astoni di de$ault6 dato un padding alle due colonne di 1)p- per lato ed assegnato un *ordo sinistro *ianco di due pi-el alla colonna destra6 assegnato un *ordo di 3 p- in alto al $ooter dello stesso colore dell@<eader ed impostato un@allineamento al centro. In azzurro sono presenti le modi$ic<e $atte per e1itare un errore di enterpretazione del *o- model di I/ 5 ed in modo limitato del #si 1eri$ica l@errore se non si = speci$icato un doct:pe%. Jual = la logicaK Il 5idt<; da speci$ic<e del G3C; do1re**e indicare la larg<ezza del *locco S/2a0 padding; *ordo e margine; come indicato nell@immagine accanto.

Le 1ecc<ie 1ersioni di I/ recepiscono come 5idt< il 5idt< e$$etti1o pi? il *ordo ed il padding. 2oi siamo partiti da una larg<ezza di 5)p- per la prima colonna9 aggiungendo il padding di 1)p- a destra ed a sinistra a**iamo dato come larg<ezza 3)p- # 5).1).1)%6 la seconda colonna era inizialmente di 25)p-6 tolti 2)p- di padding e 2 di *ordo resta una larg<ezza di 22&p-. 'er le 1ecc<ie 1ersioni di I/ la larg<ezza do1re**e esser immutata a 25). Dato c<e I/5 non riesce a leggere 8uesta istruzione 5^idt< a di$$erenza di altri *ro5ser; possiamo impostare la larg<ezza prima e ride$inirla successi1amente con un@istruzione c<e non sar" ripresa dal *ro5ser Microso$t. Juesto sar" il risultato de$initi1o9

/sempio e codici.

:sempio di creazione di un form


Con 8uesto tutorial illustreremo come creare un $orm in <tmlLcss da utilizzare successi1amente come *ase per un modulo contatti senza l@uso di ta*elle. Il primo passo sar" 8uello di costruire il codice <tml9
<!N@15R.O html .S2M<1 X&//W)1//N5N TH5UM ,.' 5ransitional//O?Y Xhttp!//GGG.G).or%/5V/xhtml,/N5N/xhtml,&transitional.dtdY> <html xmlns=Yhttp!//GGG.G).or%/,JJJ/xhtmlY> <head profile=Yhttp!//%mp%.or%/xfn/,,> <meta http&eAui3=Y1ontent&5ypeY content=Ytext/html# charset=S5K&I /> <title>Korm di esempio</title> </head> <body> <form method=YpostY action=Y- onsubmit=Yalert Nisabilitato"# return false#Y id=Yform,> <fieldset> <le%end>=na%rafica!</le%end> <label for=YnomeY>?ome! </label> <input type=YtextY id=YnomeY name=YnomeY tabindex=Y, 3alue=Y- title=Y?omeY /><br /> <label for=Yco%nomeY>1o%nome! </label> <input type=YtextY id=Yco%nomeY name=Yco%nomeY tabindex=Y( title=Y1o%nomeY /><br /> <label for=YemailY class=YreAuiredY >Omail! </label> <input type=YtextY id=YemailY name=YemailY tabindex=Y) title=YOmailY /> </fieldset> <fieldset>

<le%end>=ltri campi!</le%end> <label for=YchbZ, tabindex=Y: >/ele0iona!</label> <input type=YcheckboxY id=YchbZ, name=YchbZ, /><br /> <label for=Yindiri00oY><ndiri00o! </label> <textarea name=YcommentiY roGs=Y) cols=Y,; id=Yindiri00oY tabindex=Y* title=Yindiri00oY></textarea><br /> <button type=YsubmitY id=YsubmitY tabindex=YuY><n3ia</button> </fieldset> <p class=YinfoY><em>7 1ampo obbli%atorio.</em></p> </form> </body> </html>

2oterete come a**ia utilizzato button typeDEsubmitE al posto di input typeDEsubmitE per la maggior $lessi*ilit" data da 8uest@ultimo; la presenza dei tabindeK per guidare il 1isitatore nel percorso attra1erso il tasto di ta*ulazione e i tag fieldset; per raggruppare i campi simili; legend per bmarcarlic e label per de$inire il contenuto dei campi.

Juesto il risultato $inora ottenuto; c<e potrete 1edere anc<e in 8uesta pagina. 0pplic<iamo lo stile; iniziando a de$inire le regole *ase per il *od:; a cui daremo s$ondo *ianco; $ont 1erdana e grandezza *ase di 12pi-el e per il $orm c<e ci supponiamo de**a a1ere una larg<ezza di 4)) pi-el.
body $back%round!6KKK# font&family![erdana9 sans&serif# font&si0e!,(px#+ form $Gidth!:''px#+

De$iniamo successi1amente lo stile di $ieldset e di legend.


fieldset $back%round!6K=O==2 url Yb%Zform,.Lp%Y" repeat&y ri%ht# mar%in!(em '# paddin%!,.*em ' '.*em '# border&Gidth!'.(em ' '.(em ,em# border&style!solid# border& color!6K1'# position!relati3e#+ le%end $position!absolute# top! &,,px# mar%in&left!,'px# font&si0e!'.Jem# font&Gei%ht!bold# text&ali%n!center# back%round!6OKOIK1# paddin%!'.,em ,em# color!6;;;# border& Gidth!'.(em '.*em# border&style!solid# border&color!6===#+

4ieldset a1r" un colore di s$ondo arancio pastello e dei *ordi arancio sottili in alto e spessi ai lati; con 8uello sinistro de$inito da un@immagine c<e a1remo de$inito come s$ondo; allineata a destra e ripetuta in 1erticale. Bli assegniamo una posizione esplicita relati1a per a1ere un punto di ri$erimento con il tag legend c<e si posizioner" da esso e terminiamo aggiungendo opportuni margini e padding. Legend a1r" o11iamente positione assoluta a partire da $ieldset; gli daremo un margine sinistro per QstaccarloQ dai *ordi arancio; ed un top negati1o per QallinearloQ al margine superiore. Il resto credo sia a**astanza c<iaro a 8uesto punto9 allineamento centrale; grassettato; margini e padding per staccare il testo

dal *o- e *ordi grigi. De$iniamo le etic<ette9


label $Gidth!,:'px# display! &mo0&inline&box# display! inline&block# paddin%!(px ;px#+ label!first&letter $font&si0e!,.)em#+

c<e a**iamo supposto larg<e 14)p-. 2otate la propriet" displa:9 inline.*locA c<e $ire$ointerpreta con .moz.inline.*o-. Ser1e a de$inire un *locco come inline9 una 1ia di mezzo tra un *locco 1ero e proprio senza c<e il campo successi1o torni a capo. 'rossimo passo sar" 8uello di de$inire i 1ari campi9
input $back%round!none# border&Gidth!' ' ,px '# border&style!dotted# border&color!6===#+ textarea $border!,px solid 6===#+ 6chbZ, $back%round!6K1'# mar%in&left!&:px# border!'#+ 6submit $mar%in!,em ' ' ,*(px# text&ali%n!center#+

con propriet" a**astanza intuiti1e da capire. 2otate c<e <o pre$erito assegnare 1alori attra1erso id speci$ici. In teoria i *ro5ser do1re**ero tutti supportare il comando inputPtype>Qchec)boKQR ma si sa come la teoria e la pratica siano due mondi a**astanzi distanti. Il risultato $inale sar"9
body $back%round!6KKK# font&family![erdana9 sans&serif# font&si0e!,(px#+ form $Gidth!:''px#+ fieldset $back%round!6K=O==2 url Yb%Zform,.Lp%Y" repeat&y ri%ht# mar%in!(em '# paddin%!,.*em ' '.*em '# border&Gidth!'.(em ' '.(em ,em# border&style!solid# border& color!6K1'# position!relati3e#+ le%end $position!absolute# top! &,'px# mar%in&left!,'px# font&si0e!'.Jem# font&Gei%ht!bold# text&ali%n!center# back%round!6OKOIK1# paddin%!'.,em ,em# color!6;;;# border& Gidth!'.(em '.*em# border&style!solid# border&color!6===#+ label $Gidth!,:'px# display! &mo0&inline&box# display! inline&block# paddin%!(px ;px#+ label!first&letter $font&si0e!,.)em#+ input $back%round!none# border&Gidth!' ' ,px '# border&style!dotted# border&color!6===#+ textarea $border!,px solid 6===#+ 6chbZ, $back%round!6K1'# mar%in&left!&:px# border!'#+ 6submit $mar%in!,em ' ' ,*(px# text&ali%n!center#+ label.reAuired $font&Gei%ht!bold#+ p.info $font&si0e!'.Iem# font&Gei%ht!bold#+

Jui tro1erete la pagina completa. 0ppro$ondimenti9


Balleria di $orm sullo stile di css.zen.garden6 /sempio appron$ondito di un $orm ta*le.less.

Cllineamento verticale con i css


Pno dei pro*lemi a cui 1anno incontri i neo$iti c<e pro1ano i css = l@allineamento 1erticale di un *locco; un@immagine; rispetto ad un *locco contenitore. Pn 8ualcosa tipo 1alignEYmiddleY delle ta*elle. Molti iniziano pro1ando la propriet" 1ertical.align9middle. V11iamente non ottengono il risultato sperato. 'erc<UK 'oic<U; come spiegato nel capitolo riguardante le propriet" dei testi; tale propriet" ser1e ad allineare pi? elementi inline successi1i. Jui tro1erete degli esempi c<e 1algono pi? di mille parole #o almeno spero 9' %. Come $are allora per poter centrare un *locco di testo; un@immagine dentro un *loccoK 0**iamo in e$$etti 1arie possi*ilit". Consideriamo il primo caso6 un menu con un immagine di sfondo ed il testo su un unica riga. Jui 1edete l@esempio c<e riportiamo per semplicit"9

ul $list&style&type!none#+ ul li $float!left# back%round!transparent url \b%&3ert&ali%n.%if\" top center# Gidth!,''px# hei%ht!)'px# text&ali%n!center# + ul li a $font&si0e!,(px# color!6,,,# text&decoration!none# + ul li a!ho3er $font&si0e!,(px# color!6KKK# font&Gei%ht!bold#+

ul $list&style&type!none#+ ul li $float!left# line-height:30px; back%round!transparent url \b%&3ert&ali%n.%if\" top center# Gidth!,''px# hei%ht!)'px# text&ali%n!center# + ul li a $font&si0e!,(px# color!6,,,# text&decoration!none# + ul li a!ho3er $font&si0e!,(px# color!6KKK# font&Gei%ht!bold#+

noterete nell@ultimo caso l@inserimento della propriet" Yline.<eig<t93)p-6Y; cio= l@altezza dell@immagine di s$ondo. In tal modo si $orza l@interlinea alla grandezza dello s$ondo; centrando automaticamente il testo all@etic<etta. Cttenzione6 tale tecnica <a una controindicazione. Se il testo occupa pi? linee; lo stesso scender" in *asso; con e$$etti assolutamente non 1oluti. 2oterete tale pro*lema ingrandendo il testo dell@esempio #con $ire$o- d control RLT %. Se 1olessimo in1ece centrare verticalmente un boK dentro un altro boK o alla pagina si pu7 ricorrere al posizionamento assoluto degli stessi. Pn ottimo articolo per tale scopo = presente su constile.org.

Come creare un sito a ( colonne con i css


Con 8uesto tutorial 1edremo come costruire un la:out a 3 colonne pi? <eader e $ooter completo. Diamo per scontato c<e a**iate gi" letto il tutorial su come costruire un semplice la:out a due colonne e 8uindi c<e a**iate compreso cos@= il *o- model; come aggirare le limitazioni di I/; cosa signi$ic<i elemento inline e *locco e come utilizzare le propriet" $loat e clear. Supponiamo c<e il nostro gra$ico ci a**ia in1iato 8uesto la:out #spero per 1oi c<e a**ia $atto anc<e di meglio 9% %

Rclicca sulle immagini per ingrandirleT 'er prima cosa do1remmo decidere come di1idere gli spazi Qtipogra$iciQ9 nell@immagine successi1a noterete una mia personalissima suddi1isione. V11iamente 1oi potrete sceglierne un@altra se 1i $osse pi? comoda o se non 1i tro1aste a 1ostro agio con 8uella da me scelta.

Iniziamo dun8ue a di1idere la pagina con lo stesso metodo gi" utilizzato in 8uesto tutorial9 01remo a 8uesto punto tale codice <tml9
<!N@15R.O html .S2M<1 -&//W)1//N5N TH5UM ,.,//O?-http!//GGG.G).or%/5V/xhtml,,/N5N/xhtml,,.dtd-> <html xmlns=-http!//GGG.G).or%/,JJJ/xhtml- xml!lan%=-it-> <head> <title>.ro3a layout ) colonne</title> <meta http&eAui3=-1ontent&5ype- content=-text/html# charset=utf&I- /> <link type=-text/css- rel=-stylesheet- href=-style.css- title=-/tyle- media=-all- /> </head> <body> <di3 id=-contenitore-> <di3 id=-header->Wnbsp#</di3> <di3 id=-colsx->Wnbsp#</di3> <di3 id=-coldx->Morem ipsum dolor sit amet9 consectetuer adipiscin% elit9 sed diam nonummy nibh euismod tincidunt ut laoreet dolore ma%na aliAuam erat 3olutpat. St Gisi enim ad minim 3eniam9 Auis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliAuip ex ea commodo conseAuat. Nuis autem 3el eum iriure dolor in hendrerit in 3ulputate 3elit esse molestie conseAuat9 3el illum dolore eu feu%iat nulla facilisis at 3ero eros et accumsan et iusto odio di%nissim Aui blandit praesent luptatum 00ril delenit au%ue duis dolore te feu%ait

nulla facilisi.</di3> <di3 id=-footer->Wnbsp#</di3> </di3> </body> </html>

/d il css sar" in1ece9


body $back%round!6)))# text&ali%n!center# font&family!Hel3etica9 arial9 sans&serif# font& si0e!,(px#+ di36contenitore $back%round!6,I''''# Gidth!J,*px# mar%in!' auto# text&ali%n!left# + di36header $back%round!6K)'# hei%ht!,H'px#+ di36colsx $back%round!6KKK# Gidth!H;;px# PGidth!H;Hpx# GPidth!H;;px# float!left# border& ri%ht!,px solid 6111#+ di36coldx $back%round!6,I''''# color!6KKK# Gidth!,(Hpx# PGidth! ,:Ipx# GPidth!,(Hpx# float!left# paddin%!,'px# border&top!,px solid 6)))#+ di36footer $back%round!6)))# clear!left# border&top!;px solid 6111# text&ali%n!center# +

2oterete come assomigli terri*ilmente al codice del tutorial a 2 colonne gi" linAato sopra. Le unic<e di$$erenze pratic<e sono l@aggiunta di un paio di *ordi; in particolare il *ordo di pi-el del $ooter. Siamo arri1ati a 8uesto punto9 #non preoccupate1i dello s$ondo completamente marrone6 8uella parte sar" occupata dalla colonna sinistra. L@<o messo poic<U suppongo c<e la parte sinistra sar" pi? alta della colonna destra e per tal moti1o lo s$ondo marrone ser1ir" a compensare la mancanza di altezza di 8uest@ultima; come noterete tra poco%.

Ci occuperemo ora della colonna sinistra. Dall@immagine noterete sicuramente c<e la parte in 1erde potre**e esser di1isa in 3 *locc<i principali9

il menu in alto alla stregua di un <eader classico6 una colonna sinistra6 ed una destra.

Seguendo la solita procedura aggiungeremo9


xhtml (solo body):
/body0 /di1 id2"contenitore"0 /di1 id2"#eader"03nbsp;//di10 /di1 id2"colsx"0 /di1 id2"men'"04'i 1err3agra1e; inserito il men'//di10

/di1 id2"s'bcolsx"03nbsp;//di10 /di1 id2"s'bcoldx"05orem ips'm dolor sit amet, consectet'er adipiscing elit, sed diam non'mmy nib# e'ismod tincid'nt 't laoreet dolore magna ali6'am erat 1ol'tpat7 8t !isi enim ad minim 1eniam, 6'is nostr'd exerci tation 'llamcorper s'scipit lobortis nisl 't ali6'ip ex ea commodo conse6'at7 9'is a'tem 1el e'm iri're dolor in #endrerit in 1'lp'tate 1elit esse molestie conse6'at, 1el ill'm dolore e' fe'giat n'lla facilisis at 1ero eros et acc'msan et i'sto odio dignissim 6'i blandit praesent l'ptat'm ::ril delenit a'g'e d'is dolore te fe'gait n'lla facilisi7//di10 //di10 /di1 id2"coldx"05orem ips'm dolor sit amet, consectet'er adipiscing elit, sed diam non'mmy nib# e'ismod tincid'nt 't laoreet dolore magna ali6'am erat 1ol'tpat7 8t !isi enim ad minim 1eniam, 6'is nostr'd exerci tation 'llamcorper s'scipit lobortis nisl 't ali6'ip ex ea commodo conse6'at7 9'is a'tem 1el e'm iri're dolor in #endrerit in 1'lp'tate 1elit esse molestie conse6'at, 1el ill'm dolore e' fe'giat n'lla facilisis at 1ero eros et acc'msan et i'sto odio dignissim 6'i blandit praesent l'ptat'm ::ril delenit a'g'e d'is dolore te fe'gait n'lla facilisi7//di10 /di1 class2"clearlft"0//di10 /di1 id2"footer" class2"clearlft"03nbsp;//di10 //di10 //body0

css:

body ;bac&gro'nd:(...; text-align:center; font-family:<el1etica, arial, sans-serif; fontsi:e:12px;= di1(contenitore ;bac&gro'nd:(18%%%%; !idt#:>1?px; margin:% a'to; text-align:left; = di1(#eader ;bac&gro'nd:().%; #eig#t:1$%px;= di1(colsx ;bac&gro'nd:())); !idt#:$@@px; A!idt#:$@$px; !Aidt#:$@@px; float:left; borderrig#t:1px solid (BBB;= di1(men' ;bac&gro'nd:(>>>;= di1(s'bcolsx ; bac&gro'nd:())); float:left; !idt#:?>8px; A!idt#: @1>px; !Aidt#:?>8px; padding:1%px; border-rig#t:1px solid (%%%;= di1(s'bcoldx ;bac&gro'nd:()@%; color:())); !idt#:12$px; A!idt#: 1-$px; !Aidt#:12$px; float:left; padding:1%px;= di1(coldx ;bac&gro'nd:(18%%%%; color:())); !idt#:12$px; A!idt#: 1-8px; !Aidt#:12$px; float:left; padding:1%px; border-top:1px solid (...;= di1(footer ;bac&gro'nd:(...; border-top:@px solid (BBB; text-align:center; = 7clearlft ;clear:left; =

Le parti in rosso son 8uelle appena aggiunte6 ci7 = 8uello c<e a**iamo ottenuto $inora9

Iniziamo a YriempireY i *locc<i dal menu. In giro son presenti moltissimi menu gi" pronti6 in 8uesto tutorial pro1eremo a $arli da soli. Sostituiamo il di1 del menu con una lista non ordinata; c<e riempiremo di elementi ai 8uali daremo la propriet" di essere elementi inline i 8uali conterranno i 1eri collegamenti. Il css c<e scri1eremo sar"9
ul6menu $back%round!6JJJ# paddin%!'# mar%in!'# list&style!none# hei%ht!(.H*em# border& Gidth!'.,em '# border&color!6)))# border&style!solid#+ ul6menu li $float!left#+ ul6menu li a $display!block# color!6KKK# back%round!6JJJ# font&si0e!,.,em# line& hei%ht!(.*em# paddin%!' ,.*em# text&decoration!none# border&ri%ht!'.'Iem solid 6)))# font& family![erdana9 sans&serif# font&Gei%ht!bold#+ ul6menu li a.current $back%round!6)'''''#+ ul6menu li a!ho3er $back%round!6K;'#+

a cui corrisponder" 8uesto codice -<tml9


<ul id=-menu-> <li><a href=-6->Home</a></li> <li><a href=-6- class=-current-><tem (</a></li> <li><a href=-6-><tem )</a></li> <li><a href=-6-><tem :</a></li> <li><a href=-6-><tem *</a></li> <li><a href=-6->1ontatti</a></li> </ul>

'ro1o a spiegare cosa a**iamo $atto6 a**iamo9


indicato i 1ari elementi della lista #li% come inline; per a$$iancarli uno all@altro6 indicato gli elementi a come *locc<i per poter s$ruttare la possi*ilit" di cliccare su tutto il *locco e non solo sulla scritta6 assegnato un colore alla *arra del menu #W(((% ed allo s$ondo dei 1ari collegamenti6 dato ai *locc<i a un@altezza di 1.1 em cio= il 11)[ della grandezza standard dei caratteri e un@altezza delle linee di 2.5em #25)[% del testo6 assegnato al *locco menu un@altezza di 2.!5em #cio= 2.5 di line.<eig<tQ1.1%6 messo il *ordino a tutto il *locco menu in alto ed in *asso; di dimensioni ).1em; colore W333; solido6 dato il *ordo ai *locc<i a solo a destra per e1itare so1rapposizioni. #).)&; cio= ).1I1.2%6 come sopra tolto il padding ed il margine al menu per e1itare spazi *ianc<i e tolto lo stile delle liste #il classico puntino tipo 8uello di 8uesta lista%6 tolto la sottolineatura ai linA ed assegnato il colore *ianco6 assegnato il colore per l@e$$etto <o1er e per la pagina corrente a cui a**iamo dato una classe apposita

Juesto = il risultato9

'rossimo step = 8uello di la1orare sull@<eader. Ci7 c<e ci ser1e = assegnare l@immagine di s$ondo e posizionare il titolo con <1 ed il sottotitolo con <2. >ista la dimensione $issa della testata potremmo semplicemente ritagliare l@immagine ed assegnarla come s$ondo. 5e osse stato un layout li!uido avremmo dovuto preoccuparci di creare unimmagine di s ondo di una larghezza molto ampia per coprire tutte le possibili risoluzioni$ avremmo dovuto creare due immagini- una del iore che avremo posizionato come immagine issa a sinistra ed un pattern dello s ondo da ripetere lungo lasse X. 0ssegnamo poi le propriet" ai *locc<i h1 ed h!; assegnando ad entram*i le stesse propriet"9 $amiglia di caratteri Beorgia; margine sinistro di 51) p-; dato c<e 1ogliamo centrare gli stessi rispetto al $iore; largo appunto 51) pi-els. 2on ci resta c<e de$inire i colori ed il gioco = 8uasi $atto. 0ttenzione9 dato c<e in <1 inseriremo un collegamento; do**iamo dare il colore all@elemento a e non solo ad <1. Le modi iche atte per !uesto step saranno evidenziate nel codice con il colore azzurro. Screens<ot a 8uesto punto9

Ci restano le ultime modi$ic<e da $are9


assegnare la grandezza e lo stile ai 1ari elementi h14 h!4 h(S hK/ cam*iare il colore del testo al *o- arancio6 dare l@e$$etto con le linee dello s$ondo #prendendo un@immagine 4e4 e ripetendola%6 dare il colore al testo del $ooter 6 togliere il padding al *od:6 impostare la grandezza iniziale ai caratteri6

ed a**iamo $inito. Le modi iche atte per !uesto step saranno evidenziate nel codice con il colore verde.
xhtml finale:
/C9DB EFE #tml F8G5HB "-//I.B//9 9 J< K5 171//EL" -http!//GGG.G).or%/5V/xhtml,,/N5N/xhtml,,.dtd-> <html xmlns=-http!//GGG.G).or%/,JJJ/xhtml- xml!lan%=-it-> /#ead0 /title0Fro1a layo't . colonne//title0 /meta #ttp-e6'i12"Bontent- ype" content2"text/#tml; c#arset2'tf-8" /0 /lin& type2"text/css" rel2"styles#eet" #ref2"style7css" title2"Mtyle" media2"all" /0 //#ead0 /body0 /di1 id2"contenitore"0 /di1 id2"#eader"0 /#10/a #ref2"7/index7#tml"0 itolo del sito//a0//#10 /#20Mottotitolo//#20 //di10 /di1 id2"colsx"0 /'l id2"men'"0 /li0/a #ref2"("0<ome//a0//li0 /li0/a #ref2"(" class2"c'rrent"0Htem 2//a0//li0 /li0/a #ref2"("0Htem .//a0//li0 /li0/a #ref2"("0Htem -//a0//li0 /li0/a #ref2"("0Htem ?//a0//li0 /li0/a #ref2"("0Bontatti//a0//li0 //'l0 /di1 id2"s'bcolsx"0 /#.0 itolo articolo//#.0 /p05orem ips'm dolor sit amet, consectet'er adipiscing elit, sed diam non'mmy nib# e'ismod tincid'nt 't laoreet dolore magna ali6'am erat 1ol'tpat7 8t !isi enim ad minim 1eniam, 6'is nostr'd exerci tation 'llamcorper s'scipit lobortis nisl 't ali6'ip ex ea commodo conse6'at7 9'is a'tem 1el e'm iri're dolor in #endrerit in 1'lp'tate 1elit esse molestie conse6'at, 1el ill'm dolore e' fe'giat n'lla facilisis at 1ero eros et acc'msan et i'sto odio dignissim 6'i blandit praesent l'ptat'm ::ril delenit a'g'e d'is dolore te fe'gait n'lla facilisi7//p0 /#.0Altro titolo//#.0 /#-0 itolo se:ione a//#-0 /p05orem ips'm dolor sit amet, consectet'er adipiscing elit, sed diam non'mmy nib# e'ismod tincid'nt 't laoreet dolore magna ali6'am erat 1ol'tpat7 8t !isi enim ad minim 1eniam, 6'is nostr'd exerci tation 'llamcorper s'scipit lobortis nisl 't ali6'ip ex ea commodo conse6'at7 9'is a'tem 1el e'm iri're dolor in #endrerit in 1'lp'tate 1elit esse molestie conse6'at, 1el ill'm dolore e' fe'giat n'lla facilisis at 1ero eros et acc'msan et i'sto odio dignissim 6'i blandit praesent l'ptat'm ::ril delenit a'g'e d'is dolore te fe'gait n'lla

facilisi7//p0 /#-0 itolo se:ione b//#-0 /p05orem ips'm dolor sit amet, consectet'er adipiscing elit, sed diam non'mmy nib# e'ismod tincid'nt 't laoreet dolore magna ali6'am erat 1ol'tpat7 8t !isi enim ad minim 1eniam, 6'is nostr'd exerci tation 'llamcorper s'scipit lobortis nisl 't ali6'ip ex ea commodo conse6'at7 9'is a'tem 1el e'm iri're dolor in #endrerit in 1'lp'tate 1elit esse molestie conse6'at, 1el ill'm dolore e' fe'giat n'lla facilisis at 1ero eros et acc'msan et i'sto odio dignissim 6'i blandit praesent l'ptat'm ::ril delenit a'g'e d'is dolore te fe'gait n'lla facilisi7//p0 /#-0 itolo se:ione c//#-0 /p05orem ips'm dolor sit amet, consectet'er adipiscing elit, sed diam non'mmy nib# e'ismod tincid'nt 't laoreet dolore magna ali6'am erat 1ol'tpat7 8t !isi enim ad minim 1eniam, 6'is nostr'd exerci tation 'llamcorper s'scipit lobortis nisl 't ali6'ip ex ea commodo conse6'at7 9'is a'tem 1el e'm iri're dolor in #endrerit in 1'lp'tate 1elit esse molestie conse6'at, 1el ill'm dolore e' fe'giat n'lla facilisis at 1ero eros et acc'msan et i'sto odio dignissim 6'i blandit praesent l'ptat'm ::ril delenit a'g'e d'is dolore te fe'gait n'lla facilisi7//p0 //di10 /di1 id2"s'bcoldx"0 /#?0 itolo se:ione//#?0 /img src2"7/img17gif" alt2"immagine 1" /0 /p09escri:ione dell+immagine 1//p0 /img src2"7/img27gif" alt2"immagine 2" /0 /p09escri:ione dell+immagine 2//p0 /di105orem ips'm dolor sit amet, consectet'er adipiscing elit, sed diam non'mmy nib# e'ismod tincid'nt 't laoreet//di10 //di10 //di10 /di1 id2"coldx"05orem ips'm dolor sit amet, consectet'er adipiscing elit, sed diam non'mmy nib# e'ismod tincid'nt 't laoreet dolore magna ali6'am erat 1ol'tpat7 8t !isi enim ad minim 1eniam, 6'is nostr'd exerci tation 'llamcorper s'scipit lobortis nisl 't ali6'ip ex ea commodo conse6'at7 9'is a'tem 1el e'm iri're dolor in #endrerit in 1'lp'tate 1elit esse molestie conse6'at, 1el ill'm dolore e' fe'giat n'lla facilisis at 1ero eros et acc'msan et i'sto odio dignissim 6'i blandit praesent l'ptat'm ::ril delenit a'g'e d'is dolore te fe'gait n'lla facilisi7//di10 /di1 class2"clearlft"0//di10 /di1 id2"footer" class2"clearlft"05or't laoreet dolore magna ali6'am erat 1ol'tpat7 8t !isi enim ad minim 1eniam, 6'is nostr'd exerci tation//di10 //di10 //body0 //#tml0 css finale: body ;bac&gro'nd:(... 'rl*"7/linee7gif",; text-align:center; font-family:<el1etica, arial, sansserif; font-si:e:12px; margin:%;= a img ;border:%;= di1(contenitore ;bac&gro'nd:(18%%%%; !idt#:>1?px; margin:% a'to; text-align:N'stify;= di1(#eader ;bac&gro'nd:().% 'rl*"7/#eader7Npg", no-repeat; #eig#t:1$%px;= di1(#eader #1, di1(#eader #2 ;text-align:center; margin-left:?1%px;= di1(#eader #1 ; margin-top:%; padding-top:1em; color:()));= di1(#eader #1 a ;color:()));= di1(#eader #2 ;color:()@%;= di1(colsx ;bac&gro'nd:()@%; !idt#:$@@px; A!idt#:$@$px; !Aidt#:$@@px; float:left; borderrig#t:1px solid (BBB; = 'l(men' ;bac&gro'nd:(>>>; padding:%; margin:%; list-style:none; #eig#t:27$?em; border!idt#:%71em %; border-color:(...; border-style:solid;= 'l(men' li ;float:left;= 'l(men' li a ;display:bloc&; color:())); bac&gro'nd:(>>>; font-si:e:171em; line#eig#t:27?em; padding:% 17?em; text-decoration:none; border-rig#t:%7%8em solid (...; fontfamily:Verdana, sans-serif; font-!eig#t:bold;= 'l(men' li a7c'rrent ;bac&gro'nd:(.%%%%%;= 'l(men' li a:#o1er ;bac&gro'nd:()@%;= di1(s'bcolsx ; bac&gro'nd:())); float:left; !idt#:?>8px; A!idt#: @1>px; !Aidt#:?>8px; padding:1%px; border-rig#t:1px solid (%%%;= di1(s'bcoldx ;bac&gro'nd:()@%; color:(18%%%%; !idt#:12$px; A!idt#: 1-$px; !Aidt#:12$px; float:left; padding:1%px; text-align:center; margin-top:1em;= di1(s'bcoldx ;margin-top:%;=

di1(s'bcoldx img ;border:2px o'tset (18%%%%;= di1(coldx ;bac&gro'nd:(18%%%%; color:())); !idt#:12$px; A!idt#: 1-8px; !Aidt#:12$px; float:left; padding:1%px; border-top:1px solid (...; = di1(footer ;bac&gro'nd:(...; text-align:center; border-top:@px solid (BBB; color:()@%; font-style:italic;= #1, #2, #., #-, #?, #@ ;font-family:Oeorgia, serif; = #1 ;font-si:e:27?em;= #2 ;font-si:e:178em;= #. ;font-si:e:17@em;= #- ;font-si:e:17-em; font-style:italic;= #? ;font-si:e:172em; font-style:italic;= #@ ;font-si:e:171em; font-style:italic;= 7clearlft ;clear:left; =

/d ecco il risultato $inale9

/sempio e codici.

Appendice B: links

Risorse
In 8uesto capitolo indic<eremo risorse e linA utili per c<i 1oglia appro$ondire l@argomento. Innanzitutto una 1isita al sito del G3C do1e son indicate le speci$ic<e = d@o**ligo per tutti. 'er c<i a1essi pro*lemi con l@inglese = disponi*ile una traduzione in italiano. Pn altro indirizzo da a1ere sottomano = 53sc<ools.com; in particolare la sezione css do1e tro1erete notizie; consigli ed esempi per ogni regola. 'er controllare la *ont" del nostro la1oro = utile utilizzare un 1alidatore. Il migliore = pro*a*ilmente ed o11iamente 8uello del G3C. Pn@ottima risorsa in italiano = sicuramente constile.org do1e son presenti tutorial; esempi; consigli e suggerimenti sui $ogli di stile. 2ei segnali*ri di un coder css non do1re**ero mancar inoltre9 <ttp9II555.alistapart.comI e <ttp9IIglis<.comIcssI due ottime risorse in inglese. /sistono poi tool semi.automatici per creare liste e $orm ed una raccolta di la:out di1isi per numero di colonne e tipo la:out #$isso o li8uido%. In$ine son sicuramente da 1isitare CSS aen Barden e CSS aen Sentiero c<e mostrano come i $ogli di stile non siano un limite per gli artisti del 5e* design; tutt@altroH

Appendice C: autore

@ote sullTautore
Massimiliano Carne1ale; conosciuto in rete con il nicA b&assyc; = responsa*ile di (anie )rafiche9 una 5e* agenc: c<e o$$re ser1izi 5e* c<e spaziano dalla realizzazione di siti internet #e.commerce; portali; sistemi di prenotazione online; corporate *log%; al posizionamento sui motori di ricerca; alle 1arie $orme di visibilit< online. Con una $orte attenzione al lato commerciale9 o11ero a come far convertire un visitatore in un cliente. Brazie alle competenze in 1ari settori #programmazione% seo% accessibilit&% copy1riting% gra ica% 8uesta agenzia o$$re la possi*ilit" di $are un sito internet da zero; oppure di inter1enire su progetti gi" esistenti; integrandoli con nuo1e $unzionalit" #o e$$ettuando un rest:ling gra$ico.strutturale%. Vltre alla parte online; Manie Fra iche realizza ser1izi di grafica UtradizionaleQ9 produzione di materiale pu**licitario di 1ario tipo come ad esempio depliant4 brochure4 biglietti da visita.. 2el tempo li*ero Mass: = editore in Dmoz; nella categoria; GorldIItaliano; legge $umetti; Rat.Man in particolare; = $otoamatore e; 8uando il tempo lo permette; suona il sa-.

15 Ottobre 2007 ers. 1.0