Cascading Style Sheets Level 2
Transcript
Cascading Style Sheets Level 2
1 CIM - WDT CSS2 2 CIM - WDT CSS2 Comunicazione, Innovazione, Multimedialità Web Design & Technologies Cascading Style Sheets Level 2 Marco Porta Marco Porta Cosa sono i Cascading Style Sheet ? Gli style sheet rappresentano un metodo semplice (ma potente) per definire l’”aspetto” dei documenti HTML descrivono come un documento deve essere rappresentato sullo schermo (o stampato, o, magari, anche pronunciato dai non-visual user agents ... ) Principali vantaggi offerti dagli style sheet: forniscono nuove possibilità per il controllo del rendering della pagina sono semplici da definire possono aumentare notevolmente la velocità di download delle pagine permettono di ottenere codice HTML più flessibile e gestibile I Cascading Style Sheet (CSS) sono in via di progressiva standardizzazione da parte del W3C il loro nome deriva dal fatto che più CSS possono essere specificati (“in cascata”) per lo stesso documento Marco Porta 3 CIM - WDT CSS2 Cascading Style Sheets – Livelli 1 e 2 Cascading Style Sheets – Level 1 (CSS1) raccomandazione ufficiale W3C: 17 dicembre 1996 sito con la specifica ufficiale: http://www.w3.org/TR/REC-CSS1 sono stati il primo tentativo di separare il più possibile lo stile di presentazione dei documenti dal loro contenuto permettono di associare stili (quali font, colori, spaziature, ... ) ai documenti HTML Cascading Style Sheets – Level 2 (CSS2) raccomandazione ufficiale W3C: 12 maggio 1998 sito con la specifica ufficiale: http://www.w3.org/TR/REC-CSS2 si basano sui CSS1 (con i quali sono quasi pienamente compatibili) e ne rappresentano un’evoluzione sono media-specific style sheets: le presentazioni dei documenti possono essere adattate ai browser visuali, alle stampanti, ai dispositivi uditivi, ai sistemi braille, ... Qualunque livello di CSS (l’1, il 2 e quelli futuri) utilizza la stessa sintassi di base Marco Porta 4 CIM - WDT CSS2 Come specificare gli style sheet per un documento ? Sono possibili tre metodi: 1. inclusione diretta nel documento HTML 2. link ad un CSS esterno (soluzione migliore) Esempio: Esempio: <html> <html> <head> <HTML> <HEAD> <title>La mia pagina</title> <TITLE>La mia pagina</TITLE> <styletype="text/css"> type="text/css"> <STYLE h1 { color:blue blue} } H1 { color: </style> </STYLE> </HEAD> </head> <BODY> <body> ........... ........... ........... ........... </BODY> </body> </HTML> </html> <title>La mia pagina</title> <link rel="stylesheet" href="miocss.css" type="text/css"> </head> <body> ........... ........... </body> 3. Integrazione nel tag Esempio: <p style="color: red"> Marco Porta <head> </html> 5 CIM - WDT CSS2 Elementi sintattici di base dei CSS Statement una at-rule o un rule-set (i CSS sono costituiti da una sequenza di statement ... ) At-rule inizia con il carattere @ ed è immediatamente seguita da da un identificatore (una stringa) Blocco “qualcosa” racchiuso tra parentesi graffe ( { ..... } ) Rule set (o semplicemente rule, regola) un selettore seguito da un blocco dichiarativo Selettore una combinazione di una o più stringhe associate ad un blocco dichiarativo, che precedono Blocco dichiarativo una sequenza di dichiarazioni separate dal carattere ‘;’ e racchiuse tra parentesi graffe Dichiarazione una proprietà seguita dal carattere ‘:’ e da uno o più valori (stringhe con un certo significato) Proprietà un identificatore Marco Porta 6 E subito... un esempio body { color: black; font-family: helvetica, sans-serif; background: white; margin: 2em; } h1, h2, h3, h4, h5, h6 { text-align: left; } h1 { clear: left; margin-top: 2em; text-align: center; } pre { font-family: monospace; margin-left: 1em; font-size: 90% } body, h1, h2, ..., h6, pre sono selettori color, font-family, background, margin, text-align, clear, margin-top, margin-left, fontsize e font-style sono proprietà black, helvetica, sans-serif, white, 2em, left, center, monospace, 1em, 90%, right e italic sono valori color: black è una dichiarazione { clear: left; margin-top: 2em; text-align: center; } è un blocco dichiarativo Marco Porta CIM - WDT CSS2 7 CIM - WDT CSS2 8 CIM - WDT CSS2 Document tree di un documento HTML È la scomposizione del documento secondo la gerarchia dei suoi elementi Esempio: <htmlL> HTML <head> <title>Una pagina HTML</title> </head> <body> <h1>La mia pagina</h1> <p>Le quattro stagioni:</p> <ul> HEAD TITLE <li>Inverno</li> <li>Primavera</li> <li>Estate</li> <li>Autunno</li> BODY H1 P LI UL LI LI </ul> </body> </html> Marco Porta Selettori Un selettore, tipicamente, è il nome di un elemento HTML o una combinazione di più nomi di elementi Esempi: h1, h2, ..., p, em, pre, body, img, a, h1 + h2, ... Se più selettori condividono lo stesso blocco dichiarativo, possono essere raggruppati in una lista separata da virgole Esempio: h1 { font-family: sans-serif } h2 { font-family: sans-serif } è equivalente a: h1, h2 { font-family: sans-serif } È possibile fare in modo che un selettore abbia uno stile diverso a seconda della sua posizione gerarchica nel document tree Esempio: h1 { color: red } em { color: red } h1 em { color: blue } significa che il colore del testo racchiuso tra la coppia di tag <EM> e </EM> in un documento HTML sarà rosso, a meno che non si trovi a sua volta tra la coppia di tag <H1> e </H1>, nel qual caso sarà blu Marco Porta 9 CIM - WDT CSS2 ... selettori (segue) È possibile specificare lo stile di un selettore quando figlio di un altro selettore Esempio: BODY > P { line-height: 1.3 } definisce lo stile di tutti gli elementi P che sono figli di BODY È possibile specificare lo stile che un selettore deve avere quando è adiacente ad un certo altro selettore Esempio: H1 + H2 { margin-top: -5mm } riduce di 5 mm lo spazio verticale che separa un elemento H2 da un elemento H1 che sia immediatamente precedente È possibile specificare lo stile da applicare ad un selettore in corrispondenza di certi attributi definiti nel documento HTML Esempio: H1[title] { color: blue; } significa che se è “settato” l’attributo title, il colore dell’elemento H1 deve essere blue A[href="vision.unipv.it"] { color: red } significa che se l’attributo href vale "vision.unipv.it", il colore del link deve essere red Marco Porta 10 CIM - WDT CSS2 ... selettori (segue) È possibile specificare lo stile da applicare ad un selettore in corrispondenza di certe classi definite nel documento HTML Esempio: h1.titolo_blu { color: blue; } significa che quando l’attributo class di un elemento H1 è posto uguale a titolo_blu, il colore del testo deve essere blue <h1 class="titolo_blu">Un titolo ...</h1> Esempio: *.verde { color: green } significa che quando l’attributo class di un qualsiasi elemento vale verde, il colore del testo per quell’elemento deve essere green Esempio: p.verde.verdino { color: green } significa che quando all’attributo class di un elemento P viene assegnata una lista di valori che includono verde e verdino, il colore del testo deve essere green Secondo questa regola, il testo dell’elemento P seguente sarebbe di colore green <p class="verde giallo marrone verdino"> Marco Porta 11 CIM - WDT CSS2 ... selettori (segue) Pseudo-classe :first-child Esempio: DIV > P:first-child { text-indent: 0 } quando un elemento P è il primo figlio di un elemento DIV, viene eliminata l’indentazione Pseudo-classi :link e :visited Esempio: A:link { color: red } A:visited { color: blue } specifica che un link non ancora visitato deve essere rosso, mentre un link già visitato deve essere blu Pseudo-classi dinamiche :hover e :active Esempio: A:hover A:active { color: yellow } { color: blue } specifica che: 1) quando il cursore del mouse (o di un altro dispositivo di puntamento) è sopra un link, il link deve essere giallo; 2) quando un link sta per essere attivato (ad esempio, l’utente ha premuto il pulsante del mouse ma non l’ha ancora rilasciato), il suo colore deve essere blu Marco Porta 12 CIM - WDT CSS2 ... selettori (segue) Pseudo-classe :lang Esempio: HTML:lang(fr) { quotes: '«' '»' } HTML:lang(de) { quotes: '»' '«' } specifica quali devono essere le “virgolette” aperte e chiuse a seconda che la lingua dichiarata per il documento sia il francese o il tedesco Pseudo-elemento :first-line Esempio: P:first-line { text-transform: uppercase } specifica che la prima riga di ogni paragrafo deve essere tutta in maiuscolo Pseudo-elementi :before e :after Esempio: P:before { content: "-->" } inserisce prima di ogni paragrafo la stringa “--> “ Pseudo elemento :first-letter consente di ottenere particolari effetti tipografici. Esempio: Marco Porta 13 CIM - WDT CSS2 Valori “particolari” (1): lunghezze Si distinguono due tipi di unità di lunghezza: unità relative e unità assolute. Le unità relative specificano la lunghezza relativamente ad un’altra proprietà di lunghezza Le unità di lunghezza relative sono: em : la dimensione del font dell’elemento in cui l’unità è usata ex : l’altezza del carattere ‘x’ del font in cui l’unità è usata px : pixel Esempi: H1 { font-size: 1.2em } definisce per l’elemento H1 una dimensione del font del 20% più grande della dimensione “ereditata” dall’elemento H1 { font-size: 1.5ex } definisce per l’elemento H1 una dimensione del font pari a una volta e mezza l’altezza del carattere ‘x’ del font “ereditato” dall’elemento H1 { font-size: 13px } definisce per l’elemento H1 una dimensione del font pari a 13 pixel Marco Porta 14 CIM - WDT CSS2 ... valori “particolari” (1): lunghezze (segue) Le unità di lunghezza assolute sono: in : pollici cm : centimentri mm : millimetri pt : punti ( = 1/72 di pollice ) pc : pica ( = 12 pt ) ... sono utili solo quando le “proprietà fisiche” del mezzo di output sono note ... Esempi: H1 H2 H3 H4 H4 Marco Porta { { { { { margin: 0.5in } line-height: 3cm } word-spacing: 4mm } font-size: 12pt } font-size: 1pc } /* /* /* /* /* pollici */ centimetri */ millimetri */ punti */ pica */ 15 CIM - WDT CSS2 Valori “particolari” (2): contatori I contatori permettono di contare “qualcosa” La proprietà counter-increment consente di specificare il nome di uno o più contatori ed eventuali interi indicanti le entità degli incrementi (default = 1) La proprietà counter-reset consente di settare uno o più contatori a 0 (default) o a valori specificati Esempio: P {counter-increment: par-num} H1 {counter-reset: par-num} P:before {content: counter(par-num, upper-roman) ". "} numera i paragrafi (P) per ogni “capitolo” (H1), a partire da 1 Il riutilizzo di un contatore in un elemento figlio crea una nuova istanza del contatore stesso Esempio: OL { counter-reset: item } LI { display: block } LI:before { content: counter(item) ". "; counter-increment: item } con più liste OL innestate, la numerazione ricomincia ogni volta da 1 Marco Porta 16 Valori “particolari” (3): colori Il valore di un colore può essere una stringa o una specifica RGB Le stringhe possono assumere i valori seguenti (definiti dall’ HTML 4.0): aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow Esempio: BODY {color: black; background: white } H1 { color: maroon } H2 { color: olive } Il modello RGB è usato nelle specifiche numeriche dei colori, che possono avvenire secondo varie forme Esempio: EM EM EM EM Marco Porta { { { { color: color: color: color: #f00 } #ff0000 } rgb(255,0,0) } rgb(100%, 0%, 0%) } /* /* /* /* #rgb (equivalente a #ff0000) */ #rrggbb */ range 0 - 255 */ range 0.0% - 100.0% */ CIM - WDT CSS2 17 CIM - WDT CSS2 La “cascata” I CSS per un documento HTML possono avere tre diverse origini: l’autore del documento: l’autore può specificare gli style sheet per un certo documento in base a proprie convenzioni l’utente: l’utente può avere la possibilità di specificare (direttamente o indirettamente) un proprio style sheet al quale si devono conformare i documenti lo user agent (tipicamente il browser): lo user agent deve avere uno style sheet di default sul quale basarsi quando né l’autore di un documento né l’utente ne definiscono uno Potranno nascere conflitti tra le varie regole di stile se i tre diversi style sheet specificano regole di stile diverse per lo stesso elemento HTML, quale deve essere applicata? Il modello a cascata dei CSS assegna diversi pesi ad ogni regola quando più regole possono essere applicate, ha la precedenza quella con il peso maggiore Per default, le regole nei CSS dell’autore hanno maggior peso di quelle nei CSS dell’utente le regole dei CSS dello user agent sono quelle col peso minore in assoluto Marco Porta 18 CIM - WDT CSS2 “Cascading order” - risoluzione dei conflitti Supponiamo che, per un certo elemento HTML, nei tre diversi tipi di style sheet vengano specificati diversi valori relativi alla stessa proprietà. Per decidere quale valore deve essere applicato vengono seguite le seguenti regole: 1. si guarda ai pesi: le regole degli author style sheet hanno la precedenza su quelle degli user style sheet, le quali, a loro volta, hanno la precedenza su quelle del default style sheet ... le dichiarazioni !important rappresentano però un’eccezione ... 2. si guarda alla specificità del selettore (a cui l’elemento HTML appartiene): selettori più specifici hanno la precedenza su selettori meno specifici 3. si sceglie l’ultima regola specificata: se permangono ambiguità per la scelta della regola, si sceglie quella che è stata specificata per ultimo Uno style sheet può importare altri style sheet: le regole dello style sheet “importatore” hanno la precedenza su quelle degli style sheet importati l’importazione avviene attraverso la at-rule @import (che deve precedere tutti i rule set dello style sheet) Esempio: @import url("miocss.css"); @import "miocss.css"; Marco Porta 19 CIM - WDT CSS2 Dichiarazioni !important Le dichiarazioni !important hanno la precedenza sulle “normali” dichiarazioni Sia gli author style sheet che gli user style sheet possono contenere dichiarazioni !important le dichiarazioni !important dello user style sheet hanno la precedenza ... quindi, l’utente ha sempre “l’ultima parola” ... Esempio: 1) 2) 3) /* Dallo user style sheet */ P { text-indent: 1em ! important } P { font-style: italic ! important } P { font-size: 18pt } 4) 5) 6) /* Dall’author style sheet */ P { text-indent: 1.5em !important } P { font: 12pt sans-serif !important } P { font-size: 24pt } la regola 1) vince sulla 4) la regola 6) vince sulla 3) la regola 5) vince sulla 6) Marco Porta 20 Calcolo della specificità di un selettore Il calcolo della specificità di un selettore avviene in questo modo: si conta il numero degli attributi ID presenti nel selettore ( = a ) si conta il numero degli altri attributi e pseudo-classi presenti nel selettore ( = b ) si conta il numero degli elementi presenti nel selettore ( = c ) si ignorano gli pseudo-elementi Il numero dato dalla concatenazione di a, b e c fornisce la specificità del corrispondente selettore Esempio: Marco Porta 1) * 2) 3) 4) 5) 6) LI {...} UL LI {...} UL OL+LI {...} H1 + *[REL=up]{...} #ciao {...} {...} /* /* /* /* /* /* /* a=0 '*' a=0 a=0 a=0 a=0 a=1 b=0 c=0 -> specificità = 0 significa "qualunque cosa" b=0 c=1 -> specificità = 1 b=0 c=2 -> specificità = 2 b=0 c=3 -> specificità = 3 b=1 c=1 -> specificità = 11 b=0 c=0 -> specificità = 100 */ */ */ */ */ */ */ CIM - WDT CSS2 21 CIM - WDT CSS2 Ereditarietà Alcuni valori possono essere ereditati dai figli di un elemento HTML nel document tree Esempio: <H1>Titolo molto <EM>importante</EM> </H1> se non è stato specificato nessun valore per la proprietà color dell’elemento <EM>, la parola “importante” avrà lo stesso colore del resto della frase (l’elemento <EM> eredita la proprietà color dall’elemento <H1>) ... per fissare un certo valore di default per una proprietà del documento basta specificare tale valore relativamente all’elemento HTML o BODY Ogni proprietà può avere come valore anche inherit Esempio: BODY { color: black !important; background: white !important; } * { color: inherit !important; background: transparent; per qualunque elemento che non sia BODY, color varrà black (valore ereditato da BODY) e il background sarà trasparente } Marco Porta 22 Il foreground e il background Il colore di foreground è tipicamente il colore del testo la proprietà color permette di specificare il colore del contenuto testuale di un elemento Esempio: EM { color: red } EM { color: rgb(255,0,0) } Per il background di un elemento è possibile specificare sia un colore, sia un’immagine attraverso la proprietà background Esempio: <HTML> <HEAD> <TITLE>Esempio di background con immagine </TITLE> <STYLE type="text/css"> BODY { background: url("...") } </STYLE> </HEAD> <BODY> <P>Il mio bakground </BODY> </HTML> Marco Porta CIM - WDT CSS2 23 CIM - WDT CSS2 Proprietà del background background-color imposta il background ad un certo colore (transparent è il default) Esempio: H1 { background-color: red } background-image imposta come background una certa immagine (none è il default) Esempio: BODY { background-image: url("miaimmagine.gif") } P { background-image: none } background-repeat se è specificata un’immagine di background, specifica se l’immagine deve essere ripetuta sia orizzontalmente che verticalmente (repeat, default), solo orizzontalmente (repeat-x), solo verticalmente (repeat-y) o non ripetuta (no-repeat) Esempio: BODY { background: white url("img.gif"); background-repeat: repeat-y; background-position: center; } Marco Porta 24 CIM - WDT CSS2 ... proprietà del background (segue) background-attachment se è specificata un’immagine di background, specifica se essa è fissa (fixed) rispetto al viewport (la finestra del browser) o si muove col documento (scroll, default) quando viene effettuato uno scrolling background-position se è specificata un’immagine di background, specifica la sua posizione iniziale. Può assumere i seguenti valori: lo stesso di 0% 0% top left e left top x% y% significa che il punto <perc> <perc> dell’immagine dato dalll’x% della sua larghezza e dall’y% della sua altezza (partendo da sinistra e dall’alto) si deve trovare in corrispondenza del punto nell’area di padding dato dalll’x% della sua larghezza e dall’y% della sua altezza <lung> <lung> 2cm 3cm significa che l’angolo superiore sinistro dell’immagine deve essere posto a 2 cm alla destra e 3 cm sotto l’angolo superiore sinistro dell’area di padding top, top center e center top lo stesso di 50% 0% right top e top right lo stesso di 100% 0% left, left center e center left lo stesso di 0% 50% center e center center lo stesso di 50% 50% right, right center e center right lo stesso di 100% 50% bottom left e left bottom lo stesso di 0% 100% bottom, bottom center e center bottom lo stesso di 50% 100% bottom right e right bottom lo stesso di 100% 100% Marco Porta 25 CIM - WDT CSS2 ... proprietà del background (segue) Esempio: BODY BODY BODY BODY { { { { background-position: background-position: background-position: background-position: right top } top center } center } bottom } /* 100% 0% /* 50% 0% /* 50% 50% /* 50% 100% */ */ */ */ Se l’immagine di background è fissa (cioè alla proprietà background-attachment è stato assegnato il valore fixed), il posizionamento dell’immagine è fatto relativamente al viewport, anziché rispetto all’area di padding Se è specificato un solo valore (percentuale o lunghezza), tale valore si riferisce sempre alla posizione orizzontale: la posizione verticale sarà pari a 50% Esempio: BODY { background-position: 25% } background consente di impostare “in un sol colpo” le varie caratteristiche del background Esempio: BODY { background: red } P { background: url("chess.png") gray 50% repeat fixed } Marco Porta 26 CIM - WDT CSS2 I font Quando il testo di un documento deve essere visualizzato, ogni carattere che lo compone viene “mappato” dal visual user agent in un corrispondente glyph (l’effettiva rappresentazione “artistica” del carattere secondo le caratteristiche di un certo font) allora un font sarà un insieme di glyph che rispettano certi criteri Prima di visualizzare un carattere, lo user agent deve affrontare i seguenti “problemi”: esiste un font per quel carattere (specificato o ereditato)? se esiste, è disponibile? se il font esiste ed è disponibile, quali glyph corrispondono al carattere? se il font non esiste o esiste ma non è disponibile, quali azioni devono essere intraprese? Deve essere utilizzato un font diverso? Sia nei CSS1 che nei CSS2 le caratteristiche dei font vengono specificate attraverso una serie di proprietà i CSS2, comunque, danno maggior “libertà”: a chi crea lo style sheet, permettendogli di descrivere meglio i font agli user agent, facilitando il processo di selezione dei font quando non sono immediatamente disponibili Marco Porta 27 CIM - WDT CSS2 Proprietà dei font font-family specifica una lista di “famiglie di font” e/o una lista di “famiglie generiche di font”. Una famiglia di font identifica un ben preciso tipo di font (es.: “Tempus Sans ITC”), mentre una famiglia generica identifica genericamente un font che deve soddisfare certe caratteristiche (serif, sans-serif, cursive, fantasy e monospace) Esempio: BODY { font-family: "Tempus Sans ITC", "Heisi Mincho W3", Symbol, serif } Supponiamo di voler visualizzare del testo contenente caratteri latini (famiglia Tempus Sans ITC), caratteri giapponesi (famiglia Heisi Mincho W3) e simboli matematici (famiglia Symbol). Quando deve visualizzare un carattere, lo user agent dovrebbe cercare il primo font (tra quelli elencati) che: è fisicamente disponibile dispone di un glyph per quel carattere rispetta tutte le caratteristiche definite dalle altre proprietà del font serif è la famiglia generica a cui lo user agent deve fare riferimento quando nessuna delle famiglie elencate soddisfa i necessari requisiti ... cercherà il font disponibile che più si avvicina a quello richiesto ... Marco Porta 28 CIM - WDT CSS2 ... proprietà dei font (segue) font-style può valere normal (default), oblique e italic font-variant può valere normal (default) o small-caps (caratteri con un “look” tutto maiuscolo) font-weight può valere normal ( = 400, default), bold ( = 700) , bolder, lighter, 100, ..., 900 bolder = “appena più scuro del font ereditato”; lighter = “appena più chiaro del font ereditato” Esempio: P { font-weight: normal } /* 400 */ H1 { font-weight: 700 } /* bold */ BODY { font-weight: 400 } STRONG { font-weight: bolder } /* 500, se disponibile */ font-stretch può valere normal (default), wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded e ultra-expanded Marco Porta 29 CIM - WDT CSS2 ... proprietà dei font (segue) font-size può essere un valore assoluto, un valore relativo, una lunghezza o una percentuale valore assoluto: xx-small, x-small, small, medium (default), large, x-large, xx-large valore relativo: smaller, larger (relativamente al font ereditato) lunghezza: es.: 12pt percentuale: es.: 150% (relativamente al font ereditato) font consente di impostare tutte le caratteristiche “in un sol colpo” Esempio: P P P P { { { { font: font: font: font: 80% sans-serif } x-large "new century schoolbook", serif } bold italic large Palatino, serif } oblique 12pt "Helvetica Nue", serif; font-stretch: condensed } Alla proprietà font possono anche essere assegnati i seguenti valori (che identificano un ben preciso font con caratteristiche predeterminate): caption (il font dei bottoni), icon (il font delle label delle icone), menu (il font dei menu), message-box (il font delle finestre di dilogo), small-caption (il font dei “piccoli” controlli), status-bar (il font usato nelle barre di stato) Marco Porta 30 CIM - WDT CSS2 Selezione del font da parte dello user agent Lo user agent ha a disposizione (almeno in teoria) quattro possibili modalità di selezione del font: corrispondenza del nome: lo user agent utilizza un font, “esistente e accessibile”, avente come nome esattamente il nome della famiglia specificata corrispondenza “intelligente” del nome: lo user agent utilizza un font, “esistente e accessibile”, che si avvicina il più possibile a quello richiesto (non essendoci corrispondenza del nome) sintesi del font: lo user agent crea il font, secondo le caratteristiche specificate download dal Web: lo user agent “scarica” il font dal Web (come avviene per le immagini, per i suoni, ecc.) Marco Porta 31 CIM - WDT CSS2 Proprietà del testo text-indent specifica l’indentazione della prima linea di testo in un blocco. Può assumere il valore di una lunghezza o di una percentuale Esempio: P { text-indent: 3em } text-align specifica come deve essere allineato il contenuto di un blocco. Può assumere i valori left, right, center, justify, o un certo valore stringa (solo per l’allineamento del testo nelle colonne di una tabella) Esempio: DIV.center { text-align: center } Marco Porta 32 CIM - WDT CSS2 ... proprietà del testo (segue) text-decoration può assumere i seguenti valori: none : nessuna decorazione underline : testo sottolineato overline : testo con una linea sopra line-through : testo con una linea nel mezzo blink : testo lampeggiante text-shadow accetta una lista di “effetti ombreggiatura” da applicare al testo, secondo l’ordine specificato. Ogni effetto è identificato da un offset e, opzionalmente, da un raggio e da un colore. Questa proprietà non è supportata dai CSS1 Esempio: Marco Porta 33 CIM - WDT CSS2 ... proprietà del testo (segue) letter-spacing specifica quale deve essere lo spazio orizzontale tra le lettere. Può valere normal (default) o assumere il valore di una lunghezza, che è da intendersi come spazio aggiuntivo oltre al normale Esempio: H1 { letter-spacing: 0.3em } word-spacing specifica quale deve essere lo spazio orizzontale tra le parole. Può valere normal (default) o assumere il valore di una lunghezza, da intendersi come spazio aggiuntivo oltre al normale Esempio: H1 { word-spacing: 1em } text-transform controlla le lettere maiuscole e minuscole del testo di un elemento. Può assumere i seguenti valori: capitalize : il primo carattere di ogni parola diventa maiuscolo uppercase : tutti i caratteri di tutte le parole diventano maiuscoli lowercase : tutti i caratteri di tutte le parole diventano minuscoli none : nessuna trasformazione (default) Marco Porta 34 ... proprietà del testo (segue) white-space definisce come devono essere gestiti gli spazi all’interno del testo. Può assumere i seguenti valori: normal : gli spazi consecutivi vengono interpretati come un unico spazio (default) pre : gli spazi consecutivi vengono lasciati inalterati e il “ritorno a capo” avviene solo in corripondenza dei “line break” nowrap : gli spazi consecutivi vengono interpretati come un unico spazio ma vengono ignorati i line break Esempio PRE { white-space: pre } P { white-space: normal } Marco Porta CIM - WDT CSS2 35 CIM - WDT CSS2 Il box model Ad ogni elemento nel document tree corrisponde un’area rettangolare, detta box Ogni box è suddiviso in una content area (in cui c’è l’effettivo contenuto) ed in eventuali aree di padding, di bordo e di margine LM = Left Margin RP = Right Padding TB = Top Border ................. ................. Lo stile del background della content area e della padding area è determinato dalla proprietà background dell’elemento che genera il box; lo stile di background della border area dipende dalle border properties; la margin area è sempre trasparente Marco Porta 36 ... il box model - un esempio UL { background: green; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; } LI { color: black; background: gray; margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; list-style: none } LI.withborder { border-style: dashed; border-width: medium; border-color: black; } <HTML> <HEAD> <TITLE>Esempio box</TITLE> <LINK rel="stylesheet" href="miocss.css" type="text/css"> </HEAD> <BODY> <UL> <LI>First element of list <LI class="withborder">Second element of list is longer to illustrate wrapping. </UL> </BODY> </HTML> Marco Porta CIM - WDT CSS2 37 CIM - WDT CSS2 Proprietà dei margini Le proprietà margin-top, margin-bottom, margin-left e margin-right impostano il valore per i corrispondenti margini margin consente di impostare tutti e quattro i margini “in un sol colpo” se è specificato un solo valore, questo viene applicato a tutti i margini se sono specificati due valori, si riferiscono, rispettivamente, ai margini superiore e inferiore e ai margini sinistro e destro se sono specificati tre valori, si riferiscono, rispettivamente, al margine superiore, ai margini sinistro e destro e al margine inferiore se sono specificati quattro valori, si riferiscono, rispettivamente, al margine superiore, al margine destro, al margine inferiore e al al margine sinistro Esempio: BODY { margin: 2em } /* tutti i margini a 2em */ BODY { margin: 1em 2em } /* margini sup e inf = 1em */ /* margini destro e sinistro = 2em */ BODY { margin: 1em 2em 3em } /* margine sup = 1em, margine des = 2em */ /* margine inf =3em, margine sin = 2em */ Marco Porta 38 Proprietà delle aree di padding Le proprietà padding-top, padding-bottom, padding-left e padding-right specificano il valore per le corrispondenti aree di padding padding consente di impostare il valore per tutte e quattro le aree “in un sol colpo” se è specificato un solo valore, questo viene applicato a tutte le aree se sono specificati due valori, si riferiscono, rispettivamente, alle aree superiore e inferiore e alle aree di sinistra e di destra se sono specificati tre valori, si riferiscono, rispettivamente, all’area superiore, alle aree di sinistra e di destra e all’area inferiore se sono specificati quattro valori, si riferiscono, rispettivamente, all’area superiore, all’area di destra, all’area inferiore e all’area di sinistra Esempio: H1 { background: white; padding: 1em 2em; } Marco Porta L’elemento H1 avrà white come colore di background della content area e della padding area La larghezza delle aree di padding superiore e inferiore sarà 1em, mentre la larghezza delle aree di padding di sinistra e di destra sarà 2em CIM - WDT CSS2 39 CIM - WDT CSS2 Proprietà dei bordi Le proprietà border-top-width, border-right-width, border-bottom-width e border-left-width specificano il valore per le corrispondenti aree di bordo possono assumere i valori “qualitativi” thin, medium e thick o un valore esplicito; borderwith consente di impostare il valore per tutte e quattro le aree di bordo (secondo modalità analoghe a quelle viste per i margini e per le aree di padding) Le proprietà border-top-color, border-right-color, border-bottom-color e border-left-color specificano il colore per le corrispondenti aree di bordo border-color consente di impostare il colore per tutte e quattro le aree di bordo (secondo le “solite” modalità) Le proprietà border-top-style, border-right-style, border-bottom-style e border-left-style specificano lo stile per le corrispondenti aree di bordo border-style consente di impostare lo stile per tutte e quattro i bordi (secondo le “solite” modalità) Sono disponibili gli stili: none(default), hidden, dotted, dashed, solid, double, groove, ridge, inset, outset Marco Porta 40 CIM - WDT CSS2 ... proprietà dei bordi (segue) È possibile riassumere tutte le caratteristiche dei bordi utilizzando le proprietà border-top, border-right, border-bottom e border-left Esempio: H1 { border-bottom: thick solid red } il bordo inferiore di un elemento H1 avrà thick come valore per la proprietà border-bottomwidth, solid come valore per la proprietà border-bottom-style e red come valore per la proprietà border-bottom-color La proprietà border permette di impostare la stessa larghezza, lo stesso stile e lo stesso colore per tutti e quattro i bordi Esempio: P { border: solid red } è equivalente a P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red } Marco Porta 41 CIM - WDT CSS2 Generazione dei box Si distinguono due tipi di elementi HTML: gli elementi di tipo block-level, che generano box principali di tipo block (“contenitori” dei loro box discendenti), e gli elementi di tipo inlinelevel, che generano box di tipo inline gli elementi block-level sono quelli che nei “media visivi” (browser, stampanti, ... ) vengono rappresentati come “blocchi” separati (es.: l’elemento <P>); gli elementi inline-level sono quelli che invece non sono rappresentati come blocchi separati (es.: l’elemento <EM>) La proprietà display consente di specificare come un elemento HTML deve essere disposto nel visual user agent display può assumere questi valori: block : l’elemento genera un box principale inline : l’elemento genera box di tipo inline list-item : l’elemento genera un blocco principale e un “list-item” inline box marker : dichiara che il “generated content” prima o dopo l’elemento è di tipo marker none : l’elemento non genera box run-in e compact : generano box principali o box inline a seconda del contesto table, inlinetable, ... fanno in modo che l’elemento si comporti come un elemento di tabella Esempio: P { display: block } EM { display: inline } LI { display: list-item } IMG { display: none } Marco Porta 42 CIM - WDT CSS2 Controllo della dimensione dei box width, height specificano, rispettivamente, la larghezza e l’altezza della content area dei box generati da elementi di tipo block-level. Possono assumere il valore auto (default, la larghezza o l’altezza è determinata automaticamente, in base ad altre proprietà), un valore lunghezza o un valore percentuale Esempio: P { width: 100px; height 200px } min-width, max-width, min-height, max-height specificano le dimensioni (larghezza e altezza) minime e massime che un box può avere. min-width e min-height possono assumere il valore 0 (default), un valore lunghezza o un valore percentuale. max-width e max-height possono assumere il valore none (default, non è posto nessun limite massimo), un valore lunghezza o un valore percentuale Marco Porta 43 CIM - WDT CSS2 Controllo della posizione dei box Nei CSS2, un box può essere disposto secondo tre diversi schemi di posizionamento: posizionamento a flusso normale: comprende particolari formattazioni per box di tipo block e box di tipo inline, il posizionamento relativo per i box di tipo inline e il posizionamento di blocchi di tipo compact e run-in posizionamento flottante: secondo questo modello, un box viene prima disposto secondo lo schema a flusso normale, e poi traslato a sinistra o a destra il più possibile posizionamento assoluto: secondo questo modello, ad un box viene assegnata una ben precisa posizione rispetto al blocco che lo contiene Gli schemi di posizionamento possono essere selezionati attraverso la proprietà position, che può assumere i seguenti valori: static : il box è disposto secondo lo schema a flusso normale relative : il box è disposto secondo lo schema a flusso normale, ma con posizionamento relativo absolute : la posizione del box è specificata attraverso le proprietà left, right, top e bottom (che specificano gli offset rispetto al blocco contenitore del box fixed : la posizione del box è calcolata secondo lo schema assoluto, ma in più il box è fisso rispetto a qualche riferimento (ad esempio, la finestra del browser; quando viene fatto uno scrolling della finestra, il box rimane fermo) Marco Porta 44 CIM - WDT CSS2 Posizionamento a flusso normale Formattazione per i box di tipo block i box vengono disposti uno di seguito all’altro, verticalmente, partendo dall’alto del blocco “contenitore” la distanza verticale tra due box adiacenti è determinata dalla proprietà margin il bordo sinistro (o destro, per un allineamento a destra) del box tocca il bordo sinistro (o destro) del blocco contenitore Formattazione per i box di tipo inline i blocchi vengono disposti uno di seguito all’altro, orizzontalmente, partendo dall’alto del blocco “contenitore” vengono rispettati i margini, i bordi, i “padding” i box possono essere allineati verticalmente secondo varie modalità Posizionamento relativo i blocchi vengono traslati rispetto ad un riferimento Marco Porta 45 CIM - WDT CSS2 Posizionamento flottante Secondo lo schema del posizionamento flottante, il box, una volta disposto secondo il flusso normale, viene opportunamente traslato a sinistra o a destra <HTML> <HEAD> <TITLE>Float example</TITLE> <STYLE type="text/css"> IMG { float: left } BODY, P, IMG { margin: 2em } </STYLE> </HEAD> <BODY> <P><IMG src=img.gif> Some sample text that has no other... </BODY> Esempio: </HTML> La proprietà float permette di specificare se un box deve essere traslato a sinistra (left), a destra (right) o non deve essere traslato (none) La proprietà clear consente di specificare quali lati di un box (di tipo block) disposto secondo il modello flottante non possono essere adiacenti ad altri box (può assumere i valori left, right, both e none) Marco Porta 46 CIM - WDT CSS2 Posizionamento assoluto Nello schema di posizionamento assoluto, un box è esplicitamente traslato rispetto al suo blocco “contenitore” Posizionamento assoluto di tipo fixed è una sottocategoria del posizionamento assoluto. L’unica differenza sta nel fatto che il blocco contenitore di riferimento è il viewport (la finestra del browser); se sul viewport viene fatto uno scrolling, il box non si muove ( effetto simile a quello ottenibile con i frame) Esempio: <HTML> <HEAD> <TITLE>A frame document with CSS2</TITLE> <STYLE type="text/css"> BODY { height: 8.5in } #header { position: fixed; width: 100%; height: 15%; top: 0; right: 0; bottom: auto; left: 0; } #sidebar { position: fixed; width: 10em; ............. Marco Porta 47 CIM - WDT CSS2 48 CIM - WDT CSS2 Esempi di posizionamento dei box <HTML> <HEAD> <TITLE>Confronto tra gli schemi di posizionamento</TITLE> </HEAD> <BODY> <P>Inizio del contenuto del body. <SPAN id="outer"> Inizio del contenuto di 'outer'. <SPAN id="inner"> Contenuto di 'inner'. </SPAN> Fine del contenuto di 'outer'. </SPAN> Fine del contenuto del body. </P> </BODY> </HTML> Marco Porta ... esempi di posizionamento dei box (segue) Proviamo con gli stili seguenti: BODY { line-height: 200% } #outer { color: red; background-color: yellow; } #inner { color: blue; background-color: fuchsia } BODY { line-height: 200% } #outer { position: relative; top: -20px; color: red; background-color: yellow; } #inner { position:relative; top: 15px; color: blue; background-color: fuchsia } BODY { line-height: 200% } #outer { position: absolute; top: 200px; left: 200px; width: 200px; color: red; background-color: yellow; } #inner { color: blue; background-color: fuchsia } BODY { line-height: 200% } #outer { color: red; background-color: yellow; } #inner { position: absolute; top: 200px; left: -30pxpx; height: 130px; width: 130px; color: red; background-color: yellow; } Marco Porta BODY { line-height: 200% } #outer { color: red; background-color: yellow; } #inner { float: right; width: 120px; color: blue; background-color: fuchsia } 49 CIM - WDT CSS2 Effetti particolari: l’overflow In certi casi, un box può uscire dai confini del suo blocco contenitore (ad esempio, perché il blocco è troppo piccolo, oppure perché il box è posizionato in modo assoluto, oppure ... ) la proprietà overflow permette di specificare se il contenuto di un elemento di tipo block-level deve essere “tagliato” oppure no quando il suo box esce dai confini. overflow può assumere i valori: visible (default), hidden, scroll e auto (valori che influenzano la presenza o assenza delle barre di scorrimento... ). Esempio: DIV { width : 100px; height: 100px; border: thin solid red; } BLOCKQUOTE { width : 125px; height : 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black } DIV.attributed-to { text-align : right; } <DIV> <BLOCKQUOTE> <P>I didn't like ... <DIV class="attributed-to"> -Groucho Marx</DIV> </BLOCKQUOTE> </DIV> visible Marco Porta 50 CIM - WDT CSS2 Effetti particolari: il clipping Una regione di clipping definisce quale “porzione” del contenuto di un elemento è visibile la proprietà clip (applicabile ad elementi che definiscono la proprietà overflow) può avere i valori auto (area di clipping pari a tutto il box dell’elemento, default) o shape (consente di definire un’area di clipping rettangolare, attraverso la specifica dei margini superiore, destro, inferiore e sinistro) Esempio: P { clip: rect(5px, 10px, 10px, 5px); } P { clip: rect(5px, -5px, 10px, 5px); } Marco Porta 51 CIM - WDT CSS2 Liste Il tipo e l’aspetto delle liste può essere controllato attraverso le seguenti proprietà: list-style-type consente di scegliere il tipo di lista. Può valere: disc (default) | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiraganairoha | katakana-iroha | none list-style-image permette di specificare un’immagine come “bullet” per la lista Esempio: UL { list-style-image: url("http://png.com/ellipse.png") } list-style-position permette di specificare un rientro per la lista e può valere outside (default) o inside list-style permette di impostare contemporaneamente le varie proprietà Marco Porta 52 Tabelle Esempio: TH { text-align: center; font-weight: bold } TH { vertical-align: baseline } TD { vertical-align: middle } TABLE { border-collapse: collapse } TR#row1 { border-top: 3px solid blue } TR#row2 { border-top: 1px solid black } TR#row3 { border-top: 1px solid black } Marco Porta CIM - WDT CSS2