CSS 6. Il modello contenitore (box model) Elementi flottanti

Transcript

1 CSS 6 Il modello contenitore (box model) Elementi flottanti

2 Il modello contenitore Tecnologie di Sviluppo per il WEB 2

3 BOX MODEL CSS assume che ogni elemento genera uno o più box rettangolari, chiamati ELEMENTI BOX Da non confondere con gli elementi block-level (che hanno un newline prima e dopo) Tecnologie di Sviluppo per il WEB 3

4 Esempio Several emphasized words appear in this sentence, dear. L'elemento P genera un block-box che contiene 5 inline-box, di cui 3 sono anonymous: Anonymous: "Several" EM: "emphasized words" Anonymous: "appear" STRONG: "in this" Anonymous: "sentence, dear." Tecnologie di Sviluppo per il WEB 4

5 Per chiarire margine superiore bordo superiore padding superiore contenuto del tag Tecnologie di Sviluppo per il WEB 5

6 Elementi del contenitore Margin la regione che separa un contenitore dall'altro, necessariamente trasparente. Border lo spazio ove visualizzare un bordo per il contenitore Padding la regione di respiro tra il bordo del contenitore ed il contenuto. Ha il colore dello sfondo. Content la regione dove sta il contenuto dell'elemento Tecnologie di Sviluppo per il WEB 6

7 Proprietà dei bordi del contenitore Il numero dei valori determina a quali bordi, margini o padding assegnare la proprietà: 1 valore vale per tutti i lati 2 valori valgono per sup-inf, e per des-sin 3 valori valgono per sup, des-sin, inf 4 valori valgono per sup, des, inf, sin Tecnologie di Sviluppo per il WEB 7

8 Controllo di ogni lato È possibile assegnare un particolare valore ad un dato lato specificandolo nella proprietà Ad esempio border-color: c 1 c 2 c 3 c 4 è equivalente a border-top-color: c 1 border-right-color: c 2 border-left-color: c 3 border-bottom-color: c 4 Tecnologie di Sviluppo per il WEB 8

9 Margine di un elemento margin Serve a specificare l ampiezza dell area margine. Setta il margine su tutti e quattro i lati. È sempre trasparente Valori (da 1 a 4) <length> <percentage> Percentuale rispetto al blocco contenitore (e.g., il contenitore di LI è UL) auto Tecnologie di Sviluppo per il WEB 9

10 margin: forma estesa margin-top, margin-right, margin-bottom, margin-left Esempi BODY { margin: 2em } BODY { margin: 1em 2em } BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; } Tecnologie di Sviluppo per il WEB 10

11 padding Serve a specificare l ampiezza dell area tra il bordo e il contenuto del tag. Ha il colore dello sfondo. Setta il padding su tutti e quattro i lati Valori (da 1 a 4) <length> <percentage> auto Forma estesa padding-top, padding-right, padding-bottom, padding-left Tecnologie di Sviluppo per il WEB 11

12 Esempio: CSS/margin.html UL { font-size: large; background: green; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; text-align: justify; } LI { color: black; background: red; margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; list-style: none; } Tecnologie di Sviluppo per il WEB 12

13 Proprietà dei bordi del contenitore Colori del bordo border-color Valori (da 1 a 4) <color>, transparent Ampiezza del bordo border-width Valori (da 1 a 4) thin, medium, thick, <length> Tipo di bordo border-style (slide successiva) Tecnologie di Sviluppo per il WEB 13

14 Tipi di bordo none hidden dotted dashed solid double groove ridge inset outset Tecnologie di Sviluppo per il WEB 14

15 Esempio di menu: CSS/bordo.html A { text-align:center; text-decoration: none; font-weight: bold; border: outset; color: black; padding:5px; background-color: red; } A:active { border: inset;} Tecnologie di Sviluppo per il WEB 15

16 Risultato <BODY> <A HREF="#"> Prova </A> </BODY> Risultati migliori usando :hover, dettagli più avanti Tecnologie di Sviluppo per il WEB 16

17 Forma estesa border-top-{color, width, style} border-bottom-{color, width, style} border-left-{color, width, style} border-right-{color, width, style} Tecnologie di Sviluppo per il WEB 17

