Post on 16-Feb-2019
CSS – 6
Il modello contenitore (box model)Elementi flottanti
Tecnologie di Sviluppo per il WEB 2
Il modello contenitore
Tecnologie di Sviluppo per il WEB 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 4
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 5
Per chiarire …margine superiore
bordo superiore
padding superiore
contenuto del tag
Tecnologie di Sviluppo per il WEB 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 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 8
Controllo di ogni lato
È possibile assegnare un particolare valore ad un dato lato specificandolo nella proprietà
Ad esempioborder-color: c1 c2 c3 c4
è equivalente aborder-top-color: c1
border-right-color: c2
border-left-color: c3
border-bottom-color: c4
Tecnologie di Sviluppo per il WEB 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 10
margin: forma estesa margin-top, margin-right,
margin-bottom, margin-left EsempiBODY { 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 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 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 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 14
Tipi di bordo none hidden dotted dashed solid double groove ridge inset outset
Tecnologie di Sviluppo per il WEB 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 16
Risultato <BODY><P> </P><A HREF="#"> Prova </A></BODY>
Risultati migliori usando :hover, dettagli più avanti
Tecnologie di Sviluppo per il WEB 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 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 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 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 21
Mettendo tutto insieme…
CSS
HTML
Tecnologie di Sviluppo per il WEB 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 23
Esempio
Tecnologie di Sviluppo per il WEB 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 25
Esempio
Tecnologie di Sviluppo per il WEB 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 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 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 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 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 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 32
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 33
Risultato: CSS/float.html
Tecnologie di Sviluppo per il WEB 34
Risultato
Stringendo la finestra del browser…