Estil general, model de caixa i fons de la pàgina

A partir d'aquesta pràctica creareu el full d'estil o CSS de la pàgina web sense perdre la referència visual del disseny que heu realitzat amb l'Inkscape.

Obriu l'arxiu index.html amb l'editor i afegiu la següent línia sota de l'enllaç al full d'estil reset.css

<link rel="stylesheet" href="css/d227.css" type="text/css" media="screen, projection"/>

Creeu seguidament un fitxer nou anomenat d227.css i deseu-lo a la carpeta css (on també es troba el fitxer reset.css).

Centrar el contingut

Quan vàreu definir el disseny general amb l'Inkscape, vau establir una amplada de la pàgina de 960px. També vàreu determinar que el disseny no tendria un comportament líquid, és a dir, l'amplada de la pàgina s'adapta en relació a l'amplada del navegador, sinó fix. Per tant, determineu aquesta amplada al full d'estil:

.container {
	width: 960px;
	margin: 0 auto;
}

Recordeu que, en el moment que vau treballar l'estructura de la pàgina (index.html), vàreu definir una divisió general que actuaria com a contenidor de les diferents divisions de la pàgina.

<div class="container"> <!-- inici del contingut -->


És, per aquesta raó, que aplicareu a aquest div l'amplada fixa de 960px.

Deseu els canvis i refresqueu el navegador.

Abans de continuar, llegiu a continuació una breu explicació sobre el model de caixa per comprendre el funcionament de la propietat i valor margin: 0 auto;.

El model de caixa

Cada element HTML 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 ara s'explicarà el seu significat i comportament.

  • 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): 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 (margin): 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.

Cada una de les propietats de la caixa es pot dividir en quatre parts, totalment independents 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:

.container {
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
}

L'anterior regla la podeu declarar d'una manera no tan verbalitzada:

.container {
   margin: 0 auto 0 auto; /* up - right - bottom - left */
}

Si el parell de valors up i bottom com l'altre parell format per right i left són idèntics, podeu reduir el valor a la següent expressió:

.container {
   margin: 0 auto ; /* up-bottom i right-left */
}

Dimensions de la caixa

L'amplada i alçada total de la caixa venen determinades 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 350px, la vora ocupa 30px, els marges 50px i el padding 75px, la suma total de l'amplada de la caixa serà la següent: 350px (amplada del contingut) + 50px (marge esquerre) + 50px (marge dret) + 30px (vora esquerra) + 30px (vora dreta) + 75px (farciment esquerre) + 75px (farciment dret) = 660px

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.

En el cas de la regla .container només heu definit els valors dels marges de la caixa, per tant, els valors de padding i border correspon a un valor de cero i el contingut ocuparà l'amplada que heu definit a la propietat width.

Què significa el valor auto?

Un valor especial de la propietat del marge (margin) és auto. A la major part d'elements, la propietat-valor margin: auto; equival a margin: 0; és a dir, sense marge. Però si es tracta d'un element de bloc, el valor auto el que farà serà expandir el valor dels marges, sempre que aquests corresponguin als marges laterals, en relació als límits de la finestra del navegador.

Què són els elements de bloc?

Són aquells que contenen un bloc de contingut, comporten un inici i un final de bloc, i per tant, acostumen a comportar també un salt de línia abans i un altre després dels continguts de l'element.

Corresponen als components principals de l'estructura de la pàgina. Presenten un salt de línia en el flux normal del document.

Els elements en bloc poden contenir elements en línia, i alguns d'ells també altres elements en bloc (com seria el cas dels elements div)

Exemples d'element de bloc: div, h1, p, ul, li

Fons de pantalla

Recordeu que el disseny web portava un fons definit per la repetició d'un petit patró gràfic? És el moment, llavors, que feu la traducció d'aquesta característica al full d'estil de la pàgina web. Deseu aquest patró gràfic a la carpeta imatges i afegiu les següents línies al full d'estil d227.css:

body {
 background-image: url(../imatges/pattern.gif); 
}

Refresqueu el navegador i comproveu que funciona corretament:

La propietat background-image

Les imatges, des del punt de vista decoratiu, no haurien d'estar presents en l'estructura del document, ja que pel fet de tenir un valor purament ornamental, tenen el seu lloc exclusivament al CSS, i no a l'estructura. L'adopció d'aquest principi representa un salt qualitatiu, ja que suposa limitar l'ús, fins ara abusiu, de l'element img com a recurs decoratiu, i utilitzar d'altres etiquetes, que es veuran a continuació, per a les imatges que proporcionen informació rellevant per a l'usuari.

La propietat background-image permet incloure una imatge de fons a qualsevol dels elements de l'estructura del document web. Aquesta propietat sempre l'acompanya el valor url() on heu de definir el recorregut a l'element gràfic que voleu com a imatge decorativa.

Aquest recorregut, recordeu, pot ser relatiu:

background-image: url(../imatges/pattern.gif);

o absolut:

background-image:url(http://www.topnotchwp.com/clean-blog/wp-content/themes/clean-blog/images/pattern.gif);

Fragment del codi CSS general i del container

Finalment, què heu de veure al fitxer d227.css al acabar aquesta pràctica?

body {
 background-image:url(../imatges/pattern.gif); 
}
 
.container {
	width: 960px;
	margin: 0 auto;
}