CSSCCSSSSCSS 1 - lia.deis.unibo.itlia.deis.unibo.it/Courses/TecnologieWeb0910/lezioni/1.05.CSS.pdf · compatibilitàcon i vecchi browser CSSCCSSSSCSS 12 Regole e loro struttura

CSSCSSCSSCSSCSSCSSCSSCSS 1

Tecnologie WebTecnologie WebTecnologie WebTecnologie WebCSSCSSCSSCSS


A cosa servono i CSSA cosa servono i CSSA cosa servono i CSSA cosa servono i CSSA cosa servono i CSSA cosa servono i CSSA cosa servono i CSSA cosa servono i CSS

� I I I I fogli di stile a cascatafogli di stile a cascatafogli di stile a cascatafogli di stile a cascata ((((CascadingCascadingCascadingCascading Stile Stile Stile Stile SheetsSheetsSheetsSheets = CSS) = CSS) = CSS) = CSS) hanno lo scopo fondamentale di separare contenuto e hanno lo scopo fondamentale di separare contenuto e hanno lo scopo fondamentale di separare contenuto e hanno lo scopo fondamentale di separare contenuto e presentazione nelle pagine Webpresentazione nelle pagine Webpresentazione nelle pagine Webpresentazione nelle pagine Web

� HTML serve a definire il contenuto senza tentare di dare indicazioni su come rappresentarlo

� CSS serve a definire come il contenuto deve essere presentato all’utente

� I vantaggi sono evidenti:I vantaggi sono evidenti:I vantaggi sono evidenti:I vantaggi sono evidenti:

� Lo stesso contenuto diventa riusabile in più contesti

� Basta cambiare il CSS e può essere presentato correttamente in modo ottimale su dispositivi diversi (p.es. PC e palmari) o addirittura su media diversi (p.es. video e carta)

� Si può dividere il lavoro fra chi gestisce il contenuto e chi si occupa della parte grafica


Altri obiettivi dei CSSAltri obiettivi dei CSSAltri obiettivi dei CSSAltri obiettivi dei CSSAltri obiettivi dei CSSAltri obiettivi dei CSSAltri obiettivi dei CSSAltri obiettivi dei CSS

� Ridurre i tempi di scaricamento delle pagineRidurre i tempi di scaricamento delle pagineRidurre i tempi di scaricamento delle pagineRidurre i tempi di scaricamento delle pagine: una : una : una : una pagina che i CSS pagina che i CSS pagina che i CSS pagina che i CSS èèèè meno della metmeno della metmeno della metmeno della metàààà di una pagina che di una pagina che di una pagina che di una pagina che usa la formattazione con usa la formattazione con usa la formattazione con usa la formattazione con tagtagtagtag HTML, inoltre se il file HTML, inoltre se il file HTML, inoltre se il file HTML, inoltre se il file CSS CSS CSS CSS èèèè condiviso da picondiviso da picondiviso da picondiviso da piùùùù pagine viene scaricato una pagine viene scaricato una pagine viene scaricato una pagine viene scaricato una volta solavolta solavolta solavolta sola

� Ripulire il codice HTMLRipulire il codice HTMLRipulire il codice HTMLRipulire il codice HTML: eliminare l: eliminare l: eliminare l: eliminare l’’’’uso di estensioni uso di estensioni uso di estensioni uso di estensioni non proprietarie non proprietarie non proprietarie non proprietarie

� Rendere le pagine visualizzabili con dispositivi non Rendere le pagine visualizzabili con dispositivi non Rendere le pagine visualizzabili con dispositivi non Rendere le pagine visualizzabili con dispositivi non convenzionaliconvenzionaliconvenzionaliconvenzionali: palmari, : palmari, : palmari, : palmari, smartphonesmartphonesmartphonesmartphone ecc. ecc. ecc. ecc.


Un poUn poUn poUn poUn poUn poUn poUn po’’’’’’’’ di storiadi storiadi storiadi storiadi storiadi storiadi storiadi storia

� Le specifiche del CSS sono state emanate dal W3CLe specifiche del CSS sono state emanate dal W3CLe specifiche del CSS sono state emanate dal W3CLe specifiche del CSS sono state emanate dal W3C

� 1996 - CSS 1: poco usati a causa dello scarso supporto da parte dei browser (Netscape, IE3)

� 1998 - CSS 2: naturale evoluzione dei CSS 1, discreto supporto da parte dei browser (IE5, Firefox, Opera 7)

� 2004 - CSS 2.1: versione minore con alcuni aggiustamenti rispetto alla versione 2

� In fase di definizione: CSS 3

� Nel seguito faremo riferimento alle specifiche Nel seguito faremo riferimento alle specifiche Nel seguito faremo riferimento alle specifiche Nel seguito faremo riferimento alle specifiche CSS 2.1CSS 2.1CSS 2.1CSS 2.1


CSS e HTMLCSS e HTMLCSS e HTMLCSS e HTMLCSS e HTMLCSS e HTMLCSS e HTMLCSS e HTML

Un documento HTML può essere visto come un insieme di blocchi (contenitori) sui quali si può agire con stili diversi.

Ogni tag HTML definisce un blocco.

<html>

<head>...</head>

<body>

<h1>title</h1>

<div>

<p> uno </p>

<p> due </p>

</div>

<p> tre

<a href=“link.html">link</a>

</p>

</body>

</html>


Un esempio: Un esempio: Un esempio: Un esempio: Un esempio: Un esempio: Un esempio: Un esempio: HelloHelloHelloHelloHelloHelloHelloHello World World World World World World World World

� Creiamo una pagina HTML Creiamo una pagina HTML Creiamo una pagina HTML Creiamo una pagina HTML ---- denominata denominata denominata denominata hello.htmlhello.htmlhello.htmlhello.html ----che mostra la scritta che mostra la scritta che mostra la scritta che mostra la scritta HelloHelloHelloHello World!World!World!World!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML>

<HEAD><TITLE>Hello World</TITLE>

</HEAD><BODY>

<H1>Hello World!</H1><p>Usiamo i CSS</p>

</BODY></HTML>

� Non abbiamo dato alcuna indicazione su come Non abbiamo dato alcuna indicazione su come Non abbiamo dato alcuna indicazione su come Non abbiamo dato alcuna indicazione su come rappresentare la paginarappresentare la paginarappresentare la paginarappresentare la pagina

� Abbiamo solo specificato che si tratta di un titolo di Abbiamo solo specificato che si tratta di un titolo di Abbiamo solo specificato che si tratta di un titolo di Abbiamo solo specificato che si tratta di un titolo di primo livello e di un paragrafoprimo livello e di un paragrafoprimo livello e di un paragrafoprimo livello e di un paragrafo

� Il browser userIl browser userIl browser userIl browser useràààà gli stili standardgli stili standardgli stili standardgli stili standard


HelloHelloHelloHelloHelloHelloHelloHello World con CSSWorld con CSSWorld con CSSWorld con CSSWorld con CSSWorld con CSSWorld con CSSWorld con CSS

� Creiamo un secondo file di testo Creiamo un secondo file di testo Creiamo un secondo file di testo Creiamo un secondo file di testo –––– denominato denominato denominato denominato hello.csshello.csshello.csshello.css ---- che contiene queste due righe: che contiene queste due righe: che contiene queste due righe: che contiene queste due righe:

BODY { color: red }H1 { color: blue }

� Colleghiamo i due file inserendo il link al CSS nella Colleghiamo i due file inserendo il link al CSS nella Colleghiamo i due file inserendo il link al CSS nella Colleghiamo i due file inserendo il link al CSS nella testata della pagina testata della pagina testata della pagina testata della pagina hello.htmlhello.htmlhello.htmlhello.html


<HEAD><TITLE>Hello World con CSS</TITLE><LINK rel="stylesheet" href=“hello.css" type="text/ css">

</HEAD><BODY>


</BODY></HTML>


Il risultatoIl risultatoIl risultatoIl risultatoIl risultatoIl risultatoIl risultatoIl risultato

� Ecco il risultato nei due casi:Ecco il risultato nei due casi:Ecco il risultato nei due casi:Ecco il risultato nei due casi:





</HEAD><BODY>


</BODY></HTML>



</HEAD><BODY>


</BODY></HTML>



</HEAD><BODY>


</BODY></HTML>



</HEAD><BODY>


</BODY></HTML>

hello.html hello.html

hello.css


Applicare gli stili ad una pagina Applicare gli stili ad una pagina Applicare gli stili ad una pagina Applicare gli stili ad una pagina Applicare gli stili ad una pagina Applicare gli stili ad una pagina Applicare gli stili ad una pagina Applicare gli stili ad una pagina -------- 11111111

� Abbiamo due possibilitAbbiamo due possibilitAbbiamo due possibilitAbbiamo due possibilitàààà::::

� Mettere gli stili in uno file o più file separati

� Inserire gli stili nella pagina stessa

� Se si sceglie di mettere gli stili in file separati (si parla Se si sceglie di mettere gli stili in file separati (si parla Se si sceglie di mettere gli stili in file separati (si parla Se si sceglie di mettere gli stili in file separati (si parla di di di di stili esternistili esternistili esternistili esterni) sono possibili due sintassi diverse:) sono possibili due sintassi diverse:) sono possibili due sintassi diverse:) sono possibili due sintassi diverse:

<HTML><HEAD>

<TITLE>Hello World</TITLE><link rel="stylesheet"

href=“hello.css" type="text/css">

</HEAD><BODY>


</BODY></HTML>

<HTML><HEAD>

<TITLE>Hello World</TITLE><style type="text/css">

@import url(hello.css);</style>

</HEAD><BODY>


</BODY></HTML>


Applicare gli stili ad una pagina Applicare gli stili ad una pagina Applicare gli stili ad una pagina Applicare gli stili ad una pagina Applicare gli stili ad una pagina Applicare gli stili ad una pagina Applicare gli stili ad una pagina Applicare gli stili ad una pagina -------- 22222222

� Se invece si sceglie di mettere gli stili nella pagina si Se invece si sceglie di mettere gli stili nella pagina si Se invece si sceglie di mettere gli stili nella pagina si Se invece si sceglie di mettere gli stili nella pagina si può procedere in due modi:può procedere in due modi:può procedere in due modi:può procedere in due modi:

� Mettere tutti gli stili nell’header in un tag <style> (stili interni)

� Inserirli nei singoli elementi (stili inline)

<HTML><HEAD>

<TITLE>Hello World</TITLE></HEAD><BODY style="color: red" >

<H1 style="color: blue" >Hello World!</H1>

<p>Usiamo i CSS</p></BODY>

</HTML>

<HTML><HEAD>

<TITLE>Hello World</TITLE><style type="text/css">


</style></HEAD><BODY>


</BODY></HTML>


Qual Qual Qual Qual Qual Qual Qual Qual èèèèèèèè la scelta migliore?la scelta migliore?la scelta migliore?la scelta migliore?la scelta migliore?la scelta migliore?la scelta migliore?la scelta migliore?

� EEEE’’’’ sicuramente sicuramente sicuramente sicuramente èèèè preferibile usare gli preferibile usare gli preferibile usare gli preferibile usare gli stili esternistili esternistili esternistili esterni::::

� E’ facile applicare diversi stili alla stessa pagina

� Si ottimizza il trasferimento delle pagine perché il foglio stile rimane nella cache del browser

� LLLL’’’’uso degli uso degli uso degli uso degli stili stili stili stili inlineinlineinlineinline èèèè da evitareda evitareda evitareda evitare

� rendono molto basso il livello di separazione fra contenuto e presentazione

� Le modifiche sono molto complicate

� Gli Gli Gli Gli stili interni stili interni stili interni stili interni sono una via di mezzosono una via di mezzosono una via di mezzosono una via di mezzo

� Fra le due sintassi per gli stili esterni:Fra le due sintassi per gli stili esterni:Fra le due sintassi per gli stili esterni:Fra le due sintassi per gli stili esterni:

� Quella con <link> è più diffusa

� Quella con @import è meno critica per la compatibilità con i vecchi browser


Regole e loro strutturaRegole e loro strutturaRegole e loro strutturaRegole e loro strutturaRegole e loro strutturaRegole e loro strutturaRegole e loro strutturaRegole e loro struttura

� UnUnUnUn’’’’espressione come espressione come espressione come espressione come H1 { color: blue } prende il prende il prende il prende il nome di nome di nome di nome di regola CSSregola CSSregola CSSregola CSS

� Una regola CSS Una regola CSS Una regola CSS Una regola CSS èèèè composta da due parti:composta da due parti:composta da due parti:composta da due parti:

� Selettore: H1

� Dichiarazione: color: blue

� La dichiarazione a sua volta si divide in due partiLa dichiarazione a sua volta si divide in due partiLa dichiarazione a sua volta si divide in due partiLa dichiarazione a sua volta si divide in due parti

� Proprietà: color

