Introduzione ai css
Upcoming SlideShare
Loading in...5
×
 

Introduzione ai css

on

  • 11,559 views

COSA SONO E COME FUNZIONANO I CSS ...

COSA SONO E COME FUNZIONANO I CSS

Rielaborazione delle slide utilizzate nei miei vecchi seminari sui 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.

Statistics

Views

Total Views
11,559
Views on SlideShare
6,295
Embed Views
5,264

Actions

Likes
7
Downloads
259
Comments
1

9 Embeds 5,264

http://www.constile.org 3871
http://www.ilpiccoloinformatico.it 1133
http://constile.org 205
http://www.dozarte.com 44
http://static.slidesharecdn.com 4
http://www.constile.org HTTP 3
https://twitter.com 2
http://www.slideshare.net 1
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Complimenti!!! Sono delle slide davvero ben realizzate! Grazie per averle condivise.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Con programma utente si intende la traduzione, suggerita da Michele Diodati, dello USER AGENT.
  • L’XHTML è anche il linguaggio che, per il W3C, ha sostituito l’HTML per cui è bene abbracciare totalmente gli standard e non solo in parte (CSS+HTML)
  • La centratura ha significato solo se il box ha una larghezza specificata I margini superiore e inferiore dei paragrafi sono generalmente pari a 1em, i div hanno margine nullo
  • Vedremo più avanti il significato di box flottante e box posizionato
  • Vedremo più avanti il significato di box flottante e box posizionato
  • Si consideri la sovrapposizione degli effetti per cui è possibile definire alcuni aspetti globalmente e altri in modo specifico

