Introduzione dei fogli di stile

Transcript

1 Corso di Laurea in Scienze della Formazione Continua e Tecnologie dell Istruzione Parte V Fogli di stile - Css Corso: Computer Graphics Docente: Ing. Ivan Bruno ivanb@dsi.unifi.it 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 2 1

2 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 3 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 4 2

3 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 5 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

4 Regole CSS: sintassi 7 Regole CSS selettore { attributo1: valore1; attributo2: valore2; attributok: valorek;} regola dichiarazioni Esempio: body { margin: 0; background: white; o meglio #ffffff font-family: helvetica, arial, sans-serif } possibili valori alternativa generica 8 4

5 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 9 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> 10 5

6 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 11 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. 12 6

7 Tre modi di usare gli stili 1. Foglio di stile in un file esterno e riferito nel documento 2. Stili definiti nella testa del documento (embedded) 3. Stili definiti nei tag del documento (inline) mediante l'attributo style 13 Fogli di stile esterni Passi da seguire: 1. 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> 14 7

8 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 15 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> 16 8

9 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 Il documento è un oggetto che contiene altri oggetti che contengono altr oggetti Il concetto di cascata Gli attributi di un elemento vengono presi non da uno (il primo, l'ultimo, ecc.) dei fogli di stile, ma composti dinamicamente sulla base del contributo di tutti, in cascata. Ad esempio, avendo tre fogli di stile, che riportano ciascuno una delle seguenti regole, P { font-family: Arial; font-size: 12 pt; } P {color: red; font-size: 11 pt; } P {margin-left: 15 pt; color: green;} gli attributi dell'elemento P saranno equivalenti a: P { font-family: Arial; font-size: 11 pt; margin-left: 15 pt; color: green; } 18 9

10 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> BODY H1 P DIV EM UL LI LI LI Gli stili vengono ereditati a meno di ridefinizione 19 I selettori e l'albero Ogni selettore seleziona un sottoinsieme degli elementi nell'albero Esempi H1 LI DIV P EM BODY H1 P DIV EM UL LI LI LI 20 10

11 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> 22 11

12 CSS per la tipografia Tipi dei caratteri (font) Testo Colori e sfondi Margini Tabelle 23 Ancora sulle regole: forme abbreviate 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} 24 12

13 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 25 Attributi 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, font-stretch ultra-condensed, wider, condensed, semicondensed, normal... font-size Misura assoluta in pt, px, large, small Misura relativa: larger, smaller, %, em line-height: interlinea 26 13

14 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 27 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 28 14

15 Modello visuale di CSS (1) La visualizzazione di un documento con CSS avviene identificando lo spazio di visualizzazione di ciascun elemento del documento. Ogni elemento è definito da una scatola all'interno del quale sta il contenuto. Le scatole sono in relazione alle altre come segue: Le scatole degli elementi contenuti stanno dentro alla scatole dell'elemento genitore. Flusso normale di tipo blocco: le scatole sono poste l'una sopra l'altra in successione verticale (come paragrafi). Flusso normale di tipo inline: le scatole sono poste l'una accanto all'altra in successione orizzontale (come parole della stessa riga) Flusso di tipo float: le scatole sono poste all'interno del contenitore e poi spostate all'estrema sinistra o destra della scatola, lasciando che le altre scatole vi girino intorno. Posizionamento assoluto: le scatole vengono poste nella posizione indicata indipendentemente dal flusso e da quel che la zona già visualizza (eventualmente nascondendo ciò che sta sotto). 29 Modello visuale di CSS (2) Alcune proprietà controllano il tipo di posizionamento e di scatola: DISPLAY (inline block list-item run-in none): il tipo di scatola da utilizzare per l'elemento: un blocco, un inline, una lista, una cella di tabella, ecc. Si noti che in HTML molti elementi hanno un valore display predeterminato, che NON può essere cambiato da un valore diverso. Inline: l oggetto occupa una scatola organizzata orizzontalmente all interno del suo contenitore Block: l oggetto occupa una scatola organizzata verticalmente rispetto al suo contenitore. List-item, marker: parti di un elemento di lista, ecc Z-INDEX:la posizione nello stack di scatole potenzialmente sovrapposte. Il valore più alto è più vicino al lettore, e quindi nasconde gli altri. N.B.: per default il valore di background delle scatole è trasparente

16 Modello visuale di CSS (3) POSITION (static relative absolute fixed): il posizionamento rispetto al flusso del documento. Static (default): la scatola segue la posizione di flusso normale che avrebbe naturalmente Relative: attraverso proprietà come left e top sposto di un delta la posizione della scatola rispetto alla sua posizione naturale. Absolute: una posizione assoluta su canvas (scrolla), indicata attraverso le proprietà top, left, right, bottom, width, height. Fixed: una proprietà assoluta sulla finestra (non scrolla), indicata attraverso le proprietà top, left, right, bottom, width, height. FLOAT (left right none): un float è una scatola scivolata all'estrema destra o sinistra del contenitore muovendo le altre per farle posto. TOP, BOTTOM, LEFT, RIGHT: coordinate della scatola WIDTH, HEIGHT: dimensioni usabili invece di right e bottom. 31 Un esempio di posizionamento (1) 32 16

17 Un esempio di posizionamento (2) p.abs { position: absolute; top: 40px; left: 210px; width: 190px; background:white; border-style: solid; border-width: 1px;} p { display: block; border-style: solid; border-width: 1px; } b,i { display:inline; border-style: solid; border-width: 1px; background:yellow;} span.left { border-style: solid; border-width: 1px; float:left; font-size: 200%;} <P>Alcune parole di un paragrafo che si estende per <span class="left">righe e righe</span>, così da far vedere come si comporta su più righe.</p> <P>Secondo paragrafo che contiene altre parole e un pezzo in <b>grassetto</b> ed uno in <i>corsivo</i>.</p> <p class="abs">terzo paragrafo posizionato in maniera assoluta dove capita </p> 33 Elementi della scatola 34 17

18 Elementi della scatola (2) Margini: la regione che separa una scatola dall'altra, necessariamente trasparente. margin-top, margin-bottom, margin-left, margin-right: dimensioni del margine della scatola. Border: la regione ove visualizzare un bordo per la scatola. border-top, border-bottom, border-left, border-right, border-width, border-color: dimensioni ed aspetto del bordo. border-style: può assumere come valori none, dotted, dashed, solid, double, groove, ridge, inset, outset. Padding: la regione di respiro tra il bordo della scatola ed il contenuto. Ha il colore dello sfondo. padding-top, padding-bottom, padding-left, padding-right: dimensioni del padding della scatola. Content: la regione dove sta il contenuto dell'elemento. background-color, background-image, background-repeat, backgroundattachment, background-position: colore, immagine e meccanismo di ripetizione dell'immagine di sfondo della scatola. 35 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} 36 18

19 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) 37 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 38 19

20 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 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 40 20

21 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 41 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) 42 21

22 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 43 22