Your SlideShare is downloading. ×
0
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Introduzione ai css
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduzione ai css

10,731

Published on

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.

Published in: Education
1 Comment
7 Likes
Statistics
Notes
  • Complimenti!!! Sono delle slide davvero ben realizzate! Grazie per averle condivise.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
10,731
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
286
Comments
1
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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
  • Transcript

    • 1. 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.
    • 2. PRIMA PARTE INTRODUZIONE
    • 3. 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
    • 4. 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
    • 5. 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
    • 6. PRIMA PARTE XHTML
    • 7. 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
    • 8. 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>
    • 9. 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/'>
    • 10. 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
    • 11. 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
    • 12. 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
    • 13. 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
    • 14. 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
    • 15. PRIMA PARTE STRUTTURA DI UN FOGLIO DI STILE
    • 16. 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
    • 17. 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
    • 18. PRIMA PARTE I SELETTORI
    • 19. 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
    • 20. 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
    • 21. 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
    • 22. 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
    • 23. 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
    • 24. 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
    • 25. 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
    • 26. 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
    • 27. 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
    • 28. 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
    • 29. 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
    • 30. 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
    • 31. 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
    • 32. 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
    • 33. 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
    • 34. 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
    • 35. 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
    • 36. 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
    • 37. PRIMA PARTE COLLEGARE I CSS A UN DOCUMENTO XHTML
    • 38. 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
    • 39. 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
    • 40. 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
    • 41. 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
    • 42. PRIMA PARTE I VALORI
    • 43. 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
    • 44. 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
    • 45. 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
    • 46. 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
    • 47. 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
    • 48. 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
    • 49. 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
    • 50. PRIMA PARTE IL BOX MODEL
    • 51. 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
    • 52. 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
    • 53. 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
    • 54. 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
    • 55. 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
    • 56. 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
    • 57. 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
    • 58. 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
    • 59. 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
    • 60. 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
    • 61. 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.
    • 62. 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
    • 63. 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
    • 64. 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
    • 65. 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
    • 66. 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
    • 67. 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
    • 68. 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
    • 69. 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
    • 70. PRIMA PARTE IL VISUAL FORMATTING MODEL
    • 71. 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
    • 72. 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
    • 73. 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
    • 74. 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
    • 75. 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; }
    • 76. 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; }
    • 77. 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 }
    • 78. 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
    • 79. 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
    • 80. 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
    • 81. 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
    • 82. 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
    • 83. 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
    • 84. 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
    • 85. 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
    • 86. 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 }
    • 87. 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
    • 88. 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
    • 89. 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
    • 90. 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
    • 91. 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
    • 92. 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
    • 93. 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
    • 94. 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
    • 95. 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
    • 96. 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
    • 97. 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
    • 98. 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
    • 99. 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
    • 100. 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
    • 101. PRIMA PARTE CONTENUTI GENERATI
    • 102. 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
    • 103. 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
    • 104. 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
    • 105. PRIMA PARTE COLORI E SFONDI
    • 106. 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
    • 107. 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
    • 108. 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
    • 109. 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
    • 110. 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
    • 111. 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
    • 112. 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
    • 113. 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
    • 114. 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
    • 115. BACKGROUND-POSITION PRIMA PARTE: COLORI E SFONDI background-position : 20% 25%;
    • 116. 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
    • 117. PRIMA PARTE CARATTERI E TESTO
    • 118. 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
    • 119. 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
    • 120. 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
    • 121. 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
    • 122. 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
    • 123. 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
    • 124. 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
    • 125. 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
    • 126. 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
    • 127. 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
    • 128. 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
    • 129. PRIMA PARTE FORMATTAZIONE DELLE TABELLE
    • 130. 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
    • 131. 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
    • 132. 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
    • 133. 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>
    • 134. 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
    • 135. PRIMA PARTE INTERFACCIA UTENTE
    • 136. 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
    • 137. 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
    • 138. 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
    • 139. 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
    • 140. PRIMA PARTE MEDIA ALTERNATIVI
    • 141. 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
    • 142. 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
    • 143. PRIMA PARTE FINE PRIMA PARTE
    • 144. SECONDA PARTE CORREGGERE IL BOX MODEL DI INTERNET EXPLORER 5.x PER WINDOWS
    • 145. 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
    • 146. 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
    • 147. SECONDA PARTE LAYOUT A LARGHEZZA FISSA A 3 COLONNE CON BOX FLOTTANTI
    • 148. 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
    • 149. 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
    • 150. 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
    • 151. 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
    • 152. 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
    • 153. 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
    • 154. 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; }
    • 155. SECONDA PARTE LAYOUT LIQUIDO A 3 COLONNE CON BOX FLOTTANTI
    • 156. 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
    • 157. 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
    • 158. 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
    • 159. 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
    • 160. 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
    • 161. 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
    • 162. 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
    • 163. 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
    • 164. 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; }
    • 165. SECONDA PARTE LAYOUT LIQUIDO A COLONNE CON BOX POSIZIONATI IN MODO ASSOLUTO
    • 166. 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
    • 167. 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
    • 168. 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
    • 169. 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
    • 170. 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
    • 171. 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; }
    • 172. SECONDA PARTE CENTRARE UN BOX NELLA PAGINA
    • 173. 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
    • 174. 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
    • 175. 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
    • 176. SECONDA PARTE FORMATTARE LE LISTE DI LINK  MENU
    • 177. 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
    • 178. 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
    • 179. 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
    • 180. 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
    • 181. 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
    • 182. 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
    • 183. 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*
    • 184. 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
    • 185. 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
    • 186. 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
    • 187. 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
    • 188. 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
    • 189. 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;
    • 190. 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
    • 191. SECONDA PARTE TECNICHE DI SOSTITUZIONE DI TESTO CON IMMAGINI (FIR)
    • 192. 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)
    • 193. 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
    • 194. 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)
    • 195. 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)
    • 196. 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)
    • 197. 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)
    • 198. 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
    • 199. 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
    • 200. SECONDA PARTE NASCONDERE I CONTENUTI IN MODO ACCESSIBILE
    • 201. 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
    • 202. 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
    • 203. SECONDA PARTE FORMATTARE I MODULI
    • 204. 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
    • 205. 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
    • 206. 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
    • 207. SECONDA PARTE BANNER ESPANDIBILI CON I CSS
    • 208. 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
    • 209. 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
    • 210. 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
    • 211. 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
    • 212. SECONDA PARTE EMULARE I FRAME CON I CSS
    • 213. 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
    • 214. 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
    • 215. 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
    • 216. 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
    • 217. 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
    • 218. SECONDA PARTE STILI ALTERNATIVI
    • 219. 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
    • 220. 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
    • 221. 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
    • 222. SECONDA PARTE I CSS E LA LEGGE 04/2004
    • 223. 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
    • 224. 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
    • 225. 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
    • 226. 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
    • 227. 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
    • 228. 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
    • 229. 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
    • 230. 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
    • 231. 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

    ×