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) • 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

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 …

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

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

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

Regole CSS: sintassi

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

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

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>

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

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.

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

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

Fogli di stile embedded • Se vogliamo definire uno stile che vale solo per il documento: <head> … <style type="text/css">  </style> </head>I commenti servono per i browser che non supportano i CSS e per evitare l’indicizzazione da parte dei motori di ricerca

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)

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

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

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

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

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

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)

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

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

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

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

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

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

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}

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)

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

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

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

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

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)

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

Fogli di stile: introduzione