� Valore: blue

� La sintassi generale si può quindi esprimere così

selettore { proprietà : valore }

� O più in generale:

selettore { proprietà1 : valore1 ; proprietà2 : valore2 , valore3 ; }


Selettori Selettori Selettori Selettori Selettori Selettori Selettori Selettori -------- 11111111

� Il selettore serve per collegare uno stile agli elementi a Il selettore serve per collegare uno stile agli elementi a Il selettore serve per collegare uno stile agli elementi a Il selettore serve per collegare uno stile agli elementi a cui deve essere applicatocui deve essere applicatocui deve essere applicatocui deve essere applicato

� Selettore universale: Selettore universale: Selettore universale: Selettore universale: identifica qualunque elemento identifica qualunque elemento identifica qualunque elemento identifica qualunque elemento

* { … }

� Selettori di tipo:Selettori di tipo:Selettori di tipo:Selettori di tipo: si applicano a tutti gli elementi di un si applicano a tutti gli elementi di un si applicano a tutti gli elementi di un si applicano a tutti gli elementi di un determinato tipo (ad es. tutti i <p>) determinato tipo (ad es. tutti i <p>) determinato tipo (ad es. tutti i <p>) determinato tipo (ad es. tutti i <p>)

tipo_elemento { … }

� Classi: Classi: Classi: Classi: si applicano a tutti gli elementi che presentano si applicano a tutti gli elementi che presentano si applicano a tutti gli elementi che presentano si applicano a tutti gli elementi che presentano llll’’’’attributo attributo attributo attributo class="nome_classe“

....nome_classe { … }

� Identificatori: Identificatori: Identificatori: Identificatori: si applicano a tutti gli elementi che si applicano a tutti gli elementi che si applicano a tutti gli elementi che si applicano a tutti gli elementi che presentano lpresentano lpresentano lpresentano l’’’’attributo attributo attributo attributo id="nome_id“

####nome_id { … }


Combinazioni di selettoriCombinazioni di selettoriCombinazioni di selettoriCombinazioni di selettoriCombinazioni di selettoriCombinazioni di selettoriCombinazioni di selettoriCombinazioni di selettori

� I selettori di tipo si possono combinare con quelli di I selettori di tipo si possono combinare con quelli di I selettori di tipo si possono combinare con quelli di I selettori di tipo si possono combinare con quelli di classe e di identificatore:classe e di identificatore:classe e di identificatore:classe e di identificatore:

tipo_elemento.nome_classe { … }

tipo_elemento#nome_id { … }

� In effetti negli esempi della pagina In effetti negli esempi della pagina In effetti negli esempi della pagina In effetti negli esempi della pagina precedebnteprecedebnteprecedebnteprecedebnte la la la la mancanza di un mancanza di un mancanza di un mancanza di un tipo_elementotipo_elementotipo_elementotipo_elemento prima di . O # prima di . O # prima di . O # prima di . O # sottointendevasottointendevasottointendevasottointendeva la presenza del selettore universale *la presenza del selettore universale *la presenza del selettore universale *la presenza del selettore universale *

....nome_classe �� *.nome_classe#nome_id �� *.#nome_id



� PseudoclassiPseudoclassiPseudoclassiPseudoclassi:::: si applicano ad un sottoinsieme degli si applicano ad un sottoinsieme degli si applicano ad un sottoinsieme degli si applicano ad un sottoinsieme degli elementi di un tipo identificato da una proprietelementi di un tipo identificato da una proprietelementi di un tipo identificato da una proprietelementi di un tipo identificato da una proprietàààà

tipo_elemento:proprietà { … }

� Stato di un’ancora: link e visiteda:link { … }, a:visited { … }

� Condizione di un elemento: active, focus e hoverh1:hover { … },

� PseudoelementiPseudoelementiPseudoelementiPseudoelementi: : : : si applicano ad una parte di un si applicano ad una parte di un si applicano ad una parte di un si applicano ad una parte di un elemento elemento elemento elemento

tipo_elemento:parte { … }

� Esempio: solo la prima linea o la prima lettera di un Esempio: solo la prima linea o la prima lettera di un Esempio: solo la prima linea o la prima lettera di un Esempio: solo la prima linea o la prima lettera di un paragrafo:paragrafo:paragrafo:paragrafo:

p:first-line { … }p:first-letter { … }



� Selettori gerarchici: Selettori gerarchici: Selettori gerarchici: Selettori gerarchici: si applicano a tutti gli elementi di si applicano a tutti gli elementi di si applicano a tutti gli elementi di si applicano a tutti gli elementi di un dato tipo che hanno un determinato legame un dato tipo che hanno un determinato legame un dato tipo che hanno un determinato legame un dato tipo che hanno un determinato legame gerarchico (discendente, figlio, fratello) con elementi gerarchico (discendente, figlio, fratello) con elementi gerarchico (discendente, figlio, fratello) con elementi gerarchico (discendente, figlio, fratello) con elementi di un altro tipodi un altro tipodi un altro tipodi un altro tipo

� tipo1 tipo2 { … } tipo1 discende da tipo2

� tipo1>tipo2 { … } tipo1 è figlio di tipo2

� tipo1+tipo2 { … } tipo1 è fratello di tipo2

� Ad esempio: Ad esempio: Ad esempio: Ad esempio: UL>LI {…} si applica solo agli elementi si applica solo agli elementi si applica solo agli elementi si applica solo agli elementi

contenuti direttamente in liste non ordinate:contenuti direttamente in liste non ordinate:contenuti direttamente in liste non ordinate:contenuti direttamente in liste non ordinate:

<UL><LI>Riga 1</LI>

</UL>

<UL><OL>

<LI>Riga 1</LI></OL>

</UL>

SI NO


RaggruppamentiRaggruppamentiRaggruppamentiRaggruppamentiRaggruppamentiRaggruppamentiRaggruppamentiRaggruppamenti

� Se la stessa dichiarazione si applica a piSe la stessa dichiarazione si applica a piSe la stessa dichiarazione si applica a piSe la stessa dichiarazione si applica a piùùùù tipi di tipi di tipi di tipi di elemento si scrivere una regola in forma raggruppataelemento si scrivere una regola in forma raggruppataelemento si scrivere una regola in forma raggruppataelemento si scrivere una regola in forma raggruppata

H1 { font-family: sans-serif }H2 { font-family: sans-serif }H3 { font-family: sans-serif }

H1, H2, H3 { font-family: sans-serif }

equivale a


ProprietProprietProprietProprietProprietProprietProprietProprietàààààààà

� Nelle dichiarazioni Nelle dichiarazioni Nelle dichiarazioni Nelle dichiarazioni èèèè possibile far uso di proprietpossibile far uso di proprietpossibile far uso di proprietpossibile far uso di proprietàààà singole o in singole o in singole o in singole o in forma abbreviata (forma abbreviata (forma abbreviata (forma abbreviata (shorthandshorthandshorthandshorthand propertiespropertiespropertiesproperties))))

� Le proprietà singole permettono di definire un singolo aspetto di stile

� Le shorthand properties consentono invece di definre un insieme di aspetti, correlati fra di loro usando una sola proprietà

� Per esempio ogni elemento permette di definire un margine Per esempio ogni elemento permette di definire un margine Per esempio ogni elemento permette di definire un margine Per esempio ogni elemento permette di definire un margine rispetto a quelli adiacenti usando quattro proprietrispetto a quelli adiacenti usando quattro proprietrispetto a quelli adiacenti usando quattro proprietrispetto a quelli adiacenti usando quattro proprietàààà: : : : margin-top, margin-right, margin-bottom, margin-lef t

� Utilizziamo le proprietUtilizziamo le proprietUtilizziamo le proprietUtilizziamo le proprietàààà singole applicandole ad un paragrafo:singole applicandole ad un paragrafo:singole applicandole ad un paragrafo:singole applicandole ad un paragrafo:

P { margin-top: 10px;margin-right: 8px;

margin-bottom: 10px;

margin-left: 8px; }

� Lo stesso risultato si può ottenere usando la proprietLo stesso risultato si può ottenere usando la proprietLo stesso risultato si può ottenere usando la proprietLo stesso risultato si può ottenere usando la proprietàààà in forma in forma in forma in forma abbreviata abbreviata abbreviata abbreviata margin ::::

P {margin: 10px 8px 10px 8px;}


Valori Valori Valori Valori Valori Valori Valori Valori -------- 11111111

� Numeri interi e reali (. come separatore decimale) Numeri interi e reali (. come separatore decimale) Numeri interi e reali (. come separatore decimale) Numeri interi e reali (. come separatore decimale)

� Grandezze: usate per lunghezze orizzontali e verticali. Grandezze: usate per lunghezze orizzontali e verticali. Grandezze: usate per lunghezze orizzontali e verticali. Grandezze: usate per lunghezze orizzontali e verticali. Un numero seguito da una unitUn numero seguito da una unitUn numero seguito da una unitUn numero seguito da una unitàààà di misura.di misura.di misura.di misura.

� UnitUnitUnitUnitàààà di misura relativedi misura relativedi misura relativedi misura relative� em: è relativa all'altezza font in uso. Se il font ha corpo 12pt, 1em varrà 12pt, 2em varranno 24pt.

� px: pixel, sono relativi al dispositivo di output e alle impostazioni del computer dell'utente

� UnitUnitUnitUnitàààà di misura assolute.di misura assolute.di misura assolute.di misura assolute.� in: pollici; (1 in =2.54 cm)� cm: centimetri � mm: millimetri � pt: punti tipografici (1/72 di pollice)� pc: pica = 12 punti


Valori Valori Valori Valori Valori Valori Valori Valori -------- 22222222

� Percentuali: percentuale del valore che assume la Percentuali: percentuale del valore che assume la Percentuali: percentuale del valore che assume la Percentuali: percentuale del valore che assume la proprietproprietproprietproprietàààà stessa nell'elemento padre. Un numero stessa nell'elemento padre. Un numero stessa nell'elemento padre. Un numero stessa nell'elemento padre. Un numero seguito da % seguito da % seguito da % seguito da %

� URI assoluti o relativi. Si usa la notazione URI assoluti o relativi. Si usa la notazione URI assoluti o relativi. Si usa la notazione URI assoluti o relativi. Si usa la notazione url(percorso)

� Stringhe: testo delimitato da apici singoli o doppiStringhe: testo delimitato da apici singoli o doppiStringhe: testo delimitato da apici singoli o doppiStringhe: testo delimitato da apici singoli o doppi

� Colori: possono essere identificati con tre metodi Colori: possono essere identificati con tre metodi Colori: possono essere identificati con tre metodi Colori: possono essere identificati con tre metodi differenti:differenti:differenti:differenti:

� In forma esadecimale #RRGGBB

� Tramite la funzione rgb(rosso,verde,blu)

� Usando una serie di parole chiave che possono indicare colori assoluti o dipendenti dall’impostazione del PC (proprietà di sistema)


Colori: parole chiaveColori: parole chiaveColori: parole chiaveColori: parole chiaveColori: parole chiaveColori: parole chiaveColori: parole chiaveColori: parole chiave

� Colori assoluti:Colori assoluti:Colori assoluti:Colori assoluti:

� Colori dipendenti dalle proprietColori dipendenti dalle proprietColori dipendenti dalle proprietColori dipendenti dalle proprietàààà di sistema:di sistema:di sistema:di sistema:


Attribuzione di uno stile ad un elemento Attribuzione di uno stile ad un elemento Attribuzione di uno stile ad un elemento Attribuzione di uno stile ad un elemento Attribuzione di uno stile ad un elemento Attribuzione di uno stile ad un elemento Attribuzione di uno stile ad un elemento Attribuzione di uno stile ad un elemento

� Per poter rappresentare una pagina HTML il browser deve Per poter rappresentare una pagina HTML il browser deve Per poter rappresentare una pagina HTML il browser deve Per poter rappresentare una pagina HTML il browser deve riuscire ad applicare ad ogni elemento uno stileriuscire ad applicare ad ogni elemento uno stileriuscire ad applicare ad ogni elemento uno stileriuscire ad applicare ad ogni elemento uno stile

� Un elemento privo di stile non può essere rappresentato: Un elemento privo di stile non può essere rappresentato: Un elemento privo di stile non può essere rappresentato: Un elemento privo di stile non può essere rappresentato:

� Anche se nella pagina non c’è nessuna regola CSS (interna o esterna) ogni browser ha un foglio stile di default che contiene stili per ogni tipologia di elemento HTML (tag)

� LLLL’’’’attribuzione può essere diretta e in questo caso abbiamo attribuzione può essere diretta e in questo caso abbiamo attribuzione può essere diretta e in questo caso abbiamo attribuzione può essere diretta e in questo caso abbiamo due casi:due casi:due casi:due casi:

� L’elemento contiene uno stile inline

� Esistono una o più regole il cui selettore rimanda all’elemento

