Introduzione ai css

INTRODUZIONE AI CSS COSA SONO E COME FUNZIONANO I CSS Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ > Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License. Based on a work at www.constile.org. Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.

INFORMAZIONE E PRESENTAZIONE Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione . L’informazione è costituita da due aspetti essenziali: I contenuti La formattazione dei contenuti I contenuti sono forniti attraverso linguaggi di marcatura che caratterizzano i vari oggetti del documento La formattazione è determinata dall’ interpretazione del programma utente . PRIMA PARTE: INTRODUZIONE

BROWSER E STILI Ogni browser ha una rappresentazione predefinita degli oggetti della pagina: generalmente i collegamenti sono blu, i titoli sono rappresentati con caratteri grandi. In pratica, ogni browser ha uno stile predefinito su cui l’utente (ma non l’autore) può intervenire in minima parte. Per permettere agli autori di avere un maggiore controllo sulla rappresentazione dei contenuti, sono nati marcatori (come ad esempio font ) il cui scopo non era più caratterizzare gli oggetti del documento, ma fornire una formattazione degli stessi. Come conseguenza i contenuti risultano indissolubilmente legati alla loro rappresentazione grafica. PRIMA PARTE: INTRODUZIONE

I FOGLI DI STILE A CASCATA (CSS) Compito dei CSS ( Cascading Style Sheets : Fogli di Stile a Cascata) è ripristinare la separazione dei contenuti e dalla formattazione. I CSS possono essere visti come lo strumento per la definizione da parte dell’autore degli stili predefiniti del browser I CSS non definiscono direttamente l’aspetto del documento ma stabiliscono il modo in cui il browser rappresenta i vari oggetti definiti dal linguaggio di marcatura utilizzato . PRIMA PARTE: INTRODUZIONE

STRUTTURA E CONTENUTI: L’XHTML Il linguaggio di marcatura più adatto all’uso dei CSS è l’XHTML L’XHTML è una riformulazione del classico HTML in XML L’XHTML è totalmente compatibile con l’HTML, ma è riscritto in modo da essere conforme all’XML Il principale vantaggio dell’XHTML è la rigidità formale richiesta dal linguaggio e la possibilità di effettuare test automatici per la verifica della correttezza formale PRIMA PARTE: XHTML

DALL’HTML ALL’XHTML Il documento deve essere ben formato : Tutti gli elementi devono avere un tag di chiusura , ovvero (se vuoti) il tag iniziale deve finire con la stringa ‘ /> ’ ( spazio compreso ). I vari tag devono essere annidati in modo corretto . PRIMA PARTE: XHTML Errato: <p>Paragrafo<p>Paragrafo <hr> <br> <p><em>enfasi</p></em> Corretto: <p>Paragrafo</p><p>Paragrafo</p> <hr /> <br /> <p><em>Enfasi</em></p>

DALL’HTML ALL’XHTML Gli elementi e gli attributi devono essere scritti con caratteri minuscoli I valori degli attributi devono sempre essere scritti fra apici o doppi apici PRIMA PARTE: XHTML Errato: <P LANG="en">Paragraph</P> <a href=http://w3.org/> Corretto: <p lang="en">Paragraph</p> <a href="http://w3.org/"> oppure <a href='http://w3.org/'>

DALL’HTML ALL’XHTML Maggiori informazioni: http://www.w3.org/TR/xhtml1/#diffs http://www.webaccessibile.org/argomenti/ argomento.asp?cat=519 PRIMA PARTE: XHTML

UNA STRUTTURA PER I CONTENUTI Oltre a caratterizzare i contenuti (titoli, paragrafi, liste, collegamenti), il linguaggio di marcatura ha il compito di realizzare la struttura in cui inserire i contenuti stessi Per raggruppare elementi da trattare come un oggetto unico , l’elemento chiave è il tag <div> Il tag <div> è un contenitore generico. PRIMA PARTE: XHTML

UNA STRUTTURA PER I CONTENUTI <body> <ul> <li><a …>Articles</a></li> <li><a …>Topics</a></li> <li><a…>About</a></li> <li><a …>Contact</a></li> <li><a …>Contribute</a></li> <li><a …>Feed</a></li> </ul> <h1><a …><img … /></a></h1> <div> <a …>No. <em>200</em></a> </div> PRIMA PARTE: XHTML

UNA STRUTTURA PER I CONTENUTI Il titolo/logo del sito è realizzato tramite il tag <h1> Il menù di navigazione è realizzato tramite una lista non ordinata <ul> PRIMA PARTE: XHTML

UN DIVERSO APPROCCIO Nella realizzazione di pagine web tramite XHTML+CSS è richiesto un diverso approccio rispetto a quanto si farebbe impaginando per mezzo di tabelle con i programmi del tipo WYSIWYG Anziché lanciare l’editor WYSIWYG e cominciare a disegnare la struttura della pagina, è necessario organizzare i contenuti in modo logico, raggrupparli e, se necessario, identificarli in modo univoco o associarli a classi specifiche Per rendere i contenuti meglio fruibili con qualsiasi dispositivo, è bene organizzarli in modo che siano letti nell’ordine ideale PRIMA PARTE: XHTML

PRIMA PARTE STRUTTURA DI UN FOGLIO DI STILE

STRUTTURA DI UN FOGLIO DI STILE Un foglio di stile è un documento che raccoglie un insieme di regole di rappresentazione dei contenuti della pagina a cui il foglio è associato Di seguito è rappresentata la struttura di una regola: PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE h1 { font-size : 2em; font-weight : bold; } DICHIARAZIONE PROPRIETÀ SELETTORE VALORE REGOLA

LE REGOLE Una regola è costituita da: uno o più selettori (separati da una virgola ‘ , ’) a cui associare un insieme di dichiarazioni racchiuse fra parentesi graffe ‘ { } ’ le varie di dichiarazioni sono separate da un punto e virgola ‘ ; ’ ogni dichiarazione è costituita da due elementi separati dai due punti ‘ : ’: la proprietà il valore (o l’insieme di valori) assegnato alla proprietà PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE

I SELETTORI I selettori indicano al browser quali elementi della pagina si dovranno applicare le dichiarazioni della regola I selettori possono essere essenzialmente di tre tipi: PRIMA PARTE: I SELETTORI h1, h2, p { ... } #identificatore { ... } .classe { ... } 1: TAG XHTML 3: IDENTIFICATORI 2: CLASSI

TIPI DI SELETTORI I selettori più generici sono i selettori di tipo i quali specificano che la regola deve essere applicata a tutti gli elementi del tipo indicato . Ad esempio, sono selettori di tipo: p {…} a {…} div {…} strong {…} * {…} PRIMA PARTE: I SELETTORI

LE CLASSI Le ‘ classi ’ servono a caratterizzare un insieme di oggetti omogenei. Per associare un oggetto ad una classe è sufficiente specificarne il nome attraverso l’attributo class : <div class="notizia" ><h1>Titolo</h1><p>Testo …</p></div> <div class="notizia altraClasse" ><h1>Titolo</h1><p>Testo …</p></div> Il selettore si indica riportando il valore assegnato all’attributo class , preceduto da un punto ‘ . ’ .notizia {…} È possibile combinare fra loro più classi: <div class="classe1 classe2" >…</div> .classe1.classe2 {…} Il selettore può anche specificare a quale elemento la classe deve essere associata: p.classe {…} h1.classe {…} PRIMA PARTE: I SELETTORI

IDENTIFICATORI Gli ‘ identificatori ’ selezionano invece un oggetto unico all’interno della pagina. L’associazione avviene tramite l’attributo id : <div id="testata" ><h1>Titolo</h1><p>Testo ...</p></div> ATTENZIONE: è errato associare lo stesso identificatore a due o più oggetti nella stessa pagina. Il selettore si indica riportando il valore assegnato all’attributo id , preceduto dal simbolo cancelletto ‘ # ’ #testata {…} Il selettore può anche specificare a quale elemento l’identificatore deve essere associato: p#testata {…} h1#testata {…} Classi e identificatori possono essere usati contemporaneamente: <div id="idval" class="classval" > #idval.classval {…} PRIMA PARTE: I SELETTORI

PSEUDO-CLASSI Le pseudo-classi creano delle distinzioni nei diversi stati di uno stesso elemento. Ad esempio: p:first-child {…} identifica il primo paragrafo figlio di un qualsiasi elemento padre: <div> <p>paragrafo first-child</p> <p>altro paragrafo</p> </div> PRIMA PARTE: I SELETTORI

PSEUDO-CLASSI Le sole pseudo-classi supportate dai browser più diffusi sono: a:link {…} a:visited {…} a:hover {…} a:focus {…} a:active {…} L’ordine con cui sono scritte le precedenti regole è importante per il pieno supporto con i diversi browser. PRIMA PARTE: I SELETTORI

PSEUDO-ELEMENTI Gli pseudo-elementi selezionano una sotto parte di un dato elemento. Ad esempio: p:first-letter {…} p:first-line {…} identificano rispettivamente la prima lettera e la prima riga di un paragrafo Il supporto da parte dei browser più datati è scarso PRIMA PARTE: I SELETTORI

DISCENDENZA Il selettore di discendenza permette di individuare un elemento in base agli elementi suoi progenitori: <h1>Lorem <strong>ipsum</strong> mea sale</h1> <p>Lorem <strong>ipsum</strong> mea sale</p> È possibile individuare i due differenti elementi indicando, oltre al tipo dell’elemento a cui si vuole applicare la regola, anche il tipo di uno o più elementi progenitori: h1 strong {…} p strong {…} PRIMA PARTE: I SELETTORI

DISCENDENZA È possibile indicare uno o più progenitori: #nomeId ul li.nomeClasse a {…} È possibile indicare un elemento progenitore di qualsiasi grado , non solo l’elemento padre: <ul><li> <a>Lorem ipsum</a> </li></ul> ul a {…} PRIMA PARTE: I SELETTORI

SELETTORE FIGLIO Il selettore figlio specifica una parentela diretta (padre-figlio) tra due elementi. Il selettore che rappresenta il padre e il selettore che rappresenta il figlio sono separati dal carattere ‘>’. div > p {…} div p {…} La prima regola si applica a tutti i paragrafi che sono direttamente contenuti in un elemento <div> , mentre la seconda regola si applica a tutti i paragrafi contenuti in un elemento <div> , indipendentemente dal grado di discendenza. Il selettore figlio non è supportato da Internet Explorer 6 e precedenti per Windows e Mac. PRIMA PARTE: I SELETTORI

SELETTORE FRATELLO Il selettore fratello specifica la fratellanza di due oggetti. È infatti individuare un elemento in base al fratello immediatamente precedente: <h1>Lorem ipsum</h1> <p>Atqui numquam singulis his …</p> <p>Stet invenire nam no. Quando …</p> <p>Sint oblique maluisset duo ut. …</p> È possibile individuare il primo paragrafo, inserito subito dopo l’elemento h1, indicando i due elementi separati dal carattere ‘ + ’: h1 + p {…} Il selettore figlio non è supportato da Internet Explorer 6 e precedenti per Windows. PRIMA PARTE: I SELETTORI

SELETTORI DI ATTRIBUTO Il selettore di attributi permette di individuare un elemento in base ad un qualsiasi suo attributo: elm[att] verifica semplicemente se l’attributo att dell’elemento elm è stato impostato, il valore assunto dall’attributo stesso non è rilevante; elm[att=val] verifica se l’attributo att dell’elemento elm assume esattamente il valore val ; elm[att~=val] verifica se l’attributo att dell’elemento elm assume come valore una serie di parole separate da spazi, una delle quali è esattamente val ; elm[att|=val] verifica se l’attributo att dell’elemento elm assume come valore una lista di parole separate da un trattino, la prima delle quali è esattamente val (utile per i codici di lingua, che hanno la forma en-en , en-us , eccetera). PRIMA PARTE: I SELETTORI

