Lezione 2 - Il modello a box di CSS

1 - Modello di contenimento.

Nella lezione precedente abbiamo mostrato come gli elementi di HTML costituiscono una struttura ad albero dalla cui radice, l'elemento html, dipartono due rami principali, head e body, su cui possono innestarsi altri rami.

Da un altro punto di vista possimo considerare l'elemento html come il contenitore degli elementi head e body.

L'elemento head è il contenitore dei metaelementi, fra i quali, al momento, possiamo elencare title, meta e link.

L'elemento body è il contenitore degli elementi testuali e multimediali del documento. Sino ad ora abbiamo visto gli elementi div, h1, h2, p, a e abbiamo potuto constatare come ognuno di essi possa fungere da contenitore per qualche altro elemento.

Ecco come può essere rappresento graficamente il modello di contenimento degli elementi di Esempio_1.html, presentato nella Lezione 1, dopo aver eseguito gli esercizi proposti.

Mentre gli elementi di head sono sostanzialmente invisibile per l'utente, fermo restando che se omessi o se usati in maniera errata possono causare il malfunzionamento dei browser, sino ad impedire completamente la restituzione del documento, gli elementi del body hanno tutti aspetti visuali, nel senso che possono essere tutti visualizzati sullo schermo in una propria area di visualizzazione definita tramite i CSS.

L'argomento di questa lezione è sulla visulizzazione dei singoli elementi e su alcune cose che succedono quando due o più elementi sono adiacenti.

L'altro argomento fondamentale, che vedremo in una prossima lezione, è su come i diversi elementi possono essere disposti all'interno dei propri contenitori.

Quando si padroneggierando questi due aspetti il più sarà fatto. Occorrerà imparare ad utilizzare un insieme minimo di elementi, il loro numero crescerà in base alle nostre esigenze, ma l'importante è che riusciremo a progettare pagine web secondo i lay-out da noi preferiti e che si comporteranno esattamente secondo i nostri desideri.

Fra i due, il modello a box è più facile da capire e inoltre la sua comprensione è propedeutica alla comprensione dell'altro. Vale la pena studiarlo.

2 - Modello a box.

Tutti gli elementi di un documento HTML sono racchiusi in aree rettangolare, chiamate box

• ogni box è formato da area concentriche: un area del contenuto, content area, circondata da "cuscinetti" paddings che a loro volta sono delimitati da bordi, borders. Il tutto circondato da margini, margin.
• le proprietà width e height di un elemento riguardano la sua content area.
• I box relativi ad elementi figli di quello di cui stiamo parlando vanno ad occupare la conten area del padre ma, vedremo in seguito, che non necessariamente saranno vincolati a rimanere entro i suoi limiti. Questo è un aspetto che riguarda l'argomento successivo sopra accennato.
• le dimensioni di un box sono date dalla somma delle dimensioni della content area, con quelle dei paddings, dei borders e dei margins.
• paddings, borders e margins sono tutti definiti da quattro aree, top, right, bottom e left sempre referenziate in questo ordine.
  • l'oggetto padding comprende padding-top, padding-right, padding-botton, padding-left. Ognuno di essi può avere uno spessore, width, distinto da altri, ma un unico colore di background, lo stesso della content area
  • l'oggetto border comprende: border-top, border-right, border-bottom, border-left. Ognuno di essi può avere spessori, width, colori, color, e stili, style, distinti.
  • l'oggetto margin comprende: margin-top, margin-right, margin-bottom, margin-left. Ognuno di essi può avere spessori, width, distinti, ma tutti sono trasparenti.
• le dimensioni complessive di due box adiacenti, normalmente, si sommano, ad eccezione dei margini verticali il più piccolo dei quali collassa (sparisce). Significa che se ho due box, uno sotto l'altro, dotati di due margini di dimensioni non nulle, rimane solo il margine più grande.
• i bordi normalmente non collassano ma possono essere resi collassabili nelle tabelle con la proprietà border-collapse
• nessuna delle proprietà di padding, border e margin è ereditaria
• lo spessore iniziale di padding e margin cioè padding-widht e margin-widht è 0.

3.2 - paddings, borders e margins con dimensioni e colori diversi.

	#box2{
		width:100px;
		background-color:lime;
		padding:15px 5px 10px 20px;
		border-style:solid;
		border-width:10px 8px 6px 4px ;
		border-color:red blue green black;
		margin:20px 10px 40px 30px;
	}
						

		{ margin:20px 10px 40px 30px;} 	

		{ 
		  margin-top:20px; 
		  margin-right:10px;
		  margin-bottom:40px;
		  margin-left:30px;
		} 		  
				

3.5 - collassamento dei margini verticali.

4 - Esercizi.

Per prima cosa scarica il file HTML_02.rar nella cartella CorsoHTML che avrai creato in precedenza.

Estrai la cartella HTML_02 e apri in Notepad++ i file HTML_02.html e HTML_02.css.

Esegui gli esercizi proposti.

Se vuoi vedere il file dell'esempio prima di scaricarlo clicca qui.

Nota.

Il lettore potrà ora fare altre prove ed eventualmente annotare propri appunti nella sezione dedicata.

Un ultima raccomandazione:durante gli esercizi tenere aperti di due strumenti di validazione del codice: W3C Markup Validation Service e W3C CSS Validation Service e verificare i file su cui si è lavorato dopo aver eseguito le modifiche. I browser sono molto tolleranti, e visulizzano bene le pagine anche in presenza di errori, ma gli errori è meglio evitarli.