� Oppure può essere indiretta:Oppure può essere indiretta:Oppure può essere indiretta:Oppure può essere indiretta:

� L’elemento “eredita” lo stile dall’elemento che lo contiene


EreditarietEreditarietEreditarietEreditarietEreditarietEreditarietEreditarietEreditarietàààààààà

� EEEE’’’’ un meccanismo di tipo differenziale simile per certi un meccanismo di tipo differenziale simile per certi un meccanismo di tipo differenziale simile per certi un meccanismo di tipo differenziale simile per certi aspetti allaspetti allaspetti allaspetti all’’’’ereditarietereditarietereditarietereditarietàààà nei linguaggi ad oggettinei linguaggi ad oggettinei linguaggi ad oggettinei linguaggi ad oggetti

� Si basa sulla blocchi annidati di un documento HTMLSi basa sulla blocchi annidati di un documento HTMLSi basa sulla blocchi annidati di un documento HTMLSi basa sulla blocchi annidati di un documento HTML

� Uno stile applicato ad un blocco esterno si applica anche ai blocchi in esso contenuti

� In un blocco interno:In un blocco interno:In un blocco interno:In un blocco interno:

� Si possono definire stili aggiuntivi

� Si possono ridefinire stili definiti in un blocco piùesterno (è una sorta di overriding)

� Lo stesso ragionamento si può esprimere in termini di Lo stesso ragionamento si può esprimere in termini di Lo stesso ragionamento si può esprimere in termini di Lo stesso ragionamento si può esprimere in termini di DOM: DOM: DOM: DOM:

� un nodo figlio eredita gli attributi dei nodi che si trovano sul ramo da cui discende


Esempio di ereditarietEsempio di ereditarietEsempio di ereditarietEsempio di ereditarietEsempio di ereditarietEsempio di ereditarietEsempio di ereditarietEsempio di ereditarietàààààààà

� NellNellNellNell’’’’esempio fatto allesempio fatto allesempio fatto allesempio fatto all’’’’inizio si ha un classico effetto inizio si ha un classico effetto inizio si ha un classico effetto inizio si ha un classico effetto delldelldelldell’’’’ereditarietereditarietereditarietereditarietàààà e dele dele dele del””””overridingoverridingoverridingoverriding””””

� LLLL’’’’elemento <p>Usiamo i CSS</p> non ridefinisce il colore del elemento <p>Usiamo i CSS</p> non ridefinisce il colore del elemento <p>Usiamo i CSS</p> non ridefinisce il colore del elemento <p>Usiamo i CSS</p> non ridefinisce il colore del testo e quindi eredita dal body: viene mostrato in rossotesto e quindi eredita dal body: viene mostrato in rossotesto e quindi eredita dal body: viene mostrato in rossotesto e quindi eredita dal body: viene mostrato in rosso

� LLLL’’’’elemento <H1>elemento <H1>elemento <H1>elemento <H1>HelloHelloHelloHello World</H1> ridefinisce lo stile e quindi World</H1> ridefinisce lo stile e quindi World</H1> ridefinisce lo stile e quindi World</H1> ridefinisce lo stile e quindi appare in bluappare in bluappare in bluappare in blu


BODY { color: red }H1 { color: blue }<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

4.0//EN"><HTML>

<HEAD><TITLE>Hello World con CSS</TITLE><LINK rel="stylesheet"

href=“hello.css" type="text/css"></HEAD><BODY>


</BODY></HTML>


<HEAD><TITLE>Hello World con CSS</TITLE><LINK rel="stylesheet"

href=“hello.css" type="text/css"></HEAD><BODY>


</BODY></HTML>

hello.html

hello.css


Limitazioni allLimitazioni allLimitazioni allLimitazioni allLimitazioni allLimitazioni allLimitazioni allLimitazioni all’’’’’’’’ereditarietereditarietereditarietereditarietereditarietereditarietereditarietereditarietàààààààà

� Non tutte le proprietNon tutte le proprietNon tutte le proprietNon tutte le proprietàààà sono soggette al meccanismo sono soggette al meccanismo sono soggette al meccanismo sono soggette al meccanismo delldelldelldell’’’’ereditarietereditarietereditarietereditarietàààà

� In generale non vengono ereditate quelle che In generale non vengono ereditate quelle che In generale non vengono ereditate quelle che In generale non vengono ereditate quelle che riguardano la formattazione del box riguardano la formattazione del box riguardano la formattazione del box riguardano la formattazione del box modelmodelmodelmodel

� Il box Il box Il box Il box èèèè il riquadro che circonda ogni elementoil riquadro che circonda ogni elementoil riquadro che circonda ogni elementoil riquadro che circonda ogni elemento

� La motivazione La motivazione La motivazione La motivazione èèèè abbastanza intuitiva: se ogni abbastanza intuitiva: se ogni abbastanza intuitiva: se ogni abbastanza intuitiva: se ogni elemento interno ereditasse le proprietelemento interno ereditasse le proprietelemento interno ereditasse le proprietelemento interno ereditasse le proprietàààà delldelldelldell’’’’elemento elemento elemento elemento che lo contiene avremmo un effetto grafico tipo che lo contiene avremmo un effetto grafico tipo che lo contiene avremmo un effetto grafico tipo che lo contiene avremmo un effetto grafico tipo ““““scatole cinesiscatole cinesiscatole cinesiscatole cinesi”””” assolutamente insensatoassolutamente insensatoassolutamente insensatoassolutamente insensato


Conflitti di stileConflitti di stileConflitti di stileConflitti di stileConflitti di stileConflitti di stileConflitti di stileConflitti di stile

� NellNellNellNell’’’’applicare gli stili possono nascere conflitti di applicare gli stili possono nascere conflitti di applicare gli stili possono nascere conflitti di applicare gli stili possono nascere conflitti di competenza per diversi motivi:competenza per diversi motivi:competenza per diversi motivi:competenza per diversi motivi:

� Esiste un’intersezione tra regole che utilizzano selettori di tipo diverso, ad esempio ID e Classe come in questo caso:

p#myID {text-color=red}p.myClass {text-color=blue}

…

<p id=myID class=myClass>

� Una pagina usa più fogli stile oppure combina fogli stile esterni e regole interne o inline

� Nello stesso foglio stile ci sono regole con lo stesso selettore e dichiarazioni diverse (banale errore o gestione disordinata dei CSS)


CascadeCascadeCascadeCascadeCascadeCascadeCascadeCascade

� Lo standard CSS definisce un insieme di regole di Lo standard CSS definisce un insieme di regole di Lo standard CSS definisce un insieme di regole di Lo standard CSS definisce un insieme di regole di risoluzione dei conflitti che prende il nome di risoluzione dei conflitti che prende il nome di risoluzione dei conflitti che prende il nome di risoluzione dei conflitti che prende il nome di cascadecascadecascadecascade

� La logica di risoluzione si basa su tre elementiLa logica di risoluzione si basa su tre elementiLa logica di risoluzione si basa su tre elementiLa logica di risoluzione si basa su tre elementi

� Origine del foglio stileOrigine del foglio stileOrigine del foglio stileOrigine del foglio stile::::

� Autore: stile definito nella pagina

� Browser: foglio stile predefinito

� Utente: in alcuni browser si può editare gli stili

� SpecificitSpecificitSpecificitSpecificitàààà: esiste una formula che misura il grado di : esiste una formula che misura il grado di : esiste una formula che misura il grado di : esiste una formula che misura il grado di specificitspecificitspecificitspecificitàààà attribuendo, p.es., un punteggio maggiore attribuendo, p.es., un punteggio maggiore attribuendo, p.es., un punteggio maggiore attribuendo, p.es., un punteggio maggiore ad un selettore di ID rispetto ad uno di classead un selettore di ID rispetto ad uno di classead un selettore di ID rispetto ad uno di classead un selettore di ID rispetto ad uno di classe

� Dichiarazione !Dichiarazione !Dichiarazione !Dichiarazione !importantimportantimportantimportant: : : : èèèè possibile aggiungere al possibile aggiungere al possibile aggiungere al possibile aggiungere al valore di una dichiarazione la clausola valore di una dichiarazione la clausola valore di una dichiarazione la clausola valore di una dichiarazione la clausola importantimportantimportantimportant

p.myClass { text-color: red !important }


Regole di risoluzione dei conflittiRegole di risoluzione dei conflittiRegole di risoluzione dei conflittiRegole di risoluzione dei conflittiRegole di risoluzione dei conflittiRegole di risoluzione dei conflittiRegole di risoluzione dei conflittiRegole di risoluzione dei conflitti

� Il CSS assegna un peso a ciascun blocco di regoleIl CSS assegna un peso a ciascun blocco di regoleIl CSS assegna un peso a ciascun blocco di regoleIl CSS assegna un peso a ciascun blocco di regole

� In caso di conflitto vince quella con peso maggiore In caso di conflitto vince quella con peso maggiore In caso di conflitto vince quella con peso maggiore In caso di conflitto vince quella con peso maggiore

� Per determinare il peso si applicano in sequenza una Per determinare il peso si applicano in sequenza una Per determinare il peso si applicano in sequenza una Per determinare il peso si applicano in sequenza una serie di regole:serie di regole:serie di regole:serie di regole:

� Origine: l’ordine di prevalenza è: autore, utente, browser

� Specificità del selettore: ha la precedenza il selettore con specificità maggiore (c’è una formula di calcolo della specificità)

� Ordine di dichiarazione: se esistono due dichiarazioni con ugual peso, specificità e origine vince quella fornita per ultima. Le dichiarazioni esterne sono considerate come precedenti a qualsiasi dichiarazione interna


Effetto di !Effetto di !Effetto di !Effetto di !Effetto di !Effetto di !Effetto di !Effetto di !importantimportantimportantimportantimportantimportantimportantimportant

� LLLL’’’’effetto della clausola effetto della clausola effetto della clausola effetto della clausola !!!!importantimportantimportantimportant èèèè molto semplicemolto semplicemolto semplicemolto semplice

� Una regola marcata come !important ha sempre precedenza sulle altre, indipendentemente da origine, specificità e ordine di apparizione


ProprietProprietProprietProprietProprietProprietProprietProprietàààààààà

� CSS definisce una sessantina di proprietCSS definisce una sessantina di proprietCSS definisce una sessantina di proprietCSS definisce una sessantina di proprietàààà che che che che ricadono grosso modo nei seguenti gruppi:ricadono grosso modo nei seguenti gruppi:ricadono grosso modo nei seguenti gruppi:ricadono grosso modo nei seguenti gruppi:

� Colori e sfondi

� Caratteri e testo

� Box model

� Liste

� Display e gestione degli elementi floating

� Posizionamento

� Tabelle


ColorColorColorColorColorColorColorColor

� Per ogni elemento si possono definire almeno tre Per ogni elemento si possono definire almeno tre Per ogni elemento si possono definire almeno tre Per ogni elemento si possono definire almeno tre colori:colori:colori:colori:

� il colore di primo piano (foreground color)

� il colore di sfondo (background color)

� il colore del bordo (border color)

� La proprietLa proprietLa proprietLa proprietàààà colorcolorcolorcolor definisce esclusivamente:definisce esclusivamente:definisce esclusivamente:definisce esclusivamente:

� il colore di primo piano, ovvero quello del testo

� il colore del bordo di un elemento quando non viene impostato esplicitamente con border-color.

� La sintassi di color La sintassi di color La sintassi di color La sintassi di color èèèè::::

selettore { color: <valore> }

dove il valore dove il valore dove il valore dove il valore èèèè definito con le modalitdefinito con le modalitdefinito con le modalitdefinito con le modalitàààà descritte in descritte in descritte in descritte in

