L approccio moderno al Web. Cascading Style Sheets. L approccio moderno al Web. L approccio moderno al Web

Transcript

1 L approccio moderno al Web Cascading Style Sheets Claudio Fornaro ver. 2.0 Ogni pagina può essere considerata come composta da tre parti: la struttura (structure) l aspetto grafico (presentation) il comportamento dinamico (behavior) 1 2 L approccio moderno al Web La struttura riguarda l organizzazione delle informazioni in intestazioni, paragrafi, liste, ecc. Il linguaggio (X)HTML viene utilizzato per definire la struttura di una pagina I tag e gli attributi non strutturali (es. font, color) non sono utili né necessari, quindi si devono evitare L approccio moderno al Web L aspetto grafico determina il layout della pagina controllando la posizione e l aspetto degli elementi, i font, i colori, ecc. Il linguaggio Cascading Style Sheets (CSS) viene utilizzato per controllare l aspetto grafico di una pagina 3 4

2 L approccio moderno al Web L approccio moderno al Web Se la struttura e l aspetto grafico sono tenuti indipendenti, ciascuno può essere modificato senza che l altro ne risenta: il contenuto di una pagina può essere modificato senza cambiare il layout lo stesso contenuto si presenta in forma diversa a utenti diversi (es. testo più grande per chi ha problemi di vista) il layout di un intero sito può essere descritto da un unica serie di file e quindi Il comportamento dinamico della pagina permette alla stessa di modificarsi in base a condizioni che si verificano sul browser Si utilizzano linguaggi di scripting come JavaScript per manipolare gli oggetti che costituiscono la pagina L organizzazione degli oggetti di una pagina è descritta dal suo DOM cambiato facilmente 5 6 I browser sono diversi Nonostante la proclamata alta (ma sempre incompleta) aderenza agli standard Web, ogni browser visualizza la pagina in modo leggermente diverso Talvolta non proprio leggermente... I vecchi browser che non supportano gli standard dovrebbero essere evitati (se possibile, dipende dall utenza) 7 CSS Si occupano esclusivamente dell aspetto grafico della pagina Permettono di alleggerire (dimensione) le pagine HTML rimuovendo tag e attributi unicamente grafici Sono molto più potenti dei desueti tag di formattazione HTML Versione attuale: 2.1 (in vista la 3) Nessun browser ha il supporto completo Validazione: 8

3 HTML per i CSS HTML per i CSS Il codice HTML deve essere usato esclusivamente per definire la struttura logica della pagina e i contenuti, es.: titolo principale titolo secondario sezioni e paragrafi sezioni speciali (es. un programma in C) sezioni dedicate (es. barra di navigazione) elenchi (numerati, puntati, descrittivi) Non si devono utilizzare le caratteristiche (tag e attributi) di HTML che modificano il solo aspetto grafico della pagina, ad esempio: <font> <br> <i> <b> (usare <em> e <strong>) <table> (accettabili in alcuni casi) color, background, border align, bgcolor,... frasi e sezioni da evidenziare 9 10 <span> e <div> Il tag <span> serve per isolare una parte di testo all interno di un paragrafo, non va a capo (tipo inline) Il tag <div> serve per isolare una parte di testo che costituisce un paragrafo (o più di uno), quindi va a capo (tipo block) Entrambi possono essere identificati con l attributo id e/o essere associati ad una classe mediante l attributo class 11 <span> e <div> <div id="finepagina"> <p>copyright 2007, <span class="nomeditta">superciccio srl </span></p> <p>centralino </p> </div> Una regola CSS definirà univocamente la formattazione di un blocco div con id pari a finepagina e un altra quella di uno span con class nomeditta 12

4 Formato delle regole Formato delle regole Ogni regola o stile è formata da uno o più selettori e da un blocco di dichiarazione tra parentesi graffe: selettore {dichiarazione; dichiarazione;...} I selettori sono: semplici tag: p elenchi di tag: h1, h2, h3 nomi di classi:.nomeditta Le dichiarazioni hanno la struttura: proprietà:valore; p {color:red; font-size:1.5em; } Per migliore leggibilità si preferisce scrivere le dichiarazioni una per riga: p { color: red; font-size: 1.5em; } nomi di identificatori: #finepagina Tag selector Quando i selettori sono semplici nomi di tag o elenchi di nomi di tag, essi si chiamano tag selector (es. p) Le dichiarazioni relative ad un tag selector vengono applicate a OGNI istanza di quel tag (es. <p>) 15 Posizione delle regole Le tre possibili soluzioni possono essere utilizzate anche insieme: 1. Style Sheet interni: collocati all interno della pagina HTML visualizzata, valgono per tutta la pagina HTML 2. Style Sheet esterni: collocati in un file di testo.css, caricato insieme alla pagina HTML, valgono per tutta la pagina 3. Style Sheet inline: collocati all interno della pagina come attributo style dei singoli tag, valgono solo per quei singoli tag 16

