1 / 231

INTRODUZIONE AI CSS

INTRODUZIONE AI CSS. COSA SONO E COME FUNZIONANO I CSS. Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ > Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License.

rudolf
Download Presentation

INTRODUZIONE AI CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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

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

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

  6. PRIMA PARTE XHTML

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

  8. 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> PRIMA PARTE: XHTML DALL’HTML ALL’XHTML • Il documento deve essere ben formato: • Tutti gli elementi devono avere un tag di chiusura, ovvero (se vuoti) il tag iniziale deve finire con la stringa ‘ />’ (spazio compreso). • I vari tag devono essere annidati in modo corretto.

  9. Errato: <P LANG="en">Paragraph</P> <a href=http://w3.org/> Corretto: <p lang="en">Paragraph</p> <a href="http://w3.org/"> oppure <a href='http://w3.org/'> PRIMA PARTE: XHTML 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

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

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

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

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

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

  15. PRIMA PARTE STRUTTURA DI UN FOGLIO DI STILE

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

  17. PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE 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à

  18. PRIMA PARTE I SELETTORI

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

  20. PRIMA PARTE: I SELETTORI 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 {…}* {…}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  37. PRIMA PARTE COLLEGARE I CSS A UN DOCUMENTO XHTML

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

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

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

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

  42. PRIMA PARTE I VALORI

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

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

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

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

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

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

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

  50. PRIMA PARTE IL BOX MODEL

More Related