SELETTORI DI ATTRIBUTO Esempio a[accesskey] {…} a[rel=glossary] {…} a[title~=esempio] {…} a[hreflang|=en] {…} I precedenti selettori possono corrispondere, rispettivamente, ai seguenti oggetti XHTML: <a accesskey ="0" …>…</a> oppure <a accesskey ="k" …>…</a> <a rel="glossary" …>…</a> <a title= "titolo di esempio " …>…</a> <a rel =" en " …>…</a> oppure <a rel =" en - en " …>…</a> ovvero <a rel =" en -us" …>…</a> PRIMA PARTE: I SELETTORI

SELETTORI DI ATTRIBUTO Si noti che classi e selettori di tipo ID sono un caso particolare di selettore di attributo . Il selettore *[class~=nomeClasse] corrisponde al selettore .nomeClasse ; Il selettore *[id=identificatore] corrisponde al selettore #identificatore . I selettori di attributo sarebbero molto utili, soprattutto per distinguere i diversi tipi di campi input ( type="text" , type="radio" , type="submit" , …). I selettori di attributo non sono compatibili con Internet Explorer versione 6 e precedenti. PRIMA PARTE: I SELETTORI

RAGGRUPPAMENTO DI SELETTORI Spesso può essere utile associare una regola a più selettori contemporaneamente. Per fare ciò è possibile utilizzare un insieme di selettori separati da una virgola, come indicato nel seguente blocco di codice: h1, #id, div p.classe {…} Più selettori separati da uno spazio costituiscono un selettore che indica un rapporto di discendenza , mentre più selettori separati da una virgola hanno un regola in comune PRIMA PARTE: I SELETTORI

SPECIFICITÀ DEI SELETTORI Due o più regole, anche con selettori differenti, possono riferirsi allo stesso oggetto , quando ciò accade le due o più regole si applicano contemporaneamente . Tuttavia alcune dichiarazioni possono essere in conflitto, motivo per cui esistono delle norme per calcolare la priorità delle regole . Una regola assume maggiore priorità quanto più elevata è la specificità del suo selettore . La specificità di un selettore si basa sul numero e sul tipo di selettori di base che costituiscono il selettore. PRIMA PARTE: I SELETTORI

SPECIFICITÀ DEI SELETTORI La specificità del selettore è rappresentata da un numero a tre cifre ABC così determinato: A = numero di attributi id presenti nel selettore della regola (numero di selettori di tipo ID); B = numero degli attributi differenti da id (essenzialmente le classi) e di pseudo classi presenti nel selettore della regola; C = numero di selettori di tipo e di pseudo-elementi presenti nel selettore della regola. PRIMA PARTE: I SELETTORI

SPECIFICITÀ DEI SELETTORI Selettore Pesi Specificità * {…} A=0 B=0 C=0 0 li {…} A=0 B=0 C=1 1 li:first-line {…} A=0 B=0 C=2 2 ul li {…} A=0 B=0 C=2 2 ul ol+li {…} A=0 B=0 C=3 3 h1 + *[rel=up]{…} A=0 B=1 C=1 11 ul ol li.red {…} A=0 B=1 C=3 13 li.elm.level {…} A=0 B=2 C=1 21 #xyz {…} A=1 B=0 C=0 100 PRIMA PARTE: I SELETTORI

PRIMA PARTE COLLEGARE I CSS A UN DOCUMENTO XHTML

COLLEGARE I CSS A UN DOCUMENTO XHTML Esistono diversi modi di collegare un foglio di stile ad un documento XHTML Fogli di stile incorporati Fogli di stile esterni Fogli di stile importati Attributo style : <p style="font-weight:bold"> La priorità della regola è massima, indipendentemente dal peso dei selettori Questo metodo è sconsigliabile PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML

FOGLI DI STILE INCORPORATI Si specificano gli stili direttamente nel codice XHTML attraverso il tag <style> da inserire nel tag <head> : <head> <style type="text/css"> /*<![CDATA[*/ … /*]]>*/ </style> </head> Le stringhe /*<![CDATA[*/ e /*]]>*/ servono a rispettare le regole dell’XML Questo metodo è adatto per pagine singole in cui è necessario specificare stili particolari PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML

FOGLI DI STILE ESTERNI I fogli di stile esterni sono richiamati attraverso il tag <link> da inserire nel tag <head> : <head> <link rel="stylesheet" href="file.css" type="text/css" /> </head> Attraverso il tag <link> è possibile associare diversi fogli di stile contemporaneamente PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML

FOGLI DI STILE IMPORTATI Attraverso la regola @import è possibile includere un foglio di stile esterno all’interno di un insieme di regole Se presenti, le regole @import devono essere inserite prima delle normali regole per gli stili: @import "file1.css"; @import "file2.css"; body {…} Il percorso si riferisce alla medesima cartella in cui è contenuto il foglio di stile contenente le regole @import Le regole @import possono comparire anche negli stili incorporati PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML

PAROLE CHIAVE: INHERIT Parola chiave inherit : il valore da assegnare alla proprietà deve essere ereditato da un elemento progenitore per il quale la proprietà è stata specificata. Alcune proprietà assumono automaticamente il valore inherit e la loro definizione è implicitamente derivata dal più prossimo elemento progenitore per il quale la proprietà è stata PRIMA PARTE: I VALORI

PAROLE CHIAVE: AUTO La parola chiave auto : indica esplicitamente che il programma utente dovrà utilizzare il valore predefinito previsto per quella specifica proprietà a cui il valore auto è stato assegnato . In alcuni casi, i diversi programmi utente possono avere valori predefiniti differenti per determinate proprietà. Il valore predefinito di una proprietà dipende anche dall’oggetto a cui la proprietà è applicata. Tuttavia tale valore è utile per sovra scrivere impostazioni di un’altra regola il cui selettore si riferisce al medesimo elemento, ovvero per sovra scrivere valori ereditati PRIMA PARTE: I VALORI

PAROLE CHIAVE: DIMENSIONE CARATTERI Dimensioni assolute indicano una dimensione di carattere predefinita, la quale varia in base al tipo e alle impostazioni dei diversi programmi utente . I possibili valori sono: xx-small , x-small , small , medium , large , x-large , xx-large . Dimensioni relative Hanno come riferimento la dimensione dei caratteri dell’elemento padre. I possibili valori sono: larger e smaller . PRIMA PARTE: I VALORI

LUNGHEZZE Unità di misura relative em : pari alla dimensione dei caratteri ex : pari alla dimensione del carattere ‘x’ (rara) px : pixel, la loro dimensione dipende dallo schermo Unità di misura assolute: in : pollici (1in = 2.54 cm) cm mm pt : punti (nei CSS 2, 1pt = 1/72in ) pc : picas ( 1pc = 12pt ) Le unità di misura relative non possono essere ricondotte direttamente ai metri senza considerare altri fattori, come ad esempio dimensione e risoluzione dello schermo PRIMA PARTE: I VALORI

LE PERCENTUALI Le percentuali sono costituite da un numero (non necessariamente intero) positivo, negativo o nullo, seguito immediatamente, senza alcuno spazio, dal simbolo ‘ % ’. Le percentuali dipendono, ovviamente, da un valore di riferimento che può variare in base alla proprietà a cui si vuole assegnare il valore L’oggetto di riferimento può essere lo stesso oggetto stesso puntato dal selettore, ovvero l’oggetto padre. PRIMA PARTE: I VALORI