5 Style Sheet interni Style Sheet esterni <head> <title>il TITOLO</title> <style type="text/css"> p { color: red; } h1 { color: green; } </style> Per includere un file.css in una pagina: si utilizza il tag HTML <link> (in <head>): <link rel="stylesheet" type="text/css" href="file.css" /> si utilizza la direttiva all interno del tag HTML <style> (dove è possibile aggiungere eventuali altre regole): <style url(file.css); p { color: red; } </style> </head> Style Sheet inline Si applicano soltanto al tag a cui sono aggiunti mediante l attributo style <h1 style="color:red;">hello</h1> <h1>ciao</h1> Il primo titolo è rosso, il secondo no Commenti Le righe di commento nei file.css sono racchiuse tra i caratteri /* e */ p { /* tutti i paragrafi */ color: red; } h1 { /* solo i titoli h1 */ color: green; } 19 20

6 Esercizio 1 I selettori Vedere il sorgente di Exe1, notare la struttura, i titoli <hx> e i paragrafi <p> Visualizzare la pagina nel browser Aggiungere INTERNAMENTE in una sezione <style> ad una ad una le regole CSS del file global.css, visualizzare di volta in volta nel browser l effetto prodotto da ciascuna, provare I tag selector (es. p) vengono applicati a ogni istanza di quel tag (es. <p>) Si possono rendere più specifici i selettori perché vengano applicati solo a certe istanze di certi tag e non ad altre mediante: classi identificatori eventualmente a cambiare i valori tag discendenti Le classi CSS Le classi CSS Definiscono uno stile composto da più dichiarazioni, questo stile può essere applicato a qualsiasi tag Il nome della classe nella definizione inizia con un punto Esempio.special { color: #FF0000; font-family: Arial; Per richiedere che un tag utilizzi la formattazione indicata in una classe: <p class="special">... </p> Il nome della classe qui non richiede il punto iniziale Quando un tag di formattazione appropriato non esiste, si usa un <div> o uno <span>: <span class="nomeditta"> } 23 24

7 Gli identificatori ID Le classi si riferiscono a vari oggetti che devono avere caratteristiche grafiche uguali Gli identificatori indicano UN elemento unico nella (o in ciascuna) pagina: ad es. IL menu di navigazione, LA riga in fondo alla pagina con il copyright, ecc. <p id="copyright">... </p> 25 Gli identificatori ID Si può richiedere che il tag che ha quell identificatore abbia una specifica formattazione Il nome di un ID nella definizione della regola CSS inizia con un cancelletto Esempio #copyright { color: #FF0000; font-family: Arial; } 26 Selettori discendenti Un tag è annidato in un altro se compare tra i tag di apertura e chiusura di quest ultimo Esempio <h1>...<p>...</p>...</h1> <h1>...</h1>...<p>...</p> Tutti i tag grafici sono annidati nei tag <html> e <body> 27 Selettori discendenti Per specificare uno specifico tag annidato in un altro, si indica come selettore il tag esterno seguito da quello interno senza virgole (il livello di annidamento può essere multiplo) I selettori di tag annidati: discendenti h1 strong {color:red;} in rosso solo le parti di tipo <strong> dentro un titolo <h1> li a {font-family:arial;} in Arial solo i link dentro gli item di una lista 28

8 Selettori e classi p.special {color:yellow;} ogni tag p di classe special p.special a {color:green;} ogni tag a dentro (direttamente o no) un tag p di classe special p.special a {color:green;} ogni tag a dentro (direttamente o no) un tag qualsiasi di classe special dentro (direttamente o no) un tag p 29 Gruppi di tag Per specificare un formato comune a più tag, li si elenca separati da virgole prima del blocco di dichiarazione: h1, h2, h3 {color:purple;} h4, p,.special, #copyright {color:cyan}; Il carattere * identifica tutti i tag: * {color:yellow;}.special * {color:yellow;} 30 Pseudo-classi a:link link da visitare a:visited link già visitato a:hover link su cui sta il mouse a:active link mentre si fa click N.B. Vanno scritte nell ordine indicato! Esempi a:hover {color:red;} #copy a:hover {color:green} Esercizio 2 Vedere il sorgente di Exe2 e visualizzare la pagina nel browser Aggiungere INTERNAMENTE in una sezione <style> ad una ad una le regole CSS del file global.css, ecc. La classe note serve per formattare la nota riquadrata, l ID wrap per inglobare tutta la pagina 31 32

9 Ereditarietà Ereditarietà I tag annidati in altri tag ereditano da questi ultimi molte delle loro proprietà (anche di classe e di ID) Ad esempio una proprietà color nel <body> si applica a tutto il testo, compreso quello in <h1>, <h2>, <p>, <li>, <table>, ecc. Un tag può ereditare da tutti i livelli di In genere non vengono ereditate le proprietà che definiscono: il posizionamento di elementi nella pagina i margini e i bordi i colori di background (ma non il colore dei link) la dimensione dei caratteri Quando due regole sono in conflitto, viene utilizzata quella più specifica annidamento precedenti Esercizio 3 Vedere il sorgente di Exe3 e visualizzare la pagina nel browser Aggiungere INTERNAMENTE in una sezione <style> ad una ad una le regole CSS del file global.css, ecc. Notare come i titoli abbiano lo stesso colore dovuto all aver ereditato la proprietà dalla regola per body 35 Famiglie di caratteri Quasi tutte le famiglie di caratteri (font) si dividono in due categorie: font con grazie (serif): es. Times font senza grazie (sans serif): es. Arial 36

10 Famiglie di caratteri Famiglie di caratteri I font con grazie sono generalmente più leggibili e quindi adatti per i paragrafi I font senza grazie sono più puliti e semplici e sono preferiti per i titoli Le pagine vengono visualizzate utilizzando i font presenti sulla macchina dell utente, se non ci sono viene di solito usato un Times 37 Per scegliere il font si usa la proprietà font-family seguita da nomi di font di aspetto simile in ordine di preferenza (l ultimo è bene sia un font generico) Arial, Helvetica, sans-serif "Times New Roman", Times, serif "Courier New", Courier, monospace "Marker Felt", "Comic Sans MS", fantasy 38 Colore del testo Colore del testo Si utilizza la proprietà color seguita dal colore espresso mediante: il nome: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow il codice (componenti di rosso, verde e blu): #2FBB44 valori esadecimali da 00 a FF rgb(123,23,240) valori decimali da 0 a 255 rgb(10%,50%,100%) valori percentuali 39 Il codice del colore in esadecimale può essere abbreviato se le cifre di ciascun colore sono uguali: 22BB44 si può scrivere anche come 2B4 Il codice del colore può essere determinato con un qualsiasi programma di grafica o dalla configurazione del desktop di Windows 40

11 Dimensione dei caratteri Dimensione dei caratteri I caratteri dei paragrafi, degli heading, ecc. hanno una dimensione predefinita Questa dimensione può essere modificata dalle impostazioni del browser (medio, piccolo, grande, ecc.) 41 La dimensione dei caratteri si definisce mediante la proprietà font-size seguita dalla dimensione, specificata: da una keyword: xx-small, x-small, small, medium, large, x-large, xx-large dove medium si riferisce al valore predefinito Esempio font-size: x-large; 42 Dimensione dei caratteri in pixel: 12px ma i monitor possono avere dimensione differente e pixel di dimensioni differenti) (inoltre questa dimensione su alcuni browser IE6 non è scalabile cambiando le impostazioni) Esempio font-size: 12px; Dimensione dei caratteri in percentuale rispetto al valore predefinito font-size: 75%; in em, dove 1em corrisponde al 100%, si tratta di un unità di misura molto usata nella stampa (l altezza di una M maiuscola) font-size: 1.5em; in cm, mm, in, ex, e altri font-size: 1.5cm; 43 44