18 Forma compatta border Setta lo stesso colore, stile e dimensione per tutti e quatto i bordi Valori (non devono essere tutti presenti) <border-width>, <border-style>, <color> border-{top, bottom, left, right} Valori (non devono essere tutti presenti) <border-width>, <border-style>, <color> Tecnologie di Sviluppo per il WEB 18

19 Altezza e larghezza del contenuto Per fissare la larghezza e l altezza del contenuto si usano le proprietà: width Valori: <length>, <percentage>, auto height Valori: <length>, <percentage>, auto Att.ne ci sono differenze tra elementi inline e block level (li vedremo dopo) Tecnologie di Sviluppo per il WEB 19

20 Dimensioni massime e minime Possiamo stabilire la dimensione massima e minima del contenuto tramite le proprietà: min-width e min-height Valori: <length> e <percentage> max-width e max-height Valori: <length>, <percentage> e none Si può intervenire sul contenuto che supera le dimensioni del contenitore attraverso la proprietà overflow Tecnologie di Sviluppo per il WEB 20

21 Mettendo tutto insieme HTML CSS Tecnologie di Sviluppo per il WEB 21

22 Interlinea line-height Permette di stabilire il valore dell interlinea Valori normal (default) Il valore dipende dal font (grande a sufficienza per contenere il font) <number> Il valore è la grandezza del font moltiplicato per il numero specificato <length> <percentage> Tecnologie di Sviluppo per il WEB 22

23 Esempio Tecnologie di Sviluppo per il WEB 23

24 Allineamento verticale vertical-align Modifica la posizione verticale di un elemento rispetto al suo contenitore Valori middle, baseline, sub, super, top, bottom, text-top, text-bottom <percentage> <length> Tecnologie di Sviluppo per il WEB 24

25 Esempio Tecnologie di Sviluppo per il WEB 25

26 Modifica del flusso normale Gli elementi in una pagina HTML vengono posizionati uno di seguito all altro (flusso normale). Gli elementi block-level fanno andare il contenuto su di una nuova linea. In alcuni casi è utile permettere che un elemento sia posizionato tutto a destra o a sinistra con il testo che gli scorre su di un lato. Per ottenere un tale risultato si utilizza la proprietà float (l elemento diviene mobile) e lo si rimuove dal flusso normale. Tecnologie di Sviluppo per il WEB 26

27 float Valori: right, left, none float: left; posiziona l elemento a sinistra Si cambia la disposizione dell elemento rispetto al flusso normale, l elemento è posizionato verso il bordo dell elemento contenitore (a destra o a sinistra) Tecnologie di Sviluppo per il WEB 27

28 float Se si posizionano più elementi flottanti uno dietro l'altro, loro flotteranno uno di fianco all'altro. esempio Tecnologie di Sviluppo per il WEB 28

29 clear È l opposto di float, specifica quale lato di un elemento deve essere libero da altri elementi flottanti (cioé con la proprietà float settata) clear Valori: right, left, both, none clear: left; non farà affiancare l elemento da altri elementi con float settato si è sicuri che il lato sx dell'elemento è libero da elementi flottanti ESEMPIO Tecnologie di Sviluppo per il WEB 29

30 Riassumendo Gli elementi per i quali sia definita la proprietà float vengono disposti a sinistra o a destra del flusso normale Contro il bordo dell elemento contenitore o di altri elementi Il resto del contenuto si dispone al loro fianco nello spazio rimasto (gli scorre intorno) È possibile interrompere il flusso nello spazio rimasto, se l elemento che andrebbe ad occupare lo spazio ha definita la proprietà clear Tecnologie di Sviluppo per il WEB 30

31 Esempio di float e clear 1.sx { float: left; background-color: green; }.dx { float: right; background-color: blue; }.dx1 { float: right; background-color: yellow; }.cl { clear: both;} Tecnologie di Sviluppo per il WEB 31

32 Esempio di float e clear 2 Questo paragrafo va a sinistra Questo paragrafo va a destra Questo paragrafo va a destra; questa parola va a sinistra Si ritorna al flusso normale del testo. Tutto torna come all'inizio della pagina Si ritorna al flusso normale del testo. Tutto torna come all'inizio della pagina Tecnologie di Sviluppo per il WEB 32