RIFERIMENTI url("http://sito/file") url(http://sito/file) url("/file") url(/file) url("../file") * url(../file) * * il percorso si riferisce alla cartella in cui è collocato il foglio di stile e non alla cartella in cui è collocata la pagina HTML PRIMA PARTE: I VALORI

COLORI Nomi predefiniti: black , green , navy Valori RGB #rrggbb (r,g,b = { 0 ÷ F }) #rgb (r,g,b = { 0 ÷ F }) corrisponde a #rrggbb rgb(r,g,b) (r,g,b = { 0 ÷ 255 }) rgb(r%,g%,b%) (r,g,b = { 0.0 ÷ 100.0 }) Per esempio, i valori aqua , #00FFFF , #0FF , rgb(0,255,255) e rgb(0,100%,100%) si riferiscono tutti al medesimo colore verde acqua . PRIMA PARTE: I VALORI

IL BOX MODEL Ogni box è caratterizzato da Larghezza dello spazio per i contenuti ( width ) Altezza dello spazio per i contenuti ( height ) Spazio fra contenuti e bordi ( padding ) Bordo ( border ) Spazio fra il bordo e gli altri oggetti della pagina ( margin ) PRIMA PARTE: IL BOX MODEL

IL BOX MODEL <div>Ex nostrum … </div> <div>Indoctum … </div> body { margin: 0; padding: 0; } div { width:300px; padding:10px; border:5px solid #600; margin: 20px; } Si noti che i margini superiori e inferiori adiacenti collassano PRIMA PARTE: IL BOX MODEL

IL BOX MODEL Internet Explorer per Windows versione 5.5 e precedenti ha un modo differente di interpretare il box model: anziché aggiungere il padding e il border alla larghezza dei contenuti, toglie spazio ai contenuti La larghezza totale del box (bordi e padding compresi) è pari al valore assegnato alla proprietà width . PRIMA PARTE: IL BOX MODEL

LARGHEZZA E ALTEZZA Se non si specifica la larghezza ( width ) dei contenuti del box, questo si allargherà ( margini compresi ) per riempire tutto lo spazio a sua disposizione Se non si specifica la altezza ( height ) dei contenuti del box, questo si espanderà in verticale il minimo possibile per ospitare gli oggetti al suo interno La larghezza e la altezza del box possono essere espresse: In percentuali rispetto alle dimensioni del box contenitore Tramite le unità di miusra em , px , ( ex , pt , mm ) Tramite il valore auto PRIMA PARTE: IL BOX MODEL

LARGHEZZA E ALTEZZA Quando si specifica la larghezza di un box, questa diviene indipendente dalla dimensione effettiva dei suoi contenuti Internet Explorer per Windows in realtà allarga il box quando i suoi contenuti (ad esempio un’immagine o una stringa molto lunga) eccedono la larghezza del box È possibile anche indicare una larghezza minima e una larghezza massima tramite le proprietà min-width e max-width , ma Internet Explorer (Win/Mac) non supporta tali proprietà PRIMA PARTE: IL BOX MODEL

LARGHEZZA E ALTEZZA Quando si specifica l’altezza di un box questo non si espanderà per ospitare eventuali contenuti che richiedono maggiore spazio Per ottenere un simile comportamento esiste infatti la proprietà min-height , ma questa non è supportata né da Internet Explorer né da Safari. Esiste anche la proprietà max-height ma presenta le stesse incompatibilità di min-height A meno di altre dichiarazioni, IE/Win interpreta la proprietà height come fosse min-height Quando espressa in ‘ % ’, l’altezza di un box si riferisce all’altezza esplicitamente del box genitore, quando definita tramite la proprietà height PRIMA PARTE: IL BOX MODEL

I MARGINI I margini possono essere specificati: Individualmente A coppie (top/bottom, right/left) Globalmente Le unità di misura sono le stesse utilizzate per width e height ed hanno il medesimo comportamento, tranne auto Per specificare i singoli margini è possibile utilizzare le proprietà margin-top , margin-right , margin-bottom , margin-left Esempio: div { margin-left:1em; margin-top:2em } PRIMA PARTE: IL BOX MODEL

I MARGINI I quattro margini possono essere specificati anche attraverso la sintassi abbreviata : div { margin : 10px 5px 0 20px } I margini risultano specificati in senso orario : top , right , bottom , left . Attraverso la sintassi abbreviata, possiamo specificare anche le coppie di margin top / bottom e right / left : #id { margin : 1em 2em } Infine è possibile specificare un solo valore per tutti e quattro i lati contemporaneamente: .classe { margin: 1em } PRIMA PARTE: IL BOX MODEL

I MARGINI Quando impostati sul valore auto , i margini laterali determinano la centratura orizzontale del box a cui i margini sono applicati Purtroppo Internet Explorer non supporta questo tipo di centratura orizzontale, per cui richiede una tecnica differente Quando impostati sul valore auto , i margini superiore e inferiore assumono il valore che il browser assegna loro normalmente Nelle specifiche CSS non è prevista la centratura verticale dei blocchi PRIMA PARTE: IL BOX MODEL

I MARGINI Quando due o più margini sono adiacenti , ovverosia sono non separati da bordi o padding , questi collassano in un unico margine: <div id="box-1">…</div> <div id="box-2">…</div> #box-1 { margin: 1em } #box-2 { margin: 2em } PRIMA PARTE: IL BOX MODEL

I MARGINI I margini non collassano quando sono separati da un bordo o dal padding: <p>Lorem ipsum dolor …</p> <div><p>Quisque imperdiet …</p></div> div{border:solid;margin:0;} p{margin:1em 0;background:#CCC;color:#000;} div p{margin:1em;} PRIMA PARTE: IL BOX MODEL I margini di blocchi flottanti o dei blocchi posizionati in modo assoluto, non collassano in nessun caso.

IL PADDING Il padding è una sorta di imbottitura fra i contenuti e i bordi di un box Per specificare il padding si utilizza la stessa sintassi usata per i margini p {padding-left:0.5em; padding-right:0.5em} div { padding: 10px 20px 10px 20px } .classe { padding: 0.5em 0 } #id { padding: 5% } A differenza di margin , padding non ammette il valore auto e non ammette valori negativi Il padding di box adiacenti non collassa in nessun caso PRIMA PARTE: IL BOX MODEL

I BORDI I bordi sono caratterizzati da tre aspetti: stile spessore colore Questi aspetti possono essere definiti separatamente con: border-style ( border-top-style , …) border-width ( border-top-width , …) border-color ( border-top-color , …) Sono ammesse le dichiarazioni compatte per i quattro lati ( border-style: <stile> <stile> <stile> <stile> ) Per definire contemporaneamente i tre aspetti si usa la seguente sintassi: border-top: <spessore> <stile> <colore> border: <spessore> <stile> <colore> PRIMA PARTE: IL BOX MODEL

I BORDI Gli stili a disposizione sono : solid (linea continua singola); dotted (punteggiato); dashed (tratteggiato); double (doppia linea continua – è necessario uno spessore di almeno 3px per ottenere l’effetto desiderato); groove (scavato); ridge (effetto opposto a groove , il bordo appare sbalzato); inset (incastonato, l’effetto grafico equivale a un pulsante premuto); outset (effetto opposto a inset , l’effetto grafico equivale a un pulsante non ancora premuto). none (nessun bordo, valore predefinito); PRIMA PARTE: IL BOX MODEL

I BORDI Lo stile predefinito è none , dunque se non si specifica lo stile del bordo questo non sarà comunque mostrato Lo spessore del bordo può essere espresso attraverso le varie unità di lunghezza o attraverso i tre valori thin , medium , thick , le unità percentuali non sono ammesse Il colore, se non specificato, corrisponde a quello del testo usato nel box IE/Win non supporta bordi punteggiati da 1px PRIMA PARTE: IL BOX MODEL

OVERFLOW Come detto, è possibile specificare la larghezza e l’altezza di un box Quando i contenuti eccedono le dimensioni del blocco è possibile definire il comportamento del blocco stesso attraverso la proprietà overflow . La proprietà overflow può assumere i seguenti valori: visible (valore predefinito) hidden scroll auto PRIMA PARTE: IL BOX MODEL

OVERFLOW: VISIBLE Il valore visible indica che i contenuti vanno mostrati normalmente. I contenuti dovrebbero essere mostrati senza alterare la dimensione del contenitore Internet Explorer per Windows espande il contenitore fino alla dimensione richiesta dai contenuti div { width:200px;height:200px; overflow:visible; } PRIMA PARTE: IL BOX MODEL

OVERFLOW: HIDDEN Il valore hidden indica che i contenuti vanno tagliati e non devono apparire barre di scorrimento div { width:200px;height:200px; overflow:hidden; } PRIMA PARTE: IL BOX MODEL

OVERFLOW: SCROLL E AUTO Il valore scroll indica che i contenuti vanno tagliati , se necessario . Le barre di scorrimento devono comunque apparire. Il valore auto indica che i contenuti vanno tagliati , se necessario . Le barre di scorrimento devono apparire dove necessario . La dimensione del contenitore non è alterata PRIMA PARTE: IL BOX MODEL

PRIMA PARTE IL VISUAL FORMATTING MODEL

IL VISUAL FORMATTING MODEL È, assieme al box model , uno degli elementi fondamentali per la realizzazione di impaginazioni complesse Tratta essenzialmente del comportamento di un box in relazione agli altri box della pagina Definisce il posizionamento dei diversi box all’interno della pagina PRIMA PARTE: IL VISUAL FORMATTING MODEL

TIPI DI BOX Ci sono essenzialmente tre tipi di box: i box a livello di blocco i box in linea gli elementi di lista Altri tipi di box sono scarsamente supportati Ogni elemento appartiene ad uno dei tre tipi di box: Box a livello di blocco: <p> , <h1> , <div> , box anonimi Box in linea: <em> , <a> , <span> , box anonimi Elementi di lista: <li> PRIMA PARTE: IL VISUAL FORMATTING MODEL

TIPI DI BOX Il tipo di box può essere alterato attraverso la proprietà display la quale può assumere i seguenti valori: block inline list-item none : elimina il box dalla visualizzazione In realtà esistono numerosi altri valori possibili , ma sono tutti scarsamente supportati dai diversi browser PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX ANONIMI Ogni elemento della pagina, anche se non marcato , appartiene ad un tipo di box Si consideri il seguente esempio <div>i box anonimi non hanno dei marcatori propri.<p>Essi sono <em>generati</em> dai box loro contenitori.</p></div> La frase “ i box anonimi non hanno dei marcatori propri. ” normalmente sarebbe un box in linea, ma a causa della presenza del box a livello di blocco generato da <p> , essa diventa un blocco anonimo . Analogamente, “ Essi sono ” e “ dai box loro contenitori. ” diventano dei box in linea anonimi . PRIMA PARTE: IL VISUAL FORMATTING MODEL

IL FLUSSO I diversi box sono inseriti nel così detto “ flusso ” I box a livello di blocco (compresi i box anonimi) si dispongono uno di seguito all’altro in verticale , distanziandosi in base ai margini I box in linea (compresi i box anonimi) si dispongono orizzontalmente uno di seguito all’altro, su una o più linee a seconda dello spazio. La loro spaziatura orizzontale è determinata anche da margini, bordi e padding. La spaziatura verticale è determinata solo dall’interlinea ( line-height ) PRIMA PARTE: IL VISUAL FORMATTING MODEL p { border:1px solid #00C; } em{ margin:2em;border:1px solid #C00 } strong { border:1px solid #0C0; padding:0.7em; }

IL FLUSSO Nella regolazione del flusso di elementi in linea assume importanza la proprietà vertical-align Questa proprietà assume significato: Per le celle di una tabella Per gli elementi in linea Negli elementi in linea, vertical-align definisce l’allineamento verticale di un elemento in linea , all’interno di un’ altra linea di altezza superiore La proprietà vertical-align non definisce l’allineamento verticale del testo all’interno di box a livello di blocco PRIMA PARTE: IL VISUAL FORMATTING MODEL p#lh{ line-height:2em; } strong{ line-height:1em; vertical-align:top; } p#va { /* uso errato */ height:5em; vertical-align:bottom; }

POSIZIONAMENTO RELATIVO Il posizionamento relativo altera il normale flusso dei box a livello di blocco Attraverso la dichiarazione ‘ position:relative ’ è possibile definire un off-set per il posizionamento del blocco all’interno del flusso L’ off-set non altera il posizionamento dei blocchi che seguono e precedono nel flusso il blocco interessato L’ off-set è assegnato tramite le proprietà: top , right , bottom , left . PRIMA PARTE: IL VISUAL FORMATTING MODEL p#pr { position:relative; left:1em;top:1.5em; } p { padding:0.5em;margin:1em }

POSIZIONAMENTO ASSOLUTO Attraverso la dichiarazione position:absolute è possibile posizionare il box in un punto esatto della pagina indipendentemente dal flusso Un blocco posizionato in modo assoluto è del tutto estratto dal flusso e non ha alcuna influenza sulla posizione degli altri blocchi La posizione è stabilita attraverso le proprietà: top , right , bottom , left a partire da un determinato punto di riferimento iniziale Il valore di top indica la distanza tra il limite superiore del blocco posizionato e il limite superiore del padding del box di riferimento; lo stesso vale per le altre proprietà right , bottom e left . Il box di riferimento è il primo blocco progenitore posizionato in modo non assoluto o relativo , oppure l’elemento <html> PRIMA PARTE: IL VISUAL FORMATTING MODEL

POSIZIONAMENTO ASSOLUTO Un blocco posizionato in modo assoluto, se non si specifica un valore per la proprietà width , assume la dimensione necessaria a contenere gli elementi al suo interno Un box in linea posizionato in modo assoluto diviene un box a livello di blocco <p>(1) …</p> <p id="pa">(2) …</p> <p>(3) …</p> p#pa { position:absolute; right:5px; bottom:5px; margin:0; } p { margin:1em 10px; } PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI Un box flottante è posizionato all’interno del flusso in modo che i contenuti dei box successivi si dispongano attorno al box Un box flottante posiziona lungo il lato sinistro ovvero lungo il lato destro del box che lo contiene PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI Attraverso la proprietà float è possibile assegnare verso quale lato il box deve disporsi La proprietà float può assumere tre valori: left , right , none Un box flottante, se non si specifica un valore per la proprietà width , assume la dimensione necessaria a contenere gli elementi al suo interno PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI <p>(1) …</p> <p id="fl">(2) …</p> <p>(3) …</p> <p id="fr">(4) …</p> <p>(5) …</p> <p>(6) …</p> p#fl { float:left; width:200px; } p#fr { float:right; width:200px; } PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI I margini inferiore e superiore di un box flottante non collassano Il box flottante è eliminato dal normale flusso per cui non influenza la disposizione degli altri box, ma solo la disposizione dei contenuti PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI Blocchi flottanti consecutivi si dispongono uno di fianco all’altro Se lo spazio non è sufficiente a contenere i diversi blocchi, quelli in eccesso sono disposti al di sotto degli altri PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI Per interrompere l’effetto della proprietà float e ripristinare il normale flusso si usa la proprietà ‘ clear ’, che può assumere i valori: left , right , both , none p#fl { float:left; width:200px; } p#cl { clear: left } PRIMA PARTE: IL VISUAL FORMATTING MODEL

IL VISUAL FORMATTING MODEL: BOX FLOTTANTI Come detto in precedenza, i box flottanti non influenzano il normale flusso dei blocchi Un box flottante contenuto in un blocco non dovrebbe dunque condizionare in nessun modo l’altezza del blocco contenitore Nell’esempio, il blocco contenitore (un <div> ) ha una dimensione verticale determinata esclusivamente dal padding assegnato. PRIMA PARTE: IL VISUAL FORMATTING MODEL p#fl { float:left; width:200px; } div { padding: 1em }

BOX FLOTTANTI Internet Explorer per Windows ha un comportamento particolare ed errato : qualora la dimensione del blocco contenitore fosse assegnata , il blocco flottante contenuto ne influenzerebbe la dimensione p.fl { float:left;width:200px; } div { padding:1em;width:90%; } <div> <p class="fl">Atqui …</p> </div> <p>Si noti …</p> Questo comportamento induce spesso in errore chi non conosce il corretto comportamento dei blocchi flottanti. PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI Tuttavia, se anche il blocco contenitore è flottante , allora i blocchi flottanti contenuti ne influenzano l’altezza: p.fl { float:left; width:200px; } div { padding:1em; float:left; } PRIMA PARTE: IL VISUAL FORMATTING MODEL

IL VISUAL FORMATTING MODEL: BOX FLOTTANTI Un altro metodo che può essere utilizzato per consentire ad un blocco flottante di influenzare l’altezza del suo contenitore è inserire un blocco successivo con assegnata opportunamente la proprietà clear : p#fl { float:left; } p#cl { clear:left; } In questo caso, sarà il blocco non flottante a determinare l’altezza del blocco contenitore PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS Internet Explorer per Windows presenta altri difetti relativi ai box flottanti In alcuni casi questi difetti possono essere corretti attraverso delle regole da specificare solo* per Internet Explorer * Come specificare delle regole particolari per Internet Explorer/Windows sarà illustrato nella seconda parte del seminario PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS Internet Explorer raddoppia il margine laterale corrispondente a quello specificato per la proprietà float La soluzione consiste nell’aggiungere la dichiarazione display:inline alla regola per l’elemento flottante. Questa dichiarazione non ha alcuna influenza negli altri browser, dato che un box flottante è comunque un box a livello di blocco PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS Un secondo baco molto frequente è noto col nome di peek-a-boo bug (letteralmente baco del nascondino ). Il baco coinvolge solo la versione 6 di Internet Explorer per Windows ed ha come conseguenza la scomparsa del testo che affianca il box flottante. Tale testo ricompare (del tutto o in parte) selezionandolo col mouse, attivando la modalità di visualizzazione a tutto schermo, ridimensionando i caratteri. PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS Questo baco si presenta generalmente quando un box, con sfondo assegnato e altezza e larghezza non assegnate , contiene un box flottante, del testo che si dispone attorno a tale box senza superarlo in altezza e un box con assegnata la proprietà clear . La soluzione consiste nello specificare l’interlinea per uno dei blocchi progenitori ( <body> compreso) tramite la proprietà line-height . Ad esempio: body { line-height : 1.2em } PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS Quando un blocco che segue un box flottante ha una dimensione assegnata (altezza o larghezza), anziché posizionarsi indipendentemente dal box flottante, si affianca a quest’ultimo Inoltre il browser aggiunge , in modo arbitrario , 3 pixel al margine laterale opposto a quello specificato per la proprietà float PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS Si abbia un box flottante: si vuole affiancargli una seconda “ colonna ” semplicemente specificando il margine laterale del blocco successivo: #fl {float:left;width:200px;} #box {margin:0 0 0 200px;} I 3 pixel aggiunti arbitrariamente da IE/Win visti in precedenza indenteranno i contenuti della seconda colonna per tutta l’altezza della prima Il difetto non si presenterebbe se anche il secondo blocco fosse flottante PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS Per correggere il difetto bisogna ( solo per IE/Win ): Specificare la larghezza o l’ altezza della seconda colonna (vedi diapositiva 95 ) Ridurre il margine destro della prima colonna di 3 pixel Annullare il margine sinistro della seconda colonna #fl { float:left;width:200px; margin:0 -3px 0 0; } #box { margin:0 0 0 0; height:0; } PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI E LISTE Le liste hanno delle indentazioni generate da margini e padding predefiniti e marcatori esterni agli elementi della lista Le liste possono assumere un comportamento inaspettato se poste di seguito ad un box flottante In figura è rappresentata una lista preceduta da un box flottante: in rosso è evidenziato il bordo della lista, in verde il bordo degli elementi della lista Internet Explorer e Mozilla hanno delle impostazioni differenti per ottenere le indentazioni (per le liste ordinate e non ordinate IE usa margine sinistro della lista, mentre Mozilla utilizza il padding sinistro della lista). PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI E LISTE I marcatori di lista si dispongono dietro al box flottante Le indentazioni delle liste sono annullate Tutto questo è conseguenza del fatto che margini e padding con cui sono realizzate le indentazioni sono ininfluenti , poiché il testo delle liste si disporrà comunque di fianco al box flottante PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI E LISTE Per risolvere il problema occorre: Uniformare le modalità di indentazione dei diversi browser Impostare i margini della lista in modo tale che l’effetto del box flottante non annulli l’effetto dovuto a tali margini: .fl { float:left;width:200px; } ul, ol, dl { margin-left:200px; padding:0; } li{ margin-left:2em; } PRIMA PARTE: IL VISUAL FORMATTING MODEL

VISIBILITY La proprietà visibility permette di rendere invisibile un box A differenza di quanto accade con la dichiarazione display:none , il blocco continua ad influenzare il posizionamento degli altri elementi della pagina La proprietà visibility ammette due valori: visible hidden Al paragrafo è stata assegnata la dichiarazione visibility:hidden PRIMA PARTE: IL VISUAL FORMATTING MODEL

PRIMA PARTE CONTENUTI GENERATI

CONTENUTI GENERATI I CSS permettono un certo controllo sulla generazione automatica di contenuti. Si consideri il seguente esempio: <p>Questo documento è scritto in <acronym lang="en" title="Extensible HyperText Markup Language">XHTML</acronym> . Sul sito del <a href="http://w3.org/" hreflang="en">W3C</a> troverai maggiori dettagli</p> Sarebbe utile se nella pagina si potessero esplicitare i valori di title e di hreflang direttamente nel testo subito dopo l’acronimo e il collegamento PRIMA PARTE: CONTENUTI GENERATI

CONTENUTI GENERATI acronym [title]:after { content: " ("attr(title)")"; font-style:italic; color:#900; } a [hreflang]:after { content: " ["attr(hreflang)"]"; font-weight:bold; } PRIMA PARTE: CONTENUTI GENERATI

CONTENUTI GENERATI Putroppo Internet Explorer non è in grado di generare contenuti tramite CSS per cui questi ed altri meccanismi di generazione devono essere rimandati ad usi futuri Tuttavia è utile conoscere tale metodi che possono essere implementati già da adesso per i programmi utente che li supportano. I meccanismi di generazione sono molti e includono anche meccanismi di numerazione. Chi fosse interessato troverà maggiori dettagli al seguente indirizzo: http://www.w3.org/TR/CSS2/generate.html PRIMA PARTE: CONTENUTI GENERATI

COLORE IN PRIMO PIANO (TESTO E BORDI) Il colore del testo e dei bordi è definito tramite la proprietà color Il valore predefinito è quello ereditato dal testo del blocco padre Se non diversamente specificato, il colore per <body> (o meglio ancora <html>) è quello assegnato per il testo dalle impostazioni del sistema operativo o del browser, e non è necessariamente nero PRIMA PARTE: COLORI E SFONDI

SFONDI Lo sfondo può essere Trasparente Caratterizzato da una tinta piatta Riempito del tutto o in parte da una immagine Lo sfondo può essere gestito attraverso le seguenti proprietà: background-color background-image background-repeat background-attachment background-position background (riassume le diverse proprietà) PRIMA PARTE: COLORI E SFONDI

COLORE DELLO SFONDO La proprietà background-color può assumere i seguenti valori: transparent <colore> ( vedi diapositiva 49 ) Il valore predefinito è transparent A differenza di color , il valore per la proprietà background-color non è ereditato Se non diversamente specificato, lo sfondo della pagina è stabilito dalle impostazioni del sistema operativo o del browser e non è necessariamente bianco PRIMA PARTE: COLORI E SFONDI

COLORI DI TESTO E SFONDO DEFINITI SEPARATAMENTE Le proprietà color e background-color dovrebbero essere sempre specificate in coppia per evitare conflitti con le impostazioni predefinite In figura si vede il risultato ottenuto con una impostazione di Windows a contrasto elevato quando il testo è impostato sul blu ( #009 ) ma lo sfondo non è esplicitamente impostato PRIMA PARTE: COLORI E SFONDI

BACKGROUND-IMAGE Per inserire un’immagine di sfondo è sufficiente specificarne l’ url tramite la proprietà background-image : background-image:url(/im/sfondo.png); L’immagine sarà posizionata in alto a destra e sarà ripetuta verticalmente e orizzontalmente L’immagine scorrerà assieme al testo Per specificare che non dovrà essere usata nessuna immagine si utilizza il valore none (che è il valore predefinito): background-image:none; PRIMA PARTE: COLORI E SFONDI

BACKGROUND-REPEAT Tramite background-repeat è possibile stabilire se e come l’immagine sarà ripetuta background-repeat:repeat indica che l’immagine sarà ripetuta orizzontalmente e verticalmente (valore predefinito) background-repeat:repeat-x indica che l’immagine sarà ripetuta solo orizzontalmente background-repeat:repeat-y indica che l’immagine sarà ripetuta solo verticalmente background-repeat:no-repeat indica che comparirà una sola occorrenza dell’immagine PRIMA PARTE: COLORI E SFONDI

BACKGROUND-ATTACHEMENT Tramite background-attachment è possibile stabilire se l’immagine di sfondo sarà fissa ovvero scorrerà con la pagina background-attachment:scroll indica che l’immagine scorrerà assieme alla pagina (valore predefinito) background-attachment:fixed indica che l’immagine sarà fissata nella sua posizione iniziale indipendentemente dallo scorrimento della pagina (il funzionamento è garantito solo con <body> ) PRIMA PARTE: COLORI E SFONDI

BACKGROUND-POSITION Tramite background-position è possibile stabilire la posizione iniziale dell’immagine. I valori ammessi sono: Unità di lunghezza Unità percentuali Parole chiave: left | center | right per il posizionamento orizzontale top | center | bottom per il posizionamento verticale I valori vanno espressi in coppia e indicano rispettivamente il posizionamento orizzontale e verticale PRIMA PARTE: COLORI E SFONDI

BACKGROUND-POSITION Quando sono usate le unità di lunghezza, l’angolo superiore sinistro dell’immagine è posizionato relativamente all’angolo superiore sinistro dell’area del padding Quando sono utilizzate le unità percentuali si ha il seguente comportamento: Sia X% il valore percentuale per la posizione orizzontale Sia Y% il valore percentuale per la posizione verticale Il punto dell’immagine che si trova alle coordinate X% , Y% sarà posto in posizione X% , Y% dell’area del padding PRIMA PARTE: COLORI E SFONDI

BACKGROUND-POSITION PRIMA PARTE: COLORI E SFONDI background-position : 20% 25%;

BACKGROUND La proprietà background permette di definire con un’unica dichiarazione tutte le varie proprietà contemporaneamente Se non sono specificati alcuni valori, allora vengono implicitamente assegnati quelli predefiniti: body { background: #fff url(img.jpg) 100% 0 no-repeat fixed; } PRIMA PARTE: COLORI E SFONDI

CARATTERI E TESTO Per i caratteri sono disponibili le seguenti proprietà: font-family : specifica il tipo di carattere font-size : specifica la dimensione del carattere font-style : per specificare il corsivo font-weight : per specificare il grassetto font-variant : per specificare il maiuscoletto font : per specificare contemporaneamente le precedenti proprietà PRIMA PARTE: CARATTERI E TESTO

FONT-FAMILY Attraverso font-family è possibile specificare diversi tipi di carattere: body { font-family:verdana,arial,sans-serif; } Il carattere usato sarà il primo, fra quelli specificati, che risulta essere disponibile nel computer dell’utente È bene concludere l’elenco con una famiglia generica da usare nel caso in cui gli altri tipi di carattere non siano disponibili. Le famiglie generiche sono: serif (ad esempio il Times ) sans-serif (ad esempio il Verdana ) monospace (ad esempio il Courier ) PRIMA PARTE: CARATTERI E TESTO

FONT-SIZE Con font-size è possibile specificare la dimensione del carattere Possono essere utilizzate unità di lunghezza (sono consigliate quelle relative ad eccezione dei pixel) e unità percentuali È sconsigliato l’uso dell’unità px poiché con Internet Explorer per Windows il testo sarebbe non ridimensionabile Le unità relative e le percentuali si riferiscono alle dimensioni dell’elemento padre Usare le unità percentuali corrisponde ad utilizzare le unità em Internet Explorer ha un baco che sconsiglia l’uso delle unità em per body , poiché il ridimensionamento dei caratteri è eccessivo Possono inoltre essere utilizzati i valori visti nella diapositiva 45 ( xx-small … xx-large , larger e smaller ) PRIMA PARTE: CARATTERI E TESTO

FONT-STILE, FONT-WEIGHT, FONT-VARIANT Tramite font-style è possibile formattare il testo in corsivo. i valori ammessi sono: normal | italic Tramite font-weight è possibile formattare il testo in grassetto. i valori ammessi sono: normal | bold Sono ammessi altri valori ma sono scarsamente supportati dai programmi utente Tramite font-variant è possibile formattare il testo in maiuscoletto. i valori ammessi sono: normal | small-caps PRIMA PARTE: CARATTERI E TESTO

FONT Tramite font è possibile specificare tutte le proprietà del carattere contemporaneamente La sintassi ammessa è: font: <font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family> Non è necessario specificare tutte le proprietà Perché la dichiarazione sia valida è necessario specificare almeno <font-size> e <font-family> Assieme alla dimensione del testo è possibile specificare l’ interlinea tramite <font-size>/<line-height> Esempio: h1 { font : bold 2em/1.5em georgia, serif } PRIMA PARTE: CARATTERI E TESTO

ALLINEAMENTO DEL TESTO L’allineamento orizzontale del testo può essere stabilito tramite la proprietà text-align Valori ammessi: left | right | center | justify L’indentazione è stabilita tramite text-indent Sono ammesse unità di lunghezza o unità percentuali Esempio: p { text-indent: 2em } PRIMA PARTE: CARATTERI E TESTO

DECORAZIONE DEL TESTO Il testo può essere decorato con sottolineature (da usarsi essenzialmente con i link), sopralineature (da evitare), testo barrato (essenzialmente per il tag <del> ) Eventuali decorazioni vanno specificate tramite la proprietà text-decoration I valori ammessi sono: none | underline | overline | line-through PRIMA PARTE: CARATTERI E TESTO

SPAZIATURA FRA PAROLE E CARATTERI Lo spazio predefinito fra lettere e parole può essere modificato tramite le proprietà letter-spacing e word-spacing Sono ammesse tutte le diverse unità di lunghezza, tuttavia sono particolarmente indicate le unità em Il valore specificato può essere positivo o negativo Il valore specificato non indica la distanza fra le varie lettere o parole ma va a sommarsi alla distanza predefinita Esempio h1{ letter-spacing:0.2em;word-spacing:0.5em } PRIMA PARTE: CARATTERI E TESTO

CARATTERI BIANCHI E INTERRUZIONI DI LINEA Due o più spazi bianchi nel codice sorgente generalmente vengono assorbiti in un unico spazio bianco Le interruzioni di linea nel codice sorgente sono generalmente interpretate come uno spazio bianco Generalmente il browser crea una nuova linea quando il testo non entra nello spazio orizzontale a disposizione Tutti questi comportamenti possono essere regolati tramite la proprietà whitespace PRIMA PARTE: CARATTERI E TESTO

CARATTERI BIANCHI E INTERRUZIONI DI LINEA Sono ammessi i seguenti valori: normal : comportamento predefinito pre : spazi bianchi multipli non collassano in un unico spazio bianco. Eventuali interruzioni di linea sono generate da interruzioni di linea nel codice oppure dal tag <br /> nowrap : gli spazi bianchi collassano. Eventuali interruzioni di linea sono generate solo dal tag <br /> , e non anche dall’eccessiva lunghezza del testo inserito in una singola linea. PRIMA PARTE: CARATTERI E TESTO

TRASFORMAZIONI DEL CARATTERE Tramite la proprietà text-transform è possibile gestire i caratteri maiuscoli e minuscoli indipendentemente da quanto specificato nel codice Sono ammessi i seguenti valori: capitalize : la prima lettera di ogni parola è rappresentata in maiuscolo uppercase : tutte le lettere di ogni parola sono rappresentate in maiuscolo lowercase : tutte le lettere di ogni parola sono rappresentate in minuscolo none : nessuna variazione Esempio: h1 { font-variant: uppercase } h2 { font-variant: capitalize } PRIMA PARTE: CARATTERI E TESTO

PRIMA PARTE FORMATTAZIONE DELLE TABELLE

FORMATTAZIONE DELLE TABELLE Attraverso i CSS è possibile formattare efficacemente le tabelle I vari attributi delle tabelle hanno un corrispondenza con apposite proprietà CSS: cellpadding  padding cellspacing  border-spacing border  border width  width È bene specificare la dimensione del testo per le tabelle (ad esempio table{font-size:1em} ) poiché Internet Explorer tende a ignorare le impostazioni scelte per <body> PRIMA PARTE: FORMATTAZIONE DELLE TABELLE

BORDER-COLLAPSE I bordi della tabella e delle singole celle sono specificati separatamente: table { border:3px solid #900; } td,th { border:1px solid #900; } Automaticamente, il browser lascia dello spazio fra i bordi delle singole celle Per eliminare tale spazio si utilizza la proprietà border-collapse I valori ammessi sono: collapse | separate Quando i bordi sono separati, può essere utile non mostrare le celle vuote: table { empty-cells: hide; } PRIMA PARTE: FORMATTAZIONE DELLE TABELLE

RIGHE E COLONNE Specificando opportunamente i bordi è possibile ottenere una griglia solo orizzontale o solo verticale In tutti e due i casi è necessario impostare i bordi in modo che collassino table { border-collapse: collapse; } Griglia orizzontale td,th { border:1px #900; border-style: solid none; } Griglia verticale td,th { border:1px solid #900; } td{ border-style: none solid; } PRIMA PARTE: FORMATTAZIONE DELLE TABELLE

INTESTAZIONE E RIGHE L’intestazione della tabella, identificabile tramite il tag <thead> può essere formattata indipendentemente dal resto della tabella: thead { background:#ffc; color:#000; text-align:center; font-weight:bold; text-transform:uppercase; } Attraverso le classi è possibile evidenziare meglio le diverse righe alternandone il colore di sfondo tr.d {background:#eee;color:#000} tr.p {background:#fff;color:#000} PRIMA PARTE: FORMATTAZIONE DELLE TABELLE <table summary="..."> <thead><tr><th>…</th>…</tr></thead> <tbody> <tr class="d"><td>…</td>…</tr> <tr class="p"><td>…</td>…</tr> <tr class="d"><td>…</td>…</tr> <tr class="p"><td>…</td>…</tr> </tbody> </table>

SPAZIO FRA CELLE Lo spazio fra le celle può essere specificato attraverso la proprietà border-spacing La proprietà border-spacing ha effetto quando i bordi delle singole celle non collassano La proprietà border-spacing ammette come valori solo delle lunghezze: table { border-spacing:20px; } La proprietà border-spacing non è supportata da Internet Explorer PRIMA PARTE: FORMATTAZIONE DELLE TABELLE

PRIMA PARTE INTERFACCIA UTENTE

INTERFACCIA UTENTE I CSS sono in grado di interagire con l’interfaccia utente È possibile specificare l’aspetto del puntatore del mouse È possibile utilizzare i colori e gli sfondi impostati dall’utente per il sistema operativo È possibile utilizzare i caratteri impostati dall’utente per il sistema operativo PRIMA PARTE: INTERFACCIA UTENTE

PUNTATORE L’aspetto del puntatore può essere gestito attraverso la proprietà cursor I possibili valori sono: auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help In genere è meglio evitare di modificare l’aspetto predefinito del puntatore Un esempio di uso della proprietà cursor è il seguente: abbr { cursor : help } PRIMA PARTE: INTERFACCIA UTENTE

COLORI E SFONDI Alle proprietà color e background-color è possibile associare un valore preso direttamente dalle impostazioni del sistema operativo I possibili valori sono: ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText Esempio: p { color: WindowText; background-color: Window } PRIMA PARTE: INTERFACCIA UTENTE

CARATTERI Abbiamo visto che la proprietà font è una scorciatoia per definire contemporaneamente diverse proprietà dei caratteri Attraverso font è altresì possibile specificare i caratteri usati dal sistema operativo I possibili valori sono: caption | icon | menu | message-box | small-caption | status-bar Quando si usano questi valori, si specificano contemporaneamente tutte le proprietà del carattere Esempio: p { font : menu } PRIMA PARTE: INTERFACCIA UTENTE

MEDIA ALTERNATIVI È possibile specificare un particolare foglio di stile per diversi media: braille : dispositivi braille embossed : stampanti braille handheld : dispositivi palmari print : stampanti projection : proiettori screen : monitor dei computer speech ( aural ): browser vocali tty : dispositivi a carattere fisso (teletypes) tv : televisori e affini all screen è ben supportato, i palmari che supportano handheld leggono anche screen , print è supportato con alcuni limiti. speech ( aural ) non è ben supportato PRIMA PARTE: MEDIA ALTERNATIVI

MEDIA ALTERNATIVI Per specificare il media a cui associare il foglio di stile è possibile utilizzare tre metodi: La regola @import : @import url(schermo.css) screen; @import url(stampante.css) print; Questo metodo non è supportato da Internet Explorer La regola @media : @media print { body { font:100% Arial, sans-serif } } @media screen { body { font:12pt Times, serif } } Tag <link /> nel codice XHTML: <link rel="stylesheet" type="text/css" media="print" href="p.css" /> <link rel="stylesheet" type="text/css" media="screen" href="s.css" /> PRIMA PARTE: MEDIA ALTERNATIVI

SECONDA PARTE CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS

IL PROBLEMA Quando abbiamo visto il box model, si è accennato al fatto che Internet Explorer per Windows non segue esattamente le indicazioni del W3C IE5.x aggiunge padding e bordi sottraendoli allo spazio specificato dalla proprietà width SECONDA PARTE: CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS

LE SOLUZIONI Per ovviare al problema ci sono essenzialmente due metodi Si evita di specificare contemporaneamente le proprietà width e padding e/o border : Dove possibile si cerca di sfruttare due box contenuti uno nell’altro (ad esempio un <div> e i paragrafi al suo interno) Si specifica separatamente il valore di width per IE/Win 5.x e per gli altri browser, ad esempio attraverso i Commenti condizionali *: <link rel="stylesheet" href="css/standard.css" type="text/css" />  * Rif: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp SECONDA PARTE: CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS

SECONDA PARTE LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI

STRUTTURA DELLA PAGINA Sfruttando il comportamento dei box flottanti che si dispongono uno di fianco all’altro fin che c’è spazio a disposizione è possibile realizzare layout a colonne La pagina ha la seguente struttura: <body> <div id="pagina"> <div id="testa">…</div> <div id="c1">…</div> <div id="c2">…</div> <div id="c3">…</div> <div id="piede">…</div> </div> </body> SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI

LE TRE COLONNE Le istruzioni CSS essenziali sono: #pagina{ width:700px; } #c1{ float:left; width:200px; } #c2{ float:left; width:300px; } #c3{ float:left; width:200px; } #piede{ clear:both; width:100% ; } SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI width:100% corregge un baco di Internet Explorer

SFONDO DELLE COLONNE Le tre colonne terminano là dove terminano i loro contenuti e non c’è modo per imporre che le tre colonne si sviluppino in altezza fino al piè di pagina #c1 { background: #99C; } #c2 { background: #FFC; } #c3 { background: #CC9; } SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI

SFONDO DELLE COLONNE È possibile superare il problema impostando un’ immagine di sfondo per #pagina tale che, se ripetuta verticalmente, disegni le tre colonne: #pagina{ background:#FFF url(3COLFIX.gif) 0 0 repeat-y; } SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI

SFONDO DELLE COLONNE È ora necessario impostare lo sfondo per l’intestazione e il piè di pagina: #piede{background:#CCC} #testa{background:#CCC} SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI

SPAZIO FRA LE COLONNE Per distanziare il testo dalle colonne non occorre impostare il padding delle colonne stesse, con conseguenti problemi di interpretazione del box model La distanza sarà ottenuta impostando il padding dei paragrafi contenuti nelle colonne stesse: #c1 p, #c2 p, #c3 p, #piede p { margin:0; padding:0.5em 1em; } #c1, #c2, #c3, #piede { padding:0.5em 0; } h1 { font-size:1.2em; margin:0; padding:1em } SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI

POSIZIONE DELLE COLONNE Le colonne appaiono su schermo, da sinistra a destra, nell’ordine in cui sono state inserite nel codice XHTML Questo non è un vincolo, dato che è possibile traslare le singole colonne tramite la dichiarazione position:relative SECONDA PARTE: LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI #c2 { position:relative; left:200px; } #c3 { position:relative; left:-300px; }

SECONDA PARTE LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI

STRUTTURA DELLA PAGINA La pagina ha la seguente struttura: <div id="pagina"> <div id="aux"> <div id="testa"></div> <div id="c1"></div> <div id="c2"></div> <div id="c3"></div> <div id="piede"></div> </div> </div> A differenza del layout a larghezza fissa, in questo caso è necessario un contenitore ausiliario ( <div id="aux"> ) il cui scopo è la gestione degli sfondi per le colonne SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI

LE TRE COLONNE Le istruzioni CSS essenziali sono: body { margin:0; padding:0 5%;} #pagina { width:100%;} #aux { width:100%;} #c1 { float:left; width:23%; margin: 0 1%;display:inline } #c2 { float:left; width:48%; margin: 0 1%;display:inline } #c3 { float:right; width:23%; margin: 0 1% 0 0;display:inline } #piede { clear:both;width:100% } SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI

LE TRE COLONNE La larghezza del layout non è affidata alla proprietà width di #pagina ma al padding impostato per <body> La larghezza totale delle tre colonne non raggiunge il 100% dello spazio disponibile, poiché ciò potrebbe comportare problemi di arrotondamento ( dipendendo dalle dimensioni della finestra ) nel passaggio %  px SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI

LE TRE COLONNE Un esempio di problemi con l’arrotondamento è il seguente: si ipotizzi che la larghezza di #pagina sia pari a 802px e che la larghezza di #c1 , #c2 e #c3 sia pari, rispettivamente, a 35% , 50% , 25% . Gli elementi #c1 e #c3 dovrebbero dunque essere larghi 802 ×25÷100= 200.5px , mentre l’elemento #c2 dovrebbe essere largo 802×50÷100= 401px Poiché il pixel non può essere spaccato in due, elementi #c1 e #c3 sarebbero larghi non 200.5px ma 201px . La larghezza totale delle tre colonne sarebbe dunque pari a 201+401+201=803px , la quale supererebbe di 1px la larghezza di #pagina , per cui la terza colonna dovrebbe disporsi sotto le prime due SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI

LE TRE COLONNE La soluzione proposta consiste nel rendere la larghezza totale delle colonne pari al 99%, lasciando un franco pari all’1% per assorbire eventuali errori di arrotondamento Il franco si ha fra #c2 e #c3 , rendendo flottanti le due colonne a sinistra e a destra e regolando larghezze e margini in modo tale che ci sia una distanza pari all’1% fra #c2 e #c3 SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI

SFONDO DELLE COLONNE Per realizzare lo sfondo delle tre colonne non è possibile usare una sola immagine poiché la larghezza delle colonne non è più nota a priori Saranno dunque utilizzate due immagini separate che saranno impostate come sfondo di #pagina e #aux SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI

SFONDO DELLE COLONNE Ricordando che uno sfondo posizionato con le percentuali si dispone in modo tale che il punto dell’immagine che si trova alle coordinate X% , Y% sarà posto in posizione X% , Y% dell’area del padding del suo contenitore, sarà sufficiente realizzare due immagini, la cui larghezza sia tale da coprire le attuali risoluzioni supportate (ad esempio 4000px ) la cui colorazione sia tale da risultare opache per la percentuale occupata dalla colonna e trasparenti per la restante parte. Si è scelto di avere colonne laterali larghe il 25% dello spazio totale L’immagine per la prima colonna sarà opaca per i primi 1000px (in orizzontale) e trasparente per i restanti 3000px (il rapporto è dunque 25% ) L’immagine per la prima colonna sarà trasparente per i primi 3000px (in orizzontale) e opaca per i restanti 1000px (il rapporto è dunque 75% ) SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI

SFONDO DELLE COLONNE Il codice da utilizzare per impostare gli sfondi è il seguente: #pagina { background:#FFC url(3COLLIQ.SX.gif) 25% 0 repeat-y; } #aux { background:transparent url(3COLLIQ.DX.gif) 75% 0 repeat-y; } Si noti che il colore di sfondo di #pagina fornisce lo sfondo per la colonna centrale, mentre il colore di sfondo di #aux deve essere trasparente per consentire la visualizzazione dello sfondo di #pagina SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI

SPAZIO FRA LE COLONNE La distanza fra il testo e i bordi delle colonne è il risultato dell’impostazione dei margini con i quali è stata realizzata la struttura a tre colonne SECONDA PARTE: LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI #piede { background:#CCC; } #testa { background:#CCC; } h1 { font-size:1.2em; margin:0; padding:1em } #c1 p, #c2 p, #c3 p { margin:0; padding:0.5em 0; } #piede p { margin:0; padding:0.5em 1em; } #c1, #c2, #c3, #piede { padding:0.5em 0; }

SECONDA PARTE LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO

LAYOUT A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO Realizzare layout a colonne attraverso blocchi posizionati in modo assoluto è relativamente semplice ma implica un forte vincolo Se si vuole gestire con efficacia il piè di pagina è necessaria una colonna che sia sempre e a priori la più lunga delle altre Se si vuole gestire lo sfondo delle colonne indipendentemente dall’altezza delle colonne è necessaria una colonna che sia sempre e a priori la più lunga delle altre SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO

LAYOUT A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO Il vincolo è dovuto al fatto che i blocchi posizionati in modo assoluto non possono in nessun modo controllare la posizione del piè di pagina (che nel caso di blocchi flottanti era controllato tramite la proprietà clear ) Inoltre i blocchi posizionati in modo assoluto non possono determinare l’altezza del loro contenitore, usandone lo sfondo per realizzare le colonne Una colonna a priori più alta delle altre potrebbe essere però posizionata in modo statico e superare i problemi suddetti Tramite i margini laterali, la colonna statica potrebbe lasciare lo spazio per il posizionamento dei blocchi assoluti SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO

LAYOUT A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO Vedremo ora come realizzare un layout a colonne con blocchi posizionati in modo assoluto Si assume che non interessi avere il piè di pagina né che interessi gestire gli sfondi indipendentemente dall’altezza delle colonne Non ci sono differenze degne di nota fra layout liquidi o a larghezza fissa La struttura della pagina sarà la seguente: <body> <div id="testa"></div> <div id="corpo"> <div id="c1"></div> <div id="c2"></div> <div id="c3"></div> </div> </body> SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO

LE TRE COLONNE Le istruzioni CSS essenziali sono: #corpo { width:100%; position: relative; } #c1 { position:absolute; top:0; left:0; width:25%; } #c2 { position:absolute; top:0; left:25%; width:50%; } #c3 { position:absolute; top:0; left:75%; width:25%; } SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO

LE TRE COLONNE Il blocco div#corpo è posizionato in modo relativo, in modo da essere il riferimento per il posizionamento dei tre blocchi in esso contenuti, div#c1 , div#c2 e div#c3 , posizionati in modo assoluto Per div#corpo è stata specificata una larghezza pari al 100% (questo in teoria non occorre ma corregge un difetto di IE/Win) I blocchi hanno una larghezza totale pari al 100%. Ciò non costituisce un problema poiché ognuno di essi si comporta indipendentemente dagli altri La larghezza dei blocchi e il valore della proprietà left sono tali da permettere il posizionamento dei blocchi senza sovrapposizioni SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO

LE TRE COLONNE A questo punto è possibile aggiungere dei bordi senza preoccuparsi del box model (entro certi limiti) poiché eventuali aggiunte alla larghezza dei box sono “assorbite” dal posizionamento assoluto Per distanziare il testo dalle colonne si può ancora ricorrere al metodo del padding nei paragrafi SECONDA PARTE: LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO #c1{ border-right:1px dotted #900; } #c2{ border-right:1px dotted #900; }

SECONDA PARTE CENTRARE UN BOX NELLA PAGINA

CENTRARE UN BOX NELLA PAGINA Uno dei problemi che spesso si incontrano coi CSS è l’ apparente difficoltà di centrare un box nella pagina o in un box contenitore In base alle specifiche CSS, per posizionare un blocco al centro della pagina è sufficiente specificare il valore auto per i margini laterali: #box { margin : 1em auto 1em auto } Purtroppo, le vecchie versioni di Internet Explorer per Windows hanno un modo diverso di centrare il box che richiede di impostare al valore center la proprietà text-align SECONDA PARTE: CENTRARE UN BOX NELLA PAGINA

CENTRARE UN BOX NELLA PAGINA Questa originalità di Internet Explorer ha però un duplice effetto negativo: È necessario utilizzare del codice ridondante per supportare le vecchie versioni di Internet Explorer Chi affronta i CSS le prime volte, può “istintivamente” provare a centrare un box attraverso la dichiarazione text-align:center . Dato che IE/Win (versione 6 e precedenti) risponderà secondo le aspettative di chi realizza il codice, in quest’ultimo spesso nasce una duplice idea errata: « i box si centrano con text-align , ma Mozilla non è in grado di centrare il box » Si noti che la proprietà text-align è specifica per il testo, dunque il comportamento di Internet Explorer è del tutto arbitrario SECONDA PARTE: CENTRARE UN BOX NELLA PAGINA

CENTRARE UN BOX NELLA PAGINA In pratica, per centrare un box nella pagina è necessario il seguente codice: body { text-align : center; } #box { margin : auto; text-align : left; } Se il box da centrare ha una larghezza espressa in percentuali può essere sufficiente agire sui margini laterali del box o il padding del box contenitore: body { padding : 10% 0 } box { /* non è necessario impostare la larghezza */ } ovvero box { width : 80%; margin : auto 10% } SECONDA PARTE: CENTRARE UN BOX NELLA PAGINA

SECONDA PARTE FORMATTARE LE LISTE DI LINK  MENU

FORMATTARE LE LISTE DI LINK  MENU Uno metodi migliori per realizzare un menu in XHTML è utilizzare liste di collegamenti: <ul> <li><a href="…">Collegamento 1</a></li> <li><a href="…">Collegamento 2</a></li> <li><a href="…">Collegamento 3</a></li> <li><a href="…">Collegamento 4</a></li> <li><a href="…">Collegamento 5</a></li> </ul> Tuttavia, il classico aspetto delle liste rende poco “attraente” un menu realizzato in questo modo SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

FORMATTARE LE LISTE DI LINK  MENU Per ottenere un menu verticale dall’aspetto più accattivante a partire da una lista, come prima cosa dovremo letteralmente eliminare la formattazione “a lista” ul { margin:0; padding:0; } li { display:inline; } SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

FORMATTARE LE LISTE DI LINK  MENU Quando si usano i CSS per gestire un menu di collegamenti è possibile sfruttare le pseudo-classi a:link , a:visited , a:hover , a:focus , a:active per creare effetti roll-ove r senza utilizzare il javascript , con ovvi vantaggi Avendo eliminato le varie proprietà della lista, per fornire l’aspetto desiderato al menu dovremo agire direttamente sui tag <a> e le loro pseudo-classi SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

MENU VERTICALI Per realizzare menu verticali, oltre alle regole precedentemente viste, sono utili le seguenti ulteriori regole: a { display:block; padding:5px 1em } Tramite display:block i link diventano dei blocchi, dunqe sono cliccabili per tutta la loro area Tramite il padding verticale si aumenta l’area cliccabile verticale a:link,a:visited{text-decoration:none} Spesso nei menu la sottolineatura dei link non è necessaria, anzi risulta spesso antiestetica ed evidenzia un’area inferiore a quella effettivamente attivabile SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

MENU VERTICALI: ICONA AL PASSAGGIO DEL MOUSE ul#tipo1 { border:1px solid #900;border-top:none; } #tipo1 a { border-top:1px solid #900; } #tipo1 a:link, #tipo1 a:visited { background:#FFC;color:#000; } #tipo1 a:hover, #tipo1 a:focus, #tipo1 a:active { background:url(freccetta.gif) #EEE right center no-repeat;color:#900; } SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

MENU VERTICALI: ICONA AL PASSAGGIO DEL MOUSE I collegamenti appaiono in un elenco verticale separati da delle linee orizzontali I collegamenti sono di colore nero su sfondo ocra Al passaggio del mouse, lo sfondo diventa grigio chiaro, il testo si accende di colore rosso e sulla sinistra appare un’icona rappresentante un freccia L’immagine non viene pre-caricata Per pre-caricare l’immagine ed evitare un piccolo ritardo al momento della sua prima comparsa è sufficiente porla come sfondo di ul#tipo1 : ul#tipo1 { background: url(freccetta.gif) no-repeat; } Così facendo, l’immagine sarà caricata poiché deve essere posta come sfondo di ul#tipo1 . Tuttavia l’immagine sarà coperta dallo sfondo dei link stessi SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

MENU VERTICALI: EFFETTO PULSANTE #tipo2{ border:1px solid #333; } #tipo2 a:link,#tipo2 a:visited{ border:3px solid #EEE; background:#EEE; color:#000; } #tipo2 a:hover,#tipo2 a:focus{ border:3px outset #999; background:#FFF; color:#900; outline-style: none; } #tipo2 a:active{ border:3px groove #333; background:#DDD; color:#f00; } SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU click*

MENU VERTICALI: EFFETTO PULSANTE In questo caso, sono stati sfruttati tre differenti tipi di bordo per avere: uno stato di riposo uno stato di selezione uno stato di attivazione Al passaggio del mouse, tramite la dichiarazione border:3px outset #999 , il collegamento assumerà l’aspetto di un pulsante Al momento dell’attivazione del collegamento, tramite la dichiarazione border:3px groove #333 , il collegamento assumerà l’aspetto di un pulsante premuto Agendo sul colore dei link e sugli sfondi, l’effetto è completato e perfezionato Si noti che a riposo il bordo è piatto e dello stesso colore dello sfondo ( border:3px solid #EEE ). Ciò è necessario per evitare che la comparsa di bordi prima inesistenti provochi movimenti nelle voci del menu Si noti infine che in luogo di agire sullo stile del bordo, è possibile agire sul colore dei singoli lati di un bordo piatto, così da avere più controllo sul risultato finale SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

MENU ORIZZONTALE Per realizzare menu orizzontali possono essere utilizzati diversi metodi come ad esempio: tag <a> flottanti tag <a> posizionati in modo assoluto tag <a> lasciati come elementi in linea Il metodo più diffuso e forse meno problematico è quello di utilizzare tag <a> flottanti SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

MENU ORIZZONTALE Il codice HTML utilizzato è il seguente: <ul id="menu"> <li id="primo"><a href="#">Collegamento 1</a></li> <li><a href="#">Collegamento 2</a></li> <li><a href="#">Collegamento 3</a></li> <li><a href="#">Collegamento 4</a></li></li> </ul> Al primo elemento della lista è assegnato l’identificatore primo per una più semplice gestione dei bordi SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

MENU ORIZZONTALE Il codice CSS utilizzato è il seguente: ul#menu { margin:0;padding:0; } #menu li { display:inline; } ul#menu { border-top:1px solid #900;border-bottom:1px solid #900; color:#000;background:#eef; float:left;width:100%; } #menu a { float:left; padding:5px 15px; border-right:1px solid #900; } #menu #primo a{ border-left:1px solid #900; } #menu a:link,#menu a:visited{ color:#444; background:#eef; } #menu a:hover,#menu a:focus,#menu a:active{ background:#900; color:#FFF; } SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

MENU ORIZZONTALE Innanzitutto si inseriscono le regole per azzerare la normale formattazione della lista I collegamenti associati al menu sono flottanti per cui si dispongono uno di fianco all’altro Tramite i bordi laterali, i collegamenti sono separati tra loro Per contenere i collegamenti flottanti è bene che il box realizzato dal tag <ul> sia anch’esso flottante. Bisognerà di conseguenza impostarne la larghezza. I bordi superiori e inferiori sono realizzati tramite il box realizzato dal tag <ul> Al passaggio del mouse si ha un effetto roll-over agendo su colore e sfondo dei collegamenti SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

MENU ORIZZONTALE Se le diverse voci del menu sono associate diverse aree del sito può essere utile una soluzione del tipo “ a scheda ”: <li class="on">…</li> #menu li.on a:link, #menu li.on a:visited, #menu li.on a:hover, #menu li.on a:focus, #menu li.on a:active{ padding-bottom:6px; background:#FFF;color:#000; margin-bottom: -1px; position: relative;z-index: 10; } SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU class="on"

MENU ORIZZONTALE Rispetto alle altre linguette, quella attiva ha il valore del padding inferiore impostato a 6px anziché 5px . Il pixel in eccesso viene gestito tramite il margine inferiore Il colore dello sfondo è il medesimo dello sfondo della pagina per avere l’effetto a linguetta Il posizionamento relativo e lo z-index servono a gestire correttamente le sovrapposizioni SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

SECONDA PARTE TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)

TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR) In alcuni casi può essere utile gestire loghi, banner e grafica in generale sia in forma testuale sia in forma grafica Esistono tecniche CSS che permettono di sostituire un testo con una immagine senza ricorrere all’apposito tag <img /> Le diverse tecniche consistono nello sfruttare gli sfondi per inserire le immagini e nel nascondere il testo in diversi modi SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)

TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR) Si vuole ottenere il seguente risultato: convertire una stringa in una immagine tramite CSS SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR) ORGANIZZAZIONE LAICA PER LA SALVAGUARDIA DEL PANDA

TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR) <h1><span>ORGANIZZAZIONE LAICA PER LA SALVAGUARDIA DEL PANDA</span></h1> body{ position : relative; z-index : 1; } h1{ width : 130px; height : 150px; background : url(panda.jpg); font-size : 70% } h1 span { position : relative; z-index : -1; } SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)

TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR) La larghezza del box generato da <h1> è pari alla dimensione dell’immagine ( 130 ×150px ) Per nascondere il testo, si porta l’elemento <span> dietro <h1> attraverso la proprietà z-index Essendo lo spazio occupato dal testo maggiore dello spazio a disposizione, occorre ridurre la dimensione del testo SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)

TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR) Qualora l’immagine non fosse caricata, il testo ritornerebbe visibile Il testo assolve dunque il compito di testo alternativo A differenza di una stringa contenuta nell’attributo alt , il testo può essere marcato tramite XHTML SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)

TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR) Nel caso ci fosse anche un collegamento interno al tag <h1> tutto sarebbe altrettanto semplice: <h1> <a href="…"><span> … </span></a> </h1> Si può tuttavia utilizzare <h1> come fosse <body> e <a> come fosse <h1> L’immagine di sfondo è applicata all’elemento <a> anziché all’elemento <h1> L’oggetto con z-index=1 è l’elemento <h1> anziché l’elemento <body> È bene eliminare anche la sottolineatura del collegamento poiché potrebbe comunque apparire sopra l’immagine, essendo l’elemento <span> interno al link a essere posto dietro l’immagine e non il link stesso h1{ width:130px; height:150px; font-size: 70%; z-index: 1; position: relative; } h1 span { z-index: -1; position: relative; } h1 a{ height:100%; width:100%; display:block; text-decoration: none; background:url(panda.jpg); } SECONDA PARTE: TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)

ROLLOVER DI IMMAGINI SENZA JS E SENZA PRELOAD Associando le tecniche FIR ai collegamenti, è possibile sfruttare le pseudo classi :hover ecc. per creare degli effetti rollover che non richiedono javascript Inoltre si può evitare di caricare in anticipo i diversi stati dell’immagine sfruttando una sola immagine per i diversi stati Si voglia ad esempio creare un effetto roll-over col logo della OLSP In una unica immagine inseriamo due diversi stati della medesima figura (in B&N e a colori ) SECONDA PARTE: ROLLOVER DI IMMAGINI SENZA JS E SENZA PRELOAD