Introduzione ai css Introduzione ai css Presentation Transcript

  • 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.
  • PRIMA PARTE INTRODUZIONE
  • 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
  • PRIMA PARTE XHTML
  • 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=&quot;en&quot;>Paragraph</P> <a href=http://w3.org/> Corretto: <p lang=&quot;en&quot;>Paragraph</p> <a href=&quot;http://w3.org/&quot;> 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
  • PRIMA PARTE I SELETTORI
  • 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=&quot;notizia&quot; ><h1>Titolo</h1><p>Testo …</p></div> <div class=&quot;notizia altraClasse&quot; ><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=&quot;classe1 classe2&quot; >…</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=&quot;testata&quot; ><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=&quot;idval&quot; class=&quot;classval&quot; > #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 =&quot;0&quot; …>…</a> oppure <a accesskey =&quot;k&quot; …>…</a>
      • <a rel=&quot;glossary&quot; …>…</a>
      • <a title= &quot;titolo di esempio &quot; …>…</a>
      • <a rel =&quot; en &quot; …>…</a> oppure <a rel =&quot; en - en &quot; …>…</a> ovvero <a rel =&quot; en -us&quot; …>…</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=&quot;text&quot; , type=&quot;radio&quot; , type=&quot;submit&quot; , …).
    • 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=&quot;font-weight:bold&quot;>
        • 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=&quot;text/css&quot;>
      • /*<![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=&quot;stylesheet&quot; href=&quot;file.css&quot; type=&quot;text/css&quot; /> </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 &quot;file1.css&quot;;
      • @import &quot;file2.css&quot;;
      • 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
  • PRIMA PARTE I VALORI
  • 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(&quot;http://sito/file&quot;)
    • url(http://sito/file)
    • url(&quot;/file&quot;)
    • url(/file)
    • url(&quot;../file&quot;) *
    • 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
  • PRIMA PARTE IL BOX MODEL
  • 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=&quot;box-1&quot;>…</div> <div id=&quot;box-2&quot;>…</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=&quot;pa&quot;>(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=&quot;fl&quot;>(2) …</p>
    • <p>(3) …</p>
    • <p id=&quot;fr&quot;>(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=&quot;fl&quot;>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=&quot;en&quot; title=&quot;Extensible HyperText Markup Language&quot;>XHTML</acronym> . Sul sito del <a href=&quot;http://w3.org/&quot; hreflang=&quot;en&quot;>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: &quot; (&quot;attr(title)&quot;)&quot;;
    • font-style:italic; color:#900;
    • }
    • a [hreflang]:after {
    • content: &quot; [&quot;attr(hreflang)&quot;]&quot;; 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
  • PRIMA PARTE COLORI E SFONDI
  • 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
  • PRIMA PARTE CARATTERI E TESTO
  • 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=&quot;...&quot;> <thead><tr><th>…</th>…</tr></thead> <tbody> <tr class=&quot;d&quot;><td>…</td>…</tr> <tr class=&quot;p&quot;><td>…</td>…</tr> <tr class=&quot;d&quot;><td>…</td>…</tr> <tr class=&quot;p&quot;><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
  • PRIMA PARTE MEDIA ALTERNATIVI
  • 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=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;print&quot; href=&quot;p.css&quot; /> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;s.css&quot; />
    PRIMA PARTE: MEDIA ALTERNATIVI
  • PRIMA PARTE FINE PRIMA PARTE
  • 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=&quot;stylesheet&quot; href=&quot;css/standard.css&quot; type=&quot;text/css&quot; /> <!--[if lt IE 6]> <link rel=&quot;stylesheet&quot; href=&quot;css/ie.css&quot; type=&quot;text/css&quot; /> <![endif]--> * 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=&quot;pagina&quot;>
    • <div id=&quot;testa&quot;>…</div>
    • <div id=&quot;c1&quot;>…</div>
    • <div id=&quot;c2&quot;>…</div>
    • <div id=&quot;c3&quot;>…</div>
    • <div id=&quot;piede&quot;>…</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=&quot;pagina&quot;> <div id=&quot;aux&quot;>
    • <div id=&quot;testa&quot;></div>
    • <div id=&quot;c1&quot;></div>
    • <div id=&quot;c2&quot;></div>
    • <div id=&quot;c3&quot;></div>
    • <div id=&quot;piede&quot;></div>
    • </div> </div>
    • A differenza del layout a larghezza fissa, in questo caso è necessario un contenitore ausiliario ( <div id=&quot;aux&quot;> ) 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=&quot;testa&quot;></div>
    • <div id=&quot;corpo&quot;>
    • <div id=&quot;c1&quot;></div>
    • <div id=&quot;c2&quot;></div>
    • <div id=&quot;c3&quot;></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=&quot;…&quot;>Collegamento 1</a></li>
    • <li><a href=&quot;…&quot;>Collegamento 2</a></li>
    • <li><a href=&quot;…&quot;>Collegamento 3</a></li>
    • <li><a href=&quot;…&quot;>Collegamento 4</a></li>
    • <li><a href=&quot;…&quot;>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=&quot;menu&quot;>
    • <li id=&quot;primo&quot;><a href=&quot;#&quot;>Collegamento 1</a></li>
    • <li><a href=&quot;#&quot;>Collegamento 2</a></li>
    • <li><a href=&quot;#&quot;>Collegamento 3</a></li>
    • <li><a href=&quot;#&quot;>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=&quot;on&quot;>…</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=&quot;on&quot;
  • 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=&quot;…&quot;><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=&quot;nascosto&quot;>
    • [<a href=&quot;#SKIP&quot; accesskey=&quot;.&quot;>Salta il menu di navigazione</a>]
    • </p>
    • <ul>
    • <li><a href=&quot;#&quot;>…</a></li>
    • </ul>
    • <p><a id=&quot;SKIP&quot;></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=&quot; text &quot; />
      • <input type=&quot; password &quot; />
      • <input type=&quot; radio &quot; />
      • <input type=&quot; submit &quot; />
    • 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=&quot;text&quot; … /></p>
    • <p><label …>…</label> <input type=&quot;text&quot; … /></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=&quot;banner&quot;>
    • <a href=&quot;…&quot;><img src=&quot;b.jpg&quot; … /></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=&quot;fix&quot;>
    • <ul> … </ul>
    • </div>
    • <div id=&quot;frame&quot;>
    • <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=&quot;top&quot;>
    • </div>
    • <div id=&quot;frame&quot;>
    • <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=&quot;alternate stylesheet&quot; 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=&quot;text/css&quot; media=&quot;all&quot;>@import &quot;/c/c04.css&quot;;</style>
    • <link rel=&quot;alternate stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot; title=&quot;darker&quot; href=&quot;/c/darker.css&quot; />
    • <link rel=&quot;alternate stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot; title=&quot;lighter&quot; href=&quot;/c/lighter.css&quot; />
    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(&quot;link&quot;)[i]); i++) {
    • if(a.getAttribute(&quot;rel&quot;).indexOf(&quot;style&quot;) != -1
    • && a.getAttribute(&quot;title&quot;)) {
    • a.disabled = true;
    • if(a.getAttribute(&quot;title&quot;) == 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