12 Dimensione dei caratteri La dimensione dei caratteri viene ereditata da molti tag Problema: una regola come la seguente ul {font-size: 75%}; in una struttura come questa: <ul> <li>abc</li> <ul> <li>efg</li> fa sì che Dimensione dei caratteri... che il testo abc abbia dimensione 75% rispetto al valore del paragrafo precedente, mentre efg il 75% rispetto a quello di abc! Se questo comportamento non è quello desiderato, si può risolvere il problema specificando regole più restrittive: ul {font-size: 75%}; ul ul {font-size: 100%}; 46 Stile e peso dei caratteri Per avere il carattere in corsivo si imposta la proprietà font-style a italic (a normal per ripristinarlo) font-style: italic; Per avere il carattere in grassetto si imposta la proprietà font-weight a bold (a normal per ripristinarlo) font-weight: bold; Altre modifiche al testo Trasformazione in maiuscolo, minuscolo o iniziali maiuscole: proprietà: text-transform valori: lowercase, uppercase, capitalize, none Trasformazione in SMALL CAPS: proprietà: font-variant valori: small-caps, none 47 48

13 Altre modifiche al testo Aggiunta di una linea sopra, sotto, attraverso il testo: proprietà: text-decoration valori: underline, overline, line-through, none Per una maggiore controllabilità, al posto di text-decoration, si preferisce agire sui bordi del rettangolo che contiene il testo (trattati in seguito) 49 Spaziature tra parole e lettere Per spaziare diversamente le lettere si usa la proprietà letter-spacing seguita da una quantità (in genere in pixel), positiva o negativa, che viene aggiunta al valore predefinito (normal) letter-spacing: -1px; Per spaziare diversamente le parole si usa la proprietà word-spacing word-spacing: 2px; 50 Interlinea Interlinea Per spaziare diversamente le linee si usa la proprietà line-height seguita da una quantità che ne definisce il valore La quantità può essere espressa: in pixel in percentuale o em riferita alla dimensione del font (tipico default: 120%) line-height: 150%; come numero adimensionato riferito alla dimensione del font Se la quantità viene espressa come pixel, percentuali o em, viene ereditato il valore calcolato dell interlinea (non il valore della percentuale) Se la quantità viene espressa come numero adimensionato, viene ereditato il numero adimensionato stesso line-height: 1.5; 51 52