ROLL-OVER DI IMMAGINI SENZA JS E SENZA PRELOAD h1{ width:130px; height:150px; font-size: 70%; z-index: 1; position: relative; } h1 span { z-index: -1; position: relative } h1 a{ height:100%; width:100%; display:block; text-decoration: none; background:url(panda2.jpg); } h1 a:hover,h1 a:focus, h1 a:active { background-position: 0 -150px; } SECONDA PARTE: ROLL-OVER DI IMMAGINI SENZA JS E SENZA PRELOAD

SECONDA PARTE NASCONDERE I CONTENUTI IN MODO ACCESSIBILE

NASCONDERE I CONTENUTI IN MODO ACCESSIBILE Quando si realizza una pagina XHTML + CSS è bene specificare meccanismi di navigazione interna, utili in caso di navigazione con programmi utente dalle ridotte capacità grafiche Questi meccanismi di navigazione, tuttavia, potrebbero essere inutili o poco chiari a chi usasse programmi utente in grado di interpretare a pieno i CSS Il modo più banale di nascondere tali contenuti via CSS è usare la dichiarazione display : none associata ad un’apposita classe (ad es. .nascosto ): <h1>ORGANIZZAZIONE …</h1> <p class="nascosto"> [<a href="#SKIP" accesskey=".">Salta il menu di navigazione</a>] </p> <ul> <li><a href="#">…</a></li> … </ul> <p><a id="SKIP"></a>Lorem ipsum…</p> SECONDA PARTE: NASCONDERE I CONTENUTI IN MODO ACCESSIBILE

