CSS 6 Il modello contenitore (box model) Elementi flottanti
Il modello contenitore Tecnologie di Sviluppo per il WEB 2
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
Esempio <P>Several <EM>emphasized words</em> appear <STRONG>in this</strong> sentence, dear.</p> 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
Per chiarire margine superiore bordo superiore padding superiore contenuto del tag Tecnologie di Sviluppo per il WEB 5
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
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
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
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
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
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
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
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
Tipi di bordo none hidden dotted dashed solid double groove ridge inset outset Tecnologie di Sviluppo per il WEB 14
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
Risultato <BODY> <P> </P> <A HREF="#"> Prova </A> </BODY> Risultati migliori usando :hover, dettagli più avanti Tecnologie di Sviluppo per il WEB 16
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
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
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
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
Mettendo tutto insieme HTML CSS Tecnologie di Sviluppo per il WEB 21
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
Esempio Tecnologie di Sviluppo per il WEB 23
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
Esempio Tecnologie di Sviluppo per il WEB 25
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
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
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
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
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
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
Esempio di float e clear 2 <P CLASS="sx"> Questo paragrafo va a sinistra </P> <P CLASS="dx"> Questo paragrafo va a destra </P> <P CLASS="dx1"> Questo paragrafo va a destra; questa parola va a <EM CLASS="sx"> sinistra </EM> </P> <P CLASS="cl"> Si ritorna al flusso normale del testo. Tutto torna come all'inizio della pagina </P> <P CLASS="cl"> Si ritorna al flusso normale del testo. Tutto torna come all'inizio della pagina </P> Tecnologie di Sviluppo per il WEB 32
Risultato: CSS/float.html Tecnologie di Sviluppo per il WEB 33
Risultato Stringendo la finestra del browser Tecnologie di Sviluppo per il WEB 34