precedenza (parola chiave, #RRGGBBprecedenza (parola chiave, #RRGGBBprecedenza (parola chiave, #RRGGBBprecedenza (parola chiave, #RRGGBB…………))))


BackgroundBackgroundBackgroundBackgroundBackgroundBackgroundBackgroundBackground

� La definizione dello sfondo può essere applicata a due La definizione dello sfondo può essere applicata a due La definizione dello sfondo può essere applicata a due La definizione dello sfondo può essere applicata a due soli elementi: body e tabellesoli elementi: body e tabellesoli elementi: body e tabellesoli elementi: body e tabelle

� ProprietProprietProprietProprietàààà singole e valori:singole e valori:singole e valori:singole e valori:

� background-color: colore oppure colore oppure colore oppure colore oppure transparent

� background-image: url di unurl di unurl di unurl di un’’’’immagine o immagine o immagine o immagine o none

� background-repeat: {repeat|repeat-x|repeat-y|no-repeat}

� background-attachment: {scroll|fixed}

� background-position: x,y in % o assoluti o x,y in % o assoluti o x,y in % o assoluti o x,y in % o assoluti o parole chiaveparole chiaveparole chiaveparole chiave (top|left|bottom|right}

� ProprietProprietProprietProprietàààà in forma breve: in forma breve: in forma breve: in forma breve: backgroundselettore {background: background-color background-image background-repeat background-attachment background-position;}


Gestione del testoGestione del testoGestione del testoGestione del testoGestione del testoGestione del testoGestione del testoGestione del testo

� Una parte consistente di CSS tratta la gestione del Una parte consistente di CSS tratta la gestione del Una parte consistente di CSS tratta la gestione del Una parte consistente di CSS tratta la gestione del testotestotestotesto

� Esistono proprietEsistono proprietEsistono proprietEsistono proprietàààà per definire tutti gli elementi per definire tutti gli elementi per definire tutti gli elementi per definire tutti gli elementi classici della tipografia classici della tipografia classici della tipografia classici della tipografia

� Aspetto dei caratteri:Aspetto dei caratteri:Aspetto dei caratteri:Aspetto dei caratteri:

� Tipo di carattere (font)

� Dimensione

� Peso

� Varianti di stile (normale, corsivo)

� Formattazione del testo:Formattazione del testo:Formattazione del testo:Formattazione del testo:

� Interlinea

� Allineamento

� Rientri

� Decorazioni (sottolineato, barrato ecc.)


FontFontFontFontFontFontFontFont

� UnUnUnUn fontfontfontfont èèèè una serie completa di caratteri (lettere, cifre, una serie completa di caratteri (lettere, cifre, una serie completa di caratteri (lettere, cifre, una serie completa di caratteri (lettere, cifre, segni si interpunzione) con lo stesso stile.segni si interpunzione) con lo stesso stile.segni si interpunzione) con lo stesso stile.segni si interpunzione) con lo stesso stile.

� Possono essere classificati sulla base di diversi criteri Possono essere classificati sulla base di diversi criteri Possono essere classificati sulla base di diversi criteri Possono essere classificati sulla base di diversi criteri (presenza o assenza di grazie, spaziatura fissa o (presenza o assenza di grazie, spaziatura fissa o (presenza o assenza di grazie, spaziatura fissa o (presenza o assenza di grazie, spaziatura fissa o proporzionale):proporzionale):proporzionale):proporzionale):


Con grazie o senza grazie?Con grazie o senza grazie?Con grazie o senza grazie?Con grazie o senza grazie?Con grazie o senza grazie?Con grazie o senza grazie?Con grazie o senza grazie?Con grazie o senza grazie?

� Le grazie sono piccole decorazioni che Le grazie sono piccole decorazioni che Le grazie sono piccole decorazioni che Le grazie sono piccole decorazioni che sporgono dal corpo della lettera (in sporgono dal corpo della lettera (in sporgono dal corpo della lettera (in sporgono dal corpo della lettera (in rosso nella figura a lato)rosso nella figura a lato)rosso nella figura a lato)rosso nella figura a lato)

� Nei testi stampati ad alta risoluzione i Nei testi stampati ad alta risoluzione i Nei testi stampati ad alta risoluzione i Nei testi stampati ad alta risoluzione i caratteri con grazie risultano molto picaratteri con grazie risultano molto picaratteri con grazie risultano molto picaratteri con grazie risultano molto piùùùùleggibili (le grazie leggibili (le grazie leggibili (le grazie leggibili (le grazie ““““guidanoguidanoguidanoguidano”””” llll’’’’occhio)occhio)occhio)occhio)

� Quando però si lavora a bassa Quando però si lavora a bassa Quando però si lavora a bassa Quando però si lavora a bassa risoluzione (i video dei computer sono risoluzione (i video dei computer sono risoluzione (i video dei computer sono risoluzione (i video dei computer sono tutti a bassa risoluzione) i caratteri tutti a bassa risoluzione) i caratteri tutti a bassa risoluzione) i caratteri tutti a bassa risoluzione) i caratteri senza grazie risultano molto pisenza grazie risultano molto pisenza grazie risultano molto pisenza grazie risultano molto piùùùùleggibilileggibilileggibilileggibili

� Esistono alcune font senza grazie, per Esistono alcune font senza grazie, per Esistono alcune font senza grazie, per Esistono alcune font senza grazie, per esempio il esempio il esempio il esempio il VerdanaVerdanaVerdanaVerdana, che sono stati , che sono stati , che sono stati , che sono stati pensati per essere molto leggibili pensati per essere molto leggibili pensati per essere molto leggibili pensati per essere molto leggibili anche a video e con caratteri di anche a video e con caratteri di anche a video e con caratteri di anche a video e con caratteri di piccola dimensionepiccola dimensionepiccola dimensionepiccola dimensione


fontfontfontfontfontfontfontfont--------family family family family family family family family -------- 11111111

� La proprietLa proprietLa proprietLa proprietàààà che ci permette di definire il tipo di che ci permette di definire il tipo di che ci permette di definire il tipo di che ci permette di definire il tipo di carattere carattere carattere carattere èèèè fontfontfontfont----family che prende come valore il nome family che prende come valore il nome family che prende come valore il nome family che prende come valore il nome di un font:di un font:di un font:di un font:

p {font-family: Verdana}

� I font pongono un problema di compatibilitI font pongono un problema di compatibilitI font pongono un problema di compatibilitI font pongono un problema di compatibilitàààà piuttosto piuttosto piuttosto piuttosto complesso: su piattaforme diverse (Windows, complesso: su piattaforme diverse (Windows, complesso: su piattaforme diverse (Windows, complesso: su piattaforme diverse (Windows, MacMacMacMac, , , , LinuxLinuxLinuxLinux…………) sono disponibili caratteri diversi e ogni utente ) sono disponibili caratteri diversi e ogni utente ) sono disponibili caratteri diversi e ogni utente ) sono disponibili caratteri diversi e ogni utente può avere un proprio set personalizzatopuò avere un proprio set personalizzatopuò avere un proprio set personalizzatopuò avere un proprio set personalizzato

� Per gestire questa situazione CSS mette a Per gestire questa situazione CSS mette a Per gestire questa situazione CSS mette a Per gestire questa situazione CSS mette a disposizione due meccanismidisposizione due meccanismidisposizione due meccanismidisposizione due meccanismi

� La definizione di famiglie generiche

� La possibilità di dichiarare più font in una proprietà


fontfontfontfontfontfontfontfont--------family family family family family family family family -------- 22222222

� Le 5 famiglie generiche sono e hanno una corrispondenza Le 5 famiglie generiche sono e hanno una corrispondenza Le 5 famiglie generiche sono e hanno una corrispondenza Le 5 famiglie generiche sono e hanno una corrispondenza specifica che dipende dalla piattaforma (fra parentesi i valori specifica che dipende dalla piattaforma (fra parentesi i valori specifica che dipende dalla piattaforma (fra parentesi i valori specifica che dipende dalla piattaforma (fra parentesi i valori utilizzati da Windows):utilizzati da Windows):utilizzati da Windows):utilizzati da Windows):

� serif (Times New Roman)

� sans-serif (Arial)

� cursive (Comic Sans)

� fantasy (Allegro BT)

� monospace (Courier)

� Una dichiarazione multipla Una dichiarazione multipla Una dichiarazione multipla Una dichiarazione multipla èèèè fatta in questo modo:fatta in questo modo:fatta in questo modo:fatta in questo modo:

p {font-family: Verdana, Helvetica, sans-serif;}

� Il browser procede per ordine: cerca prima il font Il browser procede per ordine: cerca prima il font Il browser procede per ordine: cerca prima il font Il browser procede per ordine: cerca prima il font VerdanaVerdanaVerdanaVerdana, , , , altrimenti cerca altrimenti cerca altrimenti cerca altrimenti cerca HelveticaHelveticaHelveticaHelvetica e se manca anche questo ricorre e se manca anche questo ricorre e se manca anche questo ricorre e se manca anche questo ricorre allallallall’’’’ultimo tipo: ultimo tipo: ultimo tipo: ultimo tipo: sanssanssanssans----serifserifserifserif

� SansSansSansSans----serifserifserifserif èèèè una famiglia generica e quindi si trova sempre una una famiglia generica e quindi si trova sempre una una famiglia generica e quindi si trova sempre una una famiglia generica e quindi si trova sempre una corrispondenzacorrispondenzacorrispondenzacorrispondenza

� Conviene quindi mettere sempre per ultima una famiglia genericaConviene quindi mettere sempre per ultima una famiglia genericaConviene quindi mettere sempre per ultima una famiglia genericaConviene quindi mettere sempre per ultima una famiglia generica


fontfontfontfontfontfontfontfont--------sizesizesizesizesizesizesizesize

� La proprietLa proprietLa proprietLa proprietàààà fontfontfontfont----sizesizesizesize permette di definire le permette di definire le permette di definire le permette di definire le dimensioni del testo (in tipografia: dimensioni del testo (in tipografia: dimensioni del testo (in tipografia: dimensioni del testo (in tipografia: corpocorpocorpocorpo del carattere)del carattere)del carattere)del carattere)

� La dimensione può essere espressa in forma assoluta:La dimensione può essere espressa in forma assoluta:La dimensione può essere espressa in forma assoluta:La dimensione può essere espressa in forma assoluta:

� Con una serie di parole chiave: xx-small, x-small, small, medium, large, x-large, xx-large

� Con unità di misura assolute: tipicamente pixel (px ) e punti (pt )

� Oppure in forma relativa:Oppure in forma relativa:Oppure in forma relativa:Oppure in forma relativa:

� Con le parole chiave smaller e larger

� Con l’unità em(proporzione rispetto al valore ereditato basato sulla M maiuscola: per esempio 1.5em = una volta e mezzo )

� Con l’unità ex : proporzione rispetto all’altezza della x minuscola (linea mediana)

� In percentuale (% rispetto al valore ereditato: 75%)


Il corpoIl corpoIl corpoIl corpoIl corpoIl corpoIl corpoIl corpo

� Il corpo del carattere tiene conto di una serie di Il corpo del carattere tiene conto di una serie di Il corpo del carattere tiene conto di una serie di Il corpo del carattere tiene conto di una serie di fattori:fattori:fattori:fattori:

� Ascendenti (puntino della i asta della d)

� Discendenti: gamba della g o della q

� Accenti delle maiuscole


fontfontfontfontfontfontfontfont--------sizesizesizesizesizesizesizesize e compatibilite compatibilite compatibilite compatibilite compatibilite compatibilite compatibilite compatibilitàààààààà

� Qual Qual Qual Qual èèèè il miglior modo di definire il corpo di un il miglior modo di definire il corpo di un il miglior modo di definire il corpo di un il miglior modo di definire il corpo di un carattere?carattere?carattere?carattere?

� In teoria sullo schermo sarebbe bene usare i pixel, ma In teoria sullo schermo sarebbe bene usare i pixel, ma In teoria sullo schermo sarebbe bene usare i pixel, ma In teoria sullo schermo sarebbe bene usare i pixel, ma IE non consente allIE non consente allIE non consente allIE non consente all’’’’utente di ridimensionare un testo utente di ridimensionare un testo utente di ridimensionare un testo utente di ridimensionare un testo espresso in pixel espresso in pixel espresso in pixel espresso in pixel

� La scelta migliore (consigliata da W3C) La scelta migliore (consigliata da W3C) La scelta migliore (consigliata da W3C) La scelta migliore (consigliata da W3C) èèèè quella di quella di quella di quella di utilizzare lutilizzare lutilizzare lutilizzare l’’’’emememem

� Anche qui però abbiamo un problema di Anche qui però abbiamo un problema di Anche qui però abbiamo un problema di Anche qui però abbiamo un problema di ridimensionamento in IEridimensionamento in IEridimensionamento in IEridimensionamento in IE

� La soluzione migliore La soluzione migliore La soluzione migliore La soluzione migliore èèèè esprimere in % la dimensione esprimere in % la dimensione esprimere in % la dimensione esprimere in % la dimensione del testo nel body (tipicamente 100%) e poi usare gli del testo nel body (tipicamente 100%) e poi usare gli del testo nel body (tipicamente 100%) e poi usare gli del testo nel body (tipicamente 100%) e poi usare gli emememem per gli elementi interni:per gli elementi interni:per gli elementi interni:per gli elementi interni:

body {font-size:100%}h1 {font-size:2.5em}p {font-size:0.875em}

body {font-size:100%}h1 {font-size:2.5em}p {font-size:0.875em}


fontfontfontfontfontfontfontfont--------weightweightweightweightweightweightweightweight

� La proprietLa proprietLa proprietLa proprietàààà font-weight definisce il definisce il definisce il definisce il peso del carattere (la grossezza dei peso del carattere (la grossezza dei peso del carattere (la grossezza dei peso del carattere (la grossezza dei tratti che lo compongono)tratti che lo compongono)tratti che lo compongono)tratti che lo compongono)

� LLLL’’’’esempio piesempio piesempio piesempio piùùùù noto noto noto noto èèèè normale/neretto normale/neretto normale/neretto normale/neretto (impropriamente chiamato grassetto) (impropriamente chiamato grassetto) (impropriamente chiamato grassetto) (impropriamente chiamato grassetto) ma ma ma ma èèèè possibile avere una gamma pipossibile avere una gamma pipossibile avere una gamma pipossibile avere una gamma piùùùùampia di pesiampia di pesiampia di pesiampia di pesi

� Il peso si può esprimere in diversi modi:Il peso si può esprimere in diversi modi:Il peso si può esprimere in diversi modi:Il peso si può esprimere in diversi modi:

� Valori numerici: 100, 200 …800, 900

� Parole chiave assolute: normal, bold

� Parole chiave relative: bolder, lighter

� normal corrisponde a 400, bold a 700


fontfontfontfontfontfontfontfont--------stylestylestylestylestylestylestylestyle

� La proprietLa proprietLa proprietLa proprietàààà font-style permette di definire permette di definire permette di definire permette di definire

varianti del testo rispetto al normale (tondo nel varianti del testo rispetto al normale (tondo nel varianti del testo rispetto al normale (tondo nel varianti del testo rispetto al normale (tondo nel linguaggio tipografico)linguaggio tipografico)linguaggio tipografico)linguaggio tipografico)

� normal: valore di default (tondo)� italic: testo in corsivo

� oblique: testo obliquo, simile a italic

� In tipografia:In tipografia:In tipografia:In tipografia:

� il corsivo viene progettato separatamente e può essere anche molto diverso dal tondo:

Prova Prova� Il testo obliquo è invece derivato per deformazione dal tondo


fontfontfontfontfontfontfontfont--------variantvariantvariantvariantvariantvariantvariantvariant

� La proprietLa proprietLa proprietLa proprietàààà font-variant èèèè simile a simile a simile a simile a font-style e e e e

permette di impostare unpermette di impostare unpermette di impostare unpermette di impostare un’’’’altra variante del testo: il altra variante del testo: il altra variante del testo: il altra variante del testo: il maiuscolettomaiuscolettomaiuscolettomaiuscoletto ((((smallsmallsmallsmall----capscapscapscaps))))

� Ammette due valori: Ammette due valori: Ammette due valori: Ammette due valori: normal e e e e small-caps

� Come per il corsivo anche per il maiuscoletto in Come per il corsivo anche per il maiuscoletto in Come per il corsivo anche per il maiuscoletto in Come per il corsivo anche per il maiuscoletto in tipografia abbiamo una variante progettata tipografia abbiamo una variante progettata tipografia abbiamo una variante progettata tipografia abbiamo una variante progettata adadadad----hochochochoc (in (in (in (in pratica per una font si ha la serie dei caratteri pratica per una font si ha la serie dei caratteri pratica per una font si ha la serie dei caratteri pratica per una font si ha la serie dei caratteri maiuscoli, quella dei minuscoli e quella dei maiuscoli, quella dei minuscoli e quella dei maiuscoli, quella dei minuscoli e quella dei maiuscoli, quella dei minuscoli e quella dei maiuscoletti)maiuscoletti)maiuscoletti)maiuscoletti)

� Nei computer però questa variante non Nei computer però questa variante non Nei computer però questa variante non Nei computer però questa variante non èèèè quasi mai quasi mai quasi mai quasi mai disponibile e si usa un carattere maiuscolo di un corpo disponibile e si usa un carattere maiuscolo di un corpo disponibile e si usa un carattere maiuscolo di un corpo disponibile e si usa un carattere maiuscolo di un corpo pipipipiùùùù piccolo (piccolo (piccolo (piccolo (falso maiuscolettofalso maiuscolettofalso maiuscolettofalso maiuscoletto))))


La proprietLa proprietLa proprietLa proprietLa proprietLa proprietLa proprietLa proprietàààààààà fontfontfontfontfontfontfontfont

� La proprietLa proprietLa proprietLa proprietàààà font èèèè una proprietuna proprietuna proprietuna proprietàààà sintetica che sintetica che sintetica che sintetica che

consente di definire tutti gli attributi dei caratteri in un consente di definire tutti gli attributi dei caratteri in un consente di definire tutti gli attributi dei caratteri in un consente di definire tutti gli attributi dei caratteri in un colpo solo, nellcolpo solo, nellcolpo solo, nellcolpo solo, nell’’’’ordine:ordine:ordine:ordine:� font-style font-variant font-weight font-size

font-family font di sistema

� EsEsEsEs: : : : p {font: italic bold 10px Arial,Serif;}

� I I I I font di sistemafont di sistemafont di sistemafont di sistema permettono di adattare le pagine permettono di adattare le pagine permettono di adattare le pagine permettono di adattare le pagine allallallall’’’’aspetto del sistema operativo, sono 6 valori:aspetto del sistema operativo, sono 6 valori:aspetto del sistema operativo, sono 6 valori:aspetto del sistema operativo, sono 6 valori:

� caption: font usato per bottoni e combo-box

� icon: font usato per il testo delle icone

� menu: carattere usato nei menu delle varie finestre

� message-box: carattere usato per i popup

� small-caption: carattere per i controlli più piccoli

� status-bar: font usato per la barra di stato


linelinelinelinelinelinelineline--------heightheightheightheightheightheightheightheight

� line-height permette di definire lpermette di definire lpermette di definire lpermette di definire l’’’’altezza di una riga altezza di una riga altezza di una riga altezza di una riga

di testo alldi testo alldi testo alldi testo all’’’’interno di un elemento bloccointerno di un elemento bloccointerno di un elemento bloccointerno di un elemento blocco

� In pratica consente di definire lIn pratica consente di definire lIn pratica consente di definire lIn pratica consente di definire l’’’’interlinea (lo spazio fra interlinea (lo spazio fra interlinea (lo spazio fra interlinea (lo spazio fra le righe) usando i seguenti valori:le righe) usando i seguenti valori:le righe) usando i seguenti valori:le righe) usando i seguenti valori:� normal: spaziatura di default stabilita dal browser � valore numerico: moltiplicatore applicato al corpo del carattere. Es. 1.5= una volta e mezza il corpo.

� valore con unità di misura: altezza esatta della riga� percentuale: altezza riga pari a una % del corpo.

� In tipografia la spaziatura In tipografia la spaziatura In tipografia la spaziatura In tipografia la spaziatura giusta èèèè uguale al corpo, un uguale al corpo, un uguale al corpo, un uguale al corpo, un testo con spaziatura maggiore si dice testo con spaziatura maggiore si dice testo con spaziatura maggiore si dice testo con spaziatura maggiore si dice interlineato, con , con , con , con spaziatura minore si dice spaziatura minore si dice spaziatura minore si dice spaziatura minore si dice sterlineato

� La scelta migliore La scelta migliore La scelta migliore La scelta migliore èèèè il il il il valore numericovalore numericovalore numericovalore numerico

p {line-height: 1.5;} p {line-height: 15px;}

p {line-height: 1.5;} p {line-height: 15px;}


Allineamento e decorazione del testoAllineamento e decorazione del testoAllineamento e decorazione del testoAllineamento e decorazione del testoAllineamento e decorazione del testoAllineamento e decorazione del testoAllineamento e decorazione del testoAllineamento e decorazione del testo

� Con Con Con Con text-align possiamo definire lpossiamo definire lpossiamo definire lpossiamo definire l’’’’allineamento di allineamento di allineamento di allineamento di

un paragrafo scegliendo fra 4 opzioni:un paragrafo scegliendo fra 4 opzioni:un paragrafo scegliendo fra 4 opzioni:un paragrafo scegliendo fra 4 opzioni:

� left: allineamento a sinistra (bandiera a sinistra)

� right: allineamento a destra (bandiera a destra)

� center: centratura (epigrafe)

� justify: giustificazione (blocchetto)� text-decoration permette invece di definire alcune permette invece di definire alcune permette invece di definire alcune permette invece di definire alcune

decorazioni (sottolineato, barrato ecc.):decorazioni (sottolineato, barrato ecc.):decorazioni (sottolineato, barrato ecc.):decorazioni (sottolineato, barrato ecc.):

� none: nessuna decorazione

� underline: sottolineato

� overline: linea sopra il testo

� line-through: barrato


texttexttexttexttexttexttexttext--------indentindentindentindentindentindentindentindent e e e e e e e e texttexttexttexttexttexttexttext--------transformtransformtransformtransformtransformtransformtransformtransform

� text-indent definisce l'indentazione della prima riga definisce l'indentazione della prima riga definisce l'indentazione della prima riga definisce l'indentazione della prima riga in ogni elemento contenente del testo. in ogni elemento contenente del testo. in ogni elemento contenente del testo. in ogni elemento contenente del testo.

� Può essere espressa in due modiPuò essere espressa in due modiPuò essere espressa in due modiPuò essere espressa in due modi� valore numerico con unità di misura� valore in percentuale rispetto alla larghezza del blocco di testo (giustezza)

� text-transform serve a cambiare gli attributi del serve a cambiare gli attributi del serve a cambiare gli attributi del serve a cambiare gli attributi del testo relativamente a maiuscole e minuscole. testo relativamente a maiuscole e minuscole. testo relativamente a maiuscole e minuscole. testo relativamente a maiuscole e minuscole. � none: nessuna trasformazione. � capitalize: la prima lettera di ogni parola in maiuscolo, le altre tutte in minuscolo

� uppercase: tutto il testo è maiuscolo. � lowercase: tutto il testo è minuscolo.

� Utile ad esempio per dare un aspetto accettabile a Utile ad esempio per dare un aspetto accettabile a Utile ad esempio per dare un aspetto accettabile a Utile ad esempio per dare un aspetto accettabile a pezzi di testo tutti in maiuscolopezzi di testo tutti in maiuscolopezzi di testo tutti in maiuscolopezzi di testo tutti in maiuscolo


Il modello dei riquadri (box Il modello dei riquadri (box Il modello dei riquadri (box Il modello dei riquadri (box Il modello dei riquadri (box Il modello dei riquadri (box Il modello dei riquadri (box Il modello dei riquadri (box modelmodelmodelmodelmodelmodelmodelmodel))))))))

� Per Per Per Per box box box box modelmodelmodelmodel si intende l'insieme delle regole per la si intende l'insieme delle regole per la si intende l'insieme delle regole per la si intende l'insieme delle regole per la definizione degli stili per gli definizione degli stili per gli definizione degli stili per gli definizione degli stili per gli elementi bloccoelementi bloccoelementi bloccoelementi blocco. . . .

� Il modello comprende Il modello comprende Il modello comprende Il modello comprende cinque elementi base cinque elementi base cinque elementi base cinque elementi base rappresentati rappresentati rappresentati rappresentati nella figura:nella figura:nella figura:nella figura:


Box Box Box Box Box Box Box Box modelmodelmodelmodelmodelmodelmodelmodel -------- ElementiElementiElementiElementiElementiElementiElementiElementi

� Area del contenutoArea del contenutoArea del contenutoArea del contenuto: testo, immagine... di cui : testo, immagine... di cui : testo, immagine... di cui : testo, immagine... di cui èèèèpossibile definire altezza e larghezza (possibile definire altezza e larghezza (possibile definire altezza e larghezza (possibile definire altezza e larghezza (widthwidthwidthwidth e e e e heightheightheightheight) ) ) )

� PaddingPaddingPaddingPadding (cuscinetto): spazio vuoto tra il contenuto e il (cuscinetto): spazio vuoto tra il contenuto e il (cuscinetto): spazio vuoto tra il contenuto e il (cuscinetto): spazio vuoto tra il contenuto e il bordo dell'elemento bordo dell'elemento bordo dell'elemento bordo dell'elemento

� Bordo Bordo Bordo Bordo ((((borderborderborderborder): di cui possiamo definire colore, stile e ): di cui possiamo definire colore, stile e ): di cui possiamo definire colore, stile e ): di cui possiamo definire colore, stile e spessore spessore spessore spessore

� MargineMargineMargineMargine ((((marginmarginmarginmargin): spazio tra l'elemento e gli altri ): spazio tra l'elemento e gli altri ): spazio tra l'elemento e gli altri ): spazio tra l'elemento e gli altri elementi adiacenti. elementi adiacenti. elementi adiacenti. elementi adiacenti.

� Nel caso di due box allineati in orizzontale, la loro distanza è la somma dei due margini.

� Se sono allineati verticalmente, si ha il cosiddetto margin collapsing: la distanza è pari al massimo fra il margine inferiore del primo e il margine superiore del secondo.


Larghezza e altezza del boxLarghezza e altezza del boxLarghezza e altezza del boxLarghezza e altezza del boxLarghezza e altezza del boxLarghezza e altezza del boxLarghezza e altezza del boxLarghezza e altezza del box

� La larghezza complessiva La larghezza complessiva La larghezza complessiva La larghezza complessiva èèèè data dalla formula:data dalla formula:data dalla formula:data dalla formula:

margine sx + padding sx + bordo sx +width +padding dx + bordo dx + margine dx

� Se non si imposta specificamente il valore Se non si imposta specificamente il valore Se non si imposta specificamente il valore Se non si imposta specificamente il valore widthwidthwidthwidth (o si (o si (o si (o si specifica il valore auto) la dimensione del contenuto specifica il valore auto) la dimensione del contenuto specifica il valore auto) la dimensione del contenuto specifica il valore auto) la dimensione del contenuto viene stabilita automaticamente dal browserviene stabilita automaticamente dal browserviene stabilita automaticamente dal browserviene stabilita automaticamente dal browser

� Per lPer lPer lPer l’’’’altezza complessiva vale un ragionamento altezza complessiva vale un ragionamento altezza complessiva vale un ragionamento altezza complessiva vale un ragionamento analogo ma bisogna tener conto del analogo ma bisogna tener conto del analogo ma bisogna tener conto del analogo ma bisogna tener conto del marginmarginmarginmargin collapsingcollapsingcollapsingcollapsingper cui il valore dipende anche da cosa cper cui il valore dipende anche da cosa cper cui il valore dipende anche da cosa cper cui il valore dipende anche da cosa c’è’è’è’è vicinovicinovicinovicino


Il mitico IE Box Il mitico IE Box Il mitico IE Box Il mitico IE Box Il mitico IE Box Il mitico IE Box Il mitico IE Box Il mitico IE Box ModelModelModelModelModelModelModelModel bugbugbugbugbugbugbugbug

� UnUnUnUn’’’’errata interpretazione errata interpretazione errata interpretazione errata interpretazione del box del box del box del box modelmodelmodelmodel in Internet in Internet in Internet in Internet Explorer 5.5 ha generato un Explorer 5.5 ha generato un Explorer 5.5 ha generato un Explorer 5.5 ha generato un grosso problema di grosso problema di grosso problema di grosso problema di compatibilitcompatibilitcompatibilitcompatibilitàààà

� Sono stati inventati dei Sono stati inventati dei Sono stati inventati dei Sono stati inventati dei ““““trucchitrucchitrucchitrucchi”””” per creare CSS per creare CSS per creare CSS per creare CSS interoperabiliinteroperabiliinteroperabiliinteroperabili

� IE 6 e 7 hanno corretto il IE 6 e 7 hanno corretto il IE 6 e 7 hanno corretto il IE 6 e 7 hanno corretto il problema cercando di gestire problema cercando di gestire problema cercando di gestire problema cercando di gestire la compatibilitla compatibilitla compatibilitla compatibilitàààà allallallall’’’’indietroindietroindietroindietro

� IE 8 usa per default la IE 8 usa per default la IE 8 usa per default la IE 8 usa per default la modalitmodalitmodalitmodalitàààà correttacorrettacorrettacorretta

� Ma a questo punto la Ma a questo punto la Ma a questo punto la Ma a questo punto la situazione situazione situazione situazione èèèè molto confusa!molto confusa!molto confusa!molto confusa!


Gestione del box Gestione del box Gestione del box Gestione del box Gestione del box Gestione del box Gestione del box Gestione del box modelmodelmodelmodelmodelmodelmodelmodel: dimensioni del contenuto: dimensioni del contenuto: dimensioni del contenuto: dimensioni del contenuto: dimensioni del contenuto: dimensioni del contenuto: dimensioni del contenuto: dimensioni del contenuto

� height : altezza, si applica a tutti gli elementi blocco : altezza, si applica a tutti gli elementi blocco : altezza, si applica a tutti gli elementi blocco : altezza, si applica a tutti gli elementi blocco

escluse le colonne delle tabelleescluse le colonne delle tabelleescluse le colonne delle tabelleescluse le colonne delle tabelle

� min-height eeee max-height : permettono di fissare : permettono di fissare : permettono di fissare : permettono di fissare

llll’’’’altezza minima o quella massima anzichaltezza minima o quella massima anzichaltezza minima o quella massima anzichaltezza minima o quella massima anzichéééé un valore un valore un valore un valore esatto (esatto (esatto (esatto (min-height non funziona con IE)non funziona con IE)non funziona con IE)non funziona con IE)

� width : larghezza: larghezza: larghezza: larghezza

� min-width eeee max-width : permettono di fissare la : permettono di fissare la : permettono di fissare la : permettono di fissare la

larghezza minima o quella larghezza minima o quella larghezza minima o quella larghezza minima o quella maxmaxmaxmax anzichanzichanzichanzichéééé quella esattaquella esattaquella esattaquella esatta

� Valori ammessi: Valori ammessi: Valori ammessi: Valori ammessi:

� auto: dimensione determinata dal contenuto (solo per width e height )

� valore numerico con unità di misura

� valore percentuale

�Le proprietLe proprietLe proprietLe proprietàààà del box del box del box del box modelmodelmodelmodel non vengono ereditatenon vengono ereditatenon vengono ereditatenon vengono ereditate


OverflowOverflowOverflowOverflowOverflowOverflowOverflowOverflow

� La proprietLa proprietLa proprietLa proprietàààà overflow permette di definire il permette di definire il permette di definire il permette di definire il

comportamento da adottare comportamento da adottare comportamento da adottare comportamento da adottare quendoquendoquendoquendo il contenuto il contenuto il contenuto il contenuto (tipicamente testo) deborda dalle dimensioni fissate(tipicamente testo) deborda dalle dimensioni fissate(tipicamente testo) deborda dalle dimensioni fissate(tipicamente testo) deborda dalle dimensioni fissate

� Valori:Valori:Valori:Valori:

� visible (default): il contenuto eccedente viene mostrato, i browser si comportano in modi diversi!

� hidden: il contenuto eccedente non viene mostrato.

� scroll: vengono mostrate barre di scorrimento che consentono di accedere al contenuto eccedente.

� auto: Il browser tratta il contenuto eccedente secondo le sue impostazioni predefinite (di solito barre di scorrimento).

�In condizioni normali non conviene definire lIn condizioni normali non conviene definire lIn condizioni normali non conviene definire lIn condizioni normali non conviene definire l’’’’altezza in altezza in altezza in altezza in modo fisso: si creano effetti imprevedibilimodo fisso: si creano effetti imprevedibilimodo fisso: si creano effetti imprevedibilimodo fisso: si creano effetti imprevedibili


MarginiMarginiMarginiMarginiMarginiMarginiMarginiMargini

� I margini consentono di definire la spaziatura fra I margini consentono di definire la spaziatura fra I margini consentono di definire la spaziatura fra I margini consentono di definire la spaziatura fra elementielementielementielementi

� Quattro proprietQuattro proprietQuattro proprietQuattro proprietàààà singole: singole: singole: singole: margin-top, margin-right, margin-bottom, margin-left

� Una proprietUna proprietUna proprietUna proprietàààà sintetica: sintetica: sintetica: sintetica: margin ( con i valori con i valori con i valori con i valori

nellnellnellnell’’’’ordine esposto sopra)ordine esposto sopra)ordine esposto sopra)ordine esposto sopra)