NASCONDERE I CONTENUTI IN MODO ACCESSIBILE Tale regola potrebbe essere interpretata anche da screen reader Tali meccanismi potrebbero essere associati ad access-key che utili indipendentemente dal programma utente Un metodo migliore per nascondere i contenuti potrebbe dunque essere quello di seguito indicato: .nascosto{ width:0;height:0;overflow:hidden; position:absolute;top:-1000em; } Le prime tre dichiarazioni dovrebbero essere sufficienti a generare un box dall’ingombro nullo il cui contenuto è del tutto invisibile Tuttavia alcuni browser richiedono anche le ultime due dichiarazioni che portano il box totalmente al di fuori dalla finestra del browser SECONDA PARTE: NASCONDERE I CONTENUTI IN MODO ACCESSIBILE

SECONDA PARTE FORMATTARE I MODULI

FORMATTARE I MODULI Nel formattare i moduli sarebbe possibile utilizzare i vari attributi per la gestione dei diversi tipi di campi: <input type=" text " /> <input type=" password " /> <input type=" radio " /> <input type=" submit " /> … Attraverso un selettore del tipo input[type='...'] permetterebbe di distinguere i diversi elementi senza ricorrere a classi o attributi id SECONDA PARTE: FORMATTARE I MODULI

FORMATTARE I MODULI Tra le cose più utili nella formattazione di un modulo tramite i CSS è l’allineamento fra etichette e campi del modulo Fra i vari metodi possibili due sono i metodi più semplici: allineamento tramite box flottanti allineamento tramite i margini La struttura XHTML di riferimento è la seguente: <p><label …>…</label> <input type="text" … /></p> <p><label …>…</label> <input type="text" … /></p> SECONDA PARTE: FORMATTARE I MODULI