14 Allineamento del testo Per allineare il testo si usa la proprietà text-align seguita da: left (è il default), right, center, justify text-align: right; La non elevata risoluzione di un monitor, rispetto alla carta stampata, rende in genere non ottimale la giustificazione del testo in una pagina 53 Abbreviazione per il testo La proprietà font permette di scrivere compatte in una sola riga più regole font: style variant weight size/height family solo size e family sono obbligatori l interlinea height si specifica dopo size separata da uno slash, esempi: 1.5em/200% 24px/37px 54 Indentazione paragrafi Margini tra paragrafi La prima riga di un paragrafo si può indentare utilizzando la proprietà text-indent di una quantità (positiva o negativa) espressa: in pixel in em (numero di caratteri di cui indentare) in percentuale (rispetto alla larghezza dell elemento che contiene il paragrafo (es. 50% indenta un paragrafo non annidato di Il valore assoluto del margine che precede e segue un paragrafo può essere definito dalle proprietà margin-top e margin-bottom I valori possono essere espressi in pixel, em o percentuali, queste ultime riferite alla larghezza (e non l altezza!) dell elemento che contiene il paragrafo metà schermo) 55 56

15 Prima lettera e prima riga Per formattare solo la prima riga o la prima lettera di un paragrafo si possono utilizzare gli pseudo-elementi :first-letter e :first-line Esempi p:first-line {font-weight:bold;}.intro:first-letter {color: red;} Liste puntate e numerate La proprietà list-style-type per i tag selector ol e ul permette di cambiare il tipo di punto (bullet) o la numerazione, può avere i valori: none disc, circle, square decimal, lower-alpha, upper-alpha, lower-roman, upper-roman Liste puntate e numerate Liste puntate e numerate Per cambiare la posizione del bullet o del numero si usa la proprietà list-style-position seguita da: outside, inside Per cambiare la distanza tra il margine sinistro e il testo della lista si usano nei tag selector ol e ul le proprietà: padding-left (per Firefox e Mozilla) margin-left (per IE) 59 Per cambiare la distanza tra gli item si usano per il tag selector li le proprietà: margin-top margin-bottom Per utilizzare un immagine come bullet si usa la proprietà list-style-image con valore: url(pathname/file) Esempio list-style-image: url(img/b.gif) 60

16 Abbreviazione per le liste La proprietà list-style permette di scrivere in una sola riga più regole insieme (l ordine non è importante): list-style: image position type Esempi: list-style: circle url(b.gif) inside il bullet di tipo circle indicato viene utilizzato solo se b.gif non viene trovata 61 Esercizio 4 Vedere sorgente e visualizzaz. l Exe4 Aggiungere con <link> il riferimento al file CSS ESTERNO layout.css (aggiunge alcune caratteristiche grafiche non ancora viste) Aggiungere INTERNAMENTE (dopo <link>) in una sezione <style> ad una ad una le regole CSS del file stili.css, ecc. 62 Content Padding Il Box Model Ogni elemento di una pagina è racchiuso da un ideale box rettangolare (content ) e questo da altri tre: Lorem ipsum dolor sit amet, consectetuer adipiscing Border Margin (gutter) 63 Il Box Model Content: il box che contiene l elemento da visualizzare Padding: la cornice intorno al content, ha lo stesso colore di sfondo del content Border: la cornice (più o meno spessa) che racchiude content e padding Margin (gutter): la cornice che distanzia l elemento (incluso il border) dagli altri, ha lo stesso colore della pagina 64

17 Il Box Model Esempio Margin, padding e border Le proprietà margin, padding e border individuano le tre cornici intorno al content Per ciascuna di queste, i quattro lati sono tra di loro indipendenti Margin e padding Gli spessori possono essere sia positivi sia negativi e hanno nome composto dalle parole: margin, padding seguite da: -top, -right, -bottom-, -left Esempio: margin-top: 10px; La proprietà background-color definisce contemporaneamente il colore di sfondo del content e quello del Margin e padding Gli spessori dei margin e dei padding possono essere scritti in una sola riga: 1 valore: viene usato per i 4 lati 2 valori: il primo viene usato per top e bottom, il secondo per right e left 4 valori: si applicano rispettivamente a top, right, bottom e left (quindi in senso orario) margin: 0 10px 20px 15px; padding: 10px; padding (il default è transparent) 67 68

18 Collisione di margini Quando i margini di due elementi collidono in verticale (il margin-bottom di uno e il margin-top del sottostante), il margine risultante è il maggiore dei due e non la somma Questo non capita con i padding che invece si sommano 69 Border Le proprietà seguenti si applicano ai 4 bordi contemporaneamente: border-width border-style: solid, dotted, dashed, double, grove, ridge, inset, outset, none e hidden border-color Si possono abbreviare in: border: spessore stile colore; 70 Border I quattro lati dei bordi hanno nome: border-top, border-right, border-bottom, border-left border-top: spessore stile colore; Si possono combinare (l ordine è importante: prima border): border: 2px solid black; border-top: 8px dashed #333; border-left: none 71 Box di tipo Inline e Block I box di tipo Block (<p>, <h1>, <li>, <div>) creano un interruzione (un ritorno a capo) prima e dopo il box I box di tipo Inline (<em>, <a>, <img>, <span>) non creano alcuna interruzione Per cambiare il tipo di blocco di un tag si usa la proprietà display: display: inline; (es. elenco orizzontale) display: block; display: none; (nasconde il box) 72

19 Box di tipo Inline e Block Attenzione: assegnare un valore a margini e padding top e bottom di elementi inline (salvo <img>) non modifica l altezza del content Soluzioni: cambiare anche line-height trasformarlo in elemento block 73 Dimensioni del Box Si possono impostare (solo per elementi di tipo Block ) tramite le proprietà width e height seguite da valori: in pixel in em in percentuale sulla larghezza/altezza del contenitore Si riferiscono solo al content, quindi la dimensione complessiva bisogna aggiungere padding, border e margin 74 Dimensioni del Box Internet Explorer 6 Se i testo occupa più spazio verticale della height del contenitore, non tutti i browser aumentano l altezza del Box La proprietà overflow controlla questo comportamento ed è seguita da: visible (comportamento standard del br.) scroll (non fuoriesce e mette scroll-bar) auto (idem ma mette scroll-bar se servono) hidden (nasconde la parte eccedente) 75 Ogni browser ha differenze rispetto allo standard Per definire regole atte a correggere gli errori di IE6 si usa: * html regola che, non essendo standard, tutti gli altri browser ignorano (compresi IE non 6) N.B. Ignoreremo gli errori di IE5 e precedenti 76

20 Elementi flottanti Elementi flottanti Sono elementi (testi, immagini,...) che vengono spostati a sinistra o a destra della pagina (o del contenitore) L elemento non flottante successivo (es. testo) occupa lo spazio lasciato libero a fianco dell elemento flottante (lo avvolge ) La proprietà float è seguita dai valori: left, right o none per spostare l elem. verso quel margine Elementi flottanti Gli elementi flottanti inline (es. immagini e paragrafi) sono trattati come block Questo permette di poter indicare la larghezza di tutti gli elementi flottanti Bordi e background continuano sotto l elemento float e riappaiono a dest/sinist si rimuovono con la regola: overflow: hidden; (ma IE richiede anche la regola zoom: 1;) oppure si mascherano aggiungendo un Elementi flottanti bordo dello stesso colore dello sfondo 79 80

21 Elementi flottanti Elementi flottanti Per impedire che un elemento avvolga l elemento flottante precedente e continui invece sotto di esso, si può usare la proprietà clear seguita da quale tipo di float ignorare: left, right, both, none Tutte le le immagini hanno float: right; Le Le immagini 2 e 3 cercano di di avvolgere la la 1 Tutte le le immagini float: right; clear: right; Posizionamento di un Box Indicando per gli spessori destro e sinistro di margin il valore auto, lo spazio laterale tra Box contenitore e Box contenuto viene ripartito equamente (centrato orizzontalmente) #wrapper { width: 300px; margin: 15px auto 0 auto; } 83 Esercizio 5 Vedere il sorgente di Exe5 e visualizzare la pagina Vedere il sorgente di styles.css e aggiungerlo come CSS esterno (con <link>) alla pagina Aggiungere INTERNAMENTE (dopo <link>) in una sezione <style> ad una ad una le regole CSS del file stili.css, ecc. 84

22 Immagini nella pagina Non esistono proprietà CSS specifiche per il tag <img>, ma le più usate sono: border, padding, float e margin In genere non conviene definire regole che si riferiscono a tutte le immagini di una pagina, spesso hanno differenti funzioni: immagini nel testo, loghi, titoli, bottoni, pubblicità, ecc. Conviene definire classi e ID e/o usare selettori discendenti per applicare gli stili Esercizio 6 Vedere il sorgente di Exe6 e visualizzare la pagina Vedere il sorgente di styles.css e aggiungerlo come CSS esterno (con <link>) alla pagina Aggiungere INTERNAMENTE (dopo <link>) ad una ad una le regole CSS del file stili.css e verificarne il funzionamento cambiando i valori in modo selettivo: #galleria img Esercizio 7 Vedere il sorgente di Exe7 e visualizzare la pagina Vedere il sorgente di styles.css e aggiungerlo come CSS esterno (con <link>) alla pagina Aggiungere INTERNAMENTE (dopo <link>) in una sezione <style> ad una ad una le regole CSS del file stili.css, ecc. 87 Esercizio 8 Della pagina di Exe8 notare come ogni immagine sia racchiusa da vari <div>: interno per la sola immagine (classe photo) successivo per contenere la foto e la didascalia (classe figure) Aggiungere styles.css (CSS esterno) Aggiungere (dopo <link>) in una sezione <style> ad una ad una le regole CSS del file stili.css, ecc. 88

23 Colore di sfondo Si utilizza la proprietà: background-color: colore Si applica al <body> e ad altri tag Non è tipicamente stampato dalla stampante, salvo diversa impostazione del browser 89 Immagini di sfondo Si applicano al <body> e agli altri tag Non sono tipicamente stampate su carta Si utilizza la proprietà: background-image: url(percorso) percorso (anche tra " " o ' ') può essere: assoluto: preferibile quando l immagine si trova su altri server Web background-image: url( 90 Immagini di sfondo relativo alla root dello stesso server: /dir/dir/file preferibile quando si tratta di immagini sullo stesso server background-image: url(/img/b.gif) relativo al file CSS: dir/dir/file preferibile quando si sviluppa il sito (nei casi precedenti le immagini non sono visibili in fase di sviluppo off-line) background-image:url(../img/b.gif) 91 Replicazione dello sfondo La replicazione (tiling) dell immagine per riempire lo sfondo viene controllata dalla proprietà background-repeat che accetta i seguenti valori: repeat (replica in orizzontale e verticale) no-repeat (non replica) repeat-x (replica solo in orizzontale, es. per un banner) repeat-y (replica solo in verticale, es. per una sidebar) 92

24 Posizionamento dello sfondo La proprietà background-position stabilisce la posizione dell immagine di background ed è seguita da due valori: il primo per la posizione orizzontale il secondo per la posizione verticale I valori possono essere: keyword (es. left, top, etc.) distanze dai lati (es. 10 px) percentuali (es. 33%) I due valori possono anche utilizzare Posizionamento dello sfondo Le keyword la prima può essere: left, center, right la seconda può essere: top, center, bottom background-position: center center; Lo spazio viene diviso in 3 fasce orizzontali uguali e 3 fasce verticali uguali (in caso di pagine corte, Firefox dà problemi, usare: html {height: 100%}; top center bottom left center right repeat permette di creare fasce colorate metodi diversi (es. top 10px) Posizionamento dello sfondo due valori (positivi o negativi) in pixel o em corrispondenti allo scostamento orizzontale e verticale dal punto in alto a sinistra del contenitore (utile ad esempio per allineare correttamente un immagine di background in un elemento <li> per usarla come bullet) Non c è modo di definire uno scostamento dai bordi destro e inferiore Posizionamento dello sfondo due valori in percentuale corrispondenti alle posizioni orizzontale e verticale di contenitore e contenuto Es. i punti a distanza 66% in orizz. e 25% in vert. di entrambi vengono allineati: background-position: 66% 25% 95 96

25 Bloccaggio dello sfondo Abbreviazione per lo sfondo Per sbloccare la visualizzazione dello sfondo del contenitore (di solito la pagina) dal contenuto si usa la proprietà background-attachment seguita dai valori: scroll: è il default, lo sfondo è solidale al contenuto della pagina fixed: lo sfondo non si muove con il contenuto della pagina che sembra La proprietà background può essere seguita da tutti o alcuni dei valori di: colore immagine bloccaggio posizione replicazione background: #FFF url(b.gif) scroll left top norepeat background: url(b.gif) repeat-x fluttuavi sopra (es. per fissare un logo) Immagini e bullet Esercizio 9 Foto gratuite: Bullet per liste: Tiling pattern Vedere il sorgente di Exe9 e visualizzare la pagina Aggiungere styles.css (CSS esterno) Aggiungere INTERNAMENTE le regole CSS del file stili.css Creare un unico file global.css che contenga i due file di stile fusi insieme opportunamente (togliendo doppioni e modifiche di stili su styles)

26 Aspetto grafico dei link testuali Si può modificare l aspetto grafico dei link testuali impostando le proprietà a:link, a:visited, a:hover e a:active Per rimuovere la sottolineatura: text-decoration: none; e per aggiungerla: underline Per aggiungere bordi: border-bottom: solid 2px #9F3; Per aggiungere un immagine di background: background: url(...) repeat-x Aspetto grafico dei link testuali Si può trasformare un link in un bottone aggiungendo bordi, colori, padding e un eventuale immagine di background Il tag <a> è di tipo inline, se serve il comportamento di tipo block si usi la proprietà display: block; left bottom; Aspetto grafico dei link testuali Aspetto grafico dei link testuali Immagini diverse usate in :hover e :visited creano il cosiddetto effetto rollover Queste immagini vengono scaricate quando necessario e la prima volta introducono un ritardo Per eliminare il ritardo si possono creare elementi non visibili che le usano come Per creare bottoni contenenti testo come quelli a lato, bisogna utilizzare a:hover e collocare nel link anche la formattazione del titoletti con uno <span> Per rendere cliccabile tutto il bottone anche in IE6 aggiungere: * html a {height: 1px;} sfondo, così il browser le scarica subito

27 Barra di navigazione Tutti i siti dovrebbero contenere link che permettono di raggiungere velocemente le varie sezioni ( home, prodotti, chi siamo, contatti, ecc.) Tipicamente si usa un barra di navigaz. Il punto di partenza è una lista <ul> di link, alla lista viene in genere associata una classe o un ID per la formattazione <ul class="menubar"> 105 Esercizio 10 Vedere il sorgente di Exe10 e la pagina Si modifichi la lista in modo da trasformarla in una barra di navigazione verticale e poi in una orizzontale Notare i vari ID su <body>, <ul> (per identificare tutta la barra con mainnav ) e i singoli <li> (per differenziarli) Aggiungere INTERNAMENTE e verificare l effetto delle regole CSS in stili.css 106 Le tabelle Le tabelle Le tabelle dovrebbero essere utilizzate solo per contenere una griglia di valori Si cerchi sempre di utilizzare le strutture semantiche di suddivisione della tabella (<thead>, <tbody>, <caption>,...) Può essere utile associare un ID (o una classe) a ciascuna colonna (o gruppo) In alcuni casi si associa una classe o un Alcune proprietà quando sono associate a <table> si applicano a tutte le celle, titoli inclusi, altre non hanno effetto Ad esempio si può applicare padding alle celle ma non al tag <table> La proprietà vertical-align allinea il testo delle celle di ciascuna riga: top, baseline (le prime righe di ciascuna cella sono allineate), middle, bottom ID a ciascuna riga

28 Le tabelle La proprietà border se è associata a <table> crea una cornice intorno alla tabella, se è associata ai singoli elementi crea una cornice intorno ad essi Le celle sono separate tra loro da 2 pixel (tra i bordi), per cambiare lo spazio: border-spacing: valore (non fz in IE6) soluzione (codice non strutturale!): <table cellspacing="valore"> 109 Le tabelle Impostare lo spazio a 0 tra le celle con bordo spesso 1px produce bordi spessi 2px Per eliminare il doppio bordo: table {border-collapse: collapse;} La tabella e/o le singole celle possono contenere un immagine di background 110 Le tabelle Ai tag <col> e <colgroup> si possono applicare le proprietà relative al background e la proprietà width La proprietà width applicata a <colgroup> viene applicata alle singole colonne Per dimensionare una colonna: col#idcolonna {width: valore;} 111 Esercizio 11 Vedere il sorgente di Exe11 e visualizzare la pagina Notare la struttura della tabella e che la classe alt viene applicata a righe alterne Aggiungere INTERNAMENTE e verificare l effetto delle regole CSS in stili.css 112

29 I form Non esistono proprietà esclusive per i form, ma si possono utilizzare quelle generali relative ai vari tag Il supporto da parte dei browser è vario Stilisticamente si preferisce un elenco di etichette delle stesse dimensioni con a fianco i vari campi di input Esercizio 12 Vedere il sorgente di Exe12 e visualizzare la pagina Notare la struttura del form Aggiungere INTERNAMENTE e verificare l effetto delle regole CSS in stili.css Tipi di layout Tipi di layout Per risolvere il problema della varia dimensione degli schermi degli utenti, gli elementi float che compongono la pagina si organizzano in layout: di larghezza fissa: tipico 760 o 950 pixel liquidi: alcuni elementi (es. le sidebar) sono di dimensione fissa mentre altri di dimensione variabile elastici: il testo cambia di dimensione a Per avere un funzionamento intermedio tra layout a larghezza fissa e liquido si possono usare le proprietà: min-width: minima larghezza della pagina (o del contenitore) max-width: massima larghezza della pagina (o del contenitore) Ma IE6 li ignora seconda della dimensione

30 Utilizzo degli elementi float Utilizzo degli elementi float Si isolano e identificano i vari elementi mediante tag <div> (anche annidati) Per avere sidebar: si indica la larghezza della sidebar e la si definisce flottante l elemento non flottante riempie il buco lasciato dalla sidebar si aggiunge la proprietà clear a un eventuale sezione orizzontale che deve Ordine nell HTML Layout CSS sottostare sia la sidebar sia l elem. non flott. Utilizzo degli elementi float E preferibile che nella pagina HTML il contenuto principale sia il più possibile collocato verso l inizio perché: i motori di ricerca spesso analizzano solo i primi KB della pagina i browser ad uso di persone con problemi fisici (ad es. usano programmi che leggono a voce la pagina) possano accedere subito al contenuto principale Utilizzo degli elementi float Valori negativi per margin-left permettono di spostare a sinistra un elemento collocato a destra (il n. 4) Si può utilizzare lo schema seguente

31 Esercizio 13 Partendo da una pagina HTML qualsiasi (es. Exe13), scrivere una pagina HTML con la struttura e l aspetto indicati Posizionamento degli elementi I CSS offrono 4 modalità di posizionamento degli elementi mediante la proprietà position, questa può assumere i valori: absolute relative fixed static Position: absolute Position: relative Vengono date le distanze da 2 dei bordi dell oggetto di riferimento mediante le proprietà top, left, right e bottom L oggetto di riferimento è l ultimo oggetto in cui è contenuto che è stato posizionato esplicitamente (absolute, relative o fixed), quello iniziale è la finestra del browser Gli oggetti assoluti vengono rimossi dal flusso normale della pagina HTML e Lo scopo principale di questo posizionamento è definire l oggetto in questione come nuovo oggetto di riferimento, in questo caso non si usano le proprietà con le distanze Specificando invece le distanze, la posizione viene definita come con absolute, ma nella pagina resta vuoto lo spazio che l elemento occuperebbe resi indipendenti

32 Position: fixed Blocca l oggetto in una certa posizione sulla pagina Utile per creare sidebar fisse, per posizionare loghi e menu o per creare un effetto tipo frame (una parte resta fissa e il resto della pagina può scrollare ) Non è riconosciuto da IE Position: static E il normale posizionamento degli oggetti Gli oggetti vengono posizionati secondo il flusso della pagina HTML Problemi di IE Quando si usano i bordi right e bottom per il posizionamento, IE crea problemi nei posizionamenti successivi Soluzione: nell oggetto di riferimento impostare width: 100%; 127 Sovrapposizione di elementi Gli elementi absolute vengono posizionati sopra la pagina in strati successivi (layer) Per controllare la sovrapposizione degli strati si usa la proprietà z-index con un valore intero che ne specifica la distanza dalla pagina Gli elementi interni ad un altro vedono questo con z-index pari a 0 128

33 Sovrapposizione di elementi Nascondere gli elementi Visto con Gli elementi possono essere nascosti e mostrati con la proprietà visibility: hidden visible Spesso usato con elementi absolute quando si passa sopra di essi con il mouse (mediante la pseudoclasse :hover o con i JavaScript) per mostrare il tip (suggerimento) z-index: Esercizio 14 In Exe14 sono presenti 2 folder: prima: contiene il file HTML e la formattazione CSS iniziale dopo: contiene il file HTML e la formattazione CSS finale Si trasformi la pagina in prima in modo che appaia come la pagina in dopo sperimentando soluzioni e idee proprie 131