Progettazione di siti web a.a. 2015/16

Transcript

1 HTML e stili Progettazione di siti web a.a. 2015/16 Fogli di stile: introduzione Maria Simi Marzo, 2016 [Learning web design,, J. Niederst Manuale di riferimento del W3C] All'inizio del web solo annotazioni strutturali La decisione sullo stile di presentazione demandata ai browser HTML esteso con tag stilistici fonte di problemi Tag proprietari e non standard Trucchi e cattive pratiche Mancanza di pulizia e ridondanza delle pagine Scarsa aggiornabilità e consistenza Difficile visualizzazione su dispositivi alternativi La risposta: i 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 dei browser CSS-2 ben supportati da tutti i browser moderni salvo alcune eccezioni Il supporto non è ancora completo per i CSS3, ma vale la pena iniziare ad usarli. Vantaggi dei CSS Possibilità di applicare lo stesso stile a più contenuti Possibilità di riutilizzo di uno stesso contenuto con stili diversi Facilità di sviluppo e manutenzione Maggiore controllo stilistico Uno stile per molti contenuti I fogli di stile possono essere globali per il sito Le regole stilistiche stanno in un posto solo e sono utilizzate da tutte le pagine del sito Facilità di sviluppo 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 Stesso contenuto in più stili Diversi fogli di stile possono essere applicati alla stessa pagina fogli di stili diversi per diversi media: lo schermo, la stampa, il proiettore, il dispositivo mobile... stili diversi a seconda delle dimensioni dello schermo Possibile il riutilizzo degli stessi contenuti 1 di 7