FORMATTARE I MODULI Tramite box flottanti #f1 label { display:block;float:left; width:7em; text-align:right; padding-right:.5em; } Tramite i margini #f2 label { display:block; line-height:1.4em; height:1.4em; width:7em; text-align:right; } #f2 input { margin:-1.4em 0 0 8em; display: block !important; display: inline; } SECONDA PARTE: FORMATTARE I MODULI L’etichetta ha una larghezza e un’altezza noti a priori Il campo, tramite i margini , è spostato in modo da affiancare l’etichetta Hack: Mozilla vuole display:block, ma con IE si avrebbe un errore di formattazione

SECONDA PARTE BANNER ESPANDIBILI CON I CSS

BANNER ESPANDIBILI CON I CSS Ultimamente si sono visti diversi siti internet con banner pubblicitari che si espandono al passaggio del mouse Tramite CSS ciò può essere realizzato tramite le solite pseudo-classi del tag <a> , senza Javascript Le soluzioni più semplici sono almeno 2: Tecniche FIR, in cui lo stato :hover permette uno spazio maggiore per mostrare lo sfondo/banner per intero Tramite il tag <img> e la proprietà overflow:hidden del tag <a> SECONDA PARTE: BANNER ESPANDIBILI CON I CSS

BANNER ESPANDIBILI CON I CSS È didatticamente più interessante il secondo metodo: <div id="banner"> <a href="…"><img src="b.jpg" … /></a> </div> <p>Lorem ipsum …</p> Poiché il blocco contenente l’immagine ( <a> ) dovrà espandersi sopra al testo, è opportuno che questo sia posizionato in modo assoluto e che esista un contenitore di riferimento (anche per la posizione del testo sottostante): div#banner SECONDA PARTE: BANNER ESPANDIBILI CON I CSS

