03 - Una scatoletta per ogni elemento.
CSS
03 - Una scatoletta per ogni elemento. /1
CSS

01 - I tre moschettieri del Box Model (prima parte).

Crea la cartella 03 nella solita cartella degli esercizi css e crea in essa i file index01.html e stili01.css.

index01.html 
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Box Model</title>
  5.         <meta charset="UTF-8" />
  6.         <link type="text/css" rel="stylesheet" href="reset.css" />
  7.         <link type="text/css" rel="stylesheet" href="stili01.css" />        
  8.     </head>
  9.     <body>    
  10.         <img src="immagine.jpg" alt="la tua immagine" />
  11.     </body>
  12. </html>
stili01.css 
  1. body {
  2.     background:url("sfondo.gif");
  3. }
  4. img {
  5.     width: 100px;
  6. }

Assicurati di inserire nella cartella 03 le tue immagini (che per il momento si chiamano "immagine.jpg" e "sfondo.gif"). Nel caso dovesse servire, ricordati di modificare il nome delle immagini e/o delle estensioni.
Attenzione: ricordati che l'unico modo per modificare l'estensione di un'immagine è convertirla usando un apposito programma. Pertanto se hai immagini con estensioni diverse da quelle indicate nel codice, devi modificare il codice.

Apri la pagina in una scheda e tienila lì.

Aggiungi le seguenti dichiarazioni in coda alla regola per img, apri la pagina in un'altra scheda ed osserva le differenze.

stili01.css 
  1.     border-color: red;
  2.     border-style: solid;
  3.     border-width: 10px;

Prosegui l'esercizio nella scheda successiva.

Sostituisci le ultime tre dichiarazioni della regola per img con le dichiarazioni che seguono, apri la pagina in un'altra scheda ed osserva le differenze.

stili01.css 
  1.     border: red solid 10px;
  2.     padding: 30px;
03 - Una scatoletta per ogni elemento. /2
CSS

02 - I tre moschettieri del Box Model (seconda parte).

Aggiungi la seguente dichiarazione in coda alla regola per img, apri la pagina in un'altra scheda ed osserva le differenze.

stili01.css 
  1.     background: black;

Aggiungi la seguente dichiarazione in coda alla regola per img, apri la pagina in un'altra scheda ed osserva le differenze.

stili01.css 
  1.     margin: 10px;

Ogni volta che il browser deve presentare un elemento crea il box che lo contiene.
Su quale zona del box interviene la proprietà border? E come si usa?
Su quale zona del box interviene la proprietà padding? E come si usa?
Su quale zona del box interviene la proprietà padding? E come si usa? Ed in che modo la proprietà background interviene sul padding?

cosa ho imparato?

Prova adesso queste sfide.

sfida 01
Realizza un documento html che mostri tre elementi di tipo paragrafo e provalo con tre diversi css: uno che imposti un margine di 30 pixel, uno che imposti un bordo di 30 pixel, uno che imposti un padding di 30 pixel.
sfida 02
Guarda sul manualetto quali sono i valori che può assumere la proprietà border-style e scegline tre. Sei capace di mostrare un'immagine con ciascuno di questi tre bordi uno dentro l'altro?
03 - Una scatoletta per ogni elemento. /3
CSS

03 - I tre moschettieri del Box Model e i loro punti cardinali (prima parte).

Crea i file index03.html e stili03.css.

index03.html 
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Box Model</title>
  5.         <meta charset="UTF-8" />
  6.         <link type="text/css" rel="stylesheet" href="reset.css" />
  7.         <link type="text/css" rel="stylesheet" href="stili03.css" />        
  8.     </head>
  9.     <body>    
  10.         <p>Tutti gli esseri umani nascono liberi ed eguali in dignità e diritti.</p>
  11.     </body>
  12. </html>
stili03.css 
  1. p {
  2.     width: 250px;
  3.     text-align: center;
  4.     margin: 20px;
  5.     padding: 10px;
  6.     border-color: red;
  7.     border-style: solid;
  8.     border-width: 10px;
  9. }

Apri la pagina web prodotta in una scheda e tienila lì.
Sostituisci l'ultima riga con queste quattro dichiarazioni.

stili03.css 
  1.     border-top-width: 20px;
  2.     border-right-width: 1px;
  3.     border-bottom-width: 1px;
  4.     border-left-width: 1px;

Apri la pagina web prodotta in una scheda e tienila lì.
Sostituisci le ultime quattro righe con questa dichiarazione.

stili03.css 
  1.     border-width: 20px 1px 1px 1px;

Apri la pagina web prodotta in una scheda e tienila lì.
Sostituisci l'ultima riga con questa dichiarazione.

stili03.css 
  1.     border-width: 20px 1px;

Prosegui l'esercizio nella scheda successiva.

03 - Una scatoletta per ogni elemento. /4
CSS

04 - I tre moschettieri del Box Model e i loro punti cardinali (seconda parte).

Osservando ciò che hai fatto nella scheda precedente, rispondi alle seguenti domande.
Quali sono le proprietà per indicare la dimensione dei quattro bordi?