� ValoriValoriValoriValori

� valore numerico con unità di misura.

� valore in percentuale.

� auto: distanza automaticamente calcolata rispetto alla larghezza dell'elemento contenitore.

div {margin-top: 8px; margin-right: 16px;margin-bottom: 8px;margin-left: 24px; }

div {margin-top: 8px; margin-right: 16px;margin-bottom: 8px;margin-left: 24px; }


PaddingPaddingPaddingPaddingPaddingPaddingPaddingPadding

� Il Il Il Il paddimgpaddimgpaddimgpaddimg consente di definire lo spazio intorno ad un consente di definire lo spazio intorno ad un consente di definire lo spazio intorno ad un consente di definire lo spazio intorno ad un elemento (internamente al bordo)elemento (internamente al bordo)elemento (internamente al bordo)elemento (internamente al bordo)

� Quattro proprietQuattro proprietQuattro proprietQuattro proprietàààà singole: singole: singole: singole: padding-top, padding-right, padding-bottom, margin-left

� Una proprietUna proprietUna proprietUna proprietàààà sintetica: sintetica: sintetica: sintetica: padding ( con i valori con i valori con i valori con i valori

nellnellnellnell’’’’ordine esposto sopra)ordine esposto sopra)ordine esposto sopra)ordine esposto sopra)