BANNER ESPANDIBILI CON I CSS #banner { width:468px; height:60px; position:relative; } #banner a:link, #banner a:visited { width:468px;height:60px; position:absolute; top:0;left:0;z-index:100; overflow:hidden; } #banner a:hover, #banner a:focus { height:240px; } SECONDA PARTE: BANNER ESPANDIBILI CON I CSS

BANNER ESPANDIBILI CON I CSS Il contenitore ha le dimensioni del banner ridotto ed è posizionato in modo relativo per fornire un riferimento al posizionamento assoluto del link Il link è posizionato in modo assoluto così da potersi espandere liberamente Quando il link non è attivato la sua dimensione è pari a quella del banner ridotto. Attraverso la dichiarazione overflow:hidden l’immagine al suo interno (più alta di un fattore 4) viene mostrata solo parzialmente Quando il collegamento è attivato, l’altezza del link diventa tale da mostrare il banner per intero SECONDA PARTE: BANNER ESPANDIBILI CON I CSS

SECONDA PARTE EMULARE I FRAME CON I CSS

EMULARE I FRAME CON I CSS Tramite CSS è possibile riprodurre un’impaginazione simile a quella che si otterrebbe con i frame La cosa sarebbe relativamente semplice con la dichiarazione position:fixed, che però non è supportata da Internet Explorer SECONDA PARTE: EMULARE I FRAME CON I CSS

FRAME VERTICALI <div id="fix"> <ul> … </ul> </div> <div id="frame"> <p>Lorem ipsum …</p> </div> html,body{ height:100%; margin:0;padding:0; } #fix { position:fixed; width:160px; height:100%; overflow:auto; padding:0 20px; } #frame { position:absolute; left:200px;top:0; padding:0 20px } SECONDA PARTE: EMULARE I FRAME CON I CSS L’altezza di <html> e <body> è 100% per regolare l’altezza del blocco fisso Il blocco fisso utilizza la proprietà overflow per mostrare i contenuti che non entrassero interamente nella finestra Il secondo blocco è posizionato in modo assoluto per essere indipendente dal blocco fisso

FRAME VERTICALI Per Internet Explorer è necessario aggiungere le seguenti regole: html,body{ overflow:hidden; } #fix{ width /**/:200px; position:absolute; top:0;left:0; } #frame{ position:static; margin-left: 200px; height:100%; overflow:auto; } La prima regola elimina la barra di scorrimento della finestra del browser La seconda regola posiziona il primo blocco in modo assoluto. Sono ereditate le proprietà sull’altezza e sulla barra di scorrimento. La larghezza è regolata in base al box model errato, ma solo per IE5.x (grazie al commento fra dichiarazione e valore) La terza regola rende statico il terzo blocco che gestirà autonomamente un’eventuale barra di scorrimento SECONDA PARTE: EMULARE I FRAME CON I CSS

FRAME ORIZZONTALI <div id="top"> … </div> <div id="frame"> <p>Lorem ipsum …</p> </div> html,body{ margin:0; padding:0; } #top { position:fixed; height:3em; width:100%; line-height: 3em; } #frame { padding:3em 20px 1em 20px } SECONDA PARTE: EMULARE I FRAME CON I CSS Poiché il blocco posizionato in modo fisso si comporta come un box posizionato in modo assoluto che però non segue lo scorrimento della pagina, affinché tutto funzioni è sufficiente che il secondo blocco abbia il padding superiore pari all’altezza del blocco superiore

FRAME ORIZZONTALI Per Internet Explorer è necessario ricorrere a degli script come IE7: http://dean.edwards.name/IE7/ SECONDA PARTE: EMULARE I FRAME CON I CSS

SECONDA PARTE STILI ALTERNATIVI

STILI ALTERNATIVI Esistono tre tipi di foglio di stile collegato: Fogli di stile permanenti Sono sempre attivi Fogli di stile preferiti: divengono preferiti i fogli di stile a cui è associato un valore per l’attributo title del tag <link/> Sono attivi al momento di caricare la pagina Sono disattivati quando l’utente sceglie uno stile alternativo (tramite gli appositi menu dei browser più evoluti) Fogli di stile alternativi: divengono alternativi i fogli di stile quelli collegati tramite tag tag <link/> cui è associato l’attributo rel="alternate stylesheet" ed un valore per l’attributo title Non sono attivi al momento di caricare la pagina Sono attivati quando l’utente sceglie lo stile alternativo SECONDA PARTE: EMULARE I FRAME CON I CSS

STILI ALTERNATIVI Esempio: www.zeldman.com <style type="text/css" media="all">@import "/c/c04.css";</style> <link rel="alternate stylesheet" type="text/css" media="all" title="darker" href="/c/darker.css" /> <link rel="alternate stylesheet" type="text/css" media="all" title="lighter" href="/c/lighter.css" /> SECONDA PARTE: EMULARE I FRAME CON I CSS

STILI ALTERNATIVI Per i browser che non supportano gli stili alternativi (come Internet Explorer) è tuttavia possibile usare il Javascript In rete si trovano decine di script ( http://www.alistapart.com/articles/alternate/ ) Il principio è quello di agire sulla proprietà disabled dell’oggetto <link/> tramite javascript function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a=document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } } SECONDA PARTE: EMULARE I FRAME CON I CSS

SECONDA PARTE I CSS E LA LEGGE 04/2004

LEGGE 04/2004 E CSS Alcuni requisiti della legge chiamano in causa, direttamente o indirettamente, i CSS L’esempio proposto è stato realizzato tenendo a mente tali requisiti Un template, tuttavia, è coinvolto, per sua stessa natura, solo in un sotto insieme dei requisiti; questo sottoinsieme comprende anche, ma non solo, requisiti che coinvolgono i CSS. SECONDA PARTE: ESEMPIO PRATICO

LEGGE 04/2004 E CSS Requisito n. 1 Enunciato: […] Utilizzare elementi ed attributi in modo conforme alle specifiche, rispettandone l’aspetto semantico. […] evitare di utilizzare, all’interno del linguaggio a marcatori con il quale la pagina è realizzata, elementi ed attributi per definirne le caratteristiche di presentazione della pagina […] ricorrendo invece ai Fogli di Stile CSS (Cascading Style Sheets) per ottenere lo stesso effetto grafico; L’enunciato indica implicitamente (rispetto dell’aspetto semantico) e direttamente che per formattare una pagina è bene utilizzare i CSS SECONDA PARTE: ESEMPIO PRATICO

LEGGE 04/2004 E CSS Requisito n. 4 Enunciato: Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina. È bene evitare di affidare ai CSS in generale e al colore in particolare un’informazione. Se ad esempio si elimina la sottolineatura ai link differenziandoli dal testo solo per il colore si corre il rischio di violare il requisito SECONDA PARTE: ESEMPIO PRATICO

LEGGE 04/2004 E CSS Requisito n. 6 Enunciato: Garantire che siano sempre distinguibili il contenuto informativo (foreground) e lo sfondo (background), ricorrendo a un sufficiente contrasto (nel caso del testo) […] Quando si definisce un colore per il testo (o lo sfondo) è bene verificare quali colori potrebbe ereditare lo sfondo (o il testo) SECONDA PARTE: ESEMPIO PRATICO

LEGGE 04/2004 E CSS Requisito n. 9 Enunciato: Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti dalla DTD adottata per descrivere i contenuti e identificare le intestazioni di righe e colonne. Il rispetto di questo requisito permette di sfruttare i CSS per formattare al meglio elementi strutturali quali TH o CAPTION . SECONDA PARTE: ESEMPIO PRATICO

LEGGE 04/2004 E CSS Requisito n. 11 Enunciato: Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati. Un errore piuttosto comune è utilizzare i CSS senza tuttavia aver realmente separato i contenuti dalla loro formattazione: molte pagine realizzate con i CSS fanno un uso improprio dell’elemento DIV trascurando del tutto la struttura della pagina SECONDA PARTE: ESEMPIO PRATICO

LEGGE 04/2004 E CSS Requisito n. 12 Enunciato: La presentazione e i contenuti testuali di una pagina devono potersi adattare alle dimensioni della finestra del browser utilizzata dall’utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o riduzione dell’area di visualizzazione o dei caratteri rispetto ai valori predefiniti di tali parametri. I CSS sono coinvolti indirettamente; il dibattito si concentra sulla possibilità o meno di utilizzare layout a larghezza fissa. SECONDA PARTE: ESEMPIO PRATICO

LEGGE 04/2004 E CSS Requisito n. 21 Enunciato: […] per facilitare la selezione e l’attivazione dei collegamenti presenti in una pagina è necessario garantire che la distanza verticale di liste di link e la spaziatura orizzontale tra link consecutivi sia di almeno 0,5 em, le distanze orizzontale e verticale tra i pulsanti di un modulo sia di almeno 0,5 em e che le dimensioni dei pulsanti in un modulo siano tali da rendere chiaramente leggibile l’etichetta in essi contenuta. Coinvolge indirettamente i CSS, ma non è chiaro se la distanza indicata comprenda tutta l’area sensibile del link o solamente il testo SECONDA PARTE: ESEMPIO PRATICO

LEGGE 04/2004 E CSS La verifica tecnica comprende la seguente analisi: 5) i contenuti della pagina siano fruibili in caso di utilizzo delle funzioni previste dai browser per definire la grandezza dei caratteri; Il punto non è affatto chiaro: vorrebbe indicare di non utilizzare i pixel per dimensionare i caratteri (per il noto problema di Internet Explorer per Windows) tuttavia il testo non afferma ciò. SECONDA PARTE: ESEMPIO PRATICO

Introduzione ai css

More Related Content

What's hot

Viewers also liked

Similar to Introduzione ai css

Introduzione ai css

Editor's Notes