cosa ho imparato?

Hai ricordato anche la proprietà border-width?
Cosa succede si si indica un solo valore? E se se ne indicano due? E se se ne indicano quattro?

cosa ho imparato?

Prova adesso queste sfide.

sfida 01
Sei capace di realizzare un file css che mostri i quattro bordi ciascuno di un colore diverso?
sfida 02
Sei capace di realizzare un file css che mostri i quattro bordi ciascuno con un aspetto diverso?
sfida 03
Quello che abbiamo detto per border, vale anche per le proprietà margin e padding? Verificalo.
sfida 04
Prova a dare auto come valore alle proprietà margin-left e margin-right.
sfida 05
Prova a dare auto come valore alle proprietà padding-left e padding-right.

In che circostanza ha senso usare la proprietà auto? A che scopo?

cosa ho imparato?
03 - Una scatoletta per ogni elemento. /5
CSS

05 - Elementi di tipo in linea ed elementi di tipo blocco: classificazione.

Cominciamo questa scheda con una definizione.

definizione
Elementi in linea
si dispongono uno dopo l'altro. descrizione in line
Elementi a blocco
si dispongono uno sotto l'altro. descrizione blocco

Realizza i documenti html e/o css che ti servono per capire quali dei seguenti elementi sono di tipo in linea e quali elementi a blocco?
(Suggerimento: usa la proprietà background)

Quali elementi sono in linea?

cosa ho imparato?

Quali elementi sono a blocco?

cosa ho imparato?
03 - Una scatoletta per ogni elemento. /6
CSS

06 - Elementi di tipo in linea ed elementi di tipo blocco:
comportamenti (prima parte)

L'attività di questa scheda (e delle schede a seguire) ti permetterà di individuare quali proprietà hanno senso per gli elementi in linea e quali per gli elementi a blocco.

Innanzitutto bisogna realizzare i codici necessari: cominciamo con questi.

index06a.html 
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Elementi in linea e a blocco</title>
  5.         <meta charset="UTF-8" />
  6.         <link type="text/css" rel="stylesheet" href="reset.css" />
  7.         <link type="text/css" rel="stylesheet" href="stili06a.css" />        
  8.     </head>
  9.     <body>    
  10.         <h1>Isaia</h1>
  11.         <h2>10, 1-2</h2>
  12.         <p>
  13.             Guai a voi che fate leggi ingiuste per opprimere il mio popolo. Così
  14.             negate la giustizia ai poveri e li private dei loro diritti; sottraete     
  15.             alle vedove e agli orfani i loro beni.
  16.         </p>
  17.     </body>
  18. </html>
stili06a.css 
  1. body {
  2.     font-family: Verdana;
  3.     color: white;
  4.     font-size: 62.5%;
  5. }
  6. p {
  7.     font-size: 2em;
  8.     color: blue;
  9.     text-shadow: lightblue 0.1em 0.1em 0.2em;
  10. }
  11. h1 {
  12.     background-color: grey;
  13.     font-size: 5em;
  14. }
  15. h2 {
  16.     background: lightblue;    
  17.     font-size: 3em;
  18.     cursor: crosshair;
  19. }

Si qui noti l'introduzione delle proprietà cursor e text-shadow.

sfida 01
Aiutandoti con il manualetto approfondisci il funzionamento di cursor e text-shadow.
03 - Una scatoletta per ogni elemento. /7
CSS

07 - Elementi di tipo in linea ed elementi di tipo blocco:
comportamenti (seconda parte)

Completando il lavoro della scheda precedente, copiamo questi codici.

index06b.html 
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Elementi in linea e a blocco</title>
  5.         <meta charset="UTF-8" />
  6.         <link type="text/css" rel="stylesheet" href="reset.css" />
  7.         <link type="text/css" rel="stylesheet" href="stili06b.css" />        
  8.     </head>
  9.     <body>    
  10.         <span class="piccolo">Guai a</span><span class="grande">voi</span> 
  11.         <span class="piccolo">che fate leggi <b>ingiuste</b> per opprimere 
  12.         <b>il <i>mio</i> popolo</b>. Cosi negate la <strong>giustizia</strong> 
  13.         ai poveri e li private dei loro diritti; sottraete alle vedove e 
  14.         agli orfani i loro <b>beni</b></span>
  15.     </body>
  16. </html>
stili06b.css 
  1. @font-face {
  2.    font-family: "Peak";
  3.    src: url("font/Peak.eot");                                        /* ie */
  4.    src: local("Peak"), url("font/Peak.ttf") format("truetype");      /* altri browser */
  5. }
  6. body {
  7.     font-family: "Peak";
  8.     color: brown;
  9.     font-size: 62.5%;
  10.     letter-spacing: 0.3em;
  11.     line-height: 10em;
  12. }
  13. span.piccolo {
  14.     font-size: 3em;
  15. }
  16. span.grande {
  17.     font-size: 10em;
  18. }
  19. b, strong {
  20.     font-weight: 900;
  21. }
  22. i {
  23.     font-style: italic;
  24. }