� valore numerico con unità di misura.

� valore in percentuale.

� auto: distanza automaticamente calcolata rispetto alla larghezza dell'elemento contenitore.

div {padding-top: 8px; padding-right: 16px;padding-bottom: 8px;padding-left: 24px; }

div {padding-top: 8px; padding-right: 16px;padding-bottom: 8px;padding-left: 24px; }


BordiBordiBordiBordiBordiBordiBordiBordi

� Le proprietLe proprietLe proprietLe proprietàààà di bordo permettono di definire: stile, di bordo permettono di definire: stile, di bordo permettono di definire: stile, di bordo permettono di definire: stile, colore e spessore di ognuno dei quattro bordicolore e spessore di ognuno dei quattro bordicolore e spessore di ognuno dei quattro bordicolore e spessore di ognuno dei quattro bordi

� Dodici proprietDodici proprietDodici proprietDodici proprietàààà singole (3 per ogni bordo): singole (3 per ogni bordo): singole (3 per ogni bordo): singole (3 per ogni bordo):

� border-top-color, border-top-style, border-top-width

� border-right-color, border-right-style, border-right-width

� …

� ProprietProprietProprietProprietàààà sintetiche di tre tipi: sintetiche di tre tipi: sintetiche di tre tipi: sintetiche di tre tipi:

� border-top, border-right, border-bottom, border-left

� border-color, border-width, border-style

� border : si può usare solo quando i 4 bordi hanno si può usare solo quando i 4 bordi hanno si può usare solo quando i 4 bordi hanno si può usare solo quando i 4 bordi hanno le stesse caratteristichele stesse caratteristichele stesse caratteristichele stesse caratteristiche


Valori per i bordiValori per i bordiValori per i bordiValori per i bordiValori per i bordiValori per i bordiValori per i bordiValori per i bordi

� Colore:Colore:Colore:Colore:� colore (espresso nei vari modi possibili)� la parola chiave inherit

� Stile:Stile:Stile:Stile:� none o hidden: nessun bordo e spessore pari a 0. � dotted, dashed: a puntini, a trattini� solid: intero � double: doppio� groove, ridge, inset, outset: effetti tridimensionali

� Spessore:Spessore:Spessore:Spessore:� valore numerico con unità di misura� thin: bordo sottile. � medium: bordo di medio spessore. � thick: bordo molto spesso


Esempi di stili per i bordiEsempi di stili per i bordiEsempi di stili per i bordiEsempi di stili per i bordiEsempi di stili per i bordiEsempi di stili per i bordiEsempi di stili per i bordiEsempi di stili per i bordi

<style type="text/css">p.solid { border: solid thin red; padding: 4 px; }p.dotted { border: dotted thin red; padding: 4 px; }p.dashed { border: dashed thin red; padding: 4 px; }p.double { border: double thick red; padding: 4 px; }p.groove { border: groove thick red; padding: 4 px; }p.ridge { border: ridge thick red; padding: 4 px; }p.inset { border: inset thick red; padding: 4 px; }p.outset { border: outset thick red; padding: 4 px; }

</style>

<style type="text/css">p.solid { border: solid thin red; padding: 4 px; }p.dotted { border: dotted thin red; padding: 4 px; }p.dashed { border: dashed thin red; padding: 4 px; }p.double { border: double thick red; padding: 4 px; }p.groove { border: groove thick red; padding: 4 px; }p.ridge { border: ridge thick red; padding: 4 px; }p.inset { border: inset thick red; padding: 4 px; }p.outset { border: outset thick red; padding: 4 px; }

</style>


Liste Liste Liste Liste Liste Liste Liste Liste -------- 11111111

� CSS definisce alcune proprietCSS definisce alcune proprietCSS definisce alcune proprietCSS definisce alcune proprietàààà che agiscono sulle che agiscono sulle che agiscono sulle che agiscono sulle liste puntate (<liste puntate (<liste puntate (<liste puntate (<ulululul>) e numerate (<>) e numerate (<>) e numerate (<>) e numerate (<olololol>), o meglio sugli >), o meglio sugli >), o meglio sugli >), o meglio sugli elementi delle liste (<li>)elementi delle liste (<li>)elementi delle liste (<li>)elementi delle liste (<li>)

� In virtIn virtIn virtIn virtùùùù delldelldelldell’’’’ereditarietereditarietereditarietereditarietàààà se applichiamo una proprietse applichiamo una proprietse applichiamo una proprietse applichiamo una proprietààààalle liste la applichiamo a tutti gli elementialle liste la applichiamo a tutti gli elementialle liste la applichiamo a tutti gli elementialle liste la applichiamo a tutti gli elementi

