1 / 36

Fogli di stile: introduzione

Fogli di stile: introduzione. Maria Simi, a.a. 2003/04 Contenuti tratti da: [D. Siegel, J. Zeldman, Manuale di riferimento del W3C] . Introduzione dei fogli di stile. 1996: definizione dei fogli di stile da parte del W3C (CSS Level 1 o CSS-1)

calida
Download Presentation

Fogli di stile: introduzione

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. Fogli di stile: introduzione Maria Simi, a.a. 2003/04 Contenuti tratti da: [D. Siegel, J. Zeldman, Manuale di riferimento del W3C]

  2. 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 • Legge della “gravidanza di 18 mesi” [Zeldman] • Adesso cominciano ad essere praticabili: CSS-1 ben supportato da: • Explorer 5 e maggiori • Opera 5 e maggiori • Netscape 6 e maggiori • Il supporto non è ancora completo

  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 • In futuro: PDA, telefonini …

  4. Vantaggi dei CSS • Separazione stile-contenuto • 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 • Aderenza agli standard • Maggiore durata nel tempo del progetto • Maggiore compatibilità • 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 sviluppate 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, il tiling, lo scorrimento • atro ...

  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; } in pixel 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: ce ne può essere solo uno per pagina

  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 è blù 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 • Si salva con estensione .css (es stile.css) • Nella sezione head della pagina HTML a cui vogliamo applicare lo stile: <head> … <link rel="stylesheet" type="text/css" href="stile.css"> … </head> Pagina normalePagina con CSS

  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> Pagina normalePagina con CSS (inline)

  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. BODY H1 P DIV EM UL LI LI LI L’albero del documento <HTML> <HEAD> <TITLE>My home page</TITLE> </HEAD> <BODY> <H1>My <em>home</em> page</H1> <P>Welcome to my home page! Let me tell you about my favorite composers:</p> <DIV> <UL> <LI> Elvis Costello </LI> <LI> Johannes Brahms </LI> <LI> Georges Brassens </LI> </UL> </DIV> </BODY> </HTML> Gli stili vengono ereditati a meno di ridefinizione

  19. BODY H1 P DIV EM UL LI LI LI I selettori e l'albero • Ogni selettore seleziona un sottoinsieme degli elementi nell'albero • Esempi H1 LI DIV P EM

  20. Precedenza temporale • A parità di specificità, gli stili definiti su un elemento cancellano quelli definiti precedentemente • In particolare esiste la seguente precedenza: • 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> file stile.css h1 {color: yellow; <body style="color: red"> font-family: arial } ... <h1 style="color: blue">Come sono?</h1> Testo che segue il titolo. </body> </html> HTML

  22. 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)

  23. CSS per la tipografia • Tipi dei caratteri (font) • Testo • Colori e sfondi • Margini • Tabelle

  24. 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} *.smaller { font-size: 9px} h1 {font-size: 36pt; font-family: serif; font-style: normal; font-weight: normal; font-variant: normal; line-height: normal} Abbreviazioni H1, H2, H3 {font-weight: bold} H1 {color: green; text-align: center} H1 {color: red} .smaller { font-size: 9px} H1 {36pt serif} Ancora sulle regole: forme abbreviate

  25. 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

  26. font-family con o senza serif (grazie) proporzionali o fisse fantasy, handwriting Famiglie generiche: serif, sans-serif, cursive, fantasy, monospace font-style normal, Italic, oblique font-variant normal, small-caps font-weight bold, bolder, lighter,100 ... 900 font-stretch ultra-condensed, wider, condensed, semi-condensed, normal ... font-size Misura assoluta in pt, px, large, small Misura relativa: larger, smaller, %, em line-height: interlinea Attributi di font

  27. Misure assolute e relative • Misure assolute • punti (pt) • 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

  28. Pixel, punti, em? • I punti (pt) sono per la stampa. • In teoria le misure relative sono migliori • Preferenze dei browser per aggiustare dimensioni • Netscape 4 per MAC ignora le misure in % se usate per le dimensioni dei font • Alcune versioni di Netscape 4 li trattano come pixel • Netscape 4 ignora gli em. IE3 li tratta come pixel • Le misure in pixel sono le più affidabili • A volte il ridimensionamento mediante le preferenze dei browser non funziona

  29. 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}

  30. Ancora testo • letter-spacing • blockquote{letter-spacing: 0.1em} • word-spacing • H1 {word-spacing: 1em} • text-transform • 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)

  31. 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 • Valori: repeat, repeat-x, repeat-y, no-repeat • background-attachment • Valori: fixed, scroll • background-position • Valori: posizione in % o assoluta

  32. 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> </table> NOTA: specifica per riga HTML • Aggiungiamo un po’ di stile con i CSS ...

  33. 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 } HTML

  34. 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 Margini

  35. 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)

  36. 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

More Related