Introducció

Fins ara s'ha anat insistint reiteradament en la importància de separar el contingut i la presentació dels documents web. Cap element estructural del document XHTML s'hauria d'utilitzar com a element de presentació.

Fins l'adopció de la versió 2 del CSS per part dels navegadors, però, la maquetació es feia utilitzant taules de manera incorrecta, incorporant petites imatges en blanc, amb format gif, sense cap altra funció que la d'ajustar els elements de la taula, i l'ús, i abús, d'espais en blanc (&nbsp).

Aquest ús de taules i espais blancs com a elements de presentació del document, permet una maquetació que es veu igual a tots els navegadors, però que comporta importants deficiències de base:

A partir del CSS 2, s'incorporen un conjunt de propietats que permeten el possicionament de tots els elements XHTML en qualsevol part del document sense necessitat d'utilitzar taules anidades ni imatges en blanc, fent possible una reducció considerable de la mida de l'arxiu, la separació de les capes de presentació i contingut i, en definitiva, pàgines accessibles, flexibles en quant a manteniment i uniformes per a tot un projecte web.

El model de caixa (I)

Cada element XHTML del document es troba tancat dins d'una caixa invisible que interactua i reacciona de manera diferent amb al resta d'elements del mateix document que, al mateix temps, es troben tancats a les seves respectives caixes.

Cada caixa té un contingut i opcionalment un àrea que l'envolta, que pot constar de una àrea padding, farciment, una àrea anomenada border i una àrea anomenada margin. Aquestes tres àrees vindran determinades per les propietats border, margin i padding, de les que ja s'havia parlat amb anterioritat i de les que ara s'explicarà el seu significat i comportament.

Veieu un exemple gràfic del model de caixa, segons la W3C:

model de caixa

Model de caixa segons la W3C ()

Propietats que representen les quatre parts d'una caixa:

Contingut (content)
Representa l'espai que ocupa el contingut de l'element tancat entre les etiquetes i és el que, per defecte, apareix en pantalla.
Farciment (padding)
Es pot traduir com a a farciment, i envolta el contingut de la caixa, separant-lo de la vora. Si el seu valor és igual a zero, coincidirà amb el límit o vora de la caixa.
Vora (border)
Representa el límit de la caixa, que envolta el contingut de l'element. Sovint la vora es mostra com una simple línia, però en realitat és una àrea que pot tenir qualsevol gruix. Si el límit de la vora és igual a zero, tindrà el mateix valor que el padding.
Marge (marge)
Representa l'àrea transparent que envolta els límits o vores de la caixa. Si el valor del límit del marge o límit extern és zero, aquest ocuparà el mateix espai que el límit de la vora.

Veieu una simulació de dos elements (una llista i un paràgraf) continguts en les seves respectives caixes:

model de caixa llista

Model de caixa, element llista

model de caixa paràgraf

Model de caixa, element paràgraf

Cada una de les propietats de la caixa es pot dividir en quatre parts, totalment idependents entre elles i corresponents a cadascun dels costats de la caixa: top (superior), right (dreta), bottom (inferior) i left (esquerra). D'aquí es pot deduir que, per cada propietat, poden existir 4 propietats noves:

Dimensions de la caixa

L'amplada i alçada total de la caixa venen determianades per l'amplada del contingut més la suma dels marges, vores i farciment (padding) drets i esquerres. Així, per exemple, si el contingut té una amplada de 350 píxels, la vora ocupa 30 px, els marges 50 px i el padding 75 px, la suma total de l'amplada de la caixa serà la següent: 350 píxels (amplada del contingut) + 50px (marge esquerre) + 50px (marge dret) + 30px (vora esquerra) + 30px (vora dreta) + 75px (farciment esquerre) + 75px (farciment dret) = 660 px

El valor total de l'alçada (height) de la caixa dependrà també de la suma de l'alçada del contingut més els valors dels marges, vores i "paddings" superiors i inferiors.

Obriu l'arxiu model_de_caixa.html i verifiqueu, utilitzant l'extensió Firebug, les propietats de la caixa. Fixeu-vos que s'ha associat la següent regla d'estil al paràgraf:

.model_box {
	width: 350px;
	margin: 50px;
	border: 30px solid #555;
	padding: 75px;
	background-color: #eee;
	}

Estil de les propietats

Cada propietat del model de caixa té un estil específic:

Desbordament (Overflow)

Pot passar que una de les dimensions superi els límits de l'àrea de contingut. En aquest cas, per defecte, la propietat d'estil overflow, que controla aquest tipus de situacions, adoptarà el valor "visible", és a dir, el contingut que superi els límits de l'àrea del contingut apareixerà igualment representat.

Per mitjà de les propietats "width" (amplada) i "height" (alçada), es pot determinar l'amplada i l'alçada de l'àrea de contingut de l'element.

Pot passar, però, que el valor de l'alçada o l'amplada de l'element sigui inferior al contingut d'aquest element:

.model_box {
	width: 350px;
	height: 40px;
	background-color: #eee;
	margin: 50px;
	border: 30px solid #555;
	padding: 75px;
	}

Obriu l'arxiu overflow.html. Aquí s'ha forçat el desbordament, assignant un valor d'alçada (height) molt inferior al que calculava el navegador (184 píxels).

Afegint la propietat "overflow" es pot veure com es comporta visualment el contingut segons es van assignant diferents valors a la regla. Es poden assignar tres valors possibles:

Tornar a l'inici de la pràctica

Valid XHTML 1.0 Strict Valid CSS Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0