� list-style-image : definisce ldefinisce ldefinisce ldefinisce l’’’’immagine da immagine da immagine da immagine da

utilizzare come utilizzare come utilizzare come utilizzare come ““““punto elencopunto elencopunto elencopunto elenco”””” e ammette i valori:e ammette i valori:e ammette i valori:e ammette i valori:

� url(<url_immagine>)

� none

� list-style-position : indica la posizione del punto indica la posizione del punto indica la posizione del punto indica la posizione del punto e ammette i valori:e ammette i valori:e ammette i valori:e ammette i valori:

� inside : il punto fa parte del testo

� outside : il punto è esterno al testo


Liste Liste Liste Liste Liste Liste Liste Liste -------- 22222222

� list-style-type : aspetto del punto: aspetto del punto: aspetto del punto: aspetto del punto----elencoelencoelencoelenco

� I valori possibili sono molti, ne citiamo alcuni:I valori possibili sono molti, ne citiamo alcuni:I valori possibili sono molti, ne citiamo alcuni:I valori possibili sono molti, ne citiamo alcuni:

� none: nessun punto� disc, circle, square: cerchietto pieno, cerchietto vuoto, quadratino

� decimal: conteggio con cifre arabe 1, 2, 3, .... � decimal-leading-zero: cifre arabe precedute da zero: 01, 02…

� lower-roman: cifre romane in minuscolo. i, ii, iii...� upper-roman: cifre romane in maiuscolo. I, II, III, ... � lower-alpha, lower-latin: lettere minuscole. a, b...� upper-alpha: upper-latin: lettere maiuscole. A, B... � lower-greek: lettere minuscole in greco antico.

�Il colore può essere modificato per tutti i tipi con la Il colore può essere modificato per tutti i tipi con la Il colore può essere modificato per tutti i tipi con la Il colore può essere modificato per tutti i tipi con la proprietproprietproprietproprietàààà color . . . .


displaydisplaydisplaydisplaydisplaydisplaydisplaydisplay

� HTML classifica gli elementi in tre categorie: blocco, HTML classifica gli elementi in tre categorie: blocco, HTML classifica gli elementi in tre categorie: blocco, HTML classifica gli elementi in tre categorie: blocco, inlineinlineinlineinline e listae listae listae lista

� Ogni elemento appartiene per default ad una di queste Ogni elemento appartiene per default ad una di queste Ogni elemento appartiene per default ad una di queste Ogni elemento appartiene per default ad una di queste categorie ma la proprietcategorie ma la proprietcategorie ma la proprietcategorie ma la proprietàààà display permette di permette di permette di permette di

cambiare questa appartenenzacambiare questa appartenenzacambiare questa appartenenzacambiare questa appartenenza

� I valori piI valori piI valori piI valori piùùùù comuni sono; :comuni sono; :comuni sono; :comuni sono; :� inline: l'elemento diventa di tipo inline. � block: l'elemento divente di tipo blocco� list-item: l'elemento diventa di tipo lista� none: l'elemento viene trattato come se non ci fosse. Non viene mostrato e non genera alcun box.

�Attenzione:Attenzione:Attenzione:Attenzione: dire che ldire che ldire che ldire che l’’’’elemento elemento elemento elemento èèèè trattato come trattato come trattato come trattato come non non non non presentepresentepresentepresente èèèè diverso da dire che diverso da dire che diverso da dire che diverso da dire che èèèè nascostonascostonascostonascosto. Lo . Lo . Lo . Lo scopriremo meglio andando avantiscopriremo meglio andando avantiscopriremo meglio andando avantiscopriremo meglio andando avanti


floatfloatfloatfloatfloatfloatfloatfloat

� Con Con Con Con float èèèè possibile estrarre un elemento dal normale flusso possibile estrarre un elemento dal normale flusso possibile estrarre un elemento dal normale flusso possibile estrarre un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro) dedel documento e spostarlo su uno dei lati (destro o sinistro) dedel documento e spostarlo su uno dei lati (destro o sinistro) dedel documento e spostarlo su uno dei lati (destro o sinistro) del l l l suo elemento contenitore. suo elemento contenitore. suo elemento contenitore. suo elemento contenitore.

� Il contenuto che circonda l'elemento scorre intorno ad esso sul Il contenuto che circonda l'elemento scorre intorno ad esso sul Il contenuto che circonda l'elemento scorre intorno ad esso sul Il contenuto che circonda l'elemento scorre intorno ad esso sul lato opposto rispetto a quello indicato come valore di lato opposto rispetto a quello indicato come valore di lato opposto rispetto a quello indicato come valore di lato opposto rispetto a quello indicato come valore di floatfloatfloatfloat. La . La . La . La proprietproprietproprietproprietàààà non non non non èèèè ereditata.ereditata.ereditata.ereditata.

� In HTML questa possibilitIn HTML questa possibilitIn HTML questa possibilitIn HTML questa possibilitàààà era riservate alle immagini marcate era riservate alle immagini marcate era riservate alle immagini marcate era riservate alle immagini marcate con lcon lcon lcon l’’’’attributo attributo attributo attributo alignalignalignalign: CSS lo estende a tutti gli elementi: CSS lo estende a tutti gli elementi: CSS lo estende a tutti gli elementi: CSS lo estende a tutti gli elementi


� left: l'elemento viene spostato sul lato sinistro del box contenitore, il contenuto scorre a destra.

� right: L'elemento viene spostato sul lato destro, il contenuto scorre a sinistra.

� none: l'elemento mantiene la sua posizione normale (default)

� AttenzioneAttenzioneAttenzioneAttenzione: le immagini hanno una dimensione intrinseca e quindi : le immagini hanno una dimensione intrinseca e quindi : le immagini hanno una dimensione intrinseca e quindi : le immagini hanno una dimensione intrinseca e quindi non ci sono problemi ma se si usa questa proprietnon ci sono problemi ma se si usa questa proprietnon ci sono problemi ma se si usa questa proprietnon ci sono problemi ma se si usa questa proprietàààà con elementi con elementi con elementi con elementi che non hanno una dimensione naturale (per esempio un che non hanno una dimensione naturale (per esempio un che non hanno una dimensione naturale (per esempio un che non hanno una dimensione naturale (per esempio un paragrafo) bisogna definire anche la proprietparagrafo) bisogna definire anche la proprietparagrafo) bisogna definire anche la proprietparagrafo) bisogna definire anche la proprietàààà widthwidthwidthwidth


Esempio: immagine senza Esempio: immagine senza Esempio: immagine senza Esempio: immagine senza Esempio: immagine senza Esempio: immagine senza Esempio: immagine senza Esempio: immagine senza floatfloatfloatfloatfloatfloatfloatfloat

<html><head></head><body><p><img border="0" src="images/galotti.gif" width="6 5" height="57">Domenica 27 dicembre 2009 alle ore 15.30, il Museo del Patrimonio Indust riale propone su prenotazione (massimo 25 partecipanti) il laboratorio “Making toons” dedica to ai bambini dai 7...<p></body></html>

<html><head></head><body><p><img border="0" src="images/galotti.gif" width="65" h eight="57"> Domenica 27 dicembre 2009 alle ore 15.30, il Museo del Patrimonio Indust riale propone su prenotazione (massimo 25 partecipanti) il laboratorio “Making toons” dedica to ai bambini dai 7...<p></body></html>


Esempio: immagine con Esempio: immagine con Esempio: immagine con Esempio: immagine con Esempio: immagine con Esempio: immagine con Esempio: immagine con Esempio: immagine con floatfloatfloatfloatfloatfloatfloatfloat leftleftleftleftleftleftleftleft e righte righte righte righte righte righte righte right

<html><head><style type="text/css">

img.sx { border-width: none; float: 'left'}img.dx { border-width: none; float: 'right'}

</style></head><body><p><img border="0" src="images/galotti.gif" class=sx width="65" height="57">Domenica 27 dicembre 2009 alle ore 15.30, il Museo del Patrimon io Industriale propone su prenotazione (massimo 25 partecipanti) il laboratorio “Making too ns” dedicato ai bambini dai 7...<p><p><img border="0" src="images/galotti.gif" class=dx width="65" height="57">Domenica 27 dicembre 2009 alle ore 15.30, il Museo del Patrimon io Industriale propone su prenotazione (massimo 25 partecipanti) il laboratorio “Making too ns” dedicato ai bambini dai 7... <p></body></html>


img.sx { border-width: none; float: 'left'}img.dx { border-width: none; float: 'right'}

</style></head><body><p><img border="0" src="images/galotti.gif" class=sx width="65" height="57">Domenica 27 dicembre 2009 alle ore 15.30, il Museo del Patrimon io Industriale propone su prenotazione (massimo 25 partecipanti) il laboratorio “Making too ns” dedicato ai bambini dai 7...<p><p><img border="0" src="images/galotti.gif" class=dx width="65" height="57">Domenica 27 dicembre 2009 alle ore 15.30, il Museo del Patrimon io Industriale propone su prenotazione (massimo 25 partecipanti) il laboratorio “Making too ns” dedicato ai bambini dai 7... <p></body></html>


Esempio con paragrafo Esempio con paragrafo Esempio con paragrafo Esempio con paragrafo Esempio con paragrafo Esempio con paragrafo Esempio con paragrafo Esempio con paragrafo floatingfloatingfloatingfloatingfloatingfloatingfloatingfloating

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transi tional//EN"><html><head><style type="text/css">