sfida 01
Scaricando dal web ciò che ti serve, sei capace di usare un font diverso?
03 - Una scatoletta per ogni elemento. /8
CSS

08 - Elementi di tipo in linea ed elementi di tipo blocco:
comportamenti (terza parte)

Apri le due pagine web create nelle due schede precedenti e comincia questa nuova attività.

Aggiungi le seguenti righe di codice al primo progetto.

stili06a.css 
  1. h1, h2, p {
  2.     width: 200px;
  3. }

Aggiungi le seguenti righe di codice al secondo progetto.

stili06b.css 
  1. b, strong , i {
  2.     width: 200px;
  3. }

È cambiato qualcosa nel primo progetto? E nel secondo?
La proprietà width vale per gli elementi in linea?
E per quelli a blocco?

cosa ho imparato?

Adesso ti sfido a testare cosa accade per le proprietà simili a width.

sfida 01
Cosa succede per la proprietà height?
sfida 01
Cosa succede per le proprietà min-width e min-height?
sfida 01
Cosa succede per le proprietà max-width e max-height?
cosa ho imparato?
03 - Una scatoletta per ogni elemento. /9
CSS

09 - Elementi di tipo in linea ed elementi di tipo blocco:
comportamenti (quarta parte)

Osserviamo adesso come cambia la nostra pagina web se usiamo la proprietà text-align.

Aggiungi le seguenti righe di codice al primo progetto.

stili06a.css 
  1. h1 {
  2.     text-align: center;
  3. }
  4. h2 {
  5.     text-align: right;
  6. }
  7. p {
  8.     text-align: justify;
  9. }

Aggiungi le seguenti righe di codice al secondo progetto.

stili06b.css 
  1. span.piccolo, span.grande {
  2.     text-align: center;
  3. }

È cambiato qualcosa nel primo progetto? E nel secondo?
La proprietà text-align vale per gli elementi in linea?
E per quelli a blocco? Su quali elementi interviene?

cosa ho imparato?
03 - Una scatoletta per ogni elemento. /10
CSS

10 - Elementi di tipo in linea ed elementi di tipo blocco:
comportamenti (quinta parte)

Osserviamo adesso come cambia la nostra pagina web se usiamo la proprietà vertical-align.

Aggiungi le seguenti righe di codice al primo progetto.

stili06a.css 
  1. h1, h2, p {
  2.     vertical-align: bottom;
  3. }

Aggiungi le seguenti righe di codice al secondo progetto.

stili06b.css 
  1. span.piccolo, b, i {
  2.     vertical-align: top;
  3. }

È cambiato qualcosa nel primo progetto? E nel secondo?
La proprietà vertical-align vale per gli elementi in linea?
E per quelli a blocco?
Pensi di usarla?

cosa ho imparato?
03 - Una scatoletta per ogni elemento. /11
CSS

11 - Elementi di tipo in linea ed elementi di tipo blocco:
comportamenti (sesta parte)

Osserviamo adesso come cambia la nostra pagina web se usiamo la proprietà border.

Aggiungi questa regola al primo progetto.

stili06a.css 
  1. h1, h2, p {
  2.     border: red 1px solid;
  3. }

Aggiungi questa regola al secondo progetto.

stili06b.css 
  1. b, i, strong {
  2.     border: red 1px solid;
  3. }

È cambiato qualcosa nel primo progetto? E nel secondo?
La proprietà border vale per gli elementi in linea?
E per quelli a blocco?
Su quale tipo di elementi pensi di usarla in futuro?

cosa ho imparato?

Sei pront* per un paio di sfide fatte bene?

sfida 01
Prepara tu il codice per osservare se e come cambiano gli elementi a blocco e gli elementi in linea con la proprietà padding.
sfida 02
Prepara tu il codice per osservare se e come cambiano gli elementi a blocco e gli elementi in linea con la proprietà margin.

In che modo le proprietà padding e margin modificano l'aspetto degli elementi in linea?
E di quelli a blocco? Su quale tipo di elementi pensi di usarla in futuro?

cosa ho imparato?
03 - Una scatoletta per ogni elemento. /12
CSS

12 - Elementi di tipo inline-block.

Facciamo un paio di osservazioni sugli elementi in linea e a blocco.

Rispondi a queste domande.
Un elemento di tipo blocco può contenere altri elementi di tipo blocco?
Un elemento di tipo blocco può contenere elementi di tipo in linea?
Un elemento di tipo in linea può contenere altri elementi di tipo in linea?
Un elemento di tipo in linea può contenere elementi di tipo blocco?

cosa ho imparato?

Adesso riempi la tabella scrivendo si o no per riassumere quali elementi supportano quali proprietà.

cosa ho imparato?
  Elementi in linea Elementi a blocco
width height e simili    
text-align    
vertical-align    
border padding margin    

E adesso la sfida del secolo!

sfida 01
Verifica il comportamento del tag img in quei quattro casi.

Il tag img è un elemento in linea o un elemento a blocco?

cosa ho imparato?