Fogli di stile: introduzione
Transcript
Fogli di stile: introduzione
Fogli di stile: introduzione Fabio Fioravanti Introduzione dei fogli di stile 1996: definizione dei fogli di stile da parte del W3C (CSS Level 1 o CSS-1) Dal 1996 al 2000: scarso supporto da parte dei browser Adesso CSS-1 ben supportato dalla maggior parte dei browser Il supporto CSS2 non è ancora uniforme CSS3 all’orizzonte 2 http://en.wikipedia.org/wiki/Comparison_of_lay Trident (IE), Gecko (Mozilla) 3 Problemi da superare Abuso di HTML come linguaggio di annotazione stilistica mancanza di pulizia delle pagine tag proprietari e non standard Spreco di banda di comunicazione I tag stilistici occupano spazio nella pagina (font ripetuto per tutti i paragrafi o tutte le celle di una tabella) Le tabelle ritardano il caricamento Le immagini al posto dei testi sono pesanti Scarsa aggiornabilità e consistenza Ostacolo al progresso Difficile visualizzazione su browser non grafici Hot topic: PDA, telefonini … 4 Vantaggi dei CSS Separazione stile-contenuto Aderenza agli standard Contenuto con il minimo di struttura necessario Stili specificati a parte Possibilità di applicare lo stesso stile a più contenuti Possibilità di riutilizzo di uno stesso contenuto con stili diversi Maggiore compatibilità Maggiore durata nel tempo del progetto Facilità di manutenzione Maggiore controllo stilistico 5 Facilità di manutenzione I fogli di stile possono essere globali per il sito Le regole stilistiche stanno in un posto solo e sono utlizzate da tutte le pagine del sito Facilità di sviluppo e gestione Più facile sviluppare siti consistenti dal punto di vista visuale Facilità nella manutenzione del sito: se si vuole cambiare uno stile si cambia in un posto solo 6 Maggiore controllo stilistico Con i fogli di stile si riescono a controllare aspetti stilistici che non si possono controllare in altro modo Le famiglie di tipi (font, dimensioni, interlinea) La sottolineatura dei link La possibilità di HOVER sui link Divisione della pagina in sezioni (div, span) con stili diversi Controllo di margini e bordi I colori, gli sfondi, lo scorrimento altro ... 7 Regole CSS: sintassi 8 Regole CSS selettore { attributo1: valore1; attributo2: valore2; regola … attributok: valorek;} dichiarazioni Esempio: body { margin: 0; background: white; o meglio #ffffff font-family: helvetica, arial, sans-serif } possibili valori alternativa generica 9 Regole CSS: altri esempi h1 { font-weight: bold; font-size: 24px; } p, li { font-size: 12px; line-height: 150%; interlinea 1,5 (18px) } Nota: Il punto e virgola separa le dichiarazioni, dopo l'ultima non serve anche se non da' errore 10 Selettori classe Possiamo definire una sottoclasse di un tag esistente con un stile particolare. Esempio di specializzazione di h2 h2.red {color: #ff0000} <h2 class="red">Getting started</h2> O una sottoclasse generica che si può utilizzare per specializzare un qualunque elemento Esempio di sotto-classe generica .smaller {font-size: 9px} <p class="smaller">Testo piccolo</h2> <div class="smaller">Tutto qui dentro è piccolo</div> 11 Selettori di elementi singoli È possibile anche definire stili che si applicano solo ad elementi HTML identificati da un ID Esempio #footer { font-size: 11px; margin-top: 25px } <div id="footer"> Saluti e baci ... </div> Nota: due elementi nella stessa pagina non possono avere stesso id 12 Selettori discendenti È possibile definire stili che si applicano solo in certi contesti (nell’ambito di altri tag) h1 { color: red } em { color: red } <h1>Questo titolo è<em>molto</em> importante</h1> h1 { color: red } em { color: red } h1 em { color: blue } L’enfasi è blu nel contesto di un titolo rosso altrimenti è rossa. 13 Tre modi di usare gli stili Foglio di stile in un file esterno e riferito nel documento Stili definiti nella testa del documento (embedded) Stili definiti nei tag del documento (inline) mediante l'attributo style 14 Fogli di stile esterni Passi da seguire: Si crea il foglio di stile 2. Si salva con estensione .css (es stile.css) 3. Nella sezione head della pagina HTML a cui vogliamo applicare lo stile: <head> … <link rel="stylesheet" type="text/css" href="stile.css"> … </head> 1. 15 Fogli di stile embedded Se vogliamo definire uno stile che vale solo per il documento: <head> … <style type="text/css"> <!-body {margin: 0; font-family: helvetica, arial, sans-serif } --> </style> </head> I commenti servono per i browser che non supportano i CSS e per evitare l’indicizzazione da parte dei motori di ricerca 16 Fogli di stile inline Per cambiare gli stili localmente in una porzione di un documento Supponiamo che lo stile del documento preveda il tipo Arial, dimensione 12px, di colore nero … <p style="color: red; font-style: italic"> Questo è importante e lo voglio mettere in rosso e in corsivo!! </p> 17 Fogli di stile “in cascata” Ma perché in cascata? Tutti gli aspetti stilistici sono definiti dai browser e valgono a meno di ridefinizione Ogni elemento stilistico può essere ridefinito (anche più volte) e vince sempre la definizione “pìù specifica” ... a parità di specificità la definizione più recente Ma più specifica in che senso? Secondo la struttura gerarchica del documento I l documento è un oggetto che contiene altri oggetti che contengono altr oggetti ... 18 L’albero del documento <HTML> BODY <HEAD> <TITLE>My home page</TITLE> </HEAD> H1 P DIV <BODY> <H1>My home page</H1> <P>Welcome to <em>my home page!</em> Let me tell you about my favorite composers:</P> EM UL <DIV> <UL> <LI> Elvis Costello </LI> <LI> Johannes Brahms </LI> <LI> Georges Brassens </LI> LI LI LI </UL> </DIV> </BODY> Gli stili vengono ereditati a </HTML> meno di ridefinizione 19 I selettori e l'albero Ogni selettore seleziona un sottoinsieme degli elementi nell'albero BODY Esempi H1 P DIV H1 LI EM UL DIV P EM LI LI LI 20 Precedenza temporale A parità di specificità, gli stili definiti su un elemento cancellano quelli definiti precedentemente In particolare esiste la seguente precedenza (decrescente): Stili definiti inline nel corpo del documento (BODY o tramite l'attributo STYLE di altri tag come Hx, DIV, P, ...) Stili definiti nella testa del documento Stili definiti in file esterni riferiti tramite LINK Stili definiti nel tag STYLE nella testa del documento Stili definiti dai browser (quelli di default) Se nello stesso foglio di stile definisco due volte lo stesso elemento vale l'ultimo Casi particolari: margin: 0; margin-left: 20px 21 Esempio <html> <head> <style type="text/css"> h1 {color: green} </style> <link rel="stylesheet" type="text/css" href="stile.css"> </head> <body style="color: red"> ... <h1 style="color: blue">Come sono?</h1> Testo che segue il titolo. </body> </html> Nel file stile.css h1 { color: brown; } 22 Matching dei selettori Pattern Meaning * Matches any element. E Matches any E element (i.e., an element of type E). EF Matches any F element that is a descendant of an E element. E>F Matches any F element that is a child of an element E. E:first-child Matches element E when E is the first child of its parent. E:link E:visited Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). E:active E:hover E:focus Matches E during certain user actions. E+F Matches any F element immediately preceded by an element E. E[foo] Matches any E element with the "foo" attribute set (whatever the value). E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning". DIV.warning HTML only. The same as DIV[class~="warning"]. E#myid Matches any E element ID equal to "myid". 23 Attenzione alla virgola! Ad esempio, il selettore P, LI è molto diverso dal selettore P LI 24 Esempio complesso DIV OL>LI P elemento P discendente di un LI che a sua volta è figlio di un OL che a sua volta è un discendente di DIV. Lo spazio vuoto opzionale intorno a “>” è stato omesso. 25 Fase di transizione Problemi di compatibilità Uso limitato e consapevole dei CSS per il controllo della tipografia Le tabelle sono ancora usate per la disposizione degli oggetti (layout) 26 CSS per la tipografia Tipi dei caratteri (font) Testo Colori e sfondi Margini Tabelle 27 Forme abbreviate Abbreviazioni h1 {font-weight: bold} h2 {font-weight: bold} h3 {font-weight: bold} h1 {color: green} h1 {text-align: center} h1 {color: green} h1 {color: red} h1,h2,h3 {font-weight: bold} h1 {color: green; text-align: center} h1 {color: red} h1 {36pt serif} h1 {font-size: 36pt; font-family: serif; font-style: normal; font-weight: normal; font-variant: normal; line-height: normal} *.smaller and .smaller *[LANG=fr] and [LANG=fr] *#myid and #myid 28 Font I caratteri possono essere visualizzati in stili tipografici diversi, associando ad essi delle immagini (gliph) Un tipo (font) è un insieme coordinato di gliph, che possono essere o non essere disponibili sulla macchina locale Per questo motivo bisogna dare delle alternative Per questo motivo a volte i caratteri speciali previsti dallo standard (anche se compresi dal browser) non sono visualizzati Famiglia di font: un insieme coordinato di font 29 Attributi di font font-family serif, sans-serif, cursive, fantasy, monospace font-style font-variant normal, small-caps ultra-condensed, wider, condensed, semicondensed, normal ... font-size normal, Italic, oblique bold, bolder, lighter,100 ... 900 font-stretch Famiglie generiche: con o senza serif (grazie) proporzionali o fisse fantasy, handwriting font-weight Misura assoluta in pt, px, large, small Misura relativa: larger, smaller, %, em line-height: interlinea 30 Misure assolute e relative Misure assolute punti (pt) 1pt = 1/72 in pixel (punti sullo schermo) xxsmall, x-small, small, medium, large, x-large, xx-large Misure relative valore %, larger, smaller ... 1 em è pari alla dimensione del font in punti (la dimensione della M): specificare 0.8em significa un carattere che è l’80% di quello del padre 1 ex è pari all’altezza di una lettera minuscola 31 Pixel, punti, em? I punti (pt) sono per la stampa. In teoria le misure relative sono migliori buona portabilità Le misure in pixel sono a volte più affidabili A volte il ridimensionamento mediante le preferenze dei browser non funziona scarsa portabilità 32 Testo text-indent: il rientro della prima riga di un blocco valori assoluti in em, px, cm ... valori relativi in % text-align valori: center, right, left, justify text-decoration underline, overline, line-through text-shadows h1 {text-shadow: 0.2em 0.2em} 33 Ancora testo letter-spacing word-spacing H1 {word-spacing: 1em} text-transform blockquote{letter-spacing: 0.1em} capitalize, uppercase, lowercase white-space normal (le sequenze di spazi e gli “a capo” sono ignorati) pre (le sequenze di spazi e gli “a capo” sono rispettati) nowrap (spazi ignorati, a capo soppressi) 34 Ereditarietà i discendenti ereditano alcune proprietà dai predecessori (es: color); altre non vengono ereditate (es: background) per sapere se una proprietà è ereditata fare riferimento allo standard; In CSS2 “inherit” è uno pseudo-valore che forza l’utilizzo del valore ereditato esempio: body { color: red; background: black; } 35 Colori e sfondi Due stili che vanno specificati insieme color: il colore del testo sfondo background-color: un colore o ‘transparent’ background-image: un’immagine specificata da un URL gli sfondi non si ereditano ma sono normalmente trasparenti Sfondi degli elementi background-repeat background-attachment Valori: repeat, repeat-x, repeat-y, no-repeat Valori: fixed, scroll background-position Valori: posizione in % o assoluta 36 Tabelle <table> <caption>Tabella 3x3</caption> <tr id="row1"> <th>Header 1</th> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr id="row2"> <th>Header 2</th> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr id="row3"> <th>Header 3</th> <td>Cell 5</td> <td>Cell 6</td> </tr> </table> 37 Tabelle e CSS TH { vertical-align: center; text-align: center; font-weight: bold; font-size: x-large } TD { vertical-align: middle } TABLE {border: 1px solid black } TR#row1 { text-align: left } TR#row2 { text-align: center } TR#row3 { text-align: right } CAPTION { caption-side: top } 38 Margini Blockquote e le liste (ol, ul) normalmente rientrano il testo contenuto Lo spazio intorno può essere controllato con le proprietà: margin margin-left margin-right margin-top margin-bottom blockquote { margin-top: 1em; margin-right: 0em; margin-bottom: 1em; margin-left: 0em; font-style: italic;} o anche: blockquote { margin: 1em 0em 1em 0em; font-style: italic;} In senso orario a partire da top 39 Link Link sottolineato o non a:link {text-decoration: underline;} a:link, a:visited {text-decoration: none} a:hover {background: cyan} a:hover {color: red} Link, visited, hover sono chiaramente specializzazioni di a. Ma perché i due punti? non sono proprio classi come le altre ... sono pseudo-classi perché si basano su proprietà che sono esterne al documento (es. un link è stato visitato) 40 Conclusioni Perché è una buona idea usare gli stili Regole, selettori, attributi, valori Stili esterni, embedded e inline L'albero del documento Regole di precedenza degli stili Gli stili per la tipografia 41 42 I modelli Per capire meglio la filosofia dei CSS, al di là delle liste di attributi e loro valori ... Box model: gli oggetti che si possono influenzare con i CSS sono scatole rettangolari che si possono comporre. L’annidamento delle scatole corrisponde grosso modo all’annidamento degli elementi HTML Visual model: ci dice come queste scatole vengono sistemate nella finestra del browser. 43 Box model Ogni elemento di HTML occupa una porzione rettangolare dello schermo, una scatola (box) Ogni scatola ha un’area per il contenuto (un testo, un’immagine), un padding (imbottitura?) , un bordo, un margine È come se fossero 4 rettangoli uno dentro l'altro Tutte queste sezioni rettangolari hanno proprietà che possono essere influenzate tramite i CSS 44 Box model: gli attributi 45 I quattro lati dei rettangoli TOP 1 LEFT 4 margin-top: 1 margin-right: 2 margin-bottom: 3 margin-left: 4 RIGHT 2 margin: 1 2 3 4 margin: x margin: x x x x BOTTOM 3 Stessa cosa per border e padding margin: x y margin: x y x y margin: x y z margin: x y z y 46 Proprietà dei bordi Border-width thin, medium, thick (thin medium thick) una misura (in px, em ...) Border-color transparent un colore Border-style none, hidden, dotted, dashed, solid, double, groove (incavato), ridge (sporgente), inset (box incavata), outset (box a rilievo) Esistono anche, influenzabili separatamente border-top-width, border-right-width, border-bottom-width, border-leftwidth, border-top-color, ..., border-top-style ... 47 Visual model La sistemazione delle scatole nella finestra del browser (viewport) è influenzata da: le dimensioni e il tipo della scatola lo schema di posizionamento le relazioni tra gli oggetti Blocco contenitore: la scatola che contiene un’altra scatola. Le posizioni sono tipicamente relative ai margini del blocco contenitore 48 Blocco contenitore iniziale La radice dell’albero del documento, BODY, corrisponde al blocco contenitore iniziale, rispetto al quale gli altri sono posizionati 49 Tipi di blocchi Esistono diversi tipi di elementi dal punto di vista del posizionamento. Quelli più importanti sono: gli elementi blocco gli elementi inline Esempi: P, UL, OL, DIV sono elementi di tipo blocco IMG, EM, STRONG, SPAN sono elementi inline 50 Blocchi e inline Blocchi: normalmente (nel flusso normale) provocano una interruzione di linea Inline: non provocano una interruzione di linea, ma tendono a riempire tutta la riga. Questo è un paragrafo di testo messo qui per mostrare l’interruzione di linea. Testo prima. Testo enfatizzato. Testo dopo. 51 Posizionamento Ci sono tre schemi di posizionamento delle scatole: flusso normale: quello che uno si aspetta se non specificato diversamente float (scatole fluttuanti) Questo è un paragrafo di testo che si inserisce a destra per il fatto che il quadrato è stato dichiarato di tipo float left. Questo è un paragrafo di testo che si inserisce a sinistra per il fatto che il quadrato è stato dichiarato di tipo float right. posizionamento esplicito: la scatola viene posizionata rispetto all’oggetto contenitore Le proprietà rilevanti sono position e float 52 La proprietà position La proprietà position specifica la modalità di posizionamento. I valori possibili sono: static: la cosa normale, l’oggetto viene posizionato dove ci si aspetta relative: la posizione è data specificando uno spostamento rispetto alla sua posizione “normale” absolute: la posizione è specificata rispetto al blocco contenitore fixed: la posizione è fissa rispetto alla finestra del browser Gli oggetti “posizionati” rspetto al contenitore (position ≠ static) usano le proprietà top, right, bottom, left per dire dove 53 Dove posizionarsi (top, right, bottom, left) top: 10px; bottom: 40%; right: 40%; left: 30px; 54 Ristrutturare pagine esistenti Una pagina vecchio stile da ristrutturare Fase 1: Markup Ripristinare individuati markup, dando un nome agli elementi Fase 2: Layout Posizionare le scatole (solo CSS) Fase 3: Stile aggiustare lo stile del contenuto (solo CSS) 55 Fase 1: markup In questa fase ripuliamo la pagina dalle tabelle e da tutti gli elementi stilistici. Ogni sezione individuata ha un nome e corrisponde a a un elemento html o a un div. 56 Fase 2: layout Estendiamo il foglio di stile con regole di posizionamento per i div, non tocchiamo più la pagina HTML. È la fase più critica per problemi di compatibilità tra i browser. 57 Fase 3: stile Adesso possiamo aggiustare gli stili degli elementi Anche qui si cambia solo il foglio di stile Questa fase è meno problematica. 58 Fogli di stili alternativi Possiamo per una stessa pagina richiamare fogli di stili diversi Possiamo avere un foglio di stile diverso per la stampa Cose tipiche da cambiare #header { display: none} diverso da visibility: hidden, in cui la scatola occupa spazio font-size: 12pt Ma anche contenuti diversi!!! Numero di telefono nella versione per il cellulare Informazioni per registrarsi solo nella versione online 59 Fogli di stile alternativi <link rel="stylesheet" type="text/css" media="screen" href=“stile_schermo.css"/> <link rel="stylesheet" type="text/css" media=“print" href=“stile_stampa.css"/> Il primo è utlizzato per lo schermo, il secondo per la stampa (visibile con anteprima di stampa). 60 Riferimenti http://www.w3.org/Style/CSS/ http://css.html.it/guide/leggi/2/guida-css-di-base/ Altre risorse http://meyerweb.com/ http://www.richinstyle.com/ http://www.alistapart.com/ http://www.csszengarden.com/tr/italiano/ Validator http://jigsaw.w3.org/css-validator/ 61 Editor TopStyle, DreamWeaver, HTML-Kit Online editors http://www.fonttester.com/ http://www.pixy.cz/apps/webedit/ http://cssmate.com/csseditor.htm http://www.cssfly.net/ http://www.qrone.org/cssdesigner.html http://www.realeditor.com/editor/ 62 Crediti Maria Simi, a.a. 2003/04 Contenuti tratti da: [D. Siegel, J. Zeldman, Manuale di riferimento del W3C] 63