2 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 altro... Regole CSS: sintassi Un foglio di stile contiene un insieme di regole stilistiche Sintassi di una regola: Regole CSS Regole CSS: altri esempi selettore { proprietà: valore; proprietà: valore; proprietà: valore Un esempio regola dichiarazioni h1 { font-weight: bold; font-size: 24px p, li { font-size: 12px; line-height: 150% interlinea 1,5 (18px) margin: 0; background: white; font-family: helvetica, arial, sans-serifserif Nota: Il punto e virgola separa le dichiarazioni, dopo l'ultima non serve, anche se c'è non dà errore Selettori Selettori per tipo di elemento (per tag) si selezionano tutti gli elementi con un certo tag h1 {color: blue Selettori ID e CLASS per selezionare elementi che abbiamo caratterizzato (nel codice HTML) con l attributo ID oppure con l attributo CLASS Selettori contestuali Si selezionano certi elementi sulla base del loro contesto (es. solo quelli che compaiono dentro altri elementi) Selettori di elementi singoli (per ID) È possibile definire stili su singoli elementi HTML, identificati da un nome unico (valore attributo id) Esempio: <p id="saluti" "saluti">saluti e baci... </p> #saluti { font-size: 11px; margin-top: 25px oppure p#saluti Nota: ci può essere un solo elemento con un certo id in una pagina 2 di 7

3 Selettori classe (CLASS) Possiamo definire una classe da usare per specializzare un tag esistente Esempio di specializzazione di h2: HTML: <h2 class="red" "red">getting started</ </h2> CSS: h2.red {color: red o definire una classe generica da usare per specializzare un qualunque elemento: HTML: <h2 class="smaller" "smaller">testo piccolo</h2> <p class="smaller">tutto qui dentro è più piccolo</p> Selettori contestuali I selettori contestuali sono limitati nell applicazione a un contesto: un tag, un elemento si presentano come una sequenza di selettori Possono essere: Selettori discendenti Selettori figlio Selettori di adiacenza CSS: *.smaller {font-size: 80% L'albero del documento <title>my home page</title> <body> <h1>my <em>home</em> page</h1> <p> Welcome to my home page! Let me tell you about my favorite <em>composers</em> </em>: </p> <div> <ul> <li> Elvis Costello </li> <li> Johannes Brahms </li> <li> George Brassens </li> </ul> </div> Selettori discendenti Definiscono stili che si applicano solo ad elementi all interno di altri tag: h1 { color: red em { color: red h1 em { color: blue <h1>questo titolo è <em>molto</em> importante</h1> L enfasi è blu nel contesto di un titolo rosso altrimenti è rossa ol a em { font-weight: bold Il testo enfatizzato dentro un ancora dentro una lista ordinata viene reso in grassetto Selettori figlio Come un selettore discendente ma si applica solo ai figli di un determinato elemento Selettori di adiacenza Si applica ad elementi che sono direttamente consecutivi e allo stesso livello (fratelli) p > em {background-color: gray <p>solo l elemento <em>figlio</em> di p <i>ma non quello che segue che invece è un <em>nipote</em></ ></i></ ></p> Il simbolo > è detto combinatore p {padding-left: 20px h1 + p {padding-left: 0px I paragrafi sono normalmente rientrati con eccezione del primo paragrafo immediatamente seguente un titolo di primo livello. 3 di 7

4 DIV e SPAN: elementi generici Servono per creare un elemento HTML a cui applicare gli stili. Una sorta di contenitore generico di porzioni di documenti. Ne esistono di due tipi Elementi di tipo blocco : <div>... </div> provocano una interruzione di riga prima e dopo Elementi "in linea": <span>... </span> Gli attributi id: per dare un nome unico class: per dire che appartiene a una certa classe (tipo) Non abusarne: applicare stili a elementi standard, se possibile. Tre modi di usare gli stili Foglio di stile in un file esterno e riferito nell' intestazione del documento Stili definiti nella testa del documento (embedded) Stili definiti sugli elementi del documento (inline) mediante l'attributo style Fogli di stile esterni Passi da seguire: Si crea il foglio di stile con un editore di testo Si salva con estensione.css (es stile.css) Nella sezione head della pagina HTML a cui vogliamo applicare lo stile: href="stile.css" /> Pagina normale Pagina con CSS Fogli di stile embedded Se vogliamo definire uno stile che vale solo per il documento: <style "text/css"> <!-- margin: 0; font-family: helvetica, arial, sans-serif --> </style> Nota: : 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 :-O Per cambiare gli stili localmente in una porzione di un documento Supponiamo che lo stile del documento preveda il font 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 con CSS (inline) Fogli di stile in cascata Ma perché in cascata (cascading)? Tutti gli aspetti stilistici sono definiti dai browser e continuano a valere, a meno di ridefinizione Ogni aspetto stilistico può essere definito più volte e ad uno stesso elemento si possono applicare regole in conflitto. Quale vince? Vince sempre la definizione più specifica Ma più specifica in che senso? Secondo la struttura gerarchica del documento 4 di 7

5 L'albero del documento <title>my home page</title> <body> <h1>my <em>home</em> page</h1> <p> Welcome to my home page! Let me tell you about my favorite <em>composers</em> </em>: </p> <div> <ul> <li> Elvis Costello </li> <li> Johannes Brahms </li> <li> George Brassens </li> </ul> </div> Gli stili vengono ereditati a meno di ridefinizione I selettori e l'albero Ogni selettore seleziona un sottoinsieme degli elementi nell'albero Esempi H1 LI DIV P EM LI più specifico di UL UL più specifico di DIV DIV allo stesso livello di H1 P fratello di H1 Precedenza tra sorgenti di stile Esiste inoltre la seguente precedenza tra stili definiti su uno stesso elemento a seconda della provenienza. In ordine di precedenza: 1. Stili definiti inline nel corpo del documento (tramite l'attributo STYLE) 2. Stili definiti nella testa del documento, dei due tipi: - Stili definiti in file esterni riferiti tramite LINK - Stili definiti nel tag STYLE nella testa del documento 3. Stili definiti dall utente (con opzioni del browser) 4. Stili definiti dai browser (quelli di default) Precedenza temporale A parità di sorgente vale la regola stilistica più recente Esempio 1: due fogli di stile collegati href="stile1.css" "stile1.css"> href="stile2.css" "stile2.css"> In caso di conflitti vincono le regole in stile2 Esempio 2: due regole nello stesso foglio di stile h1 {color: red h1 {color: blue Vince il colore blu Esempio <style "text/css"> h1 {color: green </style> href="stile.css" "stile.css"> file stile.css: h1 { <body style="color: red"> color: yellow;... <h1 style="color: blue">come sono?</h1> <p> Testo che segue il titolo.</p> Esempio <style "text/css"> h1 {color: green </style> <link rel="stylesheet" href="stile.css" "stile.css"> <body style="color: red"> <h1 style="color: blue">come sono?</ </h1> <p>testo che segue il titolo.</ </p> stile.css Esempio 5 di 7

6 Sfruttate la cascata! Regole in forma abbreviata Esempio 1 font-family: verdana, arial, sans-serifserif h1 {font-family: verdana, arial, sans-serif La ripetizione per h1 può non essere necessaria Esempio 2 margin: 0; margin-left: 20px; tutti i margini a 0 a parte quello sx 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 h1, h2, h3 {font-weight: bold h1 {color: green; text-align: center h1 {color: red.smaller {font-size: 9px h1 {font: 36pt serif 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 e annidare. Visual model: ci dice come queste scatole vengono sistemate nella finestra del browser (lo vedremo più avanti) Un anticipo del box model Ogni elemento HTML occupa una porzione rettangolare dello schermo, una scatola (element 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 Tutti questi rettangoli, o loro parti, hanno proprietà che possono essere influenzate tramite i CSS Box model: la struttura I quattro lati dei rettangoli margin-top: 8px margin-right: 10px margin-bottom: 12px margin-left: 14px margin: top right bottom left margin: 8px margin: 8px 8px 8px 8px margin: 8px 4px 2px margin: 8px 4px 2px 4px margin: 8px 2px margin: 8px 2px 8px 2px 6 di 7

7 Le proprietà dei box: margini Valori: lunghezze, percentuali rispetto al contenitore, auto auto inserisce un margine grande quanto basta a riempire il blocco contenitore Per centrare un elemento di tipo blocco: margin-left, margin-right: auto; Il blocco viene centrato perché il margine sinistro e destro sono resi uguali per simmetria Stessa cosa per padding,, che serve per distaccare il contenuto da un eventuale bordo Proprietà dei box: bordi border-style: none, hidden, dotted, dashed, solid, double, groove (incavato), ridge (sporgente), inset (incavato), outset (a rilievo) border-width: thin, medium, thick (thin < medium < thick) una misura (in px, em...) border-color: trasparent o un colore Fogli di stili per media diversi Possiamo per una stessa pagina richiamare fogli di stile diversi In particolare possiamo avere un foglio di stile per lo schermo, uno diverso per la stampa, uno per un telefonino o palmare con browser Quelli ben supportati sono: media="all", per tutti i media media="print", per la stampa media ="screen", per il video Altri: projection, handheld, aural Fogli di stili per media diversi: uso media="screen, projection" href="stile_schermo.css" /> media="print" href="stile_stampa.css" /> Il primo è utilizzato per lo schermo o la proiezione il secondo per la stampa (visibile con anteprima di stampa). 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 Prossimamente Esercizio sui selettori Stili per la tipografia 7 di 7