CSS – 6 · Tecnologie di Sviluppo per il WEB 9 Margine di un elemento margin –Serve a...

CSS – 6

Il modello contenitore (box model)Elementi flottanti

Tecnologie di Sviluppo per il WEB 2

Il modello contenitore


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)

EsempioSeveral emphasized words appearin 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."


Per chiarire …margine superiore

bordo superiore

padding superiore

contenuto del tag


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


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


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

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


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;

}

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


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; }

http://localhost/~parente/CSS/margin.html

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)


Tipi di bordo none hidden dotted dashed solid double groove ridge inset outset


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;}

http://localhost/~parente/CSS/bordo.html

Risultato <BODY> <A HREF="#"> Prova </A></BODY>

Risultati migliori usando :hover, dettagli più avanti


Forma estesa

border-top-{color, width, style}

border-bottom-{color, width, style}

border-left-{color, width, style}

border-right-{color, width, style}

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>

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)

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


Mettendo tutto insieme…

CSS

HTML

http://localhost/~parente/CSS/menu.css

http://localhost/~parente/CSS/menu.html

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>


Esempio

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>


Esempio


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.


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)


float

Se si posizionano più elementi flottanti uno dietro l'altro, loro flotteranno uno di fianco all'altro.

esempio

http://localhost/~parente/CSS/moreFloat.html

http://localhost/~parente/CSS/moreFloat.html


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

http://localhost/~parente/CSS/moreClear.html


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


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;}

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


Risultato: CSS/float.html

http://localhost/~parente/CSS/float.html


Risultato

Stringendo la finestra del browser…

CSS – 6 · Tecnologie di Sviluppo per il WEB 9 Margine di un elemento margin –Serve a...

Documents

Transcript of CSS – 6 · Tecnologie di Sviluppo per il WEB 9 Margine di un elemento margin –Serve a...