img.sx { border-width: none; float: 'left'}div.dx {background: #F0F0F0; padding: 4px; float: 'r ight'; width='200px'}

</style></head><body><p><img border="0" src="images/galotti.gif" class=sx width="65" height="57"><divclass=dx>Come si arriva al museo: prendere l'autobu s n. 11 e scendere alla fermata di via Darwin </div>Domenica 27 dicembre 2009 alle ore 15. 30, il Museo del Patrimonio Industriale propone su prenotazione (massimo 25 partecipanti) i l laboratorio “Making toons” dedicato ai bambini dai 7 ai 10 anni. Dai personaggi di Walt Disney ai Gormiti, dalle Winx a Ben 10, sono tanti i cartoni animati che affascinano i ragazzi di tutte le età, ma ancora piùaffascinante è poter diventare per un giorno un dise gnatore, creando i propri personaggi e scoprendo i segreti dell’animazione.</p></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transi tional//EN"><html><head><style type="text/css">

img.sx { border-width: none; float: 'left'}div.dx {background: #F0F0F0; padding: 4px; float: 'r ight'; width='200px'}

</style></head><body><p><img border="0" src="images/galotti.gif" class=sx width="65" height="57"> <divclass=dx>Come si arriva al museo: prendere l'autobu s n. 11 e scendere alla fermata di via Darwin </div> Domenica 27 dicembre 2009 alle ore 15.30, il Museo del Patrimonio Industriale propone su prenotazione (massimo 25 partecipanti) i l laboratorio “Making toons” dedicato ai bambini dai 7 ai 10 anni. Dai personaggi di Walt Disney ai Gormiti, dalle Winx a Ben 10, sono tanti i cartoni animati che affascinano i ragazzi di tutte le età, ma ancora piùaffascinante è poter diventare per un giorno un dise gnatore, creando i propri personaggi e scoprendo i segreti dell’animazione.</p></html>


Esempio: paragrafo giustificato con capoversoEsempio: paragrafo giustificato con capoversoEsempio: paragrafo giustificato con capoversoEsempio: paragrafo giustificato con capoversoEsempio: paragrafo giustificato con capoversoEsempio: paragrafo giustificato con capoversoEsempio: paragrafo giustificato con capoversoEsempio: paragrafo giustificato con capoverso


p { text-align: justify; }p:first-letter { font-family: 'Times New Roman'; font -size=xx-large; float: left;

color: red}</style>

</head><body><p>Domenica 27 dicembre 2009 alle ore 15.30, il Mus eo del Patrimonio Industriale propone su prenotazione (massimo 25 partecipanti) il labora torio “Making toons” dedicato ai bambini dai 7 ai 10 anni. Dai personaggi di Walt Di sney ai Gormiti, dalle Winx a Ben 10, sono tanti i cartoni animati che affascinano i raga zzi di tutte le età, ma ancora piùaffascinante è poter diventare per un giorno un dise gnatore, creando i propri personaggi e scoprendo i segreti dell’animazione.</p></html>


p { text-align: justify; }p:first-letter { font-family: 'Times New Roman'; font -size=xx-large; float: left;

color: red}</style>

</head><body><p>Domenica 27 dicembre 2009 alle ore 15.30, il Mus eo del Patrimonio Industriale propone su prenotazione (massimo 25 partecipanti) il labora torio “Making toons” dedicato ai bambini dai 7 ai 10 anni. Dai personaggi di Walt Di sney ai Gormiti, dalle Winx a Ben 10, sono tanti i cartoni animati che affascinano i raga zzi di tutte le età, ma ancora piùaffascinante è poter diventare per un giorno un dise gnatore, creando i propri personaggi e scoprendo i segreti dell’animazione.</p></html>


clearclearclearclearclearclearclearclear

� La proprietLa proprietLa proprietLa proprietàààà clear serve a impedire che al fianco di serve a impedire che al fianco di serve a impedire che al fianco di serve a impedire che al fianco di un elemento compaiano altri elementi marcati come il un elemento compaiano altri elementi marcati come il un elemento compaiano altri elementi marcati come il un elemento compaiano altri elementi marcati come il floatfloatfloatfloat. . . .

� Si applica solo agli elementi blocco e non Si applica solo agli elementi blocco e non Si applica solo agli elementi blocco e non Si applica solo agli elementi blocco e non èèèè ereditata.ereditata.ereditata.ereditata.

� Il Il Il Il floatfloatfloatfloat toglie un elemento dal flusso normale del toglie un elemento dal flusso normale del toglie un elemento dal flusso normale del toglie un elemento dal flusso normale del documento e può capitare che esso venga a trovarsi in documento e può capitare che esso venga a trovarsi in documento e può capitare che esso venga a trovarsi in documento e può capitare che esso venga a trovarsi in a fianco di elementi successivi a quello che contiene a fianco di elementi successivi a quello che contiene a fianco di elementi successivi a quello che contiene a fianco di elementi successivi a quello che contiene llll’’’’elemento elemento elemento elemento floatingfloatingfloatingfloating

� clearclearclearclear risolve questo problema.risolve questo problema.risolve questo problema.risolve questo problema.

� Valori:Valori:Valori:Valori:� none: gli elementi float possono stare sia a destra e sinistra dell'elemento.

� left: impedisce il posizionamento a sinistra. � right: impedisce il posizionamento a destra. � both: impedisce il posizionamento su entrambi i lati.


Esempio: senza Esempio: senza Esempio: senza Esempio: senza Esempio: senza Esempio: senza Esempio: senza Esempio: senza clearclearclearclearclearclearclearclear


img.sx { border-width: none; float: left; }</style></head><body><p><img border="0" src="images/galotti.gif" class= sx width="65" height="57">Domenica 27 dicembre 2009 alle ore 15.30, il Museo del Patrimon io Industriale propone su prenotazione (massimo 25 partecipanti) il laboratorio “Making too ns” dedicato ai bambini dai 7 ai 10 anni.</p><p>Dai personaggi di Walt Disney ai Gormiti, dalle Winx a Ben 10, sono tanti i cartoni animati che affascinano i ragazzi di tutte le età, ma ancora più affascinante è poter diventare per un giorno un disegnatore, creando i p ropri personaggi e scoprendo i segreti dell’animazione. <p></html>


img.sx { border-width: none; float: left; }</style></head><body><p><img border="0" src="images/galotti.gif" class= sx width="65" height="57">Domenica 27 dicembre 2009 alle ore 15.30, il Museo del Patrimon io Industriale propone su prenotazione (massimo 25 partecipanti) il laboratorio “Making too ns” dedicato ai bambini dai 7 ai 10 anni.</p><p>Dai personaggi di Walt Disney ai Gormiti, dalle Win x a Ben 10, sono tanti i cartoni animati che affascinano i ragazzi di tutte le età, ma ancora più affascinante è poter diventare per un giorno un disegnatore, creando i p ropri personaggi e scoprendo i segreti dell’animazione. <p></html>


Esempio: con Esempio: con Esempio: con Esempio: con Esempio: con Esempio: con Esempio: con Esempio: con clearclearclearclearclearclearclearclear: : : : : : : : leftleftleftleftleftleftleftleft


img.sx { border-width: none; float: left; }p.cl { clear: left }

</style></head><body><p><img border="0" src="images/galotti.gif" class=sx width="65" height="57">Domenica 27 dicembre 2009 alle ore 15.30, il Museo del Patrimon io Industriale propone su prenotazione (massimo 25 partecipanti) il laboratorio “Making too ns” dedicato ai bambini dai 7 ai 10 anni.</p><p class='cl'>Dai personaggi di Walt Disney ai Gorm iti, dalle Winx a Ben 10, sono tanti i cartoni animati che affascinano i ragazzi di tutte le età, ma ancora più affascinante èpoter diventare per un giorno un disegnatore, crean do i propri personaggi e scoprendo i segreti dell’animazione. <p></html>


img.sx { border-width: none; float: left; }p.cl { clear: left }

</style></head><body><p><img border="0" src="images/galotti.gif" class=sx width="65" height="57">Domenica 27 dicembre 2009 alle ore 15.30, il Museo del Patrimon io Industriale propone su prenotazione (massimo 25 partecipanti) il laboratorio “Making too ns” dedicato ai bambini dai 7 ai 10 anni.</p><p class='cl'> Dai personaggi di Walt Disney ai Gormiti, dalle Win x a Ben 10, sono tanti i cartoni animati che affascinano i ragazzi di tutte le età, ma ancora più affascinante èpoter diventare per un giorno un disegnatore, crean do i propri personaggi e scoprendo i segreti dell’animazione. <p></html>


Posizionamento: positionPosizionamento: positionPosizionamento: positionPosizionamento: positionPosizionamento: positionPosizionamento: positionPosizionamento: positionPosizionamento: position

� position èèèè la proprietla proprietla proprietla proprietàààà fondamentale per la gestione fondamentale per la gestione fondamentale per la gestione fondamentale per la gestione

della posizione degli elementi, di cui determina la della posizione degli elementi, di cui determina la della posizione degli elementi, di cui determina la della posizione degli elementi, di cui determina la modalitmodalitmodalitmodalitàààà di presentazione sulla pagina. di presentazione sulla pagina. di presentazione sulla pagina. di presentazione sulla pagina.

� Non Non Non Non èèèè ereditataereditataereditataereditata e ammette i seguenti valori:e ammette i seguenti valori:e ammette i seguenti valori:e ammette i seguenti valori:

� static: (default) posizionamento naturale nel flusso

� absolute: il box dell'elemento viene rimosso dal flusso ed è posizionato rispetto al box contenitore del primo elemento antenato non static (al limite <html>).

� relative: l'elemento viene posizionato relativamente al box che l'elemento avrebbe occupato nel normale flusso del documento.

� fixed: come absolute ma riferito al viewport (area visibile del doc.) e quindi non scrolla con la pagina.


Altre proprietAltre proprietAltre proprietAltre proprietAltre proprietAltre proprietAltre proprietAltre proprietàààààààà di posizionamentodi posizionamentodi posizionamentodi posizionamentodi posizionamentodi posizionamentodi posizionamentodi posizionamento

� left,top,right,bottom : coordinate del : coordinate del : coordinate del : coordinate del

posizionamento (assoluto o relativo)posizionamento (assoluto o relativo)posizionamento (assoluto o relativo)posizionamento (assoluto o relativo)

� visibility determina la visibilitdetermina la visibilitdetermina la visibilitdetermina la visibilitàààà e ammette 2 valori:e ammette 2 valori:e ammette 2 valori:e ammette 2 valori:

� visible: l’elemento è visibile

� hidden: l’elemento è invisibile ma il suo posto rimane visibile, anche se appare vuoto.

� z-index : CSS gestisce gli elementi come se fossero : CSS gestisce gli elementi come se fossero : CSS gestisce gli elementi come se fossero : CSS gestisce gli elementi come se fossero

fogli di carta e questa proprietfogli di carta e questa proprietfogli di carta e questa proprietfogli di carta e questa proprietàààà permette di stabilire permette di stabilire permette di stabilire permette di stabilire quale sta sopra e quale sta sotto.quale sta sopra e quale sta sotto.quale sta sopra e quale sta sotto.quale sta sopra e quale sta sotto.

� Valori ammessi:Valori ammessi:Valori ammessi:Valori ammessi:

� auto: lascia al browser la decisione di che ordina attribuire agli elemento

� valore numerico: più è alto e più l’elemento è in cima al “mucchio di fogli”


Esempio: paragrafo rientratoEsempio: paragrafo rientratoEsempio: paragrafo rientratoEsempio: paragrafo rientratoEsempio: paragrafo rientratoEsempio: paragrafo rientratoEsempio: paragrafo rientratoEsempio: paragrafo rientrato

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transit ional//EN"><html><head><style type="text/css">

p { text-align: justify; width: 350 }p.rientro { position: relative; left: 50; width:300 }

</style></head><body><p>Domenica 27 dicembre 2009 alle ore 15.30, il Mus eo del Patrimonio Industriale propone su prenotazione (massimo 25 partecipanti) il labora torio “Making toons” dedicato ai bambini dai 7 ai 10 anni. </p><p class='rientro'>Tutto questo sarà possibile al Mu seo del Patrimonio industriale con “Making Toons”, un laboratorio dedicato ai ragazzi p er imparare a fare semplici cartoni animati, approfondendone la scienza e la storia.</p ></body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transit ional//EN"><html><head><style type="text/css">

p { text-align: justify; width: 350 }p.rientro { position: relative; left: 50; width:300 }

</style></head><body><p>Domenica 27 dicembre 2009 alle ore 15.30, il Mus eo del Patrimonio Industriale propone su prenotazione (massimo 25 partecipanti) il labora torio “Making toons” dedicato ai bambini dai 7 ai 10 anni. </p><p class='rientro'> Tutto questo sarà possibile al Museo del Patrimonio industriale con “Making Toons”, un laboratorio dedicato ai ragazzi p er imparare a fare semplici cartoni animati, approfondendone la scienza e la storia.</p ></body></html>


TabelleTabelleTabelleTabelleTabelleTabelleTabelleTabelle

� Alcune proprietAlcune proprietAlcune proprietAlcune proprietàààà permettono di gestire le tabelle permettono di gestire le tabelle permettono di gestire le tabelle permettono di gestire le tabelle (attenzione: presentano problemi di compatibilit(attenzione: presentano problemi di compatibilit(attenzione: presentano problemi di compatibilit(attenzione: presentano problemi di compatibilitàààà))))

� table-layout : non : non : non : non èèèè ereditata e ammette due valori:ereditata e ammette due valori:ereditata e ammette due valori:ereditata e ammette due valori:

� auto: layout trattato automaticamente dal browser.

� fixed: layout controllato dal CSS

� border-collapse : definisce il trattamento dei bordi : definisce il trattamento dei bordi : definisce il trattamento dei bordi : definisce il trattamento dei bordi

interni e degli spazi fra celle e ammette due valori:interni e degli spazi fra celle e ammette due valori:interni e degli spazi fra celle e ammette due valori:interni e degli spazi fra celle e ammette due valori:

� collapse: se viene impostato un bordo, le celle della tabella lo condividono.

� separate: se viene impostato un bordo, ogni cella ha il suo, separato dalle altre.

� Se di usa Se di usa Se di usa Se di usa separateseparateseparateseparate lo spazio tra le celle e tra i bordi si lo spazio tra le celle e tra i bordi si lo spazio tra le celle e tra i bordi si lo spazio tra le celle e tra i bordi si imposta con la proprietimposta con la proprietimposta con la proprietimposta con la proprietàààà border-spacing , che , che , che , che

ammette come valore un numero con unitammette come valore un numero con unitammette come valore un numero con unitammette come valore un numero con unitàààà di misuradi misuradi misuradi misura


RiferimentiRiferimentiRiferimentiRiferimentiRiferimentiRiferimentiRiferimentiRiferimenti

� Specifiche ufficiali W3C:Specifiche ufficiali W3C:Specifiche ufficiali W3C:Specifiche ufficiali W3C:

http://www.w3.org/TR/CSS2/

� Ottimo Ottimo Ottimo Ottimo referencereferencereferencereference con possibilitcon possibilitcon possibilitcon possibilitàààà di fare esercizi: di fare esercizi: di fare esercizi: di fare esercizi: http://www.w3schools.com/css/default.asp

� Un sito di Un sito di Un sito di Un sito di ““““CSS estremoCSS estremoCSS estremoCSS estremo””””, molto bello, che permette di , molto bello, che permette di , molto bello, che permette di , molto bello, che permette di cambiare radicalmente lcambiare radicalmente lcambiare radicalmente lcambiare radicalmente l’’’’aspetto delle pagine aspetto delle pagine aspetto delle pagine aspetto delle pagine applicando diversi stili:applicando diversi stili:applicando diversi stili:applicando diversi stili:http://www.csszengarden.com/tr/italiano/

Documents

CSSCCSSSSCSS 1 - lia.deis.unibo.itlia.deis.unibo.it/Courses/TecnologieWeb0910/lezioni/1.05.CSS.pdf · compatibilitàcon i vecchi browser CSSCCSSSSCSS 12 Regole e loro struttura