css - vers 21 css introduzione cc by versione 2.2 -diapositiva 2 alessandro ursomando in passato...
TRANSCRIPT
1
CSS
Introduzione
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 2
IN PASSATO ABBIAMO DETTO..� CSS3 � INTRODUZIONE
Con HTML non possiamo pro-durre siti come quelli che conosciamo ,
ma solo specificare dei contenuti
Con HTML non possiamo pro-durre siti come quelli che conosciamo ,
ma solo specificare dei contenuti
Con HTML non possiamo pro-durre siti come quelli che conosciamo ,
ma solo specificare dei contenuti
Finalmente faremo siti carini.Finalmente faremo siti carini.Finalmente faremo siti carini.
Con CSS specificheremo lo stile con il quale questi contenuti
verranno presentati.
Con CSS specificheremo lo stile con il quale questi contenuti
verranno presentati.
Con CSS specificheremo lo stile con il quale questi contenuti
verranno presentati.
2
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 3
IN PASSATO ABBIAMO VISTO..� CSS3 � INTRODUZIONE
�
+ �
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 4
POTENZIALITÀ..� CSS3 � INTRODUZIONE
+ �
Possiamo definire lo stile per tutte le pagine di uno stesso sito.
Possiamo definire lo stile per tutte le pagine di uno stesso sito.
Possiamo definire lo stile per tutte le pagine di uno stesso sito.
Possiamo modificare in ma-niera agevole l’aspetto di un intero sito
Possiamo modificare in ma-niera agevole l’aspetto di un intero sito
Possiamo modificare in ma-niera agevole l’aspetto di un intero sito
3
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 5
..ED OBBLIGHI
� CSS3 � INTRODUZIONE
+ �
Possiamo definire lo stile per tutte le pagine di uno stesso sito.
Possiamo definire lo stile per tutte le pagine di uno stesso sito.
Possiamo definire lo stile per tutte le pagine di uno stesso sito.
Possiamo modificare in ma-niera agevole l’aspetto di un intero sito
Possiamo modificare in ma-niera agevole l’aspetto di un intero sito
Possiamo modificare in ma-niera agevole l’aspetto di un intero sito
OBBLIGHIOBBLIGHIOBBLIGHIOBBLIGHI
Questo però ci obbliga a individuare, organizzare e
classificare tutti i contenuti.
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 6
DISCLAIMER
� CSS3 � INTRODUZIONE
Anche questo slideshownon è un manuale!
Anche questo slideshownon è un manuale!
Anche questo slideshownon è un manuale!
http://www.bbuio.it/prof/css3.pdfhttp://www.bbuio.it/prof/css3.pdfhttp://www.bbuio.it/prof/css3.pdfhttp://www.bbuio.it/prof/css3.pdfhttp://www.bbuio.it/prof/css3.pdfhttp://www.bbuio.it/prof/css3.pdfhttp://www.bbuio.it/prof/css3.pdfhttp://www.bbuio.it/prof/css3.pdf
4
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 7
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
UN ESEMPIO PER COMINCIARE
08-00-01
� CSS � INTRODUZIONE
<! doctype html><html>
<head><title >Proviamo CSS </ title ><meta charset ="UTF- 8" />
</head><body>
<h1>Titolo 1 </h1><p>
Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla Bla
</p><h1>Titolo 2 </h1><p>
Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla Bla
</p></body>
</html>
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 8
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
UN ESEMPIO PER COMINCIARE08-00-01
� CSS � INTRODUZIONE
<! doctype html><html>
<head><title >Proviamo CSS </ title ><meta charset ="UTF- 8" />
</head><body>
<h1>Titolo 1 </h1><p>
Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla Bla
</p><h1>Titolo 2 </h1><p>
Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla Bla
</p></body>
</html>
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
5
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 9
LA REGOLA
� CSS � INTRODUZIONE
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
CSS
Costruzione della regola
6
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 11
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
COSTRUZIONE DELLA REGOLA
� CSS � LA REGOLA
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
SELETTORESELETTORESELETTORESELETTORE
Rappresenta l’oggetto del quale vogliamo definire lo stile.L’esempio più semplice è il nome di un elmento.
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 12
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
COSTRUZIONE DELLA REGOLA
� CSS � LA REGOLA
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
SELETTORESELETTORESELETTORESELETTORE
Rappresenta l’oggetto del quale vogliamo definire lo stile.L’esempio più semplice è il nome di un elmento.
PROPRIETPROPRIETÀÀPROPRIETPROPRIETÀÀÈ il nome della caratteristica che vogliamo definire.
7
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 13
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
COSTRUZIONE DELLA REGOLA
� CSS � LA REGOLA
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
SELETTORESELETTORESELETTORESELETTORE
Rappresenta l’oggetto del quale vogliamo definire lo stile.L’esempio più semplice è il nome di un elmento.
PROPRIETPROPRIETÀÀPROPRIETPROPRIETÀÀÈ il nome della caratteristica che vogliamo definire.
VALOREVALOREVALOREVALORE
Per ogni proprietà sono stabiliti dei valori. In alcuni casi il valore può essere un valore numerico o un colore.
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 14
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
COSTRUZIONE DELLA REGOLA
� CSS � LA REGOLA
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
SELETTORESELETTORESELETTORESELETTORE
Rappresenta l’oggetto del quale vogliamo definire lo stile.L’esempio più semplice è il nome di un elmento.
PROPRIETPROPRIETÀÀPROPRIETPROPRIETÀÀÈ il nome della caratteristica che vogliamo definire.
VALOREVALOREVALOREVALORE
Per ogni proprietà sono stabiliti dei valori. In alcuni casi il valore può essere un valore numerico o un colore.
DICHIARAZIONEDICHIARAZIONEDICHIARAZIONEDICHIARAZIONE
È la definizione di una caratteristica. Si indica la proprietà e l’elenco di valori (o anche uno solo).
8
CSS
Applicazione della regola
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 16
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
APPLICAZIONE DELLA REGOLA
� CSS � LA REGOLA
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
DICHIARAZIONI IN LINEADICHIARAZIONI IN LINEADICHIARAZIONI IN LINEADICHIARAZIONI IN LINEA
Facendo uso dell’attributo globale style.
<! -- omissis -- ><body>
<h1 style = "background: red ;color: white ;font - family: monospace ;font - size : 28pt;"
>Titolo 1
</h1><! -- omissis -- >
9
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 17
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
APPLICAZIONE DELLA REGOLA
� CSS � LA REGOLA
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
DICHIARAZIONI IN LINEADICHIARAZIONI IN LINEADICHIARAZIONI IN LINEADICHIARAZIONI IN LINEA
Facendo uso dell’attributo globale style.
FOGLI FOGLI DIDI STILE INTERNISTILE INTERNIFOGLI FOGLI DIDI STILE INTERNISTILE INTERNI
Facendo uso dell’elemento style (da annidare in head) .
<! -- omissis -- ><head>
<title >Proviamo CSS </ title ><meta charset ="UTF- 8" /><style type ="text/ css " >
h1 {background: red ;color: white ;font - family: monospace ;font - size : 28pt;
}</style>
</head><! -- omissis -- >
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 18
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
APPLICAZIONE DELLA REGOLA
� CSS � LA REGOLA
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
A questo punto abbiamo due questioni:1) Come si costruisce una regola?2) Come si applica una regola?
DICHIARAZIONI IN LINEADICHIARAZIONI IN LINEADICHIARAZIONI IN LINEADICHIARAZIONI IN LINEA
Facendo uso dell’attributo globale style.
FOGLI FOGLI DIDI STILE INTERNISTILE INTERNIFOGLI FOGLI DIDI STILE INTERNISTILE INTERNI
Facendo uso dell’elemento style (da annidare in head) .
FOGLI FOGLI DIDI STILE ESTERNISTILE ESTERNIFOGLI FOGLI DIDI STILE ESTERNISTILE ESTERNI
Inserendo tutte le regole in un file a parte e linkare questo file al file html
<! -- omissis -- ><head>
<title >Proviamo CSS </ title ><meta charset ="UTF- 8" /><link type ="text/ css "
rel = " stylesheet " href =" stili.css " />
</head><! -- omissis -- >
Questo sarà la strategia che adopereremo
Questo sarà la strategia che adopereremo
Questo sarà la strategia che adopereremo
10
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 19
DICHIARAZIONI CONTRASTANTI
� CSS � LA REGOLA
Nel caso in cui si adoperassero più strategie contemporaneamente
l’ordine di priorità assegnato alle dichiarazioni è il seguente:
Nel caso in cui si adoperassero più strategie contemporaneamente
l’ordine di priorità assegnato alle dichiarazioni è il seguente:
Nel caso in cui si adoperassero più strategie contemporaneamente
l’ordine di priorità assegnato alle dichiarazioni è il seguente:
� default del browser� fogli di stile esterni� fogli di stile interni� dichiarazioni in linea
DICHIARAZIONI IN LINEADICHIARAZIONI IN LINEADICHIARAZIONI IN LINEADICHIARAZIONI IN LINEA
Facendo uso dell’attributo globale style.
FOGLI FOGLI DIDI STILE INTERNISTILE INTERNIFOGLI FOGLI DIDI STILE INTERNISTILE INTERNI
Facendo uso dell’elemento style (da annidare in head) .
FOGLI FOGLI DIDI STILE ESTERNISTILE ESTERNIFOGLI FOGLI DIDI STILE ESTERNISTILE ESTERNI
Inserendo tutte le regole in un file a parte e linkare questo file al file html
Ecco perchéCascading Style Sheet
Ecco perchéCascading Style Sheet
Ecco perchéCascading Style Sheet
CSS
Reset
11
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 21
RESET
� CSS � RESET
Alle volte lo stesso documento HTML viene
mostrato in maniera diversa
dai diversi browser.
Alle volte lo stesso documento HTML viene
mostrato in maniera diversa
dai diversi browser.
Alle volte lo stesso documento HTML viene
mostrato in maniera diversa
dai diversi browser.
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 22
RESET
� CSS � RESET
Eric Meyer ha pensato di neutralizzare tutte lescelte di default fatte dai browser con un file .css.
Eric Meyer ha pensato di neutralizzare tutte lescelte di default fatte dai browser con un file .css.
Eric Meyer ha pensato di neutralizzare tutte lescelte di default fatte dai browser con un file .css.
http://meyerweb.com/eric/tools/css/reset/http://meyerweb.com/eric/tools/css/reset/http://meyerweb.com/eric/tools/css/reset/http://meyerweb.com/eric/tools/css/reset/http://meyerweb.com/eric/tools/css/reset/http://meyerweb.com/eric/tools/css/reset/http://meyerweb.com/eric/tools/css/reset/http://meyerweb.com/eric/tools/css/reset/
Alle volte lo stesso documento HTML viene
mostrato in maniera diversa
dai diversi browser.
Alle volte lo stesso documento HTML viene
mostrato in maniera diversa
dai diversi browser.
Alle volte lo stesso documento HTML viene
mostrato in maniera diversa
dai diversi browser.
Pertanto ogni nostro file .html avrà la seguente dichiarazione:Pertanto ogni nostro file .html avrà la seguente dichiarazione:Pertanto ogni nostro file .html avrà la seguente dichiarazione:
<link type ="text/ css " rel =" stylesheet " href ="reset.css" />
12
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 23
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
08-00-02
� CSS � RESET
<! doctype html><html>
<head><title >Proviamo CSS </ title ><meta charset ="UTF- 8" /><link type ="text/ css "
rel = " stylesheet " href =" reset.css " />
<link type ="text/ css "rel = " stylesheet " href =" stili.css " />
</head><body>
<h1>Titolo 1 </h1><p>
Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla Bla
</p><h1>Titolo 2 </h1><p>
Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla Bla
</p></body>
</html>
CSS
Le famiglie di proprietà
13
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 25
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
LE FAMIGLIE DI PROPRIETÀ
08-00-02
� CSS � I VALORI
<! -- omissis -- ><body>
<h1>Titolo 1 </h1><p>
Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla Bla
</p><h1>Titolo 2 </h1><p>
Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla Bla
</p></body>
<! -- omissis -- >
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 26
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
LE FAMIGLIE DI PROPRIETÀ08-00-02
� CSS � I VALORI
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
font-familyimposta la famiglia o il tipo di font
font-size imposta la dimensione
font-size-adjust
migliora la leggibilità del font
font-stretchcondensa/espande il font in orizzontale
font-style serve per impostare il corsivo
font-variantserve per impostare il maiuscoletto
font-weight serve per impostare il grassetto
h1 {background - color : red ;color : white ;font : 28px monospace ;
}
14
CSS
I valori
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 28
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
QUALCHE ALTRA DICHIARAZIONE08-00-02
� CSS � I VALORI
<! -- omissis -- ><body>
<h1>Titolo 1 </h1><p>
Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla Bla
</p><h1>Titolo 2 </h1><p>
Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla Bla
</p></body>
<! -- omissis -- >
15
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 29
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
QUALCHE ALTRA DICHIARAZIONE
08-00-02
� CSS � I VALORI
<! -- omissis -- ><body>
<h1>Titolo 1 </h1><p>
Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla Bla
</p><h1>Titolo 2 </h1><p>
Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla Bla Bla Bla Bla
</p></body>
<! -- omissis -- >
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
p {width : 75%;font - style : italic ;text - align : right;font - size : 10px;color : #888888;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 30
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
QUALCHE ALTRA DICHIARAZIONE08-00-02
� CSS � I VALORI
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
p {width : 75%;font - style : italic ;text - align : right;font - size : 10px;color : #888888;
}
In questo esempio compaiono tutti i tipi di valori.
In questo esempio compaiono tutti i tipi di valori.
In questo esempio compaiono tutti i tipi di valori.
Alcune proprietà hanno un set di valori possibili (guarda il manualetto)
Alcune proprietà hanno un set di valori possibili (guarda il manualetto)
Alcune proprietà hanno un set di valori possibili (guarda il manualetto)
Altre proprietà sono valorizzate con un colore ed altre ancora con dei
valori numerici (espressi in percentuali o in altre unità di misura, tipicamente pixel).
Altre proprietà sono valorizzate con un colore ed altre ancora con dei
valori numerici (espressi in percentuali o in altre unità di misura, tipicamente pixel).
Altre proprietà sono valorizzate con un colore ed altre ancora con dei
valori numerici (espressi in percentuali o in altre unità di misura, tipicamente pixel).
16
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 31
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
QUALCHE ALTRA DICHIARAZIONE
08-00-02
� CSS � I VALORI
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
p {width : 75%;font - style : italic ;text - align : right;font - size : 10px;color : #888888;
}
In questo esempio compaiono tutti i tipi di valori.
In questo esempio compaiono tutti i tipi di valori.
In questo esempio compaiono tutti i tipi di valori.
Alcune proprietà hanno un set di valori possibili (guarda il manualetto)
Alcune proprietà hanno un set di valori possibili (guarda il manualetto)
Alcune proprietà hanno un set di valori possibili (guarda il manualetto)
Altre proprietà sono valorizzate con un colore ed altre ancora con dei
valori numerici (espressi in percentuali o in altre unità di misura, tipicamente pixel).
Altre proprietà sono valorizzate con un colore ed altre ancora con dei
valori numerici (espressi in percentuali o in altre unità di misura, tipicamente pixel).
Altre proprietà sono valorizzate con un colore ed altre ancora con dei
valori numerici (espressi in percentuali o in altre unità di misura, tipicamente pixel).
CSS
Approfondimento sui valori numerici
17
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 33
VALORI NUMERICI
� CSS � I VALORI � VALORI NUMERICI
Le proprietà che esprimono dimensioni vengono valorizzate con dei valori numerici.Le proprietà che esprimono dimensioni vengono valorizzate con dei valori numerici.Le proprietà che esprimono dimensioni vengono valorizzate con dei valori numerici.
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 34
UNITÀ DI MISURA
� CSS � I VALORI � VALORI NUMERICI
SIGLASIGLASIGLASIGLA DESCRIZIONEDESCRIZIONEDESCRIZIONEDESCRIZIONE
in pollici (1in = 2,54cm)
cm centimetri
mm millimetri
pt punti (1pt = 0,35mm)
pc pica (1pc = 12pt)
SIGLASIGLASIGLASIGLA DESCRIZIONEDESCRIZIONEDESCRIZIONEDESCRIZIONE
em altezza font in uso
ex altezza di x in uso
px pixel
Come scegliere l’unità misura adatta alle nostre esigenze?Come scegliere l’unità misura adatta alle nostre esigenze?Come scegliere l’unità misura adatta alle nostre esigenze?
Le proprietà che esprimono dimensioni vengono valorizzate con dei valori numerici.Le proprietà che esprimono dimensioni vengono valorizzate con dei valori numerici.Le proprietà che esprimono dimensioni vengono valorizzate con dei valori numerici.
I valori numerici sono espressi in forma percentuale o in una certa unità di misura.I valori numerici sono espressi in forma percentuale o in una certa unità di misura.I valori numerici sono espressi in forma percentuale o in una certa unità di misura.
Le unità di misura si dividono in fisse e variabili.Le unità di misura si dividono in fisse e variabili.Le unità di misura si dividono in fisse e variabili.
18
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 35
La questione è evidentemente troppo complessa per essere trattata in questo corso.
D’altra parte limitarsi a dire di usare sempre e solo l’unità di misura pixel (come accennato poco fa) è un po’ riduttivo.
Proponiamo dunque un paio di suggerimenti.
La questione è evidentemente troppo complessa per essere trattata in questo corso.
D’altra parte limitarsi a dire di usare sempre e solo l’unità di misura pixel (come accennato poco fa) è un po’ riduttivo.
Proponiamo dunque un paio di suggerimenti.
La questione è evidentemente troppo complessa per essere trattata in questo corso.
D’altra parte limitarsi a dire di usare sempre e solo l’unità di misura pixel (come accennato poco fa) è un po’ riduttivo.
Proponiamo dunque un paio di suggerimenti.
RESPONSIVE DESIGN
� CSS � I VALORI � VALORI NUMERICI
Lo studio del dimensionamento e posizionamento degli oggetti di una pagina web sullo schermo target va sotto il nome di responsive design.
Lo studio del dimensionamento e posizionamento degli oggetti di una pagina web sullo schermo target va sotto il nome di responsive design.
Lo studio del dimensionamento e posizionamento degli oggetti di una pagina web sullo schermo target va sotto il nome di responsive design.
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 36
SUGGERIMENTI
� CSS � I VALORI
Per le proprietà come width ed height
che esprimono misure relative ad un oggetto si usi l’unità percentuale.Per le proprietà come width ed height
che esprimono misure relative ad un oggetto si usi l’unità percentuale.Per le proprietà come width ed height
che esprimono misure relative ad un oggetto si usi l’unità percentuale.
Per la gestione della dimensione di un testo invece si imposti il font-size del body a 62.5%
e si usi l’unità em per la specifica delle dimensioni di tutti i testi.
Per la gestione della dimensione di un testo invece si imposti il font-size del body a 62.5%
e si usi l’unità em per la specifica delle dimensioni di tutti i testi.
Per la gestione della dimensione di un testo invece si imposti il font-size del body a 62.5%
e si usi l’unità em per la specifica delle dimensioni di tutti i testi.
19
CSS
Approfondimento sui colori
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 38
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
08-00-02
� CSS � I VALORI � I COLORI
I COLORI
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
p {width : 75%;font - style : italic ;text - align : right;font - size : 10px;color : #888888;
}
CSS permette la specifica del colore desiderato in diverse
possibilità. Noi ne vedremo soltanto due:
CSS permette la specifica del colore desiderato in diverse
possibilità. Noi ne vedremo soltanto due:
CSS permette la specifica del colore desiderato in diverse
possibilità. Noi ne vedremo soltanto due:
� specifica del nome� formato esadecimale
20
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 39
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
08-00-02
� CSS � I VALORI � I COLORI
I COLORI: IL NOME
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
p {width : 75%;font - style : italic ;text - align : right;font - size : 10px;color : #888888;
}
CSS permette la specifica del colore desiderato in diverse
possibilità. Noi ne vedremo soltanto due:
CSS permette la specifica del colore desiderato in diverse
possibilità. Noi ne vedremo soltanto due:
CSS permette la specifica del colore desiderato in diverse
possibilità. Noi ne vedremo soltanto due:
� specifica del nome� formato esadecimale
Black
Silver
Gray
White
Maroon
Red
Purple
Fuchsia
Green
Lime
Olive
Yellow
Navy
Blue
Teal
Aqua
Sono stati specificati i nomi per 147 colori.
Sono stati specificati i nomi per 147 colori.
Sono stati specificati i nomi per 147 colori.
http://www.w3schools.com/http://www.w3schools.com/http://www.w3schools.com/http://www.w3schools.com/
html/html_colornames.asphtml/html_colornames.asphtml/html_colornames.asphtml/html_colornames.asp
http://www.w3schools.com/http://www.w3schools.com/http://www.w3schools.com/http://www.w3schools.com/
html/html_colornames.asphtml/html_colornames.asphtml/html_colornames.asphtml/html_colornames.asp
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 40
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
08-00-02
� CSS � I VALORI � I COLORI
I COLORI: IL CODICE
h1 {background - color : red ;color : white ;font - family : monospace ;font - size : 28px;
}
p {width : 75%;font - style : italic ;text - align : right;font - size : 10px;color : #888888;
}
CSS permette la specifica del colore desiderato in diverse
possibilità. Noi ne vedremo soltanto due:
CSS permette la specifica del colore desiderato in diverse
possibilità. Noi ne vedremo soltanto due:
CSS permette la specifica del colore desiderato in diverse
possibilità. Noi ne vedremo soltanto due:
� specifica del nome� formato esacedimale
Il formato esadecimale prevede la specifica di 3 numeri esadecimali
a 2 cifre dopo il simbolo # (sharp). Il primo numero indica la quantità di rosso, il secondo la quantità di verde ed il terzo la
quantità di blu.RGB infatti sta per Red, Green e Blue.
La quantità di ciascun colore varia quindi da 00 a FF.
Il formato esadecimale prevede la specifica di 3 numeri esadecimali
a 2 cifre dopo il simbolo # (sharp). Il primo numero indica la quantità di rosso, il secondo la quantità di verde ed il terzo la
quantità di blu.RGB infatti sta per Red, Green e Blue.
La quantità di ciascun colore varia quindi da 00 a FF.
Il formato esadecimale prevede la specifica di 3 numeri esadecimali
a 2 cifre dopo il simbolo # (sharp). Il primo numero indica la quantità di rosso, il secondo la quantità di verde ed il terzo la
quantità di blu.RGB infatti sta per Red, Green e Blue.
La quantità di ciascun colore varia quindi da 00 a FF.
21
CSS
Strumenti online
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 42
UN AIUTO ONLINE
� CSS � STRUMENTI ONLINE
http://kuler.adobe.comhttp://kuler.adobe.comhttp://kuler.adobe.comhttp://kuler.adobe.comhttp://kuler.adobe.comhttp://kuler.adobe.comhttp://kuler.adobe.comhttp://kuler.adobe.com
22
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 43
UN ALTRO AIUTO DALLA RETE
� CSS � STRUMENTI ONLINE
http://www.colorschemer.com/colorpix_info.phphttp://www.colorschemer.com/colorpix_info.phphttp://www.colorschemer.com/colorpix_info.phphttp://www.colorschemer.com/colorpix_info.phphttp://www.colorschemer.com/colorpix_info.phphttp://www.colorschemer.com/colorpix_info.phphttp://www.colorschemer.com/colorpix_info.phphttp://www.colorschemer.com/colorpix_info.php
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 44
GIACCHÈ SIAMO IN BALLO..� CSS � STRUMENTI ONLINE
http://bgpatterns.com/http://bgpatterns.com/http://bgpatterns.com/http://bgpatterns.com/http://bgpatterns.com/http://bgpatterns.com/http://bgpatterns.com/http://bgpatterns.com/
23
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 45
ED INOLTRE..� CSS � STRUMENTI ONLINE
http://www.screenshotmachine.com/http://www.screenshotmachine.com/http://www.screenshotmachine.com/http://www.screenshotmachine.com/http://www.screenshotmachine.com/http://www.screenshotmachine.com/http://www.screenshotmachine.com/http://www.screenshotmachine.com/
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 46
ED INFINE.� CSS � STRUMENTI ONLINE
http://www.wordle.net/http://www.wordle.net/http://www.wordle.net/http://www.wordle.net/http://www.wordle.net/http://www.wordle.net/http://www.wordle.net/http://www.wordle.net/
24
CSS
Le classi
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 48
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
h1 /* omissis */p {
width : 75%;font - style : italic ;text - align : right;font - size : 10pt;color : #888888;
}
08-00-03
� CSS � LA REGOLA � LE CLASSI
DIFFERENZIARE I PARAGRAFI<! -- omissis -- >
<body><h1>Titolo 1 </h1><p>
Bla <! -- omissis -- > Bla</p><h1>Titolo 2 </h1><p>
Bla <! -- omissis -- > Bla</p>
</body><! -- omissis -- >
Supponiamo di desiderare che i due paragrafi vengano presentati con stili diversi.
Supponiamo di desiderare che i due paragrafi vengano presentati con stili diversi.
Supponiamo di desiderare che i due paragrafi vengano presentati con stili diversi.
25
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 49
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
<! -- omissis -- ><body>
<h1>Titolo 1 </h1><p class ="tipo1" >
Bla <! -- omissis -- > Bla</p><h1>Titolo 2 </h1>
<p class ="tipo2" >Bla <! -- omissis -- > Bla
</p></body>
<! -- omissis -- >
08-00-03
� CSS � LA REGOLA � LE CLASSI
DIFFERENZIARE I PARAGRAFI
Supponiamo di desiderare che i due paragrafi vengano presentati con stili diversi.
Supponiamo di desiderare che i due paragrafi vengano presentati con stili diversi.
Supponiamo di desiderare che i due paragrafi vengano presentati con stili diversi.
h1 /* omissis */p. tipo1 {
width : 75%;font - style : italic ;text - align : right;font - size : 10pt;color : #888888;
}p. tipo2 {
width : 100%;text - align : center;font - size : 15pt;background : #888888;color : black ;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 50
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
<! -- omissis -- ><body>
<h1>Titolo 1 </h1><p class ="tipo1" >
Bla <! -- omissis -- > Bla</p><h1>Titolo 2 </h1>
<p class ="tipo2" >Bla <! -- omissis -- > Bla
</p></body>
<! -- omissis -- >
08-00-03
� CSS � LA REGOLA � LE CLASSI
DIFFERENZIARE I PARAGRAFI
Supponiamo di desiderare che i due paragrafi vengano presentati con stili diversi.
Supponiamo di desiderare che i due paragrafi vengano presentati con stili diversi.
Supponiamo di desiderare che i due paragrafi vengano presentati con stili diversi.
h1 /* omissis */p. tipo1 {
width : 75%;font - style : italic ;text - align : right;font - size : 10pt;color : #888888;
}p. tipo2 {
width : 100%;text - align : center;font - size : 15pt;background : #888888;color : black ;
}
Per ogni elemento si possono specificare infinite classi, ciascuna con le sue dichiarazioni. Per farne uso, nel documento
html si ricorre all’attributo globale class.
Per ogni elemento si possono specificare infinite classi, ciascuna con le sue dichiarazioni. Per farne uso, nel documento
html si ricorre all’attributo globale class.
Per ogni elemento si possono specificare infinite classi, ciascuna con le sue dichiarazioni. Per farne uso, nel documento
html si ricorre all’attributo globale class.
26
CSS
Classi generiche
[corso avanzato]
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 52
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
CLASSI GENERICHE08-00-19
� CSS � LA REGOLA � LE CLASSI
<! -- omissis -- ><body>
<img src =" vasco.jpg "alt ="copertina del disco" >
<h1>Vasco Rossi </h1><h2>Eh già </h2><video src ="Vasco.mp4"
poster =" poster.jpeg "controls =" controls " >
</video><p>
Il video di Vasco Rossi intitolato "Eh già"
</p></body>
<! -- omissis -- >
27
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 53
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
CLASSI GENERICHE
08-00-19
� CSS � LA REGOLA � LE CLASSI
<! -- omissis -- ><body>
<img class ="centra"src =" vasco.jpg "alt ="copertina del disco" >
<h1 class ="centra" >Vasco Rossi
</h1><h2 class ="centra" >
Eh già</h2><video class ="centra"
src ="Vasco.mp4"poster =" poster.jpeg "controls =" controls " >
</video><p class ="centra" >
Il video di Vasco Rossi intitolato "Eh già"
</p></body>
<! -- omissis -- >
. centra {/* omissis */
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 54
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
CLASSI GENERICHE08-00-19
� CSS � LA REGOLA � LE CLASSI
. centra {/* centro i testi* /text - align : center;/* centro le immagini */display : block;margin : auto;
}
h1. solomia {letter - spacing : 17pt;
}
<! -- omissis -- ><h1 class ="centra solomia " >
Vasco Rossi</h1>
<! -- omissis -- >
28
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 55
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
CLASSI GENERICHE
08-00-19
� CSS � LA REGOLA � LE CLASSI
. centra {/* centro i testi* /text - align : center;/* centro le immagini */display : block;margin : auto;
}
h1. solomia {letter - spacing : 17pt;
}
<! -- omissis -- ><h1 class ="centra solomia " >
Vasco Rossi</h1>
<! -- omissis -- >
CSS
Le pseudo-classi (ovvero gli stati)
29
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 57
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
LE PSEUDOCLASSI
08-00-15
� CSS � LA REGOLA
Una volta scelto il selettore è possibile definire regole diverse
per stati diversi.
Una volta scelto il selettore è possibile definire regole diverse
per stati diversi.
Una volta scelto il selettore è possibile definire regole diverse
per stati diversi.
L’elemento a per esempio vive diversi stati:
� semplice� già visitato� puntato dal mouse� in presenza del focus� in fase di attivazione
L’elemento a per esempio vive diversi stati:
� semplice� già visitato� puntato dal mouse� in presenza del focus� in fase di attivazione
L’elemento a per esempio vive diversi stati:
� semplice� già visitato� puntato dal mouse� in presenza del focus� in fase di attivazione
Osserviamo che gli ultimi3 stati possono essere attribuiti
a qualsiasi elemento.
Osserviamo che gli ultimi3 stati possono essere attribuiti
a qualsiasi elemento.
Osserviamo che gli ultimi3 stati possono essere attribuiti
a qualsiasi elemento.
<! -- omissis -- ><body>
<p><a href ="altraPag1.html" >Chi siamo </a>|<a href ="altraPag2.html" >Dove siamo </a>|<a href ="altraPag3.html" >Prodotti </a>|<a href ="altraPag4.html" >Contattaci </a>
</p></body><! -- omissis -- >
a: link {color : black ;font - family : monospace ;
}
a: visited {color : gray ;font - family : monospace ;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 58
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
LE PSEUDOCLASSI08-00-16
� CSS � LA REGOLA
Una volta scelto il selettore è possibile definire regole diverse
per stati diversi.
Una volta scelto il selettore è possibile definire regole diverse
per stati diversi.
Una volta scelto il selettore è possibile definire regole diverse
per stati diversi.
L’elemento a per esempio vive diversi stati:
� semplice� già visitato� puntato dal mouse� in presenza del focus� in fase di attivazione
L’elemento a per esempio vive diversi stati:
� semplice� già visitato� puntato dal mouse� in presenza del focus� in fase di attivazione
L’elemento a per esempio vive diversi stati:
� semplice� già visitato� puntato dal mouse� in presenza del focus� in fase di attivazione
Osserviamo che gli ultimi3 stati possono essere attribuiti
a qualsiasi elemento.
Osserviamo che gli ultimi3 stati possono essere attribuiti
a qualsiasi elemento.
Osserviamo che gli ultimi3 stati possono essere attribuiti
a qualsiasi elemento.
a: link {color : black ;font - family : monospace ;
}
a: hover {color : red ;font - family : monospace ;
}
<! -- omissis -- ><body>
<p><a href ="altraPag1.html" >Chi siamo </a>|<a href ="altraPag2.html" >Dove siamo </a>|<a href ="altraPag3.html" >Prodotti </a>|<a href ="altraPag4.html" >Contattaci </a>
</p></body><! -- omissis -- >
30
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 59
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
LE PSEUDOCLASSI
08-00-17
� CSS � LA REGOLA
Una volta scelto il selettore è possibile definire regole diverse
per stati diversi.
Una volta scelto il selettore è possibile definire regole diverse
per stati diversi.
Una volta scelto il selettore è possibile definire regole diverse
per stati diversi.
L’elemento a per esempio vive diversi stati:
� semplice� già visitato� puntato dal mouse� in presenza del focus� in fase di attivazione
L’elemento a per esempio vive diversi stati:
� semplice� già visitato� puntato dal mouse� in presenza del focus� in fase di attivazione
L’elemento a per esempio vive diversi stati:
� semplice� già visitato� puntato dal mouse� in presenza del focus� in fase di attivazione
Osserviamo che gli ultimi3 stati possono essere attribuiti
a qualsiasi elemento.
Osserviamo che gli ultimi3 stati possono essere attribuiti
a qualsiasi elemento.
Osserviamo che gli ultimi3 stati possono essere attribuiti
a qualsiasi elemento.
a: link {color : black ;font - family : monospace ;
}
a: focus {color : red ;font - family : monospace ;
}
<! -- omissis -- ><body>
<p><a href ="altraPag1.html" >Chi siamo </a>|<a href ="altraPag2.html" >Dove siamo </a>|<a href ="altraPag3.html" >Prodotti </a>|<a href ="altraPag4.html" >Contattaci </a>
</p></body><! -- omissis -- >
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 60
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
LE PSEUDOCLASSI08-00-18
� CSS � LA REGOLA
Una volta scelto il selettore è possibile definire regole diverse
per stati diversi.
Una volta scelto il selettore è possibile definire regole diverse
per stati diversi.
Una volta scelto il selettore è possibile definire regole diverse
per stati diversi.
L’elemento a per esempio vive diversi stati:
� semplice� già visitato� puntato dal mouse� in presenza del focus� in fase di attivazione
L’elemento a per esempio vive diversi stati:
� semplice� già visitato� puntato dal mouse� in presenza del focus� in fase di attivazione
L’elemento a per esempio vive diversi stati:
� semplice� già visitato� puntato dal mouse� in presenza del focus� in fase di attivazione
Osserviamo che gli ultimi3 stati possono essere attribuiti
a qualsiasi elemento.
Osserviamo che gli ultimi3 stati possono essere attribuiti
a qualsiasi elemento.
Osserviamo che gli ultimi3 stati possono essere attribuiti
a qualsiasi elemento.
a: link {color : black ;font - family : monospace ;
}
a: active {color : red ;font - family : monospace ;
}
<! -- omissis -- ><body>
<p><a href ="altraPag1.html" >Chi siamo </a>|<a href ="altraPag2.html" >Dove siamo </a>|<a href ="altraPag3.html" >Prodotti </a>|<a href ="altraPag4.html" >Contattaci </a>
</p></body><! -- omissis -- >
31
CSS
Elementi unici
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 62
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
DIFFERENZIARE GLI ELEMENTI08-00-12
� CSS � LA REGOLA � GLI ID
Oltre a class esiste un altro attributoglobale che può essere usato per differenziare
gli elementi: id. Una volta assegnato un id(univoco) ad un elemento è possibile creare una
regola solo per esso mediante la specifica #.
Oltre a class esiste un altro attributoglobale che può essere usato per differenziare
gli elementi: id. Una volta assegnato un id(univoco) ad un elemento è possibile creare una
regola solo per esso mediante la specifica #.
Oltre a class esiste un altro attributoglobale che può essere usato per differenziare
gli elementi: id. Una volta assegnato un id(univoco) ad un elemento è possibile creare una
regola solo per esso mediante la specifica #.
<! -- omissis -- ><body>
<p> Paragrafo 1 </p><p class ="A" > Paragrafo 2 </p><p id ="X" > Paragrafo 3 </p><p class ="A" > Paragrafo 4 </p><p class ="A" id ="Y" > Paragrafo 5 </p>
</body><! -- omissis -- >
p {font - family : monospace ;color : black ;font - size : 15pt;
}p. A {
color : green;}p#X {
background : silver;}p#Y {
background : pink ;}
32
CSS
Il box-model
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 64
IL BOX-MODEL
� CSS � IL BOX MODEL
In CSS, per ogni elemento viene generato il box che lo contiene.
In CSS, per ogni elemento viene generato il box che lo contiene.
In CSS, per ogni elemento viene generato il box che lo contiene.
Per ciascun box possiamo stabilire:Per ciascun box possiamo stabilire:Per ciascun box possiamo stabilire:
� le caratteristiche del suo confine� lo spazio tra l’elemento stesso ed il
suo confine� lo spazio tra i confini di elementi
diversi
33
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 65
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
<! -- omissis -- ><body>
<img src =" emergency.jpg " alt ="infermiera" /></body><! -- omissis -- >
IL BOX-MODEL: UN ESEMPIO
01a
� CSS � IL BOX MODEL
body {background :url(" bg.gif ");
}
img {width : 100px;
}
img {width : 100px;border - color : red ;border - style : solid ;border - width : 10px;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 66
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
<! -- omissis -- ><body>
<img src =" emergency.jpg " alt ="infermiera" /></body><! -- omissis -- >
IL BOX-MODEL: UN ESEMPIO01a
� CSS � IL BOX MODEL
img {width : 100px;border : red solid 10px;
}
img {width : 100px;border - color : red ;border - style : solid ;border - width : 10px;
}
34
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 67
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
<! -- omissis -- ><body>
<img src =" emergency.jpg " alt ="infermiera" /></body><! -- omissis -- >
IL BOX-MODEL: UN ESEMPIO
01a
� CSS � IL BOX MODEL
img {width : 100px;border : red solid 10px;
}
img {width : 100px;border : red solid 10px;padding : 30px;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 68
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
<! -- omissis -- ><body>
<img src =" emergency.jpg " alt ="infermiera" /></body><! -- omissis -- >
IL BOX-MODEL: UN ESEMPIO01a
� CSS � IL BOX MODEL
img {width : 100px;border : red solid 10px;padding : 30px;background : black ;
}
img {width : 100px;border : red solid 10px;padding : 30px;
}
35
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 69
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
<! -- omissis -- ><body>
<img src =" emergency.jpg " alt ="infermiera" /></body><! -- omissis -- >
IL BOX-MODEL: UN ESEMPIO
01a
� CSS � IL BOX MODEL
img {width : 100px;border : red solid 10px;padding : 30px;background : black ;
}
img {width : 100px;border : red solid 10px;padding : 30px;background : black ;margin : 10px;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 70
IL BOX-MODEL
� CSS � IL BOX MODEL
Il margine è lo spazio tra il bordo e gli altri elementi.
Il margine è lo spazio tra il bordo e gli altri elementi.
Il margine è lo spazio tra il bordo e gli altri elementi.
Il bordo del box ha un colore, uno stile e una dimensione.
Il bordo del box ha un colore, uno stile e una dimensione.
Il bordo del box ha un colore, uno stile e una dimensione.
Le proprietà width ed height
fanno riferimento all’elemento.Le proprietà width ed height
fanno riferimento all’elemento.Le proprietà width ed height
fanno riferimento all’elemento.
In CSS, per ogni elemento viene generato il box che lo contiene.
In CSS, per ogni elemento viene generato il box che lo contiene.
In CSS, per ogni elemento viene generato il box che lo contiene.
Il padding è lo spazio tra l’elemento e il bordo.
La proprietà background vale sia per l’elemento che per il padding.
Il padding è lo spazio tra l’elemento e il bordo.
La proprietà background vale sia per l’elemento che per il padding.
Il padding è lo spazio tra l’elemento e il bordo.
La proprietà background vale sia per l’elemento che per il padding.
36
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 71
IL BOX-MODEL: I PUNTI CARDINALI
� CSS � IL BOX MODEL
Il margine è lo spazio tra il bordo e gli altri elementi.
Il margine è lo spazio tra il bordo e gli altri elementi.
Il margine è lo spazio tra il bordo e gli altri elementi.
Il bordo del box ha un colore, uno stile e una dimensione.
Il bordo del box ha un colore, uno stile e una dimensione.
Il bordo del box ha un colore, uno stile e una dimensione.
Le proprietà width ed height
fanno riferimento all’elemento.Le proprietà width ed height
fanno riferimento all’elemento.Le proprietà width ed height
fanno riferimento all’elemento.
In CSS, per ogni elemento viene generato il box che lo contiene.
In CSS, per ogni elemento viene generato il box che lo contiene.
In CSS, per ogni elemento viene generato il box che lo contiene.
Il padding è lo spazio tra l’elemento e il bordo.
La proprietà background vale sia per l’elemento che per il padding.
Il padding è lo spazio tra l’elemento e il bordo.
La proprietà background vale sia per l’elemento che per il padding.
Il padding è lo spazio tra l’elemento e il bordo.
La proprietà background vale sia per l’elemento che per il padding.
CSS rende possibile specificare – ad esempio – colori diversi
per il bordo superiore e quello inferiore
dello stesso elemento.
CSS rende possibile specificare – ad esempio – colori diversi
per il bordo superiore e quello inferiore
dello stesso elemento.
CSS rende possibile specificare – ad esempio – colori diversi
per il bordo superiore e quello inferiore
dello stesso elemento.
Più in generale, CSS ci permette di distinguere
tra le quattro componenti (superiore, destra, inferiore e sinistra) di entrambe le caratteristiche del box
(bordo, padding e margine.)
Più in generale, CSS ci permette di distinguere
tra le quattro componenti (superiore, destra, inferiore e sinistra) di entrambe le caratteristiche del box
(bordo, padding e margine.)
Più in generale, CSS ci permette di distinguere
tra le quattro componenti (superiore, destra, inferiore e sinistra) di entrambe le caratteristiche del box
(bordo, padding e margine.)
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 72
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
I PUNTI CARDINALI: QUATTRO PROPRIETÀ
01b
� CSS � IL BOX MODEL
<! -- omissis -- ><body>
<p>Tutti gli esseri umani nascono liberi ed eguali in dignità e diritti. </p></body>
<! -- omissis -- >
p {width : 250px;text - align : center;
border : solid red 1px;margin : 20px;padding : 10px;
}
p {border - top - width : 20px;border - right - width : 1px;border - bottom - width : 1px ;border - left - width : 1px;
}
37
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 73
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
p {border - width : 20px 1px 1px 1px ;
}
I PUNTI CARDINALI: QUATTRO PROPRIETÀ
01b
� CSS � IL BOX MODEL
<! -- omissis -- ><body>
<p>Tutti gli esseri umani nascono liberi ed eguali in dignità e diritti. </p></body>
<! -- omissis -- >
p {border - top - width : 20px;border - right - width : 1px;border - bottom - width : 1px ;border - left - width : 1px;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 74
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
p {border - width : 20px 1px;
}
p {border - width : 20px 1px 1px 1px ;
}
I PUNTI CARDINALI: QUATTRO PROPRIETÀ
01b
� CSS � IL BOX MODEL
<! -- omissis -- ><body>
<p>Tutti gli esseri umani nascono liberi ed eguali in dignità e diritti. </p></body>
<! -- omissis -- >
38
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 75
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
p {border - width : 20px 1px 1px 1px ;
margin - left : auto;margin - right : auto;/* vale solo per margin */
}
p {border - width : 20px 1px;
}
I PUNTI CARDINALI: QUATTRO PROPRIETÀ
01b
� CSS � IL BOX MODEL
<! -- omissis -- ><body>
<p>Tutti gli esseri umani nascono liberi ed eguali in dignità e diritti. </p></body>
<! -- omissis -- >
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 76
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
p {border - width : 20px 1px 1px 1px ;
margin - left : auto;margin - right : auto;/* vale solo per margin */
}
I PUNTI CARDINALI: QUATTRO PROPRIETÀ
01b
� CSS � IL BOX MODEL
<! -- omissis -- ><body>
<p>Tutti gli esseri umani nascono liberi ed eguali in dignità e diritti. </p></body>
<! -- omissis -- >
p {border - width : 20px 1px 1px 1px ;
margin : auto;/* vale solo per *//* margin - left e margin - top */
}
39
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 77
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
MARGINI CHE COLLASSANO
08-00-05
� CSS � IL BOX MODEL
p {margin : 20px;border - style : solid ;border - color : red ;padding : 10px;
}
p. tipo1 {border - top - width : 20px;border - right - width : 1px;border - bottom - width : 1px;border - left - width : 1px;
}
p. tipo2 {border - width : 1px;border - top - width : 20px;
}p. tipo3 {
border - width : 20px 1px 1px 1px ;}
Notiamo che i margini orizzontali adiacenti si assorbono l’un l’altro.Notiamo che i margini orizzontali adiacenti si assorbono l’un l’altro.Notiamo che i margini orizzontali adiacenti si assorbono l’un l’altro.
<! -- omissis -- ><body>
<p class ="tipo1" >Primo tipo di paragrafo </p><p class ="tipo2" >Secondo tipo di paragrafo </p><p class ="tipo3" >Terzo tipo di paragrafo </p>
</body><! -- omissis -- >
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 78
� CSS � BOX MODEL � 01d
ESERCIZIORealizzare un progetto web che si presenti come indicato in immagine
seguendo le indicazioni che seguono.Realizzare un progetto web che si presenti come indicato in immagine
seguendo le indicazioni che seguono.Realizzare un progetto web che si presenti come indicato in immagine
seguendo le indicazioni che seguono.
� Il testo è espresso con un font Verdana grande 35 pixel e dista dal bordo 10 e 50 pixel.
� Il blocco grigio dista dall’inizio della pagina 30 pixel (non viene specificata la distanza da eventuali ulteriori elementi) ed occupa sempre e comunque tutto lo spazio disponibile.
40
CSS
Box Model
[corso avanzato]
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 80
RENDERIZZARE UNA PAGINA
� CSS � IL BOX MODEL � AVANZATO
L’attività – svolta da browser – di leggere un documento HTML e produrre una pagina WEB avviene alla luce di alcune regole.L’attività – svolta da browser – di leggere un documento HTML e produrre una pagina WEB avviene alla luce di alcune regole.L’attività – svolta da browser – di leggere un documento HTML e produrre una pagina WEB avviene alla luce di alcune regole.
Il punto principale è la distinzione tra elementi di tipo blocco ed elementi di tipo inline.Il punto principale è la distinzione tra elementi di tipo blocco ed elementi di tipo inline.Il punto principale è la distinzione tra elementi di tipo blocco ed elementi di tipo inline.
41
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 81
RENDERIZZARE UNA PAGINA
� CSS � IL BOX MODEL � AVANZATO
L’attività – svolta da browser – di leggere un documento HTML e produrre una pagina WEB avviene alla luce di alcune regole.L’attività – svolta da browser – di leggere un documento HTML e produrre una pagina WEB avviene alla luce di alcune regole.L’attività – svolta da browser – di leggere un documento HTML e produrre una pagina WEB avviene alla luce di alcune regole.
Il punto principale è la distinzione tra elementi di tipo blocco ed elementi di tipo inline.Il punto principale è la distinzione tra elementi di tipo blocco ed elementi di tipo inline.Il punto principale è la distinzione tra elementi di tipo blocco ed elementi di tipo inline.
Queste due categorie di elementi in realtà si differenziano per più di un aspetto(per esempio la proprietà width su un elemento di tipo inline non ha alcun effetto).
Queste due categorie di elementi in realtà si differenziano per più di un aspetto(per esempio la proprietà width su un elemento di tipo inline non ha alcun effetto).
Queste due categorie di elementi in realtà si differenziano per più di un aspetto(per esempio la proprietà width su un elemento di tipo inline non ha alcun effetto).
Poiché le immagini alle volte si comportano come elementi di tipo blocco ed altre come elementi di tipo inline le tratteremo come categoria a sé stante.
Poiché le immagini alle volte si comportano come elementi di tipo blocco ed altre come elementi di tipo inline le tratteremo come categoria a sé stante.
Poiché le immagini alle volte si comportano come elementi di tipo blocco ed altre come elementi di tipo inline le tratteremo come categoria a sé stante.
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 82
CC BY
h1 {background - color : grey ;text - align : center;font - size : 25px;
}h2 {
background : lightblue ;font - size : 10px;text - align : right;
}
ELEMENTI DI TIPO BLOCCO
� CSS � IL BOX MODEL � AVANZATO
<h1>Isaia </h1><h2>10, 1 - 2</h2><p>
Guai a voi che fate leggi ingiuste per opprimere il mio popolo. Cosìnegate la giustizia ai poveri e li private dei loro diritti; sottraete alle vedove e agli orfani i loro beni.
</p>
body {font - family : Verdana ;color : white ;
}p {
font - size : 12px;color : blue ;text - shadow : lightblue 0.1em 0.1em 0.2em;text - align : justify ;
}
42
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 83
CC BY
ELEMENTI DI TIPO INLINE
� CSS � IL BOX MODEL � AVANZATO
<b>Sito Web - > </b>
<a href ="http://www.lav.it" >Lega Anti Vivisezione
</a>
<b>< ; - Sito Web </b>
body {font - family : monospace ;
}b {
font - weight : 900;font - size : 30px;
}a: link , a: visited , a: focus , a: hover {
color : blue ;font - size : 12px;
}
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 84
CC BY
ELEMENTI DI TIPO INLINE-BLOCK
� CSS � IL BOX MODEL � AVANZATO
<img id ="cuori" src =" cuori.png " alt ="simbolo cuori" /><img id ="quadri" src =" quadri.png " alt ="simbolo quadri" /><img id ="fiori" src =" fiori.png " alt ="simbolo fiori" /><img id ="picche" src =" picche.png " alt ="simbolo picche" />
43
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 85
CC BY
PROPRIETÀ WIDTH
� CSS � IL BOX MODEL � AVANZATO
h1, h2, p {width : 200px;
}
b, a {width : 200px;
}
img {width : 20px;
}
Osserviamo che la proprietà width (e quindi height, min-width, min-height, max-width e max-height) non sono applicabili agli elementi inline.
Osserviamo che la proprietà width (e quindi height, min-width, min-height, max-width e max-height) non sono applicabili agli elementi inline.
Osserviamo che la proprietà width (e quindi height, min-width, min-height, max-width e max-height) non sono applicabili agli elementi inline.
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 86
CC BY
PROPRIETÀ TEXT-ALIGN
� CSS � IL BOX MODEL � AVANZATO
/* la proprietà text - alignera già stata usata per realizzare la pagina WEB di partenza
*/
b, a {text - align : center;
}
img {text - align : center;
}
Osserviamo che la proprietà text-align può essere adoperata solo con gli elementi di tipo blocco, ma che poi in realtà essa agisce sugli elementi di tipo inline ed inline-block.
Osserviamo che la proprietà text-align può essere adoperata solo con gli elementi di tipo blocco, ma che poi in realtà essa agisce sugli elementi di tipo inline ed inline-block.
Osserviamo che la proprietà text-align può essere adoperata solo con gli elementi di tipo blocco, ma che poi in realtà essa agisce sugli elementi di tipo inline ed inline-block.
44
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 87
CC BY
PROPRIETÀ TEXT-ALIGN
� CSS � IL BOX MODEL � AVANZATO
/* la proprietà text - alignera già stata usata per realizzare la pagina WEB di partenza
*/
body {text - align : center;
}
body {text - align : center;
}
Osserviamo che la proprietà text-align può essere adoperata solo con gli elementi di tipo blocco, ma che poi in realtà essa agisce sugli elementi di tipo inline ed inline-block.
Osserviamo che la proprietà text-align può essere adoperata solo con gli elementi di tipo blocco, ma che poi in realtà essa agisce sugli elementi di tipo inline ed inline-block.
Osserviamo che la proprietà text-align può essere adoperata solo con gli elementi di tipo blocco, ma che poi in realtà essa agisce sugli elementi di tipo inline ed inline-block.
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 88
CC BY
PROPRIETÀ BORDER
� CSS � IL BOX MODEL � AVANZATO
h1, h2, p {border : red 1px solid ;
}
b, a {border : red 1px solid ;
}
img {border : red 1px solid ;
}
Osserviamo che la proprietà border può essere adoperata con ogni tipo di elemento, ma che con gli elementi di tipo inline i risultati sono un po’ particolari.
Osserviamo che la proprietà border può essere adoperata con ogni tipo di elemento, ma che con gli elementi di tipo inline i risultati sono un po’ particolari.
Osserviamo che la proprietà border può essere adoperata con ogni tipo di elemento, ma che con gli elementi di tipo inline i risultati sono un po’ particolari.
45
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 89
CC BY
PROPRIETÀ MARGIN
� CSS � IL BOX MODEL � AVANZATO
h1, h2, p {margin : 10px;
}
b, a {margin : 10px;
}
img {margin : 10px;
}
Osserviamo che la proprietà margin può essere adoperata con ogni tipo di elemento, ma che con gli elementi di tipo inline ha senso solo per l’asse orizzontale.
Osserviamo che la proprietà margin può essere adoperata con ogni tipo di elemento, ma che con gli elementi di tipo inline ha senso solo per l’asse orizzontale.
Osserviamo che la proprietà margin può essere adoperata con ogni tipo di elemento, ma che con gli elementi di tipo inline ha senso solo per l’asse orizzontale.
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 90
CC BY
PROPRIETÀ PADDING
� CSS � IL BOX MODEL � AVANZATO
h1, h2, p {padding : 10px;
}
b, a {padding : 10px;
}
img {padding : 10px;
}
Osserviamo che la proprietà padding può essere adoperata con ogni tipo di elemento, ma che con gli elementi di tipo inline ha senso solo per l’asse orizzontale.
Osserviamo che la proprietà padding può essere adoperata con ogni tipo di elemento, ma che con gli elementi di tipo inline ha senso solo per l’asse orizzontale.
Osserviamo che la proprietà padding può essere adoperata con ogni tipo di elemento, ma che con gli elementi di tipo inline ha senso solo per l’asse orizzontale.
46
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 91
CC BY
PROPRIETÀ VERTICAL-ALIGN
� CSS � IL BOX MODEL � AVANZATO
h1, h2, p {vertical - align : bottom ;
}
b, a {vertical - align : top;
}
img {vertical - align : bottom ;
}#cuori {
height : 10px;}
Osserviamo che la proprietà vertical-align può essere adoperata solo per gli elementi di tipo inline e inline-block.
Osserviamo che la proprietà vertical-align può essere adoperata solo per gli elementi di tipo inline e inline-block.
Osserviamo che la proprietà vertical-align può essere adoperata solo per gli elementi di tipo inline e inline-block.
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 92
CC BY
Gli elementi di tipo block sono contenitori per
definizione.
Essi possono contenere elementi di tutti i tipi.
Gli elementi di tipo block sono contenitori per
definizione.
Essi possono contenere elementi di tutti i tipi.
Gli elementi di tipo block sono contenitori per
definizione.
Essi possono contenere elementi di tutti i tipi.
Un elemento di tipoinline può contenere solo altri
elementi di tipo inline.
Per esempio un elemento di tipo b può contenere un
elemento di tipo i.
Un elemento di tipoinline può contenere solo altri
elementi di tipo inline.
Per esempio un elemento di tipo b può contenere un
elemento di tipo i.
Un elemento di tipoinline può contenere solo altri
elementi di tipo inline.
Per esempio un elemento di tipo b può contenere un
elemento di tipo i.
Un elemento di tipo inline-block è un contenitore alla stregua di un elemento di
tipo block.
Un elemento di tipo inline-block è un contenitore alla stregua di un elemento di
tipo block.
Un elemento di tipo inline-block è un contenitore alla stregua di un elemento di
tipo block.
ELEMENTI CONTENITORI
� CSS � IL BOX MODEL � AVANZATO
47
CSS
Disposizione degli elementi
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 94
DISPOSIZIONE DEGLI ELEMENTI
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
La cosa più complicata sarà quella di disporre gli elementi (con i loro box) nello spazio a disposizione esattamente come desideriamo.
La cosa più complicata sarà quella di disporre gli elementi (con i loro box) nello spazio a disposizione esattamente come desideriamo.
La cosa più complicata sarà quella di disporre gli elementi (con i loro box) nello spazio a disposizione esattamente come desideriamo.
height imposta l’altezza del contenuto
width imposta la larghezza del contenuto
Oltre ad intervenire sulle dimensioni dobbiamo imparare a:Oltre ad intervenire sulle dimensioni dobbiamo imparare a:Oltre ad intervenire sulle dimensioni dobbiamo imparare a:
� Modificare la tipologia di elemento (inline o a blocco): display
� Modificare la posizione in cui apparirebbe il blocco (position, top, float e clear)� Modificare il comportamento del blocco nel caso dovesse ospitare dei contenuti più ampi dello spazio a disposizione (overflow)
48
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 95
LA PROPRIETÀ “DISPLAY”� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
Con la proprietà display un elemento in linea può diventare un elemento a blocco e viceversa.
Inoltre possiamo impostare anche altri valori.
Questa proprietà può essere utile – tra le altre cose – per allineare le immagini.
Con la proprietà display un elemento in linea può diventare un elemento a blocco e viceversa.
Inoltre possiamo impostare anche altri valori.
Questa proprietà può essere utile – tra le altre cose – per allineare le immagini.
Con la proprietà display un elemento in linea può diventare un elemento a blocco e viceversa.
Inoltre possiamo impostare anche altri valori.
Questa proprietà può essere utile – tra le altre cose – per allineare le immagini.
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 96
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
ALLINEAMENTO ORIZZONTALEDEL TESTO
08-00-06
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI � ALLINEAMENTI
<! -- omissis -- ><body>
<p class ="tipo1" >Uno uno uno uno uno uno uno </p><hr /><p class ="tipo2" >Due due due due due due due </p><hr /><p class ="tipo3" >Tre tre tre tre tre tre tre </p>
</body><! -- omissis -- >
p {font - size : 15pt;color : blue ;border : 1px dotted red ;width : 150px;
}
p. tipo1 {text - align : center;
}
p. tipo2 {margin - left : auto;margin - right : auto;
}
p. tipo3 {text - align : center;margin : auto;
}
49
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 97
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
ALLINEAMENTO VERTICALEDEL TESTO
08-00-07
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI � ALLINEAMENTI
<! -- omissis -- ><body>
<p class ="tipo1" >Un testo di un solo rigo </p><hr /><p class ="tipo2" >
Un testo su un numero imprecisato di righe</p>
</body><! -- omissis -- >
p {font - size : 15pt;color : blue ;border : 1px dotted red ;width : 300px;height : 100px;
}
p. tipo1 {line - height : 100px;
}
p. tipo2 {display : table - cell ;vertical - align : middle;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 98
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
08-00-08
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI � ALLINEAMENTI
<! -- omissis -- ><body>
<img src =" mucca.jpg " alt ="La mucca centrata orizzontalmente" /></body>
<! -- omissis -- >
img {display : block;margin : auto;border : dotted green 1px;
}
ALLINEAMENTO ORIZZONTALEDELLE IMMAGINI
50
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 99
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
08-00-09
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI � ALLINEAMENTI
ALLINEAMENTO VERTICALEDELLE IMMAGINI
<! -- omissis -- ><body>
<div class ="contenitore1" ><div class ="contenitore2" >
<img src =" mucca.jpg " alt ="La mucca centrata verticalmente" /></ div >
</ div ></body>
<! -- omissis -- >
div . contenitore1 {display : table ;height : 300px;width : 300px;border : dotted green 1px;
}
div . contenitore2 {display : table - cell ;vertical - align : middle;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 100
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
08-00-10
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI � ALLINEAMENTI
<! -- omissis -- ><body>
<div class ="contenitore1" ><div class ="contenitore2" >
<img src =" mucca.jpg " alt ="La mucca centrata" /></ div >
</ div ></body>
<! -- omissis -- >
div . contenitore1 {display : table ;height : 300px;width : 300px;border : dotted green 1px;
}
div . contenitore2 {display : table - cell ;vertical - align : middle;text - align : center;
}
ALLINEAMENTO DELLE IMMAGINI
51
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 101
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
ALLINEAMENTI GENERALI
08-00-11
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI � ALLINEAMENTI
<! -- omissis -- ><body>
<div class =" contenitoreGrande " ><div class =" contenitoreImmagine " >
<img src =" mucca.jpg "alt ="La mucca centrata" />
</ div ><div class =" contenitoreTesto " >
MUUUUuuuu!!!</ div >
</ div ></body>
<! -- omissis -- >
div . contenitoreGrande {height : 150px;width : 600px;border : dotted green 1px;margin : auto;display : table ;
}
div . contenitoreImmagine {height : 150px;width : 198px;border : dotted red 1px;display : table - cell ;vertical - align : middle;text - align : center;
}
div . contenitoreTesto {height : 150px;width : 398px;border : dotted red 1px;float : left ;line - height : 150px;text - align : center;font - size : 20pt;font - family : Verdana ;color : green;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 102
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
ALLINEAMENTI GENERALI08-00-11
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI � ALLINEAMENTI
<! -- omissis -- ><body>
<div class =" contenitoreGrande " ><div class =" contenitoreImmagine " >
<img src =" mucca.jpg "alt ="La mucca centrata" />
</ div ><div class =" contenitoreTesto " >
MUUUUuuuu!!!</ div >
</ div ></body>
<! -- omissis -- >
div . contenitoreGrande {height : 150px;width : 600px;border : dotted green 1px;margin : auto;display : table ;
}
div . contenitoreImmagine {height : 150px;width : 198px;border : dotted red 1px;display : table - cell ;vertical - align : middle;text - align : center;
}
div . contenitoreTesto {height : 150px;width : 398px;border : dotted red 1px;float : left ;line - height : 150px;text - align : center;font - size : 20pt;font - family : Verdana ;color : green;
}
52
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 103
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
ALLINEAMENTI GENERALI
08-00-11
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI � ALLINEAMENTI
<! -- omissis -- ><body>
<div class =" contenitoreGrande " ><div class =" contenitoreImmagine " >
<img src =" mucca.jpg "alt ="La mucca centrata" />
</ div ><div class =" contenitoreTesto " >
MUUUUuuuu!!!</ div >
</ div ></body>
<! -- omissis -- >
div . contenitoreGrande {height : 150px;width : 600px;border : dotted green 1px;margin : auto;display : table ;
}
div . contenitoreImmagine {height : 150px;width : 198px;border : dotted red 1px;display : table - cell ;vertical - align : middle;text - align : center;
}
div . contenitoreTesto {height : 150px;width : 398px;border : dotted red 1px;float : left ;line - height : 150px;text - align : center;font - size : 20pt;font - family : Verdana ;color : green;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 104
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
ALLINEAMENTI GENERALI08-00-11
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI � ALLINEAMENTI
<! -- omissis -- ><body>
<div class =" contenitoreGrande " ><div class =" contenitoreImmagine " >
<img src =" mucca.jpg "alt ="La mucca centrata" />
</ div ><div class =" contenitoreTesto " >
MUUUUuuuu!!!</ div >
</ div ></body>
<! -- omissis -- >
div . contenitoreGrande {height : 150px;width : 600px;border : dotted green 1px;margin : auto;display : table ;
}
div . contenitoreImmagine {height : 150px;width : 198px;border : dotted red 1px;display : table - cell ;vertical - align : middle;text - align : center;
}
div . contenitoreTesto {height : 150px;width : 398px;border : dotted red 1px;float : left ;line - height : 150px;text - align : center;font - size : 20pt;font - family : Verdana ;color : green;
}
53
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 105
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
ALLINEAMENTI GENERALI
08-00-11
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI � ALLINEAMENTI
<! -- omissis -- ><body>
<div class =" contenitoreGrande " ><div class =" contenitoreImmagine " >
<img src =" mucca.jpg "alt ="La mucca centrata" />
</ div ><div class =" contenitoreTesto " >
MUUUUuuuu!!!</ div >
</ div ></body>
<! -- omissis -- >
div . contenitoreGrande {height : 150px;width : 600px;border : dotted green 1px;margin : auto;display : table ;
}
div . contenitoreImmagine {height : 150px;width : 198px;border : dotted red 1px;display : table - cell ;vertical - align : middle;text - align : center;
}
div . contenitoreTesto {height : 150px;width : 398px;border : dotted red 1px;float : left ;line - height : 150px;text - align : center;font - size : 20pt;font - family : Verdana ;color : green;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 106
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
08-00-13
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
MODIFICARE LA POSIZIONE IN CUIAPPARIREBBE IL BLOCCO
<! -- omissis -- ><body>
<img src ="cane 1.jpg" alt ="un cane" /><img src ="cane 2.jpg" alt ="un cane" /><img src ="cane 3.jpg" alt ="un cane" /><img src ="cane 4.jpg" alt ="un cane" />
</body><! -- omissis -- >
img {margin : 10px;border : dotted
1px green;
}
54
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 107
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
08-00-13
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
MODIFICARE LA POSIZIONE IN CUIAPPARIREBBE IL BLOCCO
<! -- omissis -- ><body>
<img src ="cane 1.jpg" alt ="un cane" /><img src ="cane 2.jpg" alt ="un cane" id ="fido" /><img src ="cane 3.jpg" alt ="un cane" /><img src ="cane 4.jpg" alt ="un cane" />
</body><! -- omissis -- >
img {margin : 10px;border : dotted
1px green;
}
#fido {border : dotted
1px red ;
position : relative;top : 80px;left : 80px;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 108
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BOX IN POSIZIONE FISSA08-00-14
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<h1>Animali </h1>
<img src =" alligator.png " alt ="alligatore" /><img src =" ant.png " alt ="formica" /><img src =" bat.png " alt ="pipistrello" /><img src =" bear.png " alt ="orso" /><img src =" bee.png " alt ="ape" /><img src =" bird.png " alt ="uccello" /><img src =" bull.png " alt ="bisonte" /><img src ="butterfly.png" alt ="farfalla" />
</body><! -- omissis -- >
img {height : 150px;
}h1 {
height : 100px;background : green;color : lightgreen ;font - size : 50pt;text - align : center;line - height : 100px;
}
55
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 109
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BOX IN POSIZIONE FISSA
08-00-14
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<h1>Animali </h1>
<img src =" alligator.png " alt ="alligatore" /><img src =" ant.png " alt ="formica" /><img src =" bat.png " alt ="pipistrello" /><img src =" bear.png " alt ="orso" /><img src =" bee.png " alt ="ape" /><img src =" bird.png " alt ="uccello" /><img src =" bull.png " alt ="bisonte" /><img src ="butterfly.png" alt ="farfalla" />
</body><! -- omissis -- >
img {height : 150px;
}h1 {
height : 100px;background : green;color : lightgreen ;font - size : 50pt;text - align : center;line - height : 100px;position : fixed ;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 110
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BOX IN POSIZIONE FISSA08-00-14
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<h1>Animali </h1>
<img src =" alligator.png " alt ="alligatore" /><img src =" ant.png " alt ="formica" /><img src =" bat.png " alt ="pipistrello" /><img src =" bear.png " alt ="orso" /><img src =" bee.png " alt ="ape" /><img src =" bird.png " alt ="uccello" /><img src =" bull.png " alt ="bisonte" /><img src ="butterfly.png" alt ="farfalla" />
</body><! -- omissis -- >
img {height : 150px;
}h1 {
height : 100px;background : green;color : lightgreen ;font - size : 50pt;text - align : center;line - height : 100px;position : fixed ;width : 100%;
}
56
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 111
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BOX IN POSIZIONE FISSA
08-00-14
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<h1>Animali </h1><div class =" spazioVuoto " ></ div ><img src =" alligator.png " alt ="alligatore" /><img src =" ant.png " alt ="formica" /><img src =" bat.png " alt ="pipistrello" /><img src =" bear.png " alt ="orso" /><img src =" bee.png " alt ="ape" /><img src =" bird.png " alt ="uccello" /><img src =" bull.png " alt ="bisonte" /><img src ="butterfly.png" alt ="farfalla" />
</body><! -- omissis -- >
img {height : 150px;
}h1 {
height : 100px;background : green;color : lightgreen ;font - size : 50pt;text - align : center;line - height : 100px;position : fixed ;width : 100%;
}div . spazioVuoto {
height : 100px;}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 112
BLOCCHI FLOTTANTI
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
57
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 113
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BLOCCHI FLOTTANTI
08-00-20
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<p id ="civetta" > Civetta <! -- omissis -- > Civetta </p><img src =" lion.png " alt ="un leone stilizzato" id ="leone" />
</body>
<! -- omissis -- >
img {height : 150px;border : 1px dotted red ;
}
p {border : 1px dotted green;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 114
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BLOCCHI FLOTTANTI08-00-20
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<p id ="civetta" > Civetta <! -- omissis -- > Civetta </p><img src =" lion.png " alt ="un leone stilizzato" id ="leone" />
</body><! -- omissis -- >
img {height : 150px;border : 1px dotted red ;
}
p {border : 1px dotted green;
}
#leone {float : left ;
}
58
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 115
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BLOCCHI FLOTTANTI
08-00-20
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<p id ="civetta" > Civetta <! -- omissis -- > Civetta </p><img src =" lion.png " alt ="un leone stilizzato" id ="leone" />
</body><! -- omissis -- >
img {height : 150px;border : 1px dotted red ;
}
p {border : 1px dotted green;
}
#leone {float : right;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 116
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BLOCCHI FLOTTANTI08-00-20
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<p id ="civetta" > Civetta <! -- omissis -- > Civetta </p><img src =" lion.png " alt ="un leone stilizzato" id ="leone" /><p id ="pipistrello" > Pipistrello <! -- omissis -- > Pipistrello </p><p id ="ermellino" > Ermellino <! -- omissis -- > Ermellino </p>
</body><! -- omissis -- >
img {height : 150px;border : 1px dotted red ;
}
p {border : 1px dotted green;
}
#leone {float : right;
}
59
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 117
BLOCCHI FLOTTANTI
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Gli elementi che lo seguono possono anche sistemarsi successivamente ad esso.
Gli elementi che lo seguono possono anche sistemarsi successivamente ad esso.
Gli elementi che lo seguono possono anche sistemarsi successivamente ad esso.
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 118
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BLOCCHI FLOTTANTI08-00-20
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<p id ="civetta" > Civetta [..omissis..] Civetta </p><img src =" lion.png " alt ="un leone stilizzato" id ="leone" /><p id ="pipistrello" > Pipistrello [..omissis..] Pipistrello </p><p id ="ermellino" > Ermellino [..omissis..] Ermellino </p>
</body><! -- omissis -- >
img {height : 150px;border : 1px dotted red ;
}
p {border : 1px dotted green;
}
#leone {float : right;
}
#pipistrello {clear : right;
}
60
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 119
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BLOCCHI FLOTTANTI
08-00-20
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<p id ="civetta" > Civetta [..omissis..] Civetta </p><img src =" lion.png " alt ="un leone stilizzato" id ="leone" /><p id ="pipistrello" > Pipistrello [..omissis..] Pipistrello </p><p id ="ermellino" > Ermellino [..omissis..] Ermellino </p>
</body><! -- omissis -- >
img {height : 150px;border : 1px dotted red ;
}
p {border : 1px dotted green;
}
#leone {float : right;
}
#ermellino {clear : right;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 120
BLOCCHI FLOTTANTI
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Gli elementi che lo seguono possono anche sistemarsi successivamente ad esso.
Gli elementi che lo seguono possono anche sistemarsi successivamente ad esso.
Gli elementi che lo seguono possono anche sistemarsi successivamente ad esso.
Ciò vale solo per gli elementi di blocco e non per quelli inline.
Ciò vale solo per gli elementi di blocco e non per quelli inline.
Ciò vale solo per gli elementi di blocco e non per quelli inline.
61
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 121
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BLOCCHI FLOTTANTI
08-00-20
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<p id ="civetta" > Civetta [..omissis..] Civetta </p><img src =" lion.png " alt ="un leone stilizzato" id ="leone" /><a id =" lav " href ="http://www.lav.it" target =" _blank " >Lega Antivivisezione </a>
</body><! -- omissis -- >
img {height : 150px;border : 1px dotted red ;
}
p {border : 1px dotted green;
}
#leone {float : right;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 122
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BLOCCHI FLOTTANTI08-00-20
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<p id ="civetta" > Civetta <! -- omissis -- > Civetta </p><img src =" lion.png " alt ="un leone stilizzato" id ="leone" /><a id =" lav " href ="http://www.lav.it" target =" _blank " >Lega Antivivisezione </a>
</body><! -- omissis -- >
img {height : 150px;border : 1px dotted red ;
}
p {border : 1px dotted green;
}
#leone {float : right;
}
#lav {clear : right;
}
62
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 123
BLOCCHI FLOTTANTI
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Gli elementi che lo seguono possono anche sistemarsi successivamente ad esso.
Gli elementi che lo seguono possono anche sistemarsi successivamente ad esso.
Gli elementi che lo seguono possono anche sistemarsi successivamente ad esso.
È molto comodo per disporre in serie elementi di blocco.È molto comodo per disporre in serie elementi di blocco.È molto comodo per disporre in serie elementi di blocco.
Ciò vale solo per gli elementi di blocco e non per quelli inline.
Ciò vale solo per gli elementi di blocco e non per quelli inline.
Ciò vale solo per gli elementi di blocco e non per quelli inline.
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 124
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BLOCCHI FLOTTANTI08-00-21
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<p class ="pulsante" >Chi siamo </p><p class ="pulsante" >Dove siamo </p><p class ="pulsante" >Prodotti </p><p class ="pulsante" >Contattaci </p>
</body><! -- omissis -- >
p. pulsante {background : lime;color : black ;width : 120px;height : 30px;line - height : 30px;margin : 10px;border : solid 1px red ;text - align : center;font - family : monospace ;float : left ;
}
63
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 125
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BLOCCHI FLOTTANTI
08-00-21
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
<! -- omissis -- ><body>
<p class ="pulsante" >Chi siamo </p><p class ="pulsante" >Dove siamo </p><p class ="pulsante" >Prodotti </p><p class ="pulsante" >Contattaci </p>
<div class ="reset" ></ div >
<p>Altro elemento (sia di tipo blocco che inline )
</p></body>
<! -- omissis -- >
p. pulsante {background : lime;color : black ;width : 120px;height : 30px;line - height : 30px;margin : 10px;border : solid 1px red ;text - align : center;font - family : monospace ;float : left ;
}
div . reset {clear : left ;
}
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 126
BLOCCHI FLOTTANTI
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
I blocchi flottanti sono la parte più utile e più complessa nella scelta della disposizione degli elementi.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Un box flottante esce dal flusso di disposizione degli elementi e si posiziona nel primo posto libero a destra o a sinistra.
Gli elementi che lo seguono si dispongono attorno al bordo libero.
Gli elementi che lo seguono possono anche sistemarsi successivamente ad esso.
Gli elementi che lo seguono possono anche sistemarsi successivamente ad esso.
Gli elementi che lo seguono possono anche sistemarsi successivamente ad esso.
È molto comodo per disporre in serie elementi di blocco.È molto comodo per disporre in serie elementi di blocco.È molto comodo per disporre in serie elementi di blocco.
Ciò vale solo per gli elementi di blocco e non per quelli inline.
Ciò vale solo per gli elementi di blocco e non per quelli inline.
Ciò vale solo per gli elementi di blocco e non per quelli inline.
I blocchi flottanti – uscendo dal flusso –non sono inglobati in un altro blocco a meno di un piccolo accorgimento.
I blocchi flottanti – uscendo dal flusso –non sono inglobati in un altro blocco a meno di un piccolo accorgimento.
I blocchi flottanti – uscendo dal flusso –non sono inglobati in un altro blocco a meno di un piccolo accorgimento.
64
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 127
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BLOCCHI FLOTTANTI
08-00-22
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
img {width : 100px;
}
p {font - family : Monospace ;font - size : 25pt;margin : 5px;
}
div . figurina {width : 250px;height : 150px;border : 2px solid orange ;background : yellow;margin : 20px;text - align : center;float : left ;
}
<! -- omissis -- ><body>
<div class ="figurina" ><img src ="duck.png" alt ="papera" /><p>Papera </p>
</ div ><div class ="figurina" >
<img src =" eagle.png " alt ="aquila" /><p>Aquila </p>
</ div ><div class ="figurina" >
<img src =" fish.png " alt ="pesce" /><p>Pesce </p>
</ div ></body>
<! -- omissis -- >
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 128
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BLOCCHI FLOTTANTI08-00-22
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
img {width : 100px;
}
p {font - family : Monospace ;font - size : 25pt;margin : 5px;
}
div . figurina {width : 250px;height : 150px;border : 2px solid orange ;background : yellow;margin : 20px;text - align : center;float : left ;
}
div . contenitore {border : 1px dotted green;background : url ("back.png")
repeat scroll;
}
<! -- omissis -- ><body>
<div class ="contenitore" ><div class ="figurina" >
<img src ="duck.png" alt ="papera" /><p>Papera </p>
</ div ><div class ="figurina" >
<img src =" eagle.png " alt ="aquila" /><p>Aquila </p>
</ div ><div class ="figurina" >
<img src =" fish.png " alt ="pesce" /><p>Pesce </p>
</ div ></ div >
</body><! -- omissis -- >
65
CC BY
ALESSANDRO URSOMANDOVERSIONE 2.2 - DIAPOSITIVA 129
ESERCIZIO
ESERCIZIO
ESERCIZIO
ESERCIZIO
BLOCCHI FLOTTANTI
08-00-22
� CSS � IL BOX MODEL � LA DISPOSIZIONE DEGLI ELEMENTI
img {width : 100px;
}
p {font - family : Monospace ;font - size : 25pt;margin : 5px;
}
div . figurina {width : 250px;height : 150px;border : 2px solid orange ;background : yellow;margin : 20px;text - align : center;float : left ;
}
div . contenitore {border : 1px dotted green;background : url ("back.png")
repeat scroll;
overflow : auto;}
<! -- omissis -- ><body>
<div class ="contenitore" ><div class ="figurina" >
<img src ="duck.png" alt ="papera" /><p>Papera </p>
</ div ><div class ="figurina" >
<img src =" eagle.png " alt ="aquila" /><p>Aquila </p>
</ div ><div class ="figurina" >
<img src =" fish.png " alt ="pesce" /><p>Pesce </p>
</ div ></ div >
</body><! -- omissis -- >