css - programador | fotógrafo · pdf filecss ben buchanan christian heilmann ben henick...

CSSBen BuchananChristian HeilmannBen HenickTommy OlssonNicole Sullivan

PID_00150451

CC-BY-NC-ND • PID_00150451 2 CSS

CC-BY-NC-ND • PID_00150451 CSS

Índex

1. Conceptes bàsics de CSS ................................................................. 91.1. Què és el CSS?................................................................................ 9

1.2. Definir les regles dels estils ............................................................ 9

1.2.1. Comentaris del CSS ........................................................... 11

1.2.2. Agrupar selectors ............................................................... 11

1.3. Selectors avançats de CSS ............................................................. 13

1.3.1. Selectors universals ........................................................... 14

1.3.2. Selectors d’atributs ............................................................ 14

1.3.3. Selectors de fills ................................................................. 15

1.3.4. Selectors de descendents ................................................... 15

1.3.5. Selectors de germans adjacents ......................................... 16

1.3.6. Pseudoclasses ..................................................................... 16

1.3.7. Pseudoelements.................................................................. 18

1.4. CSS abreujat .................................................................................. 20

1.4.1. Comparar valors individuals i abreujats ........................... 20

1.4.2. Donar menys de quatre valors per a una

propietat abreujada ........................................................... 20

1.4.3. Escollir entre utilitzar una propietat única

o un valor abreujat ............................................................ 21

1.4.4. Referència abreujada ......................................................... 21

1.5. Aplicar el CSS a l’HTML ................................................................ 23

1.5.1. Estils en línia ...................................................................... 23

1.5.2. Estils incrustats................................................................... 24

1.5.3. Fulls d’estils externs .......................................................... 26

1.5.4. Importar fulls d’estils amb @import ............................... 27

Resum.................................................................................................... 28

Preguntes de repàs ............................................................................... 28

2. Herència i cascada .......................................................................... 292.1. Herència ........................................................................................ 29

2.1.1. Per a què serveix l’herència................................................ 30

2.1.2. Com funciona l’herència .................................................. 30

2.1.3. Un exemple d’herència ...................................................... 30

2.1.4. Forçar l’herència ................................................................ 33

2.2. Cascada .......................................................................................... 34

2.2.1. Importància ....................................................................... 35

2.2.2. Especificitat ....................................................................... 36

2.2.3. Ordre de les fonts .............................................................. 39

Resum ................................................................................................... 40



3. Creació d’estils de text amb CSS .................................................. 413.1. Repàs de tipografia al web ............................................................. 41

3.1.1. Contrast.............................................................................. 41

3.1.2. Facilitat de lectura .............................................................. 42

3.2. Propietats de les fonts CSS: canviar l’aspecte del text .................. 42

3.2.1. font-size i selecció del tipus d’unitat .......................... 42

3.2.2. Quins tipus d’unitat poden aplicar-se a les propietats

de text CSS? ....................................................................... 43

3.2.3. Per a què serveix tenir tants tipus d’unitat diferents? ....... 43

3.2.4. Mides absolutes i usabilitat ............................................... 44

3.2.5. Quin és l’equivalent físic d’un píxel? ............................... 44

3.2.6. Ems, percentatges i punts segons el CSS ........................... 45

3.2.7. Breu comentari sobre la recomanació

oficial de CSS 2.1 ............................................................... 45

3.2.8. Paraules clau de mida ........................................................ 45

3.2.9. font-family i selecció de tipus de lletra ........................ 46

3.2.10. font-style, font-variant i font-weight:

canviar els detalls .................................................................... 47

3.2.11.font-variant com a eina per ressaltar

passatges curts ................................................................... 49

3.2.12.font-weight: negreta i la manca d’aquesta .................... 49

3.2.13.La propietat abreujada font ............................................. 50

3.3. Les propietats de text i alineació de CSS.

Modificar la composició ............................................................... 51

3.3.1. Alineació i justificació del text .......................................... 51

3.3.2. Modificar l’espaiat: Les propietats letter-spacing

i word-spacing .............................................................. 52

3.3.3. Sagnar les primeres línies: la propietat text-indent ...... 53

3.3.4. Majúscules: La propietat text-transform ..................... 53

3.3.5. Aplicar estils als enllaços i mostrar les eliminacions:

La propietat text-decoration ........................................ 53

3.3.6. Ajust de l’espai interlineal i line-height ...................... 54

3.3.7. Suplantar pre i br: La propietat white-space .............. 55

Resum ................................................................................................... 56


Lectures complementàries ................................................................... 57

4. El model de composició de CSS: caixes, vores, marges, farcit ......................................................... 584.1. Canviar la composició: els marges, les vores i el farcit de CSS .... 58

4.1.1. Col·locar espai en blanc al voltant d’un element:

les propietats margin-top, margin-right,

margin-bottom, margin-left i margin ....................... 59

4.1.2. Afegir una vora a un element: propietats de vora ............. 62

4.1.3. Quan només amb els marges no n’hi ha prou:

propietats padding ........................................................... 66

4.2. Treballar amb l’amplada i alçada dels elements ........................... 67


4.2.1. Conceptes bàsics de width i height ................................ 67

4.2.2. min-width, max-width, min-height

i max-height ................................................................... 68

4.2.3. Desbordament: impedir l’accés al codi

o deixar-lo lliure ................................................................ 69

4.3. Els models de caixa de CSS: fer que tot encaixi ........................... 70

4.3.1. Escollir les unitats adients per a la composició ................ 70

4.3.2. Les components del model de caixa .................................. 71

4.3.3. El model de caixa del W3C: tot és acumulable ................. 72

4.4. Treballar amb flux de documents ................................................. 73

4.4.1. Tipus d’elements i la propietat display .......................... 73

4.4.2. Fer que alguns elements flueixin al voltant d’altres:

la propietat float ............................................................. 76

4.4.3. Forçar elements per sota dels seus predecessors flotants:

la propietat clear ............................................................. 77

Resum ................................................................................................... 78

Lectures complementàries .................................................................... 78


5. Imatges de fons en CSS .................................................................. 815.1. Com funciona? .............................................................................. 81

5.1.1. Propietats de fons .............................................................. 82

5.2. Crear un missatge d’alerta ............................................................. 83

5.2.1. El disseny............................................................................ 83

5.2.2. El codi ................................................................................ 84

5.2.3. Fer proves amb el codi ...................................................... 91

5.2.4. Comprovar la qualitat ....................................................... 91

5.3. Sprites ............................................................................................ 92

5.3.1. Un exemple d’sprite complex i imatge de fons .................. 92

Resum.................................................................................................... 96



6. Estils de llistes i enllaços ................................................................ 986.1. Aplicar estils a les llistes................................................................. 98

6.1.1. Pics i números bàsics.......................................................... 98

6.1.2. Pics personalitzats mitjançant imatges ............................. 100

6.1.3. Marges i farcit de llistes ..................................................... 101

6.1.4. Utilitzar una col·locació de tipus llista ............................. 103

6.1.5. I les llistes de definicions, què? ......................................... 103

6.1.6. Llistes imbricades .............................................................. 106

6.1.7. Llistes horitzontals ............................................................ 107

6.1.8. “Columnes falses” ............................................................. 108

6.1.9. Conclusió de les llistes ...................................................... 110

6.2. Aplicar estils als enllaços .............................................................. 110

6.2.1. Comprendre els estats dels enllaços .................................. 111

6.2.2. Com l’evolució dels navegadors va crear expectatives ..... 111

6.2.3. Expectatives de l’usuari ..................................................... 112


6.2.4. Utilització adequada dels colors ....................................... 113

6.2.5. Entrem en matèria: el CSS ................................................. 114

6.2.6. Exemple: recreació de les opcions

per defecte de Netscape ..................................................... 117

6.2.7. Icones en enllaços ............................................................. 120

6.3. Combinar-ho tot: un senzill menú de navegació ......................... 121

Resum ................................................................................................... 121

Preguntes de repàs ................................................................................ 122

Bibliografia ........................................................................................... 122

7. Estils de les taules ........................................................................... 1237.1. Estructura de les taules .................................................................. 123

7.2. Conceptes bàsics ........................................................................... 124

7.2.1. Amplada de taula i de cel·la .............................................. 124

7.2.2. Alineació del text .............................................................. 125

7.2.3. Vores .................................................................................. 126

7.2.4. Farcit................................................................................... 129

7.2.5. Col·locació del caption ................................................... 129

7.2.6. Fons ................................................................................... 130

7.2.7. Arreglar l’IE amb estils condicionals ................................. 132

7.2.8. Un disseny senzill ............................................................. 134

7.3. Variacions habituals ..................................................................... 135

7.3.1. Aplicar línies de zebra ....................................................... 135

7.3.2. Graelles incompletes ......................................................... 136

7.3.3. Graelles interiors ................................................................ 138

7.4. Dos errors comuns ........................................................................ 140

7.4.1. Error de superposició de les vores ..................................... 140

7.4.2. Error de marge/caption ................................................... 141

Resum ................................................................................................... 142



8. Disseny, composició i presentació de formularis amb CSS ............................................................................................. 1448.1. Conceptes nous que presenta aquest apartat ............................... 144

8.1.1. Sobrecàrrega de regles i etiquetes....................................... 144

8.1.2. Elements de camp de formulari nous ............................... 144

8.1.3. Principis del disseny de formularis .................................... 145

8.1.4. La regla dels terços ............................................................. 145

8.1.5. Quadrícules ........................................................................ 145

8.1.6. Capes de suport de plataforma ......................................... 145

8.2. Un formulari de contacte senzill .................................................. 145

8.2.1. Etiquetatge ........................................................................ 145

8.2.2. Canvis pel que fa al formulari anterior ............................. 146

8.2.3. Defectes aparents ............................................................... 147

8.2.4. Camps de formulari nous? Què és això? ........................... 147

8.3. De zero fins a un formulari complet ............................................ 149


8.3.1. Demostració 1 ................................................................... 150

8.3.2. Demostració 1: consideracions prèvies ............................. 150

8.3.3. Demostració 2 ................................................................... 151


8.3.5. Demostració 3 ................................................................... 152


8.3.7. Crear una quadrícula ......................................................... 153

8.3.8. Demostració 4 ................................................................... 154


8.3.10.La regla dels terços ............................................................. 156

8.3.11.Demostració 5 ................................................................... 157

8.3.12.Demostració 5: consideracions prèvies ............................. 157

8.3.13.Demostració 6 ................................................................... 158


8.3.15.Demostració 7 ................................................................... 159


8.3.17.Demostració 8 ................................................................... 160


8.3.19.Demostració 9 ................................................................... 160


8.3.21.Demostració 10 ................................................................. 161

8.3.22.Demostració 10: consideracions prèvies ........................... 162

8.3.23.Demostració 11 ................................................................. 162


8.3.25.Demostració 12 ................................................................. 163


8.4. Establir nivells de suport de plataforma ....................................... 164

8.5. Composicions de formulari complexes en la pràctica

(…en lloc d’en teoria) .................................................................... 166

Resum ................................................................................................... 167



9. Elements flotants i clearing .......................................................... 1709.1. Per a què serveixen float i clear? ............................................. 170

9.2. Una mica de teoria molt avorrida ................................................. 170

9.3. Com funcionen els elements flotants? ......................................... 171

9.3.1. Els detalls ........................................................................... 174

9.3.2. Més elements flotants ....................................................... 175

9.3.3. Marges en els elements flotants ........................................ 177

9.4. Clearing ......................................................................................... 179

9.5. Contenir elements flotants ........................................................... 181

9.6. Ajustar ........................................................................................... 182

9.7. Centrar elements flotants ............................................................. 182

9.8. Errors! ............................................................................................ 185

Resum ................................................................................................... 186



10. Posicionament estàtic i relatiu en CSS .................................. 18710.1. El meravellós món dels rectangles ............................................ 187

10.2. Posicionament estàtic ................................................................ 187

10.2.1. Disposició de caixes de bloc ............................................ 188

10.2.2. Disposició de caixes en línia ........................................... 189

10.3. Posicionament relatiu ................................................................ 191

10.3.1. Disposició de múltiples columnes amb requisits

d’ordre del codi font ....................................................... 194

10.3.2. Altres usos del posicionament relatiu ............................. 203

Resum ................................................................................................... 204


11. Posicionament absolut i fix amb CSS .................................... 20511.1. Blocs contenidors ...................................................................... 205

11.2. Posicionament absolut .............................................................. 206

11.2.1. Especificació de la posició ............................................... 206

11.2.2. Especificació de les dimensions ...................................... 210

11.2.3. La tercera dimensió: índex z ........................................... 212

11.3. Posicionament fix....................................................................... 219

Resum ................................................................................................... 220



1. Conceptes bàsics de CSSChristian Heilmann

aEn aquesta assignatura ja hem parlat sobre el contingut dels llocs web i com

estructurar el contingut amb l’HTML. Això és molt important, ja que vol dir

que donem significat i estructura als nostres documents perquè altres tecnolo-

gies s’hi puguin relacionar sense problemes. La tecnologia web més important

que discutirem a continuació és el CSS (fulls d’estils en cascada), que es fa ser-

vir per aplicar estils a l’HTML i situar-lo en la pàgina web. En aquest apartat

parlaré del CSS: què és, com aplicar-lo a l’HTML i quina n’és la sintaxi bàsica.

1.1. Què és el CSS?

Això es fa utilitzant un sistema de regles, la sintaxi exacta de les quals veurem

més avall. Aquestes regles diuen quins elements de l’HTML han de tenir estils

afegits, i a cada regla enumeren les propietats (per exemple, color, mida, tipus

de lletra, etc.) d’aquells elements HTML que volen manipular i els valors nous

que els volen aplicar.

El CSS no és un llenguatge de programació com JavaScript ni tampoc és un

llenguatge d’etiquetes con HTML; de fet, no hi ha res amb què es pugui com-

parar. Les tecnologies que definien les interfícies abans del desenvolupament

del web barrejaven sempre la presentació i l’estructura. Tanmateix, en un en-

torn que canvia tan sovint com el web aquesta no és una manera gaire intel·li-

gent de fer les coses, i és per això que es va inventar el CSS.

1.2. Definir les regles dels estils

Així, doncs, vegem un exemple de codi del CSS i després l’analitzarem:

Vegeu com estructurar el contingut dels llocs web en el mòdul “Fonaments d’HTML”.

Mentre que l’HTML estructura el document i indica als navegadors qui-

na és la funció d’un element concret (és un vincle cap a una altra pàgi-

na?, és un títol?), el CSS dóna instruccions al navegador sobre com ha

de mostrar un element concret: estil, espaiat i posició. Si l’HTML són els

puntals i els maons que formen l’estructura d’una casa, el CSS és el guix

i la pintura que la decoren.

Exemple

Una regla del CSS podria dir, per exemple: “Vull trobar tots els elements h2 i aplicar-los el color verd”; o bé: “Vull trobar tots els paràgrafs amb el nom de classe author-name, apli-car-los un fons de color ver-mell, fer que el text del seu interior sigui el doble de gran que el text dels paràgrafs nor-mals i afegir 10 píxels d’espaiat al seu voltant”.

selector {

propietat1:valor;

propietat2:valor;

propietat3:valor;

}


Les parts pertinents són les següents:

• El selector identifica els elements de l’HTML als quals s’aplicarà la regla,

que s’identifiquen amb el nom de l’element en si, com per exemple body,

o amb algun altre mètode, com els valors de l’atribut class; ja en tornarem

a parlar més endavant.

• Les claus contenen les parelles de propietat/valor, que se separen entre elles

amb un signe de punt i coma; les propietats se separen dels seus valors res-

pectius amb el signe de dos punts.

• Les propietats defineixen el que voleu fer amb els elements que heu selec-

cionat. Poden ser molt variades i poden modificar el color, el color de fons,

la posició, els marges, la separació, el tipus de lletra i molts altres aspectes

de l’element.

• Els valors són els valors als quals voleu canviar cadascuna de les propietats

dels elements seleccionats. Els valors depenen de la propietat; per exemple,

les propietats que afecten el color poden tenir valors hexadecimals com ara

#336699, valors RGB com ara rgb (12,134,22) o noms de colors com ver-

mell, verd o blau. Les propietats que afecten la posició, els marges, l’ampla-

da, l’altura... es poden mesurar en píxels, ems, percentatges, centímetres o

altres unitats similars.

Ara en veurem un exemple concret:

L’element HTML que selecciona aquesta regla és p; aquesta regla s’aplicarà a

tots els p dels documents HTML que utilitzin aquest CSS, a menys que hi hagi

regles més concretes que se’ls apliquin, ja que en aquest cas les regles més con-

cretes tindran prioritat sobre aquesta regla. Les propietats que es veuen afecta-

des per aquesta regla són els marges al voltant dels paràgrafs, el tipus de lletra

del text dels paràgrafs i el color d’aquest text. Els marges estan definits a 5 pí-

xels, el tipus de lletra està definit a Arial i el color del text és blau.

Ja tornarem a parlar de tots aquests detalls més endavant; l’objectiu principal

d’aquest apartat és explicar els fonaments del CSS i no els detalls més petits.

Totes aquestes regles s’uneixen per formar un full d’estils. Aquesta és la sintaxi

més bàsica del CSS. Hi ha més coses, però no moltes més; probablement, el mi-

llor que té el CSS és la seva senzillesa.

p {

margin:5px;

font-family:arial;

color:blue;

}


1.2.1. Comentaris del CSS

Una de les primeres coses que cal saber és com fer comentaris en el CSS. Podeu

afegir-hi comentaris posant-los entre /* i */. Els comentaris poden ocupar di-

verses línies, que el navegador ignorarà:

Podeu afegir comentaris entre regles o en un bloc de propietats; per exemple,

en el següent CSS les propietats 2a. i 3a. es troben entre delimitadors de co-

mentari, per la qual cosa el navegador les ignorarà. Això pot ser molt útil quan

vulgueu comprovar els efectes que tenen parts concretes del CSS a la vostra pà-

gina web; podeu eliminar-les convertint-les en comentaris, guardar el CSS i

tornar a carregar l’HTML.

A diferència d’altres llenguatges, el CSS només té comentaris de bloc; els co-

mentaris de línia no existeixen. Evidentment, si ho voleu, podeu restringir el

comentari a una única línia, però haureu de seguir-hi incloent els delimitadors

d’obertura i de tancament de comentari (/* i */).

1.2.2. Agrupar selectors

També podeu agrupar diferents selectors. Posem per cas que voleu aplicar el

mateix estil a h1 i p; podríeu escriure el següent CSS:

/* Aquests són selectors d’elements bàsics */

selector{

propietat1:valor;

propietat2:valor;

propietat3:valor;

}

selector{

propietat1:valor;

/*

propietat2:valor;

propietat3:valor;

*/

}

h1 {color:red}

p {color:red}


Aquesta, però, no és la manera ideal de fer les coses, ja que repetiu informació

que és la mateixa. Per tant, podeu escurçar el CSS agrupant els selectors amb

una coma; les regles entre claus s’apliquen als dos selectors:

Hi ha diferents selectors, cadascun dels quals es correspon amb una part diferent

de l’etiquetatge. Els tres més bàsics que trobareu més sovint són els següents:

• p {}: selector d’elements. Es correspon amb tots els elements d’aquest

nom de la pàgina (en el cas anterior, elements p).

• .example{}: selector de classe. Es correspon amb tots els elements que te-

nen l’atribut class amb el valor especificat; per tant, el selector anterior es

correspondria amb <p class=“example”>, <li class=“example”> o

<div class=“example”>, o amb qualsevol altre element amb class de-

finit com a example. Tingueu en compte que els selectors de classe no

comproven cap nom d’element concret.

• #example{}: selector d’id. Es correspon amb tots els elements que tenen

un atribut id amb el valor especificat; així, doncs, el selector anterior es

correspondria amb <p id=“example”>, <li id=“example”> o <div

id=“example”>, o amb qualsevol altre element amb id definit com a

example. Tingueu en compte que els selectors d’ID no comproven cap

nom d’element i que podeu tenir només un ID de cada per document

HTML, ja que són únics per a cada pàgina.

En els següents exemples podeu veure els selectors anteriors en acció. Obser-

veu que quan obriu l’exemple en un navegador, l’estil warning s’aplica tant

al punt de la llista com al paràgraf (si desapareix el pic és perquè definiu un

color de text blanc sobre un fons blanc).

• “Selectors example”*

• “Selectors.css”**

També podeu unir diversos selectors per definir unes regles encara més espe-

cífiques:

• p.warning{}. Es correspon amb tots els paràgrafs amb el valor warning

de class.

• div#example{}. Es correspon amb l’element amb example com a atribut

id, però només quan és un div.

• p.info, li.highlight{}. Es correspon amb el valor info de class i

amb els punts de llista amb el valor highlight de class.

h1, p {color:red}

* http://dev.opera.com/articles/view/27-css-basics/example-

selectors.html** http://dev.opera.com/articles/view/27-css-basics/selectors.css


En el següent exemple utilitzo selectors específics per diferenciar els diferents

estils d’advertències.

• “Specificselectors example”*

• “Specificselectors.css”**

1.3. Selectors avançats de CSS

Al subapartat anterior he explicat els selectors més bàsics del CSS, que són els

selectors d’element, classe i id. Amb aquests selectors es poden fer moltes

coses, però això no ho és tot; hi ha altres selectors que permeten seleccionar

elements per aplicar-los en funció de criteris més específics:

• Selectors universals: els selectors universals es poden fer servir per selecci-

onar tots els elements de la pàgina.

• Selectors d’atributs: tal com indica el seu nom, els selectors d’atributs per-

meten seleccionar elements en funció dels seus atributs.

• Selectors de fills: si voleu seleccionar elements concrets que són fills d’al-

tres elements concrets, utilitzeu aquest selector.

• Selectors de descendents: si voleu seleccionar elements concrets que són

descendents d’altres elements concrets (no només fills directes, sinó també

més avall de l’arbre), podeu utilitzar aquest tipus de selector.

• Selectors de germans adjacents: si voleu seleccionar només elements con-

crets que segueixen altres elements concrets, utilitzeu aquests selectors.

• Pseudoclasses: permeten aplicar estils a elements, no en funció de què són

els elements, sinó en funció de factors més estranys com per exemple l’es-

tat dels enllaços (per exemple, si s’hi és al damunt o si ja s’han visitat).

• Pseudoelements: permeten aplicar estils a parts concretes dels elements i

no a tot l’element (per exemple, la primera lletra d’aquest element); també

us permeten inserir contingut abans o després d’elements concrets.


specificselectors.html** http://dev.opera.com/articles/

view/27-css-basics/specificselectors.css

Notaa

A mesura que aneu progressant per aquesta assignatura trobareu refe-

rències a alguns d’aquests selectors més complicats. Si no els enteneu a

la primera no cal que us preocupeu; ja els anireu dominant a mesura

que guanyeu experiència en els estils de les pàgines web. El millor és co-

mençar amb els tres selectors bàsics mencionats al subapartat anterior i

anar utilitzant els altres una vegada us aneu sentint més segurs.


1.3.1. Selectors universals

Per dir-ho ràpidament, els selectors universals seleccionen tots els elements

d’una pàgina per aplicar-hi estils. Per exemple, la regla següent diu que tots els

elements de la pàgina han de tenir una vora sòlida de color negre d’1 píxel:

1.3.2. Selectors d’atributs

Els selectors d’atributs permeten seleccionar elements en funció dels atributs

que contenen. Per exemple, amb el selector següent podeu seleccionar tots els

elements img amb un atribut alt:

Tingueu en compte els claudàtors.

Amb el selector anterior potser podríeu definir una vora negra al voltant de to-

tes les imatges amb un atribut alt i una vora vermella al voltant de totes les

altres imatges, una cosa molt útil per a les proves d’accessibilitat.

Però els atributs us poden ser molt més útils si teniu en compte que podeu fer

seleccions a partir del valor dels atributs, i no només a partir dels seus noms.

La regla següent s’aplica a totes les imatges que tenen un atribut src amb el

valor alert.gif:

Potser penseu que no és gaire útil, però pot ser-ho molt per a la depuració. I encara

molt més útil és la possibilitat de seleccionar parts concretes d’atributs, com per

exemple extensions d’arxius. I això ja està arribant: el CSS 3 introdueix tres tipus

nous de selectors d’atributs que poden fer seleccions en funció de les cadenes de

text dels valors dels atributs (al principi, al final o a qualsevol punt del valor). Lle-

giu l’apartat de Christopher Schmitt sobre els selectors d’atributs del CSS 3*.

* {

border: 1px solid #000000;

}

img[alt]{


}

img[src=“alert.gif”]{


}

* http://dev.opera.com/articles/view/css-3-attribute-selectors/


1.3.3. Selectors de fills

Si voleu seleccionar elements concrets que són fills d’altres elements concrets

podeu utilitzar aquest selector. Per exemple, la regla següent posarà de color

blau el text dels elements strong que són fills d’elements h3, però cap dels

altres elements strong:

1.3.4. Selectors de descendents

Els selectors de descendents són molt similars als selectors de fills, excepte que

aquests últims seleccionen només els descendents directes; els selectors de des-

cendents seleccionen els elements pertinents en qualsevol punt de la jerarquia

de l’element, i no només els descendents directes. Fixem-nos bé en què vol dir

això. Posem per cas el següent fragment d’HTML:

En aquest fragment, l’element div és el pare de tots els altres. Té dos fills, un

em i un p. L’element p té un únic element fill, que és un altre em.

Podeu utilitzar un selector de fills per seleccionar només l’element em que hi

ha immediatament dintre de div, de la següent manera:

h3 > strong {

color: blue;

}

Notaa

L’IE 6 i les versions anteriors no accepten els selectors de fills.

<div>

<em>hello</em>

<p>In this paragraph I will say

<em>goodbye</em>.

</p>

</div>

div > em {

...

}


Si utilitzeu un selector de descendents de la següent manera:

Llavors se seleccionaran els dos elements em.

1.3.5. Selectors de germans adjacents

Aquests selectors permeten seleccionar un element concret que apareix direc-

tament després d’un altre element concret al mateix nivell de la jerarquia de

l’element. Per exemple, si volguéssiu seleccionar tots els elements p que apa-

reixen immediatament després dels elements h2, però no els altres elements

p, podríeu utilitzar la següent regla:

1.3.6. Pseudoclasses

Les pseudoclasses s’utilitzen per definir estils no per als elements sinó per a diver-

sos estats dels elements. L’ús més habitual que en fareu és per aplicar estils als es-

tats dels enllaços; per tant, són els que veurem en primer lloc. La llista següent

especifica les diferents pseudoclasses i descriu l’estat de l’enllaç que seleccionen:

• :link: l’estat normal per defecte dels enllaços, tal com es troben quan es

veuen per primera vegada.

• :visited: enllaços que ja heu visitat en el navegador que esteu utilitzant.

• :focus: enllaços (o camps de formularis, o qualsevol altra cosa) que tenen

en aquest moment el cursor del teclat en el seu interior.

• :hover: enllaços que tenen en aquest moment el punter del ratolí sobre

ells.

div em {

...

}

h2 + p {

...

}

Notaa

L’IE 6 i les versions anteriors no accepten els selectors de germans adja-

cents.

http://www.surl.org/usabilitynews/62/whitespace.asp

http://www.webstyleguide.com/





• :active: un enllaç que cliqueu.

Les regles següents del CSS defineixen que, per defecte, els enllaços siguin de

color blau (el valor per defecte a la majoria dels navegadors). En posar-vos-hi

a sobre desapareix el subratllat de l’enllaç. També volem aconseguir aquest

mateix efecte quan se selecciona l’enllaç amb el teclat, per la qual cosa dupli-

quem la regla :hover amb :focus . Una vegada ja s’ha visitat un enllaç,

aquest queda de color gris. Per últim, quan un vincle està actiu apareix en ne-

greta per donar una pista addicional que passarà alguna cosa.

La pseudoclasse :focus també és útil com a contribució a la usabilitat en

els formularis. Per exemple, podeu destacar el camp d’introducció de dades

que té el cursor intermitent actiu en el seu interior amb una regla com la

següent:

A continuació explicaré :first-child. Aquesta pseudoclasse selecciona

qualsevol aparició de l’element que és el primer element fill del seu pare; així

a:link{

color: blue;

}

a:visited{

color: gray;

}

a:hover a:focus{

text-decoration: none;

}

a:active{

font-weight: bold;

}

Notaa

Vigileu si no definiu aquestes regles en l’ordre en què apareixen a

l’exemple anterior, ja que d’altra forma podria ser que no funcionessin

de la manera esperada. Això és per la manera en què l’especificitat fa

que les regles posteriors del full d’estils anul·lin les regles anteriors. En

el següent apartat aprendrem més detalls sobre l’especificitat.

input:focus {

border: 2px solid black;

background color: lightgray;

}


que, per exemple, la regla següent selecciona el primer punt (amb pic o nume-

rat) de qualsevol llista i posa el text en negreta:

Finalment, comentaré breument la pseudoclasse :lang, que selecciona ele-

ments que tenen un idioma concret definit amb l’atribut lang. Per exemple,

l’element següent:

Es podria seleccionar de la manera següent:

1.3.7. Pseudoelements

Els pseudoelements tenen dues finalitats. En primer lloc, els podeu fer servir

per seleccionar la primera lletra o la primera línia del text de l’interior d’un ele-

ment concret. Per crear una caplletra al principi de cada paràgraf del docu-

ment podeu utilitzar la regla següent:

La primera lletra de cada paràgraf apareixerà en negreta, un 300% més gran

que la resta del paràgraf i amb un fons vermell.

Per fer que la primera línia de cada paràgraf aparegui en negreta podeu utilit-

zar la regla següent:

li:first-child {

font-weight: bold;

}

<p lang=“en-US”>A paragraph of American text, gee whiz!<p>

p:lang(en-US) {

...

}

p:first-letter {

font-weight: bold;

font-size: 300%

background-color: red;

}


El segon ús dels pseudoelements és generar contingut a través del CSS, cosa

que és més complicada. Podeu utilitzar els pseudoelements :before o :after

per especificar que el contingut s’ha d’inserir abans o després de l’element que

seleccioneu. Llavors podeu especificar què és el que voleu inserir-hi. Com a

exemple molt senzill, podeu utilitzar la regla següent per inserir una imatge

decorativa després de cadascun dels enllaços de la pàgina:

També podeu utilitzar la funció attr() per inserir els valors dels atributs dels ele-

ments després de l’element. Per exemple, amb la regla següent podeu inserir el

destí de cadascun dels enllaços del document entre parèntesis després de l’enllaç:

Les regles d’aquesta mena són ideals per a fulls d’estils d’impressió, que són fulls

d’estils que podeu escriure i que s’apliquen automàticament quan un usuari im-

primeix una pàgina. L’avantatge per a l’usuari és que podeu ocultar tota la nave-

gació que un usuari no podrà seguir en una còpia impresa i utilitzar la tècnica

anterior perquè el lector pugui veure les URL a què es fa referència en una pàgina.

També podeu inserir valors numèrics incrementats després dels elements que es

repeteixen (com per exemple pics o paràgrafs) amb la funció counter(); això

s’explica amb molt més detall a l’apartat de dev.opera.com sobre els comptadors

del CSS*.

p:first-line {

font-weight: bold;

}

a:after{

content: “ “ url(flower.gif);

}

a:after{

content: “(“ attr(href) “)”;

}

* http://dev.opera.com/articles/view/automatic-numbering-with-

css-counters/

Notaa

L’IE 6 i les versions anteriors no accepten aquests selectors. També cal tenir

en compte que no heu de donar informació important amb el CSS, ja que

el contingut no estarà disponible per a les tecnologies d’assistència o si un

usuari decideix no utilitzar el vostre full d’estils. La norma bàsica és que el

CSS és per als estils i l’HTML és per al contingut important.


1.4. CSS abreujat

Una altra cosa amb què us trobareu normalment en aquesta assignatura és el

CSS abreujat. És possible combinar diverses propietats del CSS relacionades en

una única propietat per estalviar-vos temps i esforç. En aquest apartat veurem

els tipus de propietats abreujades disponibles.

1.4.1. Comparar valors individuals i abreujats

Observeu la regla següent per al marge (les regles abreujades per a separació i

vora funcionen de la mateixa manera):

Aquesta regla també es podria escriure:

1.4.2. Donar menys de quatre valors per a una propietat abreujada

Un valor abreujat pot incloure menys de quatre valors, que s’aplicaran segons

s’especifica a continuació. Els resultats s’ordenen segons el nombre de valors es-

pecificats:

1) El mateix valor s’aplica als quatre costats, per exemple margin: 2px;

2) El primer valor s’aplica als marges superior i inferior, i el segon als marges

esquerre i dret, per exemple margin: 2px 5px;.

Notaa

En aquest subapartat ja he utilitzat el CSS abreujat sense dir-ho. La

regla border: 2px solid black; és la regla abreujada per especi-

ficar per separat border-width: 2px;, border-style: solid; i

border-color: black;.

div.foo {

margin-top: 1em;

margin-right: 1.5em;

margin-bottom: 2em;

margin-left: 2.5em;

}

div.foo {

margin: 1em 1.5em 2em 2.5em;

}


3) Els valors primer i tercer s’apliquen als marges superior i inferior respectiva-

ment, i el segon als marges esquerre i dret, per exemple margin: 2px 5px 1px;.

4) Els valors s’apliquen als marges superior, dret, inferior i esquerre respecti-

vament en l’ordre en què apareixen en el CSS, tal com hem vist abans.

En general, la manera més intel·ligent de fer és especificar els quatre valors en

les propietats abreujades, per qüestions de llegibilitat. Aquest consell també

serveix per a la propietat abreujada padding.

1.4.3. Escollir entre utilitzar una propietat única

o un valor abreujat

Les propietats margin i padding abreujades són les que s’utilitzen més, tot i

que hi ha situacions en què és millor no fer servir les propietats abreujades, o

com a mínim fer-les servir amb molta cura, com per exemple les següents:

• Només s’ha de definir un únic marge. En una situació en la qual només

s’ha de definir una propietat, el fet de definir alhora múltiples propietats

representa normalment una violació del principi KISS (Keep It Simple, Stupid

o “No ho compliquis, estúpid”).

• El selector al qual s’apliquen les propietats està subjecte a molts casos

diferents. Quan això passi, i tard o d’hora acabarà passant, l’inevitable piló

de valors abreujats farà que tot plegat sigui difícil d’entendre quan hàgiu

de reparar o modificar la composició.

• El manteniment del full d’estils que esteu escrivint anirà a càrrec de

persones amb un nivell d’habilitats (o de capacitat de raonament espa-

cial) deficient. Si compteu que llegiran aquest apartat, llavors no cal que

us preocupeu, però potser és millor no suposar segons quines coses...

• Heu de canviar un valor per a un cas concret. Això és normalment con-

seqüència d’un document o d’un full d’estils mal dissenyat, però tampoc

és una situació excepcional.

1.4.4. Referència abreujada

1) Definició abreujada de vores per a diferents propietats: Ja s’han explicat al

principi d’aquest subapartat. Una qüestió addicional que cal mencionar és que

fins i tot podeu definir els valors de les propietats de la vora només per a una

única vora de l’element al qual s’aplica, de la següent manera:

border-left-width: 2px;

border-left-style: solid;

border-left-color: black;


a2) Definició abreujada de marge, farcit i vora per a les mateixes propietats: To-

tes actuen de la mateixa manera.

3) Definició abreujada de tipus de lletra: Podeu especificar la mida del tipus

de lletra, el pes, l’estil, la família i l’interlineat fent servir una definició abreu-

jada d’una única línia. Posem per cas el CSS següent:

Podríeu especificar exactament el mateix amb la línia següent:

4) Definició abreujada de fons: podeu especificar el color de fons, la imatge de

fons, la repetició de la imatge i la posició de la imatge amb una única línia del

CSS. Imaginem-nos el següent:

Tot això mateix es podria representar amb la següent definició abreujada:

5) Definició abreujada de llista: Aquí també trobem un codi similar amb pro-

pietats d’una llista que permet definir els valors per al tipus de pic, la posició

i la imatge en una única línia. Imaginem-nos el següent CSS:

Vegeu la definició abreujada de marge, farcit i vora per a les mateixes propietats en el subapartat 1.4.1 d’aquest mòdul.

font-size: 1.5em;

line-height: 200%;

font-weight: bold;

font-style: italic;

font-family: Georgia, “Times New Roman”, serif;

font: 1.5em/200% bold italic Georgia,”Times New Roman”,serif;

background-color: #000;

background-image: url(image.gif);

background-repeat: no-repeat;

background-position: top left;

background: #000 url(image.gif) no-repeat top left;

list-style-type: circle;

list-style-position: inside;

list-style-image: url(bullet.gif);


Això és equivalent a:

1.5. Aplicar el CSS a l’HTML

Hi ha tres maneres d’aplicar el CSS a un document HTML: estils en línia, estils

incrustats i fulls d’estils externs. Tret que tingueu alguna raó molt bona per

utilitzar un dels dos primers mètodes, us hauríeu de decidir sempre per la ter-

cera opció. Aviat en veurem el motiu, que és molt obvi, però abans parlarem

de les diferents opcions.

1.5.1. Estils en línia

Podeu aplicar estils a un element utilitzant un atribut style, de la manera se-

güent:

Vegeu la pàgina exemple a: “CSS Basics Example”http://dev.opera.com/articles/view/27-css-basics/example-inline.html

En aquest atribut enumereu totes les propietats del CSS i els seus valors (cada

parella de propietat/valor se separa de les altres amb un signe de punt i coma,

i cada propietat se separa del seu valor dintre de la parella amb un signe de dos

punts). Aquesta és la manera de definir estils amb CSS.

Si obriu aquest exemple en un navegador i mireu, veureu que el paràgraf amb

l’atribut style és blau amb el text blanc i que té una mida diferent dels altres,

tal com es pot veure a la figura 1.

list-style: circle inside url(bullet.gif);

Notaa

Observeu que #000 és el valor hexadecimal abreujat per al color; és

l’equivalent al valor no abreujat #000000 que ja hem vist abans. I si

en voleu veure un exemple més complicat, #6c9 és el mateix que

#66cc99.

<p style=“background:blue; color:white; padding:5px;”>Paragraph</p>


Figura 1

L’Opera mostra el paràgraf amb els estils inserits aplicats d’una manera diferent que als altres.

L’avantatge dels estils inserits és que el navegador es veurà obligat a utilitzar

aquests ajustos. Qualsevol altre estil definit amb altres fulls d’estils, o fins i tot els

incrustats a l’element head del document, quedaran invalidats per aquests estils.

El gran problema dels estils inserits és que fan que el manteniment sigui molt

més difícil del que hauria de ser. L’ús del CSS permet separar la presentació del

document de la seva estructura, mentre que el que fan els estils inserits és pre-

cisament escampar regles de presentació per tot el document.

A més de la qüestió del manteniment, tampoc s’aprofita l’aspecte més potent

del CSS: la cascada. En el següent apartat tornarem a parlar de la cascada en

detall, però de moment tot el que cal que sapigueu és que l’ús de la cascada

implica definir un aspecte en un lloc que llavors el navegador aplica a tots els

elements que compleixen una regla concreta.

1.5.2. Estils incrustats

Els estils incrustats es col·loquen a l’element head del document en un ele-

ment style, tal com es veu a l’exemple següent:

<style type=“text/css” media=“screen”>

p {

color:white;


Vegeu la pàgina exemple a: “Embedded example”http://dev.opera.com/articles/view/27-css-basics/example-embedded.html

Si obriu l’enllaç anterior en un navegador veureu que els estils definits

s’apliquen a tots els paràgrafs del document, tal com mostra la figura 2. Mi-

reu també el codi font de la pàgina de l’exemple per veure el CSS de l’inte-

rior de head.

Figura 2

L’Opera mostra tots els paràgrafs amb els estils definits en el full d’estils incrustats.

Vegeu la pàgina exemple a: “External example”http://dev.opera.com/articles/view/27-css-basics/example-external.html

L’avantatge dels estils incrustats és que no cal afegir un atribut style a

cada paràgraf; els estils es poden aplicar a tots els paràgrafs amb una única

definició. Això també vol dir que si heu de canviar l’aspecte de tots els pa-

ràgrafs podreu fer-ho intervenint en un únic lloc, tot i que això està limitat

a un document; però què hauríeu de fer si volguéssiu definir alhora l’aspec-

te de tots el paràgrafs de tot un lloc web? Doncs utilitzar fulls d’estils ex-

terns.

background:blue;

padding:5px;

}

</style>


1.5.3. Fulls d’estils externs

Els fulls d’estils externs permeten posar totes les definicions del CSS en un ar-

xiu independent, guardar aquest arxiu amb l’extensió CSS i llavors aplicar-lo

a tots els documents HTML amb un element link en el head del document.

Consulteu el codi font de la nostra pàgina d’exemple*, observeu que head

conté un element link que fa referència a un arxiu CSS extern i comproveu

que tots els estils definits a l’arxiu CSS** extern s’apliquen a l’HTML. Obser-

vem més atentament aquest element link:

aEn aquesta assignatura ja hem parlat de l’element link. Només per recapitu-

lar: l’atribut href apunta cap a un arxiu CSS, l’atribut media defineix a quins

suports s’aplicaran aquests estils (en aquest cas screen, ja que no volem que

un document imprès tingui aquest aspecte) i type defineix què és el recurs al

qual apunta l’enllaç (una extensió d’arxiu no és suficient per determinar-ho).

Figura 3

L’Opera mostra els estils definits en el full d’estils extern quan s’enllaça amb un element link.

Aquesta és la millor situació imaginable: Totes les definicions d’aspecte es tro-

ben en un únic arxiu, la qual cosa significa que podeu fer canvis a tot el lloc

web només canviant un arxiu, i el navegador el pot carregar una vegada i lla-

vors guardar-lo a la memòria cau per a tots els altres documents que hi fan re-

ferència, amb la qual cosa s’ha de descarregar una quantitat de dades menor.


external.html** http://dev.opera.com/articles/

view/27-css-basics/styles.css

<link rel=“stylesheet” href=“styles.css” type=“text/css” media=“screen”>

Hem parlat de l’element link a l’apartat 4 del mòdul “El text central d’HTML”.


1.5.4. Importar fulls d’estils amb @import

Hi ha encara una altra manera d’importar fulls d’estils externs cap a arxius

HTML: la propietat @import. Aquesta propietat s’insereix en un full d’estils

incrustat, de la mateixa manera que el CSS incrustat que hem vist abans. La

sintaxi és la següent:

Algunes vegades veureu enunciats d’importació sense els parèntesis, però el re-

sultat és el mateix. Una altra cosa que cal tenir en compte és que @import ha

d’ocupar sempre el primer lloc en un full d’estils incrustat. Finalment, podeu

especificar que el full d’estils importat s’apliqui només a alguns tipus de su-

ports incloent-hi el tipus de suport al final de l’enunciat d’importació (això

funciona amb tots els navegadors exceptuant l’IE6 i versions anteriors). El se-

güent codi fa el mateix que l’exemple anterior:

La primera pregunta que us deveu estar fent és: “Per què necessito una altra

manera d’aplicar fulls d’estils externs als meus documents HTML?” Doncs bé,

en realitat no la necessiteu. Només incloc aquí la informació sobre @import

per una qüestió d’exhaustivitat. L’ús de @import en lloc d’elements link té

uns quants avantatges i desavantatges menors, però aquests són molt menors,

per la qual cosa la decisió serà ben bé vostra. Els elements link són actual-

ment la manera més acceptada de fer les coses:

• Els navegadors antics no reconeixen @import i, per tant, l’ignoren comple-

tament (el Netscape 4 i versions anteriors, i l’IE 4 i versions anteriors, si no

poseu el nom de l’arxiu entre parèntesis). Per tant, podeu utilitzar un enun-

ciat @import per ocultar estils als navegadors antics que els utilitzarien in-

correctament. Podeu posar els estils actualitzats en un full d’estils extern,

importar-los amb @import i oferir alguns estils realment bàsics que no fa-

cin que l’IE o el Netscape 4 quedin encallats en el full d’estils incrustat. Us

<style type=“text/css” media=“screen”>

@import url(“styles.css”);

...aquí hi poden haver altres enunciats o estils CSS per importar-los...

</style>

<style type=“text/css”>

@import url(“styles.css”) screen;

...aquí hi poden haver altres enunciats o estils CSS per importar-los...

</style>


pot ser molt útil, però actualment no és gaire habitual que calgui oferir

compatibilitat amb l’IE/Netscape 4.

• Tal com ja hem comentat, l’IE6 no accepta la col·locació del tipus de suport

al final de la línia de @import; per tant, si voleu inserir múltiples fulls d’es-

tils per a diferents suports aquesta no és una bona opció.

• Podríeu argumentar que el codi per a múltiples enunciats @import és més

petit que el codi per a múltiples elements link, però aquest avantatge és

insignificant.

Resum

En aquest apartat heu après a aplicar el CSS a documents HTML, ja sigui en

forma d’estils inserits utilitzant atributs style, en forma d’estils incrustats en

un element style a head del document, o com arxius externs en un docu-

ment independent. També heu après que aquesta última opció, la d’enllaçar

un full d’estils extern utilitzant un element link, és la més recomanable pel

que fa al manteniment i a l’ús de la memòria cau. Finalment hem parlat sobre

la sintaxi bàsica del CSS i hem explicat els comentaris, diferents tipus de selec-

tors i l’agrupament de selectors.

En el següent apartat aprofundirem en els detalls del CSS i hi parlarem en de-

tall de la cascada i de l’especificitat dels selectors.

Preguntes de repàs

Preguntes que hauríeu de poder respondre:

1. Quins són els avantatges i els problemes dels estils en línia i com els apli-

queu a un element?

2. Què és una regla d’estil? Descriviu-ne els diferents components i la sintaxi.

3. Imagineu que teniu unes quantes regles d’estils; què heu de fer per conver-

tir-les en un full d’estils extern?

4. Amb què es correspon el següent selector CSS: ul#nav{}?

5. Quin és l’vantatge d’agrupar selectors?

6. Com podeu definir un full d’estils d’impressió?


2. Herència i cascadaTommy Olsson

L’herència i la cascada són dos conceptes bàsics en CSS. S’han de comprendre

bé per fer servir CSS. Per sort, no són gaire difícils d’entendre, tot i que alguns

detalls poden ser una mica complicats de recordar.

Els dos conceptes estan relacionats, però són diferents. L’herència està re-

lacionada amb com els elements de l’etiquetatge de l’HTML hereten propi-

etats dels seus elements pares (els que els contenen) i els transmeten als

seus fills, mentre que la cascada té a veure amb les declaracions de CSS que

s’apliquen a un document i com les regles contradictòries s’anul·len o no

entre elles.

En aquest apartat tractarem detalladament aquests dos conceptes. Probable-

ment l’herència és un concepte més fàcil de copsar, de manera que començaré

amb aquest i després passaré a les particularitats de la cascada.

Descarregueu els exemples a: “inheritance_cascade_code.zip”http://dev.opera.com/articles/view/28-inheritance-and-cascade/inheritance_cascade_code.zip

2.1. Herència

No totes les propietats CSS són heretades perquè algunes d’elles no tindria sen-

tit que ho fossin. Per exemple, els marges no s’hereten perquè és poc probable

que un element fill necessiti els mateixos marges que el seu pare. Normal-

ment, el sentit comú dicta quines propietats s’hereten i quines no, però per

estar-ne del tot segur, cal consultar cada propietat a la taula de resum de pro-

pietats de l’especificació CSS 2.1*.

Notaa

Descarregueu-vos el codi font dels exemples d’aquest apartat; el fitxer

“inheritance_cascade_code.zip” conté el CSS i HTML acabats, a més de

la plantilla inicial d’HTML perquè pugueu anar treballant mentre veieu

els exemples.

L’herència en CSS és el mecanisme mitjançant el qual determinades

propietats d’un element pare es transmeten als seus fills. De fet, s’assem-

bla força a l’herència genètica. Si els progenitors tenen els ulls blaus, els

fills segurament també tindran els ulls blaus.

* http://www.w3.org/TR/CSS21/propidx.html


2.1.1. Per a què serveix l’herència

Per què el CSS té un mecanisme d’herència? Probablement, la manera més senzi-

lla de respondre aquesta pregunta sigui pensar què passaria si no existís l’herència.

S’haurien d’especificar qüestions com ara la família de fonts, la mida de la font i

el color del text individualment per a tots i cadascun dels tipus d’element.

Mitjançant l’herència, per exemple, es poden especificar les propietats de les

fonts dels elements html o body i tota la resta d’elements els heretaran. Es

poden especificar els colors de fons i de primer pla d’un element contenidor

concret i tots els elements fills d’aquest contenidor heretaran automàtica-

ment el color de primer pla. El color de fons no s’hereta, però el valor inicial

de background-color (color de fons) és transparent, la qual cosa significa

que el fons del pare es veurà a través seu. L’efecte és el mateix que si s’heretés

el color de fons, però penseu què passaria si s’heretessin les imatges de fons!

Tots els fills tindrien la mateixa imatge de fons com a pare i, per tant, tot sem-

blaria un trencaclosques creat per algú amb problemes d’addicció a les dro-

gues, ja que el fons “tornaria a començar des de zero” per a cada element.

2.1.2. Com funciona l’herència

Tots els elements d’un document HTML hereten totes les propietats heretables

del seu pare tret de l’element arrel (html), que no té progenitor.

El fet que les propietats heretades tinguin algun efecte o no depèn d’altres fac-

tors, tal com veurem més endavant quan parlem de la cascada. De la mateixa

manera que una mare d’ulls blaus pot tenir un fill d’ulls marrons si el pare té

els ulls marrons, les propietats heretades a CSS poden anul·lar-se.

2.1.3. Un exemple d’herència

1) Copieu el següent document HTML en un fitxer nou de l’editor de textos

que més us agradi i guardeu-lo com inherit.html.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/

strict.dtd”>

<html lang=“en”>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>

<title>Herència</title>

</head>

<body>

<h1>Títol</h1>

<p>Un paràgraf de text.</p>

</body>

</html>


Si obriu el document en el navegador web, veureu un document força avorrit

que es mostra segons l’estil per defecte del vostre navegador.

2) Creeu un nou fitxer buit amb l’editor de textos, copieu-hi a dins la regla

CSS que es mostra a continuació i guardeu el fitxer com style.css a la ma-

teixa ubicació que el fitxer HTML.

3) Enllaceu el full d’estil al document HTML inserint la línia següent abans

del tag </head>.

4) Guardeu el fitxer HTML modificat i recarregueu el document en el navega-

dor. La font passarà de ser la predeterminada pel navegador (normalment Times

o Times New Roman) a ser Verdana. Si no teniu Verdana instal·lada a l’ordi-

nador, el text es mostrarà amb la font Sans Serif especificada per defecte a la con-

figuració del navegador. A més, el text es veurà un 25% més petit que a la

versió sense estil.

La regla de CSS que hem especificat s’aplica únicament a l’element html. No

hem especificat cap regla per als títols o els paràgrafs, però ara tot el text es

mostra en Verdana al 75% de la mida per defecte. Per què? Per l’herència.

La propietat de font és una propietat abreujada que estableix tota una sèrie

de propietats relacionades amb les fonts. Només n’hem especificat dues, la

mida de la font i la família de fonts, però aquesta regla equival al següent:

Totes aquestes propietats s’hereten, de manera que l’element body les heretarà

de l’element html i després les transmetrà als seus fills: el títol i el paràgraf.

html {

font: 75% Verdana,sans-serif;

}

<link rel=“stylesheet” type=“text/css” media=“screen” href=“styles.css”>

html {

font-style: normal;

font-variant: normal;

font-weight: normal;

font-size: 75%;

line-height: normal;

font-family: Verdana,sans-serif;

}


Però, un moment! Hi ha quelcom que no acaba de quedar clar pel que fa a l’he-

rència de la mida de la font, oi? La mida de la font de l’element html s’esta-

bleix en 75%, però 75% de què? I la mida de la font de body no hauria de ser

el 75% de la mida de la font del seu pare i les mides de les fonts del títol i del

paràgraf haurien de ser el 75% de la mida de l’element body?

El valor que s’hereta no és el valor especificat, és a dir, el valor que escrivim

al full d’estil, sinó una cosa que s’anomena el valor computat. El valor com-

putat és, en el cas de la mida de la font, un valor absolut mesurat en píxels.

Per a l’element html, que no té un element pare del qual heretar, un per-

centatge del valor de mida de font s’associa a la mida de font predetermi-

nada del navegador. La majoria de navegadors actuals tenen una mida de

font predeterminada de 16 píxels. El 75% de 16 és 12, de manera que el va-

lor computat de la mida de la font de l’element html serà probablement 12

píxels. Aquest és el valor que hereta body i que es transmet al títol i al pa-

ràgraf.

(La mida de la font del títol és més gran perquè el navegador aplica algunes

normes d’estil integrades pròpies. Vegeu el tema de la cascada tot seguit.)

5) Afegiu dos declaracions més a la regla del full d’estil de CSS:

6. Guardeu el fitxer CSS i recarregueu el document al navegador.

Ara el fons és de color blau fort i tot el text és blanc. La regla s’aplica a l’ele-

ment html: el document sencer, el fons del qual serà blau. L’element body he-

reta el color blanc de primer pla i es transmet a tots els fills de body: en aquest

cas el títol i el paràgraf. Aquests no hereten el fons, però el fons s’establirà en

el valor per defecte de transparent, de manera que el resultat visual final

serà text blanc sobre fons blau.

7) Afegiu una altra regla nova al full d’estil i guardeu i recarregueu el docu-

ment.

html {

font: 75% Verdana,sans-serif;

background-color: blue;

color: white;

}

h1 {

font-size: 300%;

}


Aquesta regla estableix la mida de la font del títol. El percentatge s’aplica a la

mida de font heretada (el 75% de la predeterminada pel navegador, que supo-

sem que és 12 píxels), de manera que la mida del títol serà el 300% de 12 pí-

xels, és a dir: 36 píxels.

2.1.4. Forçar l’herència

Mitjançant la paraula clau inherit (heretar) pot forçar-se l’herència fins i tot

per a propietats que no s’hereten normalment. Tanmateix, s’ha de fer servir

amb molta cura, perquè Microsoft Internet Explorer (fins a la versió 7 inclosa)

no és compatible amb aquesta paraula clau.

La regla següent fa que tots els paràgrafs heretin totes les propietats de fons

dels seus pares:

Amb les propietats abreujades es pot fer servir inherit en comptes dels valors

normals. S’ha de fer servir la versió abreujada per a tot o per a res. En la versió

no abreujada no es poden especificar alguns valors i fer servir inherit per a

d’altres, perquè els valors poden donar-se en qualsevol ordre i no hi ha manera

d’especificar quins valors volem heretar.

Forçar l’herència no és quelcom que calgui fer sovint. Pot ser útil per “desfer”

una declaració d’una regla conflictiva o per no haver d’introduir les dades de

determinats valors directament al codi font. Un exemple seria el típic menú

de navegació:

Per mostrar aquesta llista d’enllaços com a menú horitzontal, podeu fer servir

el CSS següent:

p {

background: inherit;

}

<ul id=“nav”>

<li><a href=“/”>Inici</a></li>

<li><a href=“/news/”>Notícies</a></li>

<li><a href=“/products/”>Productes</a></li>

<li><a href=“/services/”>Serveis</a></li>

<li><a href=“/about/”>Sobre nosaltres</a></li>

</ul>


En aquest cas, el color de fons de tota la llista s’estableix en blau a la regla de

#nav. Així també s’estableix el color de primer pla com a blanc i tots els ele-

ments de la llista i tots els enllaços hereten el mateix. La regla dels elements

de la llista estableix un límit a la dreta, però no especifica el color del marge,

la qual cosa significa que utilitzarà el color de primer pla heretat (el blanc). Per

als enllaços, hem fet servir color:inherit per forçar l’herència i anul·lar el

color dels enllaços predeterminat del navegador.

Lògicament, també podria haver especificat el blanc com a color del marge i

del text dels enllaços, però el millor del fet de deixar que ho faci l’herència és

que, si més endavant decidim canviar els colors, només haurem de fer un can-

vi en aquest punt.

2.2. Cascada

Hi ha tres conceptes principals que controlen l’ordre en el qual s’apliquen les

declaracions de CSS: la importància, l’especificitat i l’ordre en les fonts.

Tot seguit tractaré amb detall aquests conceptes un per un.

#nav {

background: blue;

color: white;

margin: 0;

padding: 0;

}

#nav li {

display: inline;

margin: 0;

padding: 0 0.5em;

border-right: 1px solid;

}

#nav li a {

color: inherit;


}

CSS significa Cascading Style Sheets (fulls d’estil en cascada) i, per tant,

no hauria d’estranyar-nos que la cascada sigui un concepte important.

És el mecanisme que controla el resultat final quan s’apliquen diverses

declaracions CSS contraposades al mateix element.


La importància és un dels conceptes més… doncs… importants. Si dues decla-

racions tenen la mateixa importància, l’especificitat de les regles decidirà qui-

na s’ha d’aplicar. Si les regles tenen la mateixa especificitat, l’ordre de les fonts

controla el resultat.

2.2.1. Importància

La importància d’una declaració de CSS depèn d’on s’ha especificat. Les decla-

racions contraposades s’aplicaran en l’ordre següent; les noves anul·laran les

més antigues.

1) Fulls d’estil d’agent d’usuari.

2) Declaracions normals en fulls d’estil d’autor.

3) Declaracions normals en fulls d’estil d’usuari.

4) Declaracions importants en fulls d’estil d’autor.

5) Declaracions importants en fulls d’estil d’usuari.

Un full d’estil d’agent d’usuari és el full d’estil integrat del navegador. Cada

navegador té les seves pròpies regles sobre com mostrar diversos elements

d’HTML si l’usuari o dissenyador de la pàgina no especifica cap estil. Per exem-

ple, els enllaços no visitats acostumen a ser blaus i a estar subratllats.

Un full d’estil d’usuari és un full d’estil que ha especificat l’usuari. No tots els

navegadors són compatibles amb els fulls d’estil d’usuari, però poden ser molt

pràctics, sobretot per als usuaris amb determinats tipus de minusvalidesa. Per

exemple, una persona dislèxica pot tenir un full d’estil d’usuari que especifiqui

determinades fonts i colors que li facilitin la lectura.

Opera permet especificar fulls d’estil d’usuari des de Tools (eines) (o des del

menú Opera en un Mac) > Preferences… (Preferències) > llengüeta Advanced

(Avançat) > Content (Contingut), fent clic al botó Style Options… (Opcions

d’estil...) i després assenyalant el full d’estil d’usuari del camp de text My style

sheet (El meu full d’estil) dins de la llengüeta Display (Mostrar) d’aquest

quadre de diàleg. També es pot especificar si es vol que el full d’estil d’usuari

anul·li el full d’estil de l’autor (el dissenyador del web) a la llengüeta Presen-

tation (Presentació) i, fins i tot, que afegeixi un botó a la interfície d’usuari

amb el qual poder canviar el full d’estil de l’usuari amb la de l’autor. Per a fer-

ho, sortiu totalment del menú Preferences… (Preferències…) fent clic a Ac-

ceptar i després feu clic amb el botó dret o, mentre premeu Ctrl, feu clic en al-

gun punt de la interfície del navegador Opera, seleccioneu la vista Customize…

(Personalitzar…) > llengüeta Buttons (Botons) > Browser (Navegador) i arras-

treu el botó Author Mode (Mode autor) fins a un punt d’alguna de les barres

d’eines.


Quan parlem de “full d’estil”, normalment fem referència a un full d’estil

d’autor. És el full d’estil que ha creat o enllaçat l’autor del document (o, més

probablement, el dissenyador del web).

Les declaracions normals són exactament el que el seu nom indica: declaraci-

ons normals. El contrari són les declaracions importants, que són les decla-

racions que van seguides d’una directiva !important.

Com es pot observar, les declaracions importants d’un full d’estil d’usuari te-

nen prioritat sobre totes les altres, la qual cosa és lògica. Seguint l’exemple de

la persona dislèxica, podria ser que volgués veure tot el text amb Comic Sans

MS en cas que li facilités la lectura. Aleshores podria tenir un full d’estil d’usu-

ari amb la regla següent:

En aquest cas, independentment d’allò que hagi especificat el dissenyador, i

independentment d’allò que s’hagi establert com a família de fonts predeter-

minada del navegador, tot es mostrarà amb Comic Sans MS.

El mètode de presentació per defecte del navegador només s’aplicarà si les de-

claracions no queden anul·lades per alguna regla d’un full d’estil d’usuari o un

full d’estil d’autor, ja que el full d’estil d’agent d’usuari té la precedència menor.

En realitat, la majoria de dissenyadors no cal que es preocupin gaire de la im-

portància perquè no s’hi pot fer res. No hi ha cap manera de saber si un usuari

té un full d’estil d’usuari definit que anul·la el nostre CSS. I si el tenen, segu-

rament sigui per alguna bona raó. Tot i així, va bé saber què és la importància

i com pot afectar la presentació dels nostres documents.

2.2.2. Especificitat

L’especificitat és una cosa que cal que tots els autors de CSS comprenguin i tin-

guin en compte. Pot considerar-se una mesura de com d’específic és el selector

d’una regla. Un selector d’especificitat baixa pot donar com a resultat molts

elements (com *, que dóna com a resultat tots els elements del document),

mentre que un selector amb una especificitat elevada pot ser que només doni

com a resultat un únic element d’una pàgina (com ara #nav, que només dóna

com a resultat l’element amb un id de nav).

L’especificitat d’un selector pot calcular-se fàcilment, tal com veurem molt

aviat. Si dues o més declaracions entren en conflicte per un element determi-

* {

font-family: “Comic Sans MS” !important;

}


nat i totes les declaracions tenen la mateixa importància, la de la regla amb el

selector més específic serà la que “guanyi”.

L’especificitat té quatre components; per exemple a, b, c i d. El component

“a” és el més distintiu i el “d” el que menys.

• El component “a” és força senzill: És 1 per a una declaració en un atribut

de style, si no, és 0.

• El component “b” és el nombre de selectors de id al selector (els que co-

mencen amb #).

• El component “c” és el nombre de selectors d’atribut, inclosos els selectors

de classe, i pseudoclasses.

• El component “d” és el nombre de tipus d’elements i pseudoelements del

selector.

Així, després de comptar una mica, podem unir aquests quatre components

per aconseguir l’especificitat de qualsevol regla. Les declaracions de CSS en un

atribut de style no tenen un selector, de manera que la seva especificitat

sempre és 1,0,0,0.

Vegem uns quants exemples que ens ajudaran a aclarir com funciona aquest

procés.

Taula 1

Passem ara a comentar l’últim exemple amb més detall. S’obté a=0 perquè és

un selector, no una declaració d’un atribut style. Hi ha un selector ID (#nav),

de manera que b=1. Hi ha un selector d’atributs (.home) i una pseudoclasse

(:link ), per tant, c=2. Hi ha cinc tipus d’element (html, head, body, ul i a),

de manera que d=5. Per tant, l’especificitat final és 0,1,2,5.

Cal mencionar que els combinadors (com >, + i l’espai en blanc) no afecten

l’especificitat d’un selector. El selector universal (*) tampoc té informació so-

bre especificitat.

També cal tenir en compte que hi ha una gran diferència d’especificitat entre

un selector id i un selector d’atributs que per casualitat faci referència a un

Selector a b c d Especificitat

h1 0 0 0 1 0,0,0,1

.foo 0 0 1 0 0,0,1,0

#bar 0 1 0 0 0,1,0,0

html>head+body ul#nav *.home a:link 0 1 2 5 0,1,2,5


atribut id. Encara que donin com a resultat el mateix element, tenen especi-

ficitats molt diferents. L’especificitat de #nav és 0,1,0,0 i l’especificitat de

[id=“nav”]és només 0,0,1,0.

Fixem-nos com funciona això en la pràctica.

1) Comenceu afegint un altre paràgraf al document HTML.

2) Afegiu una regla al full d’estil per fer que el text dels paràgrafs sigui d’un

color diferent.

3) Guardeu els dos fitxers i recarregueu el document al vostre navegador.

S’haurien de veure dos paràgrafs de color cian.

4) Establiu un id al primer paràgraf per a que pugueu trobar-lo fàcilment amb

un selector CSS.

5) Afegiu una regla per al paràgraf especial al full d’estil.

<body>

<h1>Títol</h1>

<p>Un paràgraf de text.</p>

<p>Un segon paràgraf de text.</p>

</body>

p {

color: cyan;

}

<body>

<h1>Títol</h1>

<p id=“special”>Un paràgraf de text.</p>

<p>Un segon paràgraf de text.</p>

</body>

#special {

background-color: red;

color: yellow;

}


6) Guardeu els dos fitxers i recarregueu el document al navegador per veure’n

el resultat, que és bastant viu.

Vegem les declaracions que s’apliquen als dos paràgrafs.

La primera regla que he afegit estableix color:cyan per a tots els paràgrafs.

La segona regla estableix un color de fons vermell i estableix color:yellow

per a l’únic element que té id de special. El primer paràgraf encaixa amb

aquestes dues regles: és un paràgraf i té la id de special.

El fons vermell no és cap problema perquè només s’ha especificat per a

#special. No obstant això, ambdues regles inclouen una declaració de la

propietat de color, la qual cosa significa que hi ha un conflicte. Ambdues re-

gles tenen la mateixa importància, es tracta de declaracions normals al full

d’estil de l’autor, de manera que cal fixar-se en l’especificitat dels dos selectors.

El selector de la primera regla és p, que té una especificitat de 0,0,0,1 segons

les regles anteriorment mencionades, ja que inclou un únic tipus d’element.

El selector de la segona regla és #special, que té una especificitat de 0,1,0,0

perquè està format per un selector de id. 0,1,0,0 i és molt més específic que

0,0,0,1, de manera que la declaració color:yellow guanya i s’obté el text groc

sobre fons vermell.

2.2.3. Ordre en les fonts

Si dues declaracions afecten el mateix element, tenen la mateixa importància

i la mateixa especificitat, la senyal distintiva final és l’ordre en les fonts. La de-

claració que es veu més endavant als fulls d’estil “guanyarà” a les anteriors.

Si teniu un únic full d’estil extern, les declaracions al final del fitxer anul·laran

les que succeeixin abans al fitxer en cas de conflicte. Les declaracions contra-

posades també poden succeir en diferents fulls d’estil. En aquest cas, l’ordre en

què s’enllacen, s’inclouen o s’importen els fulls d’estil determina quina decla-

ració s’aplica, de manera que si es tenen dos fulls d’estil enllaçats en el head

d’un document, l’enllaçat a l’últim anul·larà l’enllaçat al primer. Vegem un

exemple pràctic de com funciona això.

1) Afegiu una regla nova al full d’estil, just al final del fitxer, com per

exemple:

p {

background-color: yellow;

color: black;

}


2) Guardeu i recarregueu la pàgina web. Llavors tindreu dues regles que do-

nen com a resultat tots els paràgrafs. Tenen la mateixa importància i la ma-

teixa especificitat (ja que el selector és el mateix), per tant el mecanisme final

per distingir-les serà l’ordre de les fonts.

L’última regla especifica color:black i que anul·larà color:cyan de la regla

anterior.

Fixeu-vos com aquesta regla nova no afecta en absolut el primer paràgraf. Mal-

grat que la regla nova apareix en últim lloc, el seu selector té una especificitat

més baixa que el de #special. Això demostra clarament com l’especificitat té

prioritat sobre l’ordre de les fonts.

Resum

Herència i cascada són conceptes bàsics que qualsevol dissenyador web ha de

comprendre.

L’herència permet declarar propietats en elements de nivell alt i que aquestes

propietats es transmetin a tots els elements descendents. Només algunes pro-

pietats s’hereten per defecte, però l’herència pot forçar-se mitjançant la parau-

la clau inherit.

La cascada soluciona els conflictes quan diverses declaracions afecten un ele-

ment determinat. Les declaracions importants anul·len les que no ho són tant.

Entre declaracions d’igual importància, l’especificitat de la regla controla qui-

na s’aplica. I, si tota la resta és igual, l’ordre de les fonts suposa la distinció de-

finitiva.

Preguntes de repàs


1. Es pot heretar la propietat width? Penseu-hi abans de contestar (tindria

sentit?) i després mireu la resposta correcta a l’especificació CSS*.

2. Si afegim !important a la declaració color:black de l’última regla del full

d’estil d’exemple*, afectarà el color del text del primer paràgraf “especial”?

3. Quin selector és més específic, “#special” o “html>head+body>h1+p”?

4. Quina aparença hauria de tenir un full d’estil d’usuari per a que el nostre

document de prova aparegui amb Comic Sans MS negra sobre fons blanc, in-

dependentment del full d’estil de l’autor?

* http://www.w3.org/TR/CSS21

* http://dev.opera.com/articles/view/28-inheritance-and-cascade/

inheritance_cascade_code.zip


3. Creació d’estils de text amb CSSBen Henick

Com el web és una col·lecció de documents, alguns dinàmics, d’altres estàtics

i d’altres funcionals, les convencions amb què se’ls aplica un format s’extre-

uen del nostre millor punt de referència: els sis segles d’història de la imprem-

ta. I això inclou la tipografia. Tanmateix, el web és un mitjà nou i diferent, i

la tipografia del lloc web necessita un conjunt de competències de disseny edi-

torial molt diferent que, a més, està molt més limitat.

Aquest apartat es basa en els coneixements adquirits prèviament en l’assigna-

tura i ofereix una guia detallada per aplicar estil a un text de manera efectiva

fent servir CSS.

Descarregueu els exemples a: “article29_examples.zip”http://dev.opera.com/articles/view/29-text-styling-with-css/article29_examples.zip

3.1. Repàs de tipografia al web

aAl web, els dissenyadors tenen molt menys control sobre la presentació que

en altres mitjans. Aquest fet es veu clarament quan es tracta de les propietats

del llenç del document com ara la mida, la resolució i el contrast. També hi ha

moltes limitacions pel que fa a la qualitat de la tipografia del web, un tema que

ja s’ha tractat.

Altres aspectes que mereixen ser tractats són el contrast i la facilitat de lectura,

dels quals parlaré tot seguit.

3.1.1. Contrast

El contrast del tipus de lletra, la facilitat amb què poden distingir-se les línies

de l’espai en blanc i de les línies adjacents, depèn de diversos factors com ara

la lluminositat, el color, la mida i la composició. Es menciona en aquest apar-

tat pel sol fet de destacar que el text de contrast baix s’hauria d’establir en la

mida més gran possible.

Notaa

A continuació es presenten diversos exemples enllaçats que demostren

les tècniques mencionades; podeu descarregar-vos els 29 exemples de

l’apartat al fitxer “article29_examples.zip”.

Podeu veure els conceptes bàsics de tipografia en l’apartat 6 del mòdul “Conceptes de disseny web”.


3.1.2. Facilitat de lectura

En un context de disseny utilitzem les paraules angleses legibility per a referir-

nos a la facilitat amb què podem buscar fragments específics d’informació,

mentre que amb el seu sinònim readabilty ens referim a la facilitat de com-

prensió d’un text. Les decisions de disseny que potencien una o altra qualitat

s’enumeren a la taula 1.

Taula 1. Característiques de la facilitat de lectura

En el pròxim apartat, “El model de composició de CSS”, es parlarà sobre l’am-

plada òptima de columna.

3.2. Propietats de les fonts CSS: canviar l’aspecte del text

La composició de textos és la manipulació del text pel que fa a la composició ge-

neral i a l’aspecte de les lletres i les paraules. Aquesta segona tasca es porta a terme

mitjançant les propietats de font de CSS, de les quals parlarem tot seguit.

3.2.1. font-size i selecció del tipus d’unitat

Com els documents generalment varien de mida de font més que de tipus de

lletra i les variants de fonts acostumen a manipular-se amb els fulls d’estil

d’usuari, la propietat principal d’interès és font-size (mida de la font). Quan

es fa servir en una regla, va seguida d’un valor que especifica una mesura

d’unitat o, de vegades, una mida de paraula clau (com ara petita o mitjana).

Com es fa

La declaració de font-size més important d’un full d’estil és més o menys així:

L’herència fa que totes les especificacions de mida de la font d’un document

es basin en la mida declarada pel document body, ja sigui en el full d’estil del

navegador o en el nostre.

* http://en.wikipedia.org/wiki/Leading

Objectiu Longitud de línia Canals i espai interlineal* Tipus Justificat

‘Readability’ moderada augmentats serif inexistent [esquerra]

‘Legibility’ curta normals sans-serif variable, sovint completa

body {…

font-size: 14px;

…}


El valor per defecte típic de 16 píxels dels navegadors és un bon punt d’inici

per a la part central del text, però la majoria de visitants poden llegir sense pro-

blemes tipus de lletra més petits. Per tant, la majoria de dissenyadors escullen

una mida més petita, d’uns 11-14 píxels.

L’herència s’aplica a la mida del tipus de lletra quan s’especifica una mida re-

lativa i quan s’especifica una mida de paraula clau per a un element amb un

progenitor la mida del qual no s’especifica amb una paraula clau.

3.2.2. Quins tipus d’unitat poden aplicar-se a les propietats

de text CSS?

A les regles de full d’estil, els tipus d’unitat que acostumen a aplicar-se més so-

vint al text són píxels (px), ems (em, s’explica més endavant), percentatges (%)

i punts (pt). A la taula 2 es descriu el comportament del text redimensionat

amb aquestes unitats.

Taula 2. Unitats de CSS convenients per a dimensionar un text

Altres tipus d’unitat possibles són paraules clau de mida, piques (pc, una pica

equival exactament a 12 punts) i exes (ex). També estan disponibles la majoria

dels altres tipus d’unitat que accepta CSS2, però no es fan servir gairebé mai

quan es treballa amb text.

3.2.3. Per a què serveix tenir tants tipus d’unitat diferents?

Tal com s’indica a la taula 2, hi ha unitats de mida relativa i absoluta. Les pa-

raules clau inclouen ambdues característiques, és a dir, mida absoluta entre si,

però relatives al valor no especificat en paraula clau que hereten. La millor for-

ma de fer-les servir és aquesta:

• Les mides absolutes (px, unitats estandarditzades com pt) és millor

aplicar-les a composicions que no canviïn en relació amb les propietats

de llenç del document, les anomenades composicions “fixes”, “estàti-

ques” o “gel”.

Unitat Definició1 Ús

Ems de CSS Δ = x 1,333 em

Paraules clau Definit per l’agent d’usuari2 large, etc.

Percentatge Δ = x ÷ 100 133.3%

Píxels Unitat absoluta 16 px

Punts Unitat absoluta 12 pt

1 Δ és la proporció de canvi en la mida de la font a partir del valor heretat.2 Només s’hereta el valor de la mida no especificat en paraula clau més proper.


• Les mides relatives (em, %) haurien de fer-se servir en composicions no es-

tàtiques i en situacions en què cal establir un compromís entre usabilitat

del lloc i el control del dissenyador de la composició.

• Les mides de paraula clau (que s’expliquen a continuació) haurien d’uti-

litzar-se quan la usabilitat prevalgui per sobre de totes les altres considera-

cions del disseny.

3.2.4. Mides absolutes i usabilitat

Les versions antigues d’Internet Explorer no permeten al visitant modificar la

mida del text que s’ha establert en mides absolutes i les interfícies de modificació

de la mida del text d’alguns navegadors que sí permeten aquest nivell de control

d’usuari poden costar de trobar (els usuaris d’Opera i Firefox ho tenen fàcil amb

Shift + Ctrl/Cmd + més/menys i Ctrl/Cmd + més/menys respectivament). A causa

d’aquestes limitacions, s’acostuma a establir el font-size de body a un valor re-

latiu, normalment en unitats em que se suposa que el navegador controla per de-

fecte.

3.2.5. Quin és l’equivalent físic d’un píxel?

La resposta estrictament correcta és que no existeix. Els píxels són una unitat

de resolució de maquinari de visualització i prou. Això no obstant...

Malgrat que és estrictament impossible definir o predir les dimensions literals

d’un píxel, els patrocinadors de projectes comercials més nerviosos acostumen

a sorprendre’s quan descobreixen que el disseny del seu lloc adquireix un as-

pecte diferent en els ordinadors dels clients que tenen una configuració dife-

rent de la seva i escridassen el dissenyador web per aquest motiu. Per tant, pot

ser útil comprendre com funcionen els píxels. Aquesta informació us servirà

per quan algú que us hagi manat crear una pàgina web es queixi que el text no

queda exactament igual en diferents ordinadors.

Les empreses de programari mantenen un acord informal segons el qual, 96 ppp

(píxels per polzada) és una mida raonable. D’aquesta manera, un text central de

16 píxels s’imprimirà a una mida de una sisena part d’una polzada o 12 punts. A

la pantalla de cristall líquid cada vegada més habitual de 17” 1280x800, un text

de 16 píxels tindrà una mida aproximada de 13 punts a la pantalla, però en una

pantalla semblant d’ordinador portàtil de 15”, la mida serà de 11,44 punts.

Aquestes mesures són efectives amb la configuració per defecte. La majoria

d’entorns permeten a l’usuari final establir una mesura habitual de ppp, de

manera que sempre es donaran casos diferents.

En conclusió: un píxel és un píxel, però tota la resta és variable.


3.2.6. Ems, percentatges i punts segons el CSS

Tradicionalment, l’em és l’equivalent a l’alçada d’una “M” majúscula de la

font a la qual s’aplica. Tanmateix, en CSS, la unitat em és l’equivalent a l’alça-

da total d’una línia; o, dit d’una altra manera, per a un element al qual se li ha

establert la font-size a 14 píxels:

En entorns normals, aquesta declaració pot ampliar-se a:

L’augment i la reducció de la mida funcionen de forma multiplicativa, de ma-

nera que si hi ha un segon element que es vulgui definir amb una mida de 16

píxels, tenint en compte l’herència habitual, tot el que es mostra a continua-

ció obtindria el resultat desitjat:

3.2.7. Breu comentari sobre la recomanació oficial de CSS 2.1

De vegades us diran que consulteu la recomanació candidata o Candidate Re-

commendation del World Wide Web Consortium per a l’especificació CSS 2.1.*

Com totes les recomanacions del W3C, aquest document pot considerar-se la

definició d’un estàndard web; alguns es segueixen més que d’altres, tant per

fabricants de navegadors com per desenvolupadors de webs.

Tot i que va bé conèixer de dalt a baix les recomanacions del W3C, aquesta

assignatura s’ha dissenyat per proporcionar una introducció concisa i fàcil

d’assimilar al disseny/desenvolupament del web i les recomanacions del W3C

poden ser una mica farragoses. En tots els casos en què se us demani visitar la

recomanació de CSS 2.1, se us dirigirà cap a un material massa confús com per

justificar una explicació acurada en aquest apartat.

3.2.8. Paraules clau de mida

També es poden fer servir paraules clau de mida tal, com s’ha mencionat an-

teriorment. N’hi ha set, des de xx-small fins a xx-large, i medium és el valor

mig (i predeterminat). La llista completa dels set valors es mostra més enda-

1em = 100% = 14px

1em = 100% = 14px = 10,5pt

1,143em = 114,3% ≈ 16px = 12pt

* http://www.w3.org/TR/CSS21/


vant a la Taula 3, que inclou totes les paraules clau que accepten les diverses

propietats de CSS mencionades en aquest apartat.

La recomanació de CSS 2.1 ofereix una gran quantitat d’informació addicional

sobre les paraules clau de font-size*.

Demostració 1

De tant en tant, aquest text enllaçarà amb un document de demostració cada

vegada amb més estil que mostrarà les propietats CSS de què parlem en el seu

ús real. Aquest primer exemple mostra el document HTML de mostra sense

cap mena d’estil aplicat.

Arxiu font de: “Exemple sense estils”http://dev.opera.com/articles/view/29-text-styling-with-css/copy_example1.html

Arxiu font de: “Exemple amb títol redimensionat, atribucions i part central del text aplicats”http://dev.opera.com/articles/view/29-text-styling-with-css/copy_example2.html

Arxiu font de: “Exemple de full d’estil de la demostració 1”http://dev.opera.com/articles/view/29-text-styling-with-css/text_01.css

3.2.9. font-family i selecció de tipus de lletra

Quan tingueu el text a la mida que us agradi, ja podeu passar a seleccionar un

o dos tipus de lletra. Això es fa amb la propietat font-family, que es fa servir

tal com es mostra tot seguit a la demostració 2.

Quan s’ofereix un valor per a la propietat font-family, cal seguir aquestes

regles:

1) Les tipografies s’han d’anomenar exactament com s’anomenen a la biblio-

teca de fonts de l’ordinador client fent servir de guia la font no variant.

2) Totes les tipografies amb nom han de separar-se amb comes, amb espai al

darrere o sense.

3) En els casos en què el nom d’una tipografia contingui més d’una paraula,

cal posar cometes simples o dobles al principi i al final. Exemple: ‘Times New

Roman’.

4) Cal anomenar les tipografies per ordre ascendent de possible disponibilitat.

Per exemple, si voleu que els usuaris de Macintosh vegin una pàgina amb el

* http://www.w3.org/TR/CSS21/fonts.html#font-size-props

body { font-size: 14px; }

h1 { font-size: x-large; }

.sectionNote { font-size: medium; }

.attribution { font-size: small; }


text en Palatino, la declaració de valor de propietat probablement hauria de

ser així: font-family: Palatino, Georgia, serif;. La Palatino és exac-

tament la que voleu, però pot ser que alguns usuaris no la tinguin; la Georgia

té més probabilitats d’estar disponible i s’assembla a la Palatino; serif fa re-

ferència a la font serif predeterminada genèrica, si no es disposa de la Palatino

ni de la Georgia, el sistema tornarà a la seva font serif per defecte.

5) Com a mètode de seguretat el valor font-family sempre hauria d’aca-

bar amb el nom genèric apropiat tal com s’ha explicat anteriorment. A la

figura 1 es mostren les tipografies que es fan servir en les famílies genèri-

ques a MacOS 10.5.

Figura 1

Les tipografies “genèriques” predeterminades de MacOS 10.5 tal comqueden representades a 24 píxels al Safari 3.1.

A la recomanació del CSS 2.1 s’enumeren diverses tipografies més que poden

aplicar-se a cada família genèrica*.

Demostració 2

Ara que la mida del text és previsible, volem optimitzar les tipografies utilitza-

des. El millor és aplicar una tipografia sans serif al títol perquè sigui de fàcil

lectura i al text en si una tipografia serif.

Arxiu font de: “Full d’estil de la demostració 2”http://dev.opera.com/articles/view/29-text-styling-with-css/text_02.css

3.2.10. font-style, font-variant i font-weight: canviar els

detalls

La propietat font-style manipula la cursiva sense haver de fer servir l’ele-

ment i; els seus tres valors vàlids són italic, oblique i normal.

* http://www.w3.org/TR/CSS21/fonts.html#generic-font-families

body { font-family: Palatino,’Palatino Linotype’,Georgia,

sans-serif; }

h1 { font-family: Helvetica,Arial,sans-serif; }

blockquote { font-family: Helvetica,Arial,sans-serif; }


Els valors italic i oblique proporcionen resultats funcionalment idèntics a

les versions més recents de tots els navegadors web del mercat general, encara

que hi ha una diferència tècnica significativa entre els dos estils tal com s’ex-

plica al glossari que acompanya aquesta assignatura.

Per què cal fer servir la propietat font-style quan els elements “em” i “i”

ja semblen prou adients?

Cadascun d’aquests elements té usos específics: el de l’em és proporcionar èm-

fasi i el de i ser l’alternativa de <span style=“font-style: italic;”>…

</span> en els pocs casos que el seu ús seria poc adequat. En general, <i> no

és gens adequat perquè és un element presentacional, però hi ha determinades

parts del text central que s’escriuen en cursiva per convenció, com ara els títols

dels llibres (encara que això és discutible, ja que hi ha qui creu que l’element

cite és més adequat per als títols de llibre, així que feu el que us sembli ade-

quat). <em> acostuma a ser més apropiat perquè especifica l’èmfasi com a con-

cepte en lloc de com la cursiva com a estil específic: l’aparença real de l’èmfasi

pot variar entre diferents navegadors.

Hi ha situacions en què l’ús d’em i el seu germà strong poden requerir un

punt de vista diferent. Per exemple, suposem que voleu donar èmfasi al text

fent-lo més gran. El que caldria fer per donar un bon èmfasi seria afegir cursi-

va, la qual cosa donaria lloc a regles com les següents:

Les regles del full d’estil precedent donarien uns resultats semblants als se-

güents:

Demostració 3

Al text de demostració no hi ha paraules ni fragments en cursiva, i les atri-

bucions ja contenen la cursiva necessària gràcies a l’ús de l’element cite.

em {

font-size: large;

font-style: normal;

}

strong {

font-size: large;

font-weight: normal;

font-style: italic;

}


Tenint en compte la manca d’opcions, el títol és el millor candidat per estar

en cursiva.

Arxiu font de: “Exemple amb títol en cursiva”http://dev.opera.com/articles/view/29-text-styling-with-css/copy_example4.html


3.2.11. font-variant com a eina per ressaltar passatges curts

La propietat font-variant té dos valors possibles, small-caps i normal.

Alguns dissenyadors utilitzen “small caps” o versaletes per ressaltar la frase ini-

cial d’un text llarg o per donar èmfasi a la indicació d’una cita, com ara:

ABANDONEU TOTA ESPERANÇA ELS QUI ACÍ ENTREU.

Demostració 4

Arxiu font de: “Exemple amb la frase inicial en versaletes”http://dev.opera.com/articles/view/29-text-styling-with-css/copy_example5.html


3.2.12. font-weight: negreta i la manca d’aquesta

La propietat font-weight (pes de la font) permet modificar el nivell de ne-

greta de qualsevol fragment de text al qual s’apliqui.

Els valors habituals de la propietat font-weight són normal i bold. Mentre

que la recomanació CSS 2.1 proporciona diversos valors*, l’estat actual de

compatibilitat amb la tipografia web fa que els altres valors no tinguin valor

funcional tret de per als usuaris especialistes.

Demostració 5

Posar el nom d’un autor en negreta és una tècnica de disseny que s’acostuma

a fer servir en les publicacions periòdiques, però que encara encaixa en diver-

ses situacions del web.

h1 { font-style: italic; }

.sectionNote { font-style: normal; }

opening { font-variant: small-caps; }

* http://www.w3.org/TR/CSS21/fonts.html#font-boldness


Arxiu font de: “Exemple amb el nom de l’autor en negreta”http://dev.opera.com/articles/view/29-text-styling-with-css/copy_example6.html


3.2.13. La propietat abreujada font

Moltes propietats de text poden proporcionar-se en el valor per a una única

propietat, si cal, d’una manera semblant a les propietats de fons.

A continuació es mostra un exemple de regla abreujada de font:

Per obtenir els millors resultats, el valor pel qual s’aporta aquesta propietat

hauria d’incloure els valors pretesos per a totes les propietats individuals se-

güents en l’ordre següent, separades amb espais:

1) font-style

2) font-variant

3) font-weight

4) font-size, seguit, si cal, d’un guionet i del valor de line-height (vegeu

a continuació)

5) font-family, que en aquest cas també pot ser una paraula reservada que

especifica una font de sistema; els valors múltiples haurien d’estar separats per

comes, però no per espais

Taula 3. Valors de paraula clau acceptats per a les propietats que s’han tractat en aquest apartat

author { font-weight: bold; }

h1 { font: italic normal bold x-large/1.167em Helvetica,Arial,sans-serif; }

Propietat Valors

font-family cursive, fantasy, monospace, sans-serif, serif

font-size xx-small, x-small, small, medium, large, x-large, xx-large

font-style italic, normal, oblique

font-variant normal, small-caps

font-weight bold, normal

line-height normal

text-align center, justify, left, right

text-decoration line-through, none, overline, underline

text-transform capitalize, lowercase, none, uppercase

white-space normal, nowrap, pre, pre-line, pre-wrap


3.3. Les propietats de text i alineació de CSS.

Modificar la composició

Un especialista en estils que treballi amb lletres i paraules tracta amb detalls:

Línies, corbes, punts, píxels i altres parts cel·lulars d’un disseny. Un disseny,

però, és tot un conjunt; té components més grans que es destaquen mitjan-

çant el control de la composició principalment a través del model de disposi-

ció de CSS. A més d’aquest model de disposició, CSS també implementa

propietats de text i alineació que afecten la composició. La resta d’aquest apar-

tat tracta sobre aquestes propietats.

3.3.1. Alineació i justificació del text

Tal com passa amb els entorns de processament de text, la propietat text-align

accepta quatre valors de justificació: left, right, center, i justify. L’úl-

tim d’aquests proporciona justificació completa: Marges de text visibles que

són consistents tant per l’esquerra com per la dreta d’un bloc de text.

Justificació adequada del text escrit en alfabets occidentals

La millor manera de fer servir les diferents alineacions disponibles és així:

• La justificació esquerra és més adequada per a fragments de text llargs.

• La justificació dreta és més adequada per a la columna de l’esquerra del tot

de taules de dades i disposicions de columna múltiple. Quan la columna adja-

cent es deixa justificada i col·locada a l’altra banda d’un canal adequadament

ample, el resultat és millorar la llegibilitat d’ambdues columnes.

• La justificació completa funciona bé per a blocs petits com ara cites de

blocs i textos d’exemple. Quan es fa servir en fragments llargs de text d’am-

plada òptima amb marges amples, la justificació completa també millora la

coherència de la maquetació.

• El centrat s’acostuma a fer servir per als elements d’interfície i llistes en sè-

rie com les que es troben als peus de pàgina.

Demostració 6

Com que la demostració es basa en un fragment de text de ficció extret d’un

llibre, per què no li apliquem la justificació?

p { text-align: justify; }

blockquote p { text-align: left; }


Arxiu font de: “Pàgina amb justificació completa del text central del fragment”http://dev.opera.com/articles/view/29-text-styling-with-css/copy_example7.html


3.3.2. Modificar l’espaiat: Les propietats letter-spacing

i word-spacing

El mateix nom ja ho diu tot, és a dir, aquestes propietats permeten modificar

la quantitat d’espai en blanc entre lletres i paraules, respectivament.

L’ús més habitual de letter-spacing (espaiat de lletra) és per donar un èmfasi

subtil semblant a l’efecte que proporciona font-variant: small-caps; tam-

bé pot fer-se servir per modificar subtilment la composició d’elements d’interfície.

La propietat word-spacing (espaiat de paraules) és millor fer-la servir per mo-

dificar deliberadament la quantitat de paraules que és probable que apareguin

en una única línia de text. Per exemple, pot fer-se servir si teniu un bloc de

text de l’amplada habitual però de mida de font atípica.

Quan s’imprimeixi, l’espaiat de lletres i el de paraules també s’apliquen ad hoc per

evitar errors de composició, però al web aquesta tècnica té una utilitat limitada.

A més dels valors d’unitat, aquestes propietats accepten el valor normal.

Utilitzar unitats em per a un bon control

Quan es canvia l’espaiat entre lletres d’un text, un petit espai significa una

gran distància; l’espaiat de lletra predeterminat acostuma a ser entre una de-

sena i una vintena part d’un em, de manera que els valors de letter-spacing

que superin més del doble o la meitat del valor predeterminat poden acabar

fent que el text sigui illegible.

Demostració 7

Al text senyal del qual parlem cap al final li aniria bé una mica d’èmfasi sub-

til… i com que la cita introductòria té una mida més gran, pot millorar-se mit-

jançant l’espaiat entre paraules.

Arxiu font de: “Pàgina amb espaiat entre lletres a les salutacions proposades en el penúltim paràgrafdel fragment”http://dev.opera.com/articles/view/29-text-styling-with-css/copy_example8.html


q { letter-spacing: .143em; }

.pullQuote { word-spacing: .143em; }


3.3.3. Sagnar les primeres línies: la propietat text-indent

La propietat text-indent (sagnat de text) permet sagnar els paràgrafs de la ma-

teixa manera que en el paper imprès. A més, aquesta propietat i el fet que accepti

valors negatius permet tot un seguit de tècniques de maquetació avançades.

Els valors que accepta aquesta propietat són els mateixos que els que accepta

font-size, a més de normal.

Demostració 8

Per la mateixa raó que el fragment estava totalment justificat, potser hauria de

tenir sagnat a totes les primeres línies dels paràgrafs.

Arxiu font de: “Pàgina amb sagnat inicial als paràgrafs del text central”http://dev.opera.com/articles/view/29-text-styling-with-css/copy_example9.html


3.3.4. Majúscules: La propietat text-transform

De la mateixa manera que la propietat font-variant proporciona accés a les lle-

tres versaletes, la propietat text-transform s’ocupa específicament de les ma-

júscules. Els valors que permet cobreixen totes les majúscules, minúscules o tot el

text incial completament en majúscules. Vegeu la llista dels valors acceptats a la

taula 3.

Demostració 9

Arxiu font de: “Pàgina amb destacat l’autor del fragment en versaletes”http://dev.opera.com/articles/view/29-text-styling-with-css/copy_example10.html


3.3.5. Aplicar estils als enllaços i mostrar les eliminacions:

La propietat text-decoration

Aquesta propietat fa possible que es puguin posa línies per sobre, per sota i en-

mig del text. El seu ús més habitual és per manipular el subratllat per defecte

p { text-indent: 1.429em; }

blockquote p { text-indent: 0; }

author { text-transform: uppercase; }


dels enllaços, encara que a les wikis o en texts satírics i d’altres entorns també

va molt bé per ratllar paraules. En aquests casos, es fan server els elements ins

(insertar) i del (eliminar), que ofereixen estils equivalents a:

Fins i tot sense regles de full d’estil fetes a mida, ins i del apliquen estil d’eti-

quetatge de la següent manera:

Mark Twain Benjamin Disraeli és famós per les seves dites agudes, com ara “hi

ha mentides, grans mentides i estadística”.

Marges, no subratllats, amb acronym i abbr

Alguns dissenyadors acostumen a modificar l’aspecte dels elements acronym

i abbr perquè apareguin amb un subratllat que a primera vista sembla una lí-

nia de punts. No obstant això, en realitat aquest efecte s’aconsegueix amb un

valor de border-bottom. (Recordeu que alguns navegadors ho proporcionen

automàticament, però d’altres no, com ara IE 6.)

Demostració 10

Arxiu font de: “Pàgina amb eliminació del subratllat de l’enllaç a Gutenberg E-Text del text de mos-tra”http://dev.opera.com/articles/view/29-text-styling-with-css/copy_example11.html

Arxiu font de: “full d’estil de la demostració 10”http://dev.opera.com/articles/view/29-text-styling-with-css/text_10.css

3.3.6. Ajust de l’espai interlineal i line-height

És ben sabut que disposar espai en blanc entre línies tendeix a augmentar la

seva facilitat de lectura perquè l’espai addicional garanteix que les astes ascen-

dents i les astes descendents (vegeu la figura 2 per trobar una explicació) en

línies adjacents no competiran per l’atenció visual.

ins {

text-decoration: underline;

}

del {

text-decoration: line-through;

}

source a { text-decoration: none; }


Figura 2

Les astes ascendents són la part de les lletres que sobresurt de la línia mitjana del text i les astes descendents són la part de leslletres que s’estén per sota de la línia base sobre la que descansa el text.

Existeix una petita relació entre el font-size (la mida de la font) d’un ele-

ment i el seu line-height (interlineat), però per defecte, tots els agents

d’usuari insereixen una mica d’espai interlineal a cada línia de text, normal-

ment un 10-15% de l’alçada de les lletres. Com que aquesta quantitat per de-

fecte canvia d’una tipografia a una altra, la propietat line-height (interlineat)

accepta un valor de normal a més de valors numèrics.

També cal mencionar que, al contrari que la majoria de propietats CSS, line-

height (interlineat) accepta valors numèrics sense unitats, que després es re-

presenten com una proporció del valor bàsic predeterminat.

Demostració 11

S’ha parlat molt de la relació entre espai interlineal i llegibilitat, així que aquí

tenim la prova.

Arxiu font de: “Pàgina amb aplicació d’una quantitat adequada d’interlineat a un fragment de text”http://dev.opera.com/articles/view/29-text-styling-with-css/copy_example12.html


3.3.7. Suplantar pre i br: La propietat white-space

Estrictament parlant, els salts de línia forçats són un element de presentació,

encara que hi ha moltes circumstàncies en què són un element desitjable per

al disseny d’un lloc. Juntament amb el costum dels navegadors de tallar les lí-

nies en espais arbitraris, exercir el nivell de control desitjat únicament amb

l’etiquetatge pot ser complicat.

L’element pre serveix per fer front a aquests reptes, tot i que presenta els seus

propis reptes, raó per la qual CSS ofereix la propietat white-space (espai en

blanc). Els valors que accepta, que s’enumeren a la Taula 3, permeten al disse-

p { line-height: 1.5; }

attribution { line-height: 1.5; }


nyador escollir si el navegador ha de representar els espais en blanc i els salts

de línia que s’han afegit a l’etiquetatge d’origen o que s’han inserit com a con-

tingut generat.

La recomanació CSS 2.1 ofereix un nombre exhaustiu de detalls sobre la im-

plementació i ús recomanats de la propietat white-space (espai en blanc).

Resum

Un bon disseny de lloc web requereix un nivell elevat d’atenció al detall i

d’ajust de la interacció adequada de nombrosos elements, un dels quals és la

tipografia.

La combinació de propietats de font i text que ofereixen les implementacions

de CSS dels navegadors actuals gairebé permeten el nivell de control màxim

sobre la tipografia que permet el maquinari i depèn del dissenyador del web

aprendre a fer-les servir com cal. Quan aquestes propietats es fan servir bé, es

produeixen llocs web que poden aspirar a apropar-se als estàndards de qualitat

de la tipografia que normalment s’associen al mitjà imprès que s’ha anat des-

envolupant durant segles, malgrat que el web encara no fa ni una generació

que existeix.

Preguntes de repàs


1. Digueu tres elements HTML que no siguin b ni i, que per defecte es repre-

sentin amb fonts variants. Feu una descripció breu del propòsit original dels

elements que heu mencionat i expliqueu com l’ús d’una font variant és apro-

piat per als propòsits d’aquests elements.

2. Comproveu de forma subjectiva la facilitat de lectura d’un fragment d’un

text llarg qualsevol amb diferents valors de line-height (interlineat). Resu-

miu breument els resultats.

3. Apliqueu text-transform: uppercase; a un únic paràgraf del frag-

ment utilitzat en l’exercici anterior i repetiu la prova subjectiva de llegibilitat.

Resumiu breument els resultats.

4. Expliqueu breument els avantatges i desavantatges de l’antialiàsing fent

servir el repàs de la tipografia d’aquest apartat com exemple.

5. Descriviu l’ordre en què han d’especificar-se les tipografies en un valor de

font-family.


6. En un cert entorn, escolliu com a mínim tres propietats de les descrites en

aquest apartat i digueu-ne com a mínim un valor vàlid (apart del predetermi-

nat) de cadascuna. Demostreu o descriviu els resultats de l’ús d’aquestes pare-

lles de propietats i valors en un full d’estil.

7. Creeu un element, afegiu-li text central i assigneu-li un valor de font-

size (mida de la font) de 9px. Obriu el document que conté aquest element

amb Internet Explorer i passeu d’una mida de font a una altra de les que es

proporcionen al menú Visualitza → Mida del text. Avalueu la conveniència

d’aquests resultats en llocs web amb grans quantitats de visitants de mitjana

edat i d’edat avançada.

Lectures complementàries

Bos, Bert, et al. 2007. Cascading style sheets level 2 revision 1 (CSS 2.1) specifica-

tion. World Wide Web Consortium. [Data de consulta: 28 de maig de 2008.]

http://www.w3.org/TR/2007/CR-CSS21-20070719

Chaparro, Barbara, et al. 2004. Reading online text: a comparison of four white

space layouts. Wichita State University Software Usablity Research Laboratory

Usability News. [Data de consulta: 28 de maig de 2008.]

http://www.surl.org/usabilitynews/62/whitespace.asp

Dean, Paul. 2008. Extreme type terminology. I Love Typography, the Typo-

graphy Blog. [Data de consulta: 28 de maig de 2008.]

http://ilovetypography.com/2008/03/21/extreme-type-terminology/

Horton, Sarah, i Lynch, Patrick. 2002. Web style guide: basic principles for crea-

ting web sites, 2nd edition. New Haven, Conn.: Yale University Press.


Roselli, Adrian. 2002. A simple character entity chart. Evolt.org. [Data de consul-

ta: 28 de maig de 2008.]

http://www.evolt.org/article/A_Simple_Character_Entity_Chart/17/21234/


4. El model de composició de CSS: caixes, vores, marges, farcitBen Henick

A primera vista, el model de composició de CSS és molt senzill. Les caixes, les

vores i els marges són elements força simples i la sintaxi de CSS ofereix una

forma fàcil de descriure les seves característiques.

Tanmateix, els motors de representació dels navegadors segueixen una llista

de regles descrites a la Recomanació CSS 2.1 i unes quantes de pròpies. Per

aquesta raó, hi ha molts detalls que cal comprendre abans de poder afegir tèc-

niques avançades al repertori d’un especialista en estils.

En aquest apartat es presenten les propietats de CSS que manipulen la compo-

sició dels elements HTML com ara les vores, els marges i molts més. També es

tracten algunes de les regles mencionades abans. En pròxims apartats es par-

larà de la disposició de columnes avançada i les tècniques de graella, i es trac-

tarà amb més detall la composició dels formularis, els elements flotants,

distància i posicionament.

Descarregueu els exemples a: “article30_examples.zip”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/article30_examples.zip

4.1. Canviar la composició: els marges, les vores i el farcit de CSS

Molts elements d’HTML, com ara els elements div i els títols, es representen

per defecte de forma que ocupin tota l’amplada del llenç del navegador i for-

cin un salt de línea terminal, de manera que una sèrie d’aquests elements es

representaria com una pila de principi a fi sobre el llenç del document.

Tanmateix, els elements d’HTML i els estils que el navegador acostuma a as-

signar-los no són adients per a la gamma completa de casos d’ús que es dema-

na als desenvolupadors que tinguin en compte quan fan la seva feina. La

manera en què CSS i HTML es combinen s’ha ajustat a una relació d’“omplir

els forats” de manera que les classes i ids puguin afegir significat semàntic

a l’etiquetatge mentre que les regles de full d’estil poden canviar la composició

i la presentació del contingut de forma precisa, potser fins i tot cancel·lant

gran part dels estils predeterminats del navegador.

Notaa

Per tot l’apartat trobareu molts exemples de codi enllaçats per demos-

trar les tècniques de les quals es parla, però si voleu treballar amb el codi

al vostre ordinador, podeu descarregar-vos tots els exemples de codi.


El control acurat de l’espai en blanc és una de les eines més importants del dis-

senyador i, segons l’autor d’aquestes línies, la més important de totes. No obs-

tant això, el grau de control de l’espai en blanc que aporta un valor de

producció elevat al disseny d’un lloc no és present als fulls d’estil predetermi-

nats dels navegadors, la qual cosa significa que els especialistes en estils acos-

tumen a fer servir sovint els marges, les vores, el farcit i d’altres propietats de

CSS que s’expliquen en aquest apartat.

Els marges (margin), les vores (border) i el farcit (padding) es disposen tal com

es mostra a la figura 1.

Figura 1

Representació explícita de les diferents parts d’una caixa d’elements, amb les respectives etiquetes de les propietats de CSSpertinents.

4.1.1. Col·locar espai en blanc al voltant d’un element: les

propietats margin-top, margin-right, margin-bottom,

margin-left i margin

Els marges poden especificar-se de manera individual o en una regla abreuja-

da. A més, la regla abreujada segueix permetent controlar cada una de les vores

que envolten un objecte. Els valors vàlids acostumen a especificar-se en uni-

tats px o em (píxels o ems). En els fulls d’estil específics d’impressió poden fer-

se servir les unitats in, cm, o pt (polzades, centímetres o punts).

aEn tots els casos, % (percentatge) és un valor vàlid, però cal fer-lo servir amb

compte perquè aquests valors es calculen com una proporció de l’amplada de

l’element pare i una previsió no prou acurada de valors podria tenir conse-

qüències no desitjades. Aquesta dificultat s’explica amb més detall quan es

parla del model de caixa de CSS.

Podeu veure l’explicació del model de caixa de CSS en el subapartat 3.2 d’aquest mòdul.


aA tots els elements en línia tret de les imatges els hi manquen marges i no ac-

cepten valors de marge.

Marges automàtics

Depenent de les circumstàncies, la provisió d’un valor auto ordena al navega-

dor que representi un marge segons el valor proporcionat al seu propi full d’es-

til. Tanmateix, quan s’aplica un marge així a un element amb una amplada

significativa, un marge auto provoca que tot l’espai disponible es representi

com espai en blanc.

Amb la regla següent:

... un element de bloc de la classe narrowWaisted (classe cintura estreta) es

centrarà al mig del llenç disponible.

... o el marge dret d’un element aplicable pot ajustar-se a un valor relativament

petit, mentre que al marge esquerre se li assigna un valor auto.

Quan es fa això, un element així es representarà gairebé tocant a la dreta.

Marges negatius

A totes les propietats de marges se’ls poden assignar valors negatius. En aquest

cas, un marge adjacent pot ser “cancel·lat” a qualsevol nivell. Si s’aplica un va-

lor prou negatiu a un element prou gran, l’element adjacent afectat pot acabar

quedant per sota de l’altre.

Com a exemple, posem per cas els següents elements senzills div:

Quan se li apliquen estils amb el CSS següent:

A la taula 2 que es mostra en el subapartat 4.1 hi ha una llista dels elements en línia.

.narrowWaisted {

width: 16.667em;

margin: 1em auto 1em auto;

}

<div id=“header”><h1>Lovely header</h1></div>

<div id=“content”><p>Overlapping text is entirely unreadable</p></div>

body {background-color:white font-family:Geneva, Arial, Helvetica, sans-serif;}

#header { background-color:yellow }

h1 { color:red; font-size:2em; }


... es crea el que es pot veure a la figura 2:

Figura 2

Els dos elements del nostre senzill exemple. No té res d’especial.

Arxiu font: “Negativemargins1 example”http://devfiles.myopera.com/articles/468/negativemargins1.html

Però ara ve la part interessant. Ara afegirem un marge negatiu força gran a so-

bre de l’element inferior mitjançant la regla següent:

Això provoca l’efecte visual de canviar l’element de manera que es superposi

amb el títol tal com es pot veure a la figura 3.

Figura 3

Quan se li aplica un marge negatiu, l’element inferior passa a dalt i es superposa ambel títol.

Arxiu font: “Negativemargins2 example”http://devfiles.myopera.com/articles/468/negativemargins2.html

Col·lapse dels marges

En els casos en què dos elements de bloc adjacents i semblants comparteixen

marges que són més grans que zero, només s’aplicarà el marge més gran dels

dos. Per exemple, posem per cas la regla següent:

Si un document que inclogui aquesta regla d’estil es representa de manera li-

teral, el marge final entre els dos paràgrafs seguits seria 2.5 em, és a dir, la suma

del marge inferior del paràgraf 1 (1,5 em) i el marge superior del paràgraf 2

(1 em). Això no obstant, a causa de l’aplicació de marges col·lapsats, el marge

entre ells és només de 1.5 em.

Les llistes i els títols són peculiars entre els elements de bloc, de manera que

els seus marges no es col·lapsaran sobre els marges dels altres elements de bloc.

#content {margin-top:-3em;}

p {

margin: 1em auto 1.5em auto;

}


Demostració 1

A l’apartat anterior, d’aplicació d’estils als texts, va fer-se la tipografia de la secció

introductòria d’una història de F. Scott Fitzgerald amb la majoria d’eines de CSS.

De cara a la demostració d’aquest apartat, es fa servir aquella mateixa pàgina amb

alguns petits canvis (principalment, l’addició d’un element contenidor al voltant

de tot el text central). Els estils del text no canvien, però s’han eliminat els pocs

estils de composició que s’havien aplicat a aquella demostració.

Per començar, s’afegiran marges a tots els elements que els necessitin.

Arxiu font de: “Exemple amb només el mínim d’estils”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/demo_rev0.html

Arxiu font de: “Full d’estil d’inici”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/layout_00.css

Arxiu font de: “Exemple amb marges nous a body, títol, text destacat, contenidor de documents iparàgrafs”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/demo_rev1.html

Arxiu font de: “Full d’estil de la demostració 1”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/layout_01.css

4.1.2. Afegir una vora a un element: propietats de vora

Hi ha una propietat de border (vora) abreujada, però només és útil quan es

vol proporcionar una vora completa i consistent al voltant dels quatre costats

d’un element. També és possible establir el pes (amplada), estil i color de qual-

sevol de les quatre vores d’un element mitjançant qualsevol combinació sig-

nificativa de les propietats següents:

• border-width

• border-style

• border-color

• border-top

• border-top-width

• border-top-style

• border-top-color

• border-right

• border-right-width

• border-right-style

• border-right-color

• border-bottom

body { margin: 0; }

#main { margin: 0 auto 0 auto; }

h1 { margin: 0 0 1em 0; }

.pullQuote { margin: auto 0 1em 1em; }

p { margin: 0; }

.attribution { margin: 0 0 1.5em 0; }


• border-bottom-width

• border-bottom-style

• border-bottom-color

• border-left

• border-left-width

• border-left-style

• border-left-color

Les propietats border-width

Aquestes propietats es comporten exactament com seria d’esperar: assignen

pes explícit a una o més vores.

La propietat abreujada border-width (amplada de vora) accepta valors de la ma-

teixa notació com la propietat abreujada de margin (marge), però no accepta va-

lors percentuals. Pot ser que en el futur hagueu de redactar una regla com la

següent:

Les propietats border-style

Figura 4

Els vuit estils de vora més habituals.

td {

border-width: 1px 0 0 1px;

}


Les propietats border-style (estil de vora) solen acceptar qualsevol dels va-

lors següents:

• dashed. La longitud de les seccions de línia i la quantitat d’espai en blanc

entre elles es determina mitjançant el navegador.

• dotted. La quantitat d’espai en blanc entre els punts (que poden tenir

qualsevol forma amb una proporció d’1) la determina el navegador.

• double. L’amplada proporcionada es dividirà en terços i es representarà

per l’ordre ple-negatiu-ple.

• groove. Es representarà un outset (immediatament a dins i a tocar d’un

inset.

• inset. A la vora se li aplicarà una ombra perquè sembli que l’element al

qual s’aplica està incrustat al llenç.

• none. Equivalent a especificar una -width (amplada) de zero.

• outset. A la vora se li aplicarà una ombra perquè sembli que l’element al

qual s’aplica sobresurt del llenç.

• ridge. Es representarà un inset immediatament a dins i a tocar d’un

outset.

• solid. La vora és una línia contínua sense ombra.

Quan es fa servir la propietat abreujada border-style (estil de vora), pot ac-

ceptar fins a quatre valors que s’apliquen de la mateixa manera que els valors

abreujats margin (marge).

La pràctica d’enfosquir una vora (en lloc d’ometre-la) es controla amb les pro-

pietats -color.

Les propietats border-color

aPer acabar, és possible establir qualsevol color a qualsevol vora concreta, tant

amb una única propietat com les que s’acaben d’enumerar, com amb la pro-

pietat abreujada border-color (color de vora).

De la mateixa manera que background-color, border-color pot adoptar

un valor de transparent. Això pot ser útil per als casos límit que necessiten

una composició consistent però no un ús consistent de les vores.

La propietat abreujada border i els seus quatre cosins, amb més detall

Al contrari que les diverses propietats de vora -width, -style i –color,

aquestes cinc propietats permeten definir les tres característiques de les quatre

Consulteu l’explicació de la propietat abreujada de margin (marge) en el subapartat 1.4 per saber més detalls sobre els resultats de proporcionar menys de quatre valors.


vores d’un objecte o de qualsevol vora concreta en qualsevol moment. Els va-

lors abreujats de border (etc.) inclouen alguna o totes les propietats d’ampla-

da, estil i color que s’apliquen a una vora; l’única limitació és que s’ha de fer

referència a un únic costat qualsevol d’un element o als quatre a la vegada.

Tingueu en compte la següent regla de border:

Quan s’omet un valor d’una regla abreujada de border, l’element representat

mostrarà un resultat per defecte:

• L’amplada de la vora la determinarà el navegador.

• L’estil de la vora serà solid.

• El color de la vora serà idèntic al color aplicat a l’element en qüestió.

Crear regles: la raó de ser de cinc propietats abreujades de vora en comptes

d’una sola

Les “regles” que es mencionen aquí són línies traçades sobre una composició,

i no directives que calgui seguir. Aquestes línies milloren el contrast entre un

element i l’espai que té al voltant i, en la majoria de casos, contribueixen a cre-

ar la il·lusió de profunditat en una composició. Aquest últim resultat s’exem-

plifica per l’existència dels estils de vora inset i outset.

Si bé aquests mateixos efectes poden aconseguir-se col·locant vores al voltant

dels quatre costats d’un element, l’habilitat per traçar línies definides amb pre-

cisió en una composició permet al dissenyador assolir un control considerable

sobre els detalls.

… I per què tantes propietats? Només són vores, no?

aQuan es crea una composició que exigeix molta perícia d’un expert en estils,

sempre hi ha la necessitat de tenir en compte casos límit.

A causa de la manera en què s’executen els dissenys dels llocs, us trobareu

molts casos en els quals algun element poden arribar a tenir propietats estruc-

turals semblants a d’altres elements d’un document però que tinguin requisits

#borderShorthandExample {

border: 2px outset rgb(160,0,0);

padding: .857em;

background-color: rgb(255.224.224);

}

Vegeu els casos límit, en l’apartat 1 sobre els marges.


de presentació diferents. En aquests casos, té tot el sentit del món escriure una

regla per al cas més comú i regles addicionals per a cadascun dels casos límit.

Per aquest motiu existeixen els valors auto (automàtic) i inherit (heretar):

per utilitzar un estil predeterminat com a cas límit.

a

En el cas de les vores, els casos límit pot ser que requereixin la modificació

d’una sola característica d’una vora d’un únic costat d’un element, i quan s’és

prou savi per seguir el principi KISS, normalment el millor és canviar única-

ment els detalls que siguin estrictament necessaris.

Demostració 2

Determinades seccions del document haurien de decorar-se amb regles i vores.

Arxiu font de: “Exemple amb una regla inferior al títol i una vora al voltant del text destacat”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/demo_rev2.html


4.1.3. Quan només amb els marges no n’hi ha prou: propietats

padding

Trobareu elements amb colors de fons de tons secundaris o destacats que ne-

cessiten canals entre el contingut i els marges. També pot ser que necessiteu

incloure espai entre les vores i el text que hi ha a prop.

aEn aquests casos i en molts d’altres us seran molt útils les propietats padding

(farcit), padding-top (farcit superior), padding-right (farcit dreta),

padding-bottom (farcit inferior) i padding-left (farcit esquerre). Aques-

tes propietats insereixen espai negatiu entre els marges o vores d’un element i

el seu contingut. Vegeu la figura 1 anterior com a clar exemple de la relació

entre marges, vores i farcit.

Aquestes propietats es comporten exactament igual que les propietats de mar-

ge però amb les excepcions següents:

a• Els valors auto són funcionalment inútils en referències a les propietats de

farcit.

• Els valors negatius de farcit són invàlids.

• El farcit mai no es col·lapsa.

• Els valors de marge no s’apliquen als elements en línia, però els valors de

farcit sí.

Vegeu el principi KISS en el subapartat 1.4 d’aquest mòdul.

h1 { border-bottom: 1px solid rgb(153,153,153); }

.pullQuote { border: 1px solid rgb(153,153,153); }

Podeu veure la figura 1 al subapartat 6.1 d’aquest mòdul.

Podeu veure les propietats de marge en el subapartat 6.1 d’aquest mòdul.


Demostració 3

Els canals haurien d’aplicar-se als elements als quals ja s’ha aplicat vores prè-

viament.

Arxiu font de: “Exemple de inserció de canals adjacents a les vores prèviament aplicades al títol i altext destacat”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/demo_rev3.html


4.2. Treballar amb l’amplada i alçada dels elements

aPoden modificar-se les dimensions de la majoria d’elements.

Les propietats CSS utilitzades per modificar les dimensions dels elements són:

width, height, min-width, max-width, min-height i max-height. Aques-

tes propietats poden separar-se de (o enllaçar-se a) les dimensions del contin-

gut dels elements amb la propietat overflow.

També hi ha una propietat clip (retall) que amaga parts d’un element a dins

dels marges. Tanmateix, no en parlarem en aquest apartat a causa de les seves

limitades possibilitats d’ús.

4.2.1. Conceptes bàsics de width i height

En general, width i height produeixen exactament els resultats que caldria

esperar. Això no obstant, el seu ús implica algunes notes importants.

a• width i height no poden aplicar-se a elements inline… Hi ha diversos

elements (com ara span, strong i em) que ignoren l’aplicació dels valors

width i height en circumstàncies normals.

• … tret de les imatges, a les quals se’ls pot assignar width i height en-

cara que siguin elements en línia. La Recomanació CSS 2.1 parla de les

imatges com a elements “substituïts”, la qual cosa significa que els navega-

dors sempre haurien de tractar-les com si tinguessin dimensions estàtiques.

Per aquest motiu, aquestes dimensions poden modificar-se arbitràriament.

a• width i height només són dues de les propietats que poden afectar les

dimensions funcionals d’un element. Per tant, és fàcil trobar-se en situa-

cions en què un element sigui massa petit (normalment massa estret) per

contenir el contingut com caldria, la qual cosa provoca errors.

body { padding: 0; }

h1 { padding: .5em 0 .5em 0; }

.pullQuote { padding: .5em; }

Anteriorment en el subapartat 6.1.1, quan parlàvem dels marges auto, ja s’ha demostrat que la majoria d’elements es poden modificar.

Vegeu una llista dels elements que ignoren l’aplicació dels valors width i height en el subapartat 6.4.1 d’aquest mòdul.

Vegeu com les propietats poden afectar les dimensions funcionals d’un element en el subapartat 6.3 d’aquest mòdul, que tracta sobre el model de caixa de CSS.


• Els errors de representació de Microsoft Internet Explorer (IE) fan neces-

sari especificar les parelles de valor/propietat de width o height per a al-

guns elements. Hi ha algunes peculiaritats del motor de representació de l’IE

que només poden resoldre’s amb la força bruta. La majoria d’aquestes peculi-

aritats són ben conegudes i s’eliminaran d’IE 8, però fins que aquesta versió

substitueixi els seus predecessors al mercat, aquest problema seguirà sent un

cas de prova inevitable. PositionIsEverything.net* i la wiki CSS-Discuss** ofe-

reixen molta informació sobre aquest assumpte i tècniques per resoldre-ho.

• De tant en tant, els algoritmes d’arrodoniment provoquen diferències

fora d’especificació en els navegadors que mostren els continguts amb

mitjans de visualització LCD, LED o CRT (type=“screen”). El tipus de

mitjà screen (pantalla) requereix que totes les unitats es converteixin en

mesures de píxels, de manera que la imatge pot quedar diferent en cada na-

vegador.

4.2.2. min-width, max-width, min-height i max-height

A vegades us trobareu situacions en què necessiteu limitar la mida d’un ele-

ment, generalment per garantir que una columna de mida proporcional con-

servi sempre una amplada llegible. Les diverses propietats min- i max-

responen a aquest requeriment. De la mateixa manera que amb width i

height, els resultats que poden esperar-se de fer servir aquestes propietats són

bastant previsibles en realitat.

Tanmateix, segons la meva experiència, aquestes propietats tenen un ús limi-

tat (encara que altres experts no hi estiguin d’acord). Igual que els antics width i

height, poden patir errors d’arrodoniment que poden trametre resultats to-

talment inesperats. I el que és més important, l’IE 6, que a data de juliol del

2008 encara té una àmplia quota de mercat, no els reconeix en absolut.

Demostració 4

Es van col·locar marges auto a l’esquerra i a la dreta del contenidor de la pà-

gina. Ara cal una width perquè els valors de marge tinguin sentit. A més, el

pla és assignar un valor float al text destacat de manera que també obtingui

una amplada.

Arxiu font de: “Exemple de canvi de l’amplada del contenidor del document i del text destacat”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/demo_rev4.html


* http://www.positioniseverything.net/

** http://css-discuss.incutio.com/

#main { width: 42em; }

.pullQuote { width: 14em; }


4.2.3. Desbordament: impedir l’accés al codi o deixar-lo lliure

Quan s’estableix la width o la height d’un element, a vegades és necessari pen-

sar quins resultats són desitjables en cas que els continguts d’aquest element ocu-

pin més espai que el que hi ha disponible. Això és especialment cert per als llocs

amb contingut generat per l’usuari i amb especificacions de composició estrictes.

La propietat overflow (desbordament) i els seus quatre valors vàlids: visible,

hidden, auto i scroll, existeixen per fer front a aquestes circumstàncies. A

la figura 5 pot observar-se l’efecte que tenen quan s’apliquen a un element el

contingut del qual es desborda dels límits de la seva caixa.

Figura 5

Els efectes de la propietat de desbordament de CSS.


Els resultats dels quatre valors d’overflow

• visible (per defecte). El contingut que sobrepassa les dimensions de la

caixa d’un element es mostra sense afectar el flux o els marges dels ele-

ments adjacents. En conseqüència, el contingut d’un element pot semblar

que xoqui amb el contingut d’un element adjacent. En subapartats poste-

riors es parla de les tècniques per evitar aquesta situació i casos especials

provocats per problemes de representació a l’IE.

• hidden. Qualsevol contingut que estigui fora dels límits d’un element que-

darà amagat.

• auto. Les dimensions d’un element estaran limitades igual que quan es fa

servir el valor hidden (amagat), però es crearan les barres de desplaçament

que siguin necessàries perquè el contingut que no càpiga sigui accessible al

visitant.

• scroll. S’incorporaran barres de desplaçament verticals i horitzontals a

l’element encara que no calguin.

4.3. Els models de caixa de CSS: fer que tot encaixi

Ara que ja hem parlat de les propietats fonamentals de composició és el mo-

ment de descobrir com el navegador representa l’amplada d’un element se-

gons les seves propietats de CSS i com evitar que els elements creïn errors a les

composicions. Alguns resultats tindran tot el sentit del món i d’altres sembla-

ran horriblement antiintuitius. Per acabar de complicar-ho tot, de fet hi ha dos

algoritmes de composició que cal tenir en compte: el model especificat pel

World Wide Web Consortium (W3C) a la Recomanació de CSS 2.1 i el que s’ha

fet servir a les versions antigues de l’IE.

4.3.1. Escollir les unitats adients per a la composició

Tal com passa amb el text, la mida dels elements pot ajustar-se amb unitats

proporcionals com % o em, o amb unitats estàtiques com px. Una altra cosa

que cal tenir en compte és que el llenç del navegador sempre té una mida d’un

valor estàtic que no es pot assumir sense utilitzar un script al costat del client

per a recuperar la mida de la finestra o canviar-la, tècniques que s’ajusten ma-

lament a les exigències de l’accessibilitat, usabilitat i portabilitat de mitjans.

La regla principal d’aplicar mides als elements: mesclar unitats

proporcionals i estàtiques amb compte, o no fer-ho

El valor per defecte tant de width com de height és auto, que és una direc-

tiva que significa: “utilitza l’espai disponible”. El resultat dels elements de bloc


és que la seva width computada ocupa tot aquest espai. Pel que fa a la height,

els elements s’amplien per defecte per incloure el seu contingut.

Si canvieu els valors de width i height heu d’anar amb molt de compte per

garantir que el contingut d’un element encaixi (amb els marges, les vores i el

farcit) a l’amplada que heu especificat. La manera més fàcil de fer-ho és dur a

terme el procés següent:

1) Penseu en l’amplada màxima que pugui tenir la vostra composició tenint en

compte les resolucions de visualització habituals i/o la mida de la tipografia. En el

moment d’escriure aquestes línies, aquesta amplada serà normalment d’uns 800

o 1024 píxels. Quant més vasta sigui la concurrència esperada del vostre lloc, més

probabilitats hi haurà que s’hagi d’escollir el més petit d’aquests valors.

2) Creeu un element contenidor per a tot el document ajustat a una amplada

determinada inferior a la calculada en el pas #1.

3) Feu servir el mateix tipus d’unitat quan establiu les propietats de composi-

ció dels elements a l’element contenidor creat en el pas #2.

Escollir el tipus d’unitat adient per a la composició: avantatges

i desavantatges

Taula 1. Avantatges i desavantatges del percentatge, d’em i d’unitats de píxel que especifiquin propietats de composició

4.3.2. Les components del model de caixa

En realitat el model de caixa només és una sèrie de directives que defineixen

com interactuen entre si les diferents especificacions de composició d’un ele-

ment. Els components que inclou el model de caixa són:

1) llenç de document

2) marges

Unitat Avantatges Desavantatges

em

És més adient per crear quadrícules de composició molt precises en dues dimensions

Quan s’utilitza en relació amb contenidors de documents, possibilita composicions que s’amplien o es redueixen segons la mida del text central

Les dimensions computades dels elements esdevenen fàcilment previsibles

Les unitats fraccionàries pot ser que s’ampliïn o es redueixin amb lleugeres diferències entre navegadors

Per aconseguir els millors resultats, tots els valors de font-size i line-height del document haurien d’establir-se en valors explícits i previsibles

percentatge

És més adient per a composicions totalment flexibles

És més fàcil per crear elements com ara columnes iguals

Per evitar errors, pot ser que calguin elements contenidors addicionals

Pot resultar en elements inacceptablement amples o estrets

Els resultats depenen molt del context

pxOfereix el control més gran sobre la composició

Elimina la majoria de variació en la composició entre navegadors

És el menys adient per a requisits d’accessibilitat i acceptació de tota mena de mitjans

És el més susceptible de causar errors


3) vores

4) farcit

5) amplades i alçades dels elements

6) propietats d’elements fill

L’últim d’aquests elements inclou els altres cinc. Tanmateix, per simplificar,

aquest subapartat es centrarà en les relacions senzilles de pare-fill i es reserva

el tema de les interaccions de models de caixa de múltiples nivells per a futurs

apartats que tractaran amb més detall els punts de la composició de pàgina.

4.3.3. El model de caixa del W3C: tot és acumulable

La regla bàsica és que l’amplada o alçada computada d’un element és igual a:

En molts casos, la width i/o height s’establiran al seu valor predeterminat de

auto, la qual cosa significa que la zona del llenç reservada per al contingut és

igual a:

En una expressió d’aquesta mena, llenç_disponible és un valor discret en

si (tot i que sovint autocomputat), del qual es resten les quantitats correspo-

nents a marges, vores i farcit. Aquest nombre és de gran importància per a

l’amplada dels elements perquè els errors de càlcul d’amplada que cometi un

dissenyador tindran la desagradable conseqüència de provocar que aparegui

una barra de desplaçament horitzontal a la finestra del navegador. Addicional-

ment, els navegadors sempre situen els elements al marge esquerre del llenç

del navegador, ja que, en cas contrari, es desbordarien fora del marge dret de

la finestra del navegador si no s’especifica el contrari.

Fixeu-vos en la següent regla de full d’estil:

margin + border + padding + (width|height)

llenç_disponible − margin − padding − border

#myLayoutColumn {

width: 50em;

margin: 1.5em auto 1.5em auto;

border: .1em;

padding: .9em;

}


Tal com ja hem comentat a l’explicació de les propietats del marge, es pot es-

perar que #myLayoutColumn es centri en el seu element contenidor, indepen-

dentment de si el contenidor és body o alguna cosa creada pel grup de

producció.

A més, si l’activació del “mode estricte” (mitjançant l’ús d’una declaració

!DOCTYPE adient) causa que es faci servir el model de caixes del W3C, també

es pot esperar que ho sigui l’amplada no marginal computada prevista:

En els mitjans screen, el navegador agafarà aquest valor, arrodonirà tots els

valors de forma separada fins el píxel més proper i representarà el resultat

d’acord amb això.

Marges proporcionals i farcit en el model de caixa del W3C

Quan es fa servir el model de caixa del W3C, els marges proporcionals i el far-

cit es computen en relació a la width computada de l’element contenidor. Per

posar un exemple, si especifiqueu margin: 20% per a un element inclós en

un element que té 800 píxels d’amplada, el marge que es representa al voltant

del primer element serà de 160 píxels per totes bandes (ja que el 20% de 800

és 160).

Si a aquest mateix element se li assigna padding: 5%, l’amplada computada

del contingut serà de 400 píxels:

4.4. Treballar amb flux de documents

Els pròxims apartats tracten de la creació de composicions de múltiples colum-

nes, de manera que hem de presentar tres propietats de CSS que encara ens fal-

ten en aquest apartat: display, float i clear.

4.4.1. Tipus d’elements i la propietat display

Tret de les parts de html, body i table, tots els elements de la Recomanació

d’HTML 4.01 que estiguin relacionats amb contingut primari tenen un tipus

.1em + .9em + 50em + .9em + .1em = 52em

20% + 5% + 5% + 20% = 50%

0.50 × 800 = 400

800 - 400 = 400


associat “en línia” o “bloc”. Cada tipus determina el comportament de la com-

posició per defecte de diverses maneres.

a) En línia

• El text i les imatges que hi ha immediatament davant i/o darrere d’ele-

ments en línia es representen en una línia base comuna amb el contingut

de l’element inserit, tret que siguin tan llargs que en cas contrari es super-

posarien sobre el límit de l’element contenidor, i en aquest cas el contingut

inserit acabarà en una nova línia base per sota de la primera.

• Les línies de text dintre d’elements en línia es disposen amb salts de línia

suaus segons sigui necessari (o segons es pugui), tret dels casos en què

aquest comportament es modifica per l’ús de la propietat white-space

(espai en blanc).

• Les propietats margin, width, height i float en regles de full d’estil apli-

cables a aquests elements (tret de img i object) s’ignoren.

• Els elements en línia només poden contenir text o d’altres elements en línia.

b) Bloc

• Aquests elements es representen com a blocs discrets dintre dels seus con-

tenidors.

• Tret que se’ls assigni un valor float de left o right, sempre se’ls repre-

sentarà amb salts de línia precedents i posteriors.

• En general, els salts de línia entre elements de bloc imbricats que no tenen

cap contingut entre ells es col·lapsaran.

• Els elements de bloc amb una amplada de auto (la predeterminada) sem-

pre s’ampliaran per omplir tota l’amplada que puguin.

La propietat display (visualitzar) té tres valors que es fan servir habitual-

ment: block, inline i none, dels quals dos fan referència als tipus d’ele-

ment corresponent. L’efecte de canviar el valor de display d’un element

és provocar que un element en línia es comporti com un element de bloc,

que un element de bloc es comporti com un en línia o modificar la repre-

sentació del document com si l’element (i tot el seu contingut) no existís

en absolut.

De fet, és fonamental saber quins elements es corresponen amb quins tipus

per defecte. Les relacions s’exposen breument a la taula 2:


Taula 2. Elements de l’HTML d’ús freqüent i els seus tipus. Només es col·lapsaran els marges entre dos elements de bloc adjacents del mateix subtipus

Demostració 5

I si eliminem l’anotació “Pròleg” del títol únicament per a aquesta demostració?

Arxiu font de: “Exemple amb eliminació del tros superflu d’un apartat”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/demo_rev5.html


Element Tipus Subtipus Notes

a en línia especial

abbr en línia frase

acronym en línia frase

address bloc En la pràctica es comporta de manera semblant a p

blockquote bloc Ha d’incloure com a mínim un element de bloc quan el !DOCTYPE declarat és Strict

bodyEngloba tot el llenç sencer del document; normalment té un marge (a IE, Firefox i Safari) o un farcit (a Opera) de 10px quan el mitjà és screen

cite en línia frase

div bloc

em en línia frase

fieldset bloc Normalment es representa per defecte amb border: 1px black;

form bloc

h1 … h6 bloc títol

input en línia control de formulari

img en línia especial

label en línia control de formulari

li bloc

Tipus d’element no especificat a la Definició de Tipus de Document, però aquest element pot contenir elements de bloc o inserits; la Recomanació CSS 2.1 completa reserva un valor display per a elements de llista

ol bloc llista

p blocNomés pot incloure elements en línia; que normalment es representen amb marges superiors i inferiors

span en línia especial

strong en línia frase

table bloc

ul bloc llista

.sectionNote { display: none; }


4.4.2. Fer que alguns elements flueixin al voltant d’altres:

la propietat float

Hi ha una foto col·locada a l’esquerra d’aquest

paràgraf. Pràcticament tots veureu que el text se-

güent flueix de forma natural al seu voltant, tot

i que alguns pot ser que primer hàgiu de deixar

de preguntar-vos per què un escriptor famós de

novel·les de ciència ficció decideix enganxar

cansalada al seu gat amb cinta adhesiva, per molt avorrit que estigui. Els atri-

buts de l’HTML poden fer-se servir per especificar el comportament de la com-

posició que podeu observar, però en aquest cas els resultats s’han aconseguit

amb CSS.

Tal com us podeu imaginar, la parella propietat/valor que ho fa possible és

float: left;. En futurs apartats es tractaran les subtileses de treballar amb

elements flotants, però, de moment, és necessari tocar aquest tema de passada.

float: right també és una parella de propietat/valor perfectament útil, i

per a aquelles ocasions en què necessiteu contradir una assignació de class

que invoqui float, podeu especificar float: none.

La propietat float sí té unes quantes instruccions d’ús:

• Un valor float només tindrà rellevància si s’aplica a un element de bloc

amb una width explícita.

• Les propietats float, clear i margin apareixen totes juntes a les regles de

fulls d’estil per crear columnes en una composició.

• És complicat fer que un element flotant s’estiri fins arribar a la part inferior

del seu contenidor, però no és impossible. La manera habitual de fer-ho

s’anomena faux-columns*.

Demostració 6

Ja hem parlat de la col·locació d’un valor float al text destacat, de manera

que ara ho farem i veurem com queda. I, ja que hi som, afegim-hi una mica de

color de fons perquè es distingeixi millor del contingut principal.

Arxiu font de: “Exemple de fer ‘flotar’ el text destacat cap al marge dret”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/demo_rev6.html


* http://www.alistapart.com/articles/fauxcolumns/

.pullQuote { float: right;

background-color: rgb(204,204,204); }


4.4.3. Forçar elements per sota dels seus predecessors flotants:

la propietat clear

De la mateixa manera que la propietat float, a la propietat clear pot assig-

nar-se-li un dels valors left, right o none. El valor both (ambdós) també és

possible.

Tot i que la propietat float regeix com hauria de fluir el contingut dels elements

subsegüents al seu voltant, la propietat clear regeix com ha de fluir un element

al voltant de tots els seus veïns, en la majoria de casos, no hauria de fluir gens.

La figura 6 demostra el funcionament de clear: left; en una composició

en la qual a dos elements consecutius se’ls ha assignat valors idèntics de

height i valors de float de left i right:

Figura 6

clear:left permet que la caixa inferior talli les dues columnes perquè són de la mateixa alçada.

A la demostració anterior, el flux per defecte de #cLeftWidget el col·locaria

just per sota del text en llatí, és a dir, entre #fLeftWidget i #fRightWidget.

Penseu què passa quan el primer de la mateixa col·lecció d’elements es fa més

curt que el seu germà que toca a la dreta, tal com es veu a la figura 7.


Figura 7

Quan la columna dreta és més llarga que la columna esquerra, clear:left no tallarà les dues columnes i, per tant, cal fer servir clear:both.

En el primer exemple, el valor clear de l’element final s’estableix en left per

demostrar aquest fet: com els dos elements amb float són igual d’alts, l’ele-

ment amb clear es col·loca automàticament per sota dels dos. Tanmateix, el

segon exemple demostra que per aconseguir el mateix resultat amb elements

amb float d’alçades diferents, cal fer servir clear: both;.

Aquesta informació sobre la propietat clear està pensada només com una pe-

tita introducció als seus efectes, ja que els detalls de la tècnica associada al seu

ús es tractaran en apartats posteriors.

Resum

Entre les diferències entre motors de representació, la necessitat d’incloure

una àmplia gama de terreny definit tradicionalment i la inhabilitat per a pre-

dir les dimensions exactes d’una finestra de navegador, la composició de do-

cuments web està plena de dificultats i riscs. Malgrat tot, el nivell habitual de

suport de CSS ha avançat fins al punt que no és difícil aconseguir que els do-

cuments web donin resultats acceptables en qualsevol navegador.


Bergevin, Holly; Gallant, John. 2006. Explorer exposed. Position Is Everything.

[Data de consulta: 1 de juliol de 2008].

http://positioniseverything.net/explorer.html

Bos, Bert; et al. 2007. Cascading style sheets level 2 revision 1 (CSS 2.1) specification.

World Wide Web Consortium. [Data de consulta: 30 de juny de 2008].



Raggett, Dave; et al, 1999. HTML 4.01 specification. World Wide Web Consortium.

[Data de consulta: 30 de juny de 2008].

http://www.w3.org/TR/1999/REC-html401-19991224

Raymond, Eric; Steele, Guy, eds. 2003. Brute force. The Jargon File (Version

4.4.7). [Data de consulta: 30 de juny de 2008].

http://www.catb.org/jargon/html/B/brute-force.html

Scalzi, John. 2006. Clearly you people thought I was kidding. Whatever. [Data de

consulta: 30 de juny de 2008].

http://www.scalzi.com/whatever/004457.html

Preguntes de repàs


1. En quines circumstàncies és millor fer servir el valor abreujat de margin o

una única propietat de marge com margin-top?

2. Quan les propietats abreujades de margin, padding i border-width es

presenten amb els quatre valors, en quin ordre s’apliquen aquests valors als

quatre costats d’un element?

3. Si volguéssiu col·locar una regla sota el text de cada títol d’un document,

quina propietat utilitzaríeu?

4. Quin valor de border-style faríeu servir per fer que un element sembli

un botó d’interfície?

5. Sí o no: especificar una vora al voltant d’un element també crearà automà-

ticament un canal al voltant de l’element?

6. Si creeu un element que no sigui tan ample con el seu contenidor, quina

parella de propietat/valor cal que establiu per garantir que l’element queda

centrat horitzontalment en el seu contenidor?

7. Sí o no: Si col·loqueu un element contenidor dins de body i establiu la width

en un valor superior a 100%, canviarà el comportament del llenç del document?

8. Si una imatge és massa gran per a l’element contenidor, quina parella de

propietat/valor faríeu servir per garantir que no es creïn errors a la composició

de la pàgina i per què?

9. Si assigneu un valor de display de block a un element a (enllaç) i li do-

neu una alçada i una amplada raonables a aquest element, com canvia el com-

portament de l’enllaç quan es passa el ratolí per sobre en un mitjà de

visualització screen?


10.En circumstàncies normals, un element bloc s’amplia fins a omplir l’am-

plada del seu contenidor (menys marges, vores i farcit). Per defecte, canvia

realment aquest comportament quan aquest element va precedit d’un ele-

ment amb float, o només sembla que canvia?

11.Si preteneu aplicar un valor float a un element, quina altra propietat tam-

bé heu d’establir en aquest element?

12.Si volguéssiu estar del tot segurs que un element sempre s’ampliarà per om-

plir l’amplada del seu contenidor, quines parelles de propietat/valor establiríeu?


5. Imatges de fons en CSSNicole Sullivan

Admeteu-ho! Des del primer apartat d’aquest curs us heu estat morint de ganes

d’aprendre com aconseguir que el vostre web quedi impressionant i fabulós.

Fins i tot és possible que hagueu saltat els altres apartats per arribar a aquest

directament!

Les imatges de fons serveixen per fer que el vostre lloc quedi atractiu, però pot-

ser us sorprengui saber que estan molt relacionades amb els conceptes fona-

mentals que ja heu après.

Tal com ja heu vist en aquesta assignatura, un dels canvis més importants que

aporta el CSS és la capacitat per separar presentació o l’aspecte de les coses, de

la semàntica, o el significat de les coses. La imatge de fons de CSS és una de

les eines més importants que podeu fer servir perquè permet aplicar imatges

decoratives a determinades parts del vostre HTML sense afegir pes addicional

a l’HTML. Abans, els creadors web (com vosaltres!) es veien obligats a omplir

el codi d’etiquetes img.

El CSS i, sobretot la propietat background (fons), fan que el vostre HTML dei-

xi d’estar atapeït d’elements presentacionals. D’aquesta manera, redissenyar

un lloc o realitzar altres transicions de la vida d’una pàgina web creada amb

mètodes moderns, pot fer-se d’una manera molt més senzilla. Podreu actualit-

zar tota la pàgina canviant únicament el full d’estil en lloc d’haver de gravar

totes i cadascuna de les pàgines HTML. Depenent de la mida del lloc, això pot

estalviar-vos una gran quantitat de temps.

En aquest apartat mostraré els conceptes bàsics del funcionament de les imat-

ges de fons de CSS, incloent l’aplicació d’una imatge de fons a través de CSS,

ajustar la seva col·locació, repetir-la en vertical o horitzontal i combinar imat-

ges de fons amb sprites de CSS* per millorar el rendiment del lloc**.

5.1. Com funciona?

El CSS per a fons es divideix en diverses propietats. Fent servir aquestes propi-

etats, com ara position i color, podeu començar a controlar l’aspecte de la

vostra pàgina. En aquest apartat repassarem detalladament les imatges de fons

de CSS i crearem un missatge d’alerta com a exemple pas per pas.

Primer de tot, hem de saber més coses sobre les diferents propietats que podem

utilitzar.

* http://www.alistapart.com/articles/sprites/

** http://developer.yahoo.com/performance/index.html


5.1.1. Propietats de fons

Taula 3. Propietats de fons

Propietat Definició Descripció

background-color

Estableix el color de fons de l’element d’HTML.

Hi ha diverses maneres d’indicar el background-color o color de fons, com ara incloure valors i paraules clau RGB. La majoria de la gent fa servir la notació hexadecimal, un símbol de coixinet o barra (#) seguit de sis caràcters. La primera parella indica els nivells vermells i la segona i la tercera indiquen els nivells verd i blau respectivament: #RRGGBB.

Hi ha moltes eines per escollir colors que poden ajudar-vos a trobar la notació hexadecimal d’un color determinat. El vermell pur, per exemple, seria el #FF0000.

Els valors vàlids inclouen un valor de color, transparent o inherit.

image Indica la ruta o URL de la imatge de fons.

Estableix la background-image o imatge de fons mostrant al navegador on trobar la imatge fent servir l’URL. Per exemple: url(alert.png). Fixeu-vos que la ruta va precedida de la paraula clau url i entre parèntesis. Aquesta sintaxi és important perquè el navegador entengui que voleu indicar una ubicació.

Els valors vàlids inclouen una URL, none o inherit.

repeatIndica en quina direcció s’ha de repetir la imatge de fons.

Les imatges poden repetir-se en vertical o horitzontal, o en les dos direccions, per omplir tota l’amplada o alçada d’un element HTML. Utilitzeu background-repeat per indicar-li al navegador que repeteixi una imatge de fons.

Els valors vàlids són repeat, repeat-x, repeat-y i no-repeat.

attachment

Defineix el comportament de la imatge de fons quan l’usuari desplaça.

Les imatges poden desplaçar-se amb el contingut o quedar-se fixes a la pantalla de visualització. Els valors vàlids són: scroll, fixed i inherit.

positionIndica al navegador on col·locar la imatge de fons.

Les imatges poden mostrar-se a qualsevol punt dintre de les vores de l’element d’HTML en què estiguin aplicades. Feu servir background-position per col·locar les imatges amb precisió o per crear efectes visuals i capes.

Hi ha moltes maneres útils d’indicar la posició, les paraules clau i els valors numèrics del fons. Les paraules clau (com ara top i bottom) són molt útils i fàcils de llegir. Els valors en píxels són molt precisos però no s’adapten als canvis d’alçada i amplada. Els valors de píxels negatius són molt útils quan es fan servir sprites de CSS, tal com veurem més endavant.

Quan s’utilitzen sprites i píxels, el punt inicial sempre és l’extrem superior esquerre de l’element HTML, encara que la manera de funcionar de la col·locació de la imatge és una mica diferent amb píxels o amb percentatges. Els píxels sempre mouen la imatge un número concret de píxels cap a la part inferior dreta de la caixa contenidora (o cap a la part superior esquerra si són valors negatius), sigui quina sigui la mida de la imatge i de la caixa contenidora. Els percentatges, en canvi, mouen la imatge un percentatge de la diferència entre la caixa contenidora i la mida de la imatge. Si la imatge i la caixa contenidora són igual de grans, els percentatges no mouran gens la imatge.

Els valors vàlids inclouen length (normalment en píxels), percentage (de l’amplada de l’element) i les paraules clau top, right, bottom, left i center. Fixeu-vos que center es pot fer servir per indicar un centre vertical o horitzontal. Fixeu-vos també que podeu mesclar percentatges i píxels a les regles, però no paraules clau i píxels ni paraules clau i percentatges.


5.2. Crear un missatge d’alerta

Ara que ja hem vist la sintaxi bàsica necessària, us ensenyaré com crear un

exemple complet de caixa d’alerta que servirà per demostrar tots els aspectes

de les imatges de fons.

5.2.1. El disseny

Posem per cas que un dissenyador gràfic us ha presentat un esbós visual del

missatge d’alerta que voleu crear per al vostre lloc web. Fixeu-vos que l’alerta

té el fons de color taronja clar per diferenciar-lo dels paràgrafs que l’envolten.

També té una icona d’alerta a deu píxels de l’extrem superior esquerre.

Fixeu-vos que l’esbós només té una línia de text, però en altres casos pot tenir-

ne més. Un dels trets més importants del desenvolupador web és preveure com

acabarà evolucionant un disseny. En part, respectar la visió artística d’un lloc

suposa pensar en la consistència des que s’inicia fins que es redissenya. Per

tant, el missatge d’alerta podria incloure més d’una línia de text o fins i tot

múltiples paràgrafs, llistes o d’altres elements HTML. Hauríeu de tractar de ser

tan agnòstics en qüestió d’elements com us sigui possible. D’aquesta manera

augmentaran les probabilitats de reutilització del codi i el lloc web tindrà la

màxima velocitat i eficiència. L’esbós és com es veu a la figura 1:

Figura 1

L’esbós del dissenyador gràfic de la caixa d’alerta.

El dissenyador també us ha proporcionat la icona que heu de fer servir, tal com

es mostra a la figura 2:

Figura 2

La icona d’alerta.

Propietat Definició Descripció

background

La propietat abreujada que es pot fer servir per descriure tota la resta de propietats d’una línia.

Les propietats abreujades són realment pràctiques. La majoria de desenvolupadors les utilitzen per mantenir el CSS el més senzill possible i per agrupar propietats relacionades. Es pot escriure una regla general fent servir l’abreujament i després anul·lar-la segons sigui necessari amb propietats específiques.

Les propietats sempre s’haurien d’indicar en el mateix ordre perquè els navegadors puguin interpretar fàcilment els estils.

1.color

2.url

3.repeat

4.attachment (no es fa servir gairebé mai, es pot ometre)

5.horizontal-position

6.vertical-position

Un exemple d’aquest abreujament amb totes les propietats utilitzades (tret de attachment):

background: green url(logo.gif) no-repeat left top;


5.2.2. El codi

Basant-vos en tot el que heu après dels fons de CSS a la primera part d’aquest apar-

tat, ja podeu anar pensant com crear aquest missatge d’avís. Us animo que ho pro-

veu ara mateix i que després compareu el resultat amb el meu exemple.

Molt bé, ja ho heu provat? Analitzem-ho ara pas per pas. Feu proves amb el

codi, augmenteu o reduïu els valors i intenteu provar alternatives. També pot

ser que vulgueu anar seguint tots els passos escrivint cada línia nova de codi

en una eina com ara Opera Dragonfly o Firebug per poder anar veient els re-

sultats de cada pas immediatament.

Crear el lligam o selector de CSS

Per començar heu de crear una classe alert perquè el CSS s’hi pugui lligar.

Creeu els fitxers esquelet nous de CSS i HTML, enllaceu el CSS al fitxer HTML

i afegiu-li el codi següent:

El CSS:

L’HTML:

En aquest cas he aplicat estils a l’alerta amb un class i no amb un id perquè

podria tenir més d’una alerta a la pàgina, per exemple un element de formulari

amb diversos errors. El CSS s’ha de fer el més flexible que es pugui i limitar-ho

tot per tal que es correspongui al disseny quan es crea l’HTML.

Molt bé, doncs ja teniu uns fonaments, però encara sembla un paràgraf nor-

mal perquè encara no li heu afegit cap estil. Fem-ho.

Notaa

Cada còpia de pantalla té un enllaç a exemples de codi perquè pugueu

comprovar la font a cada pas.

.alert { ... }

<p class=“alert”>

<strong>Alert!</strong> The text of our alert message goes here.

</p>

Notaa

He decidit intencionadament no limitar la classe alert a paràgrafs; les

caixes d’alerta també podrien contenir fàcilment altres elements. Hau-

ríeu de deixar que el CSS tingui la màxima flexibilitat possible.


Afegir el color de fons

aJa heu après com fer servir el color de fons amb els estils de text. Els mateixos

principis s’apliquen a qualsevol element HTML i poden combinar-se amb

imatges de fons per crear efectes visuals. Si el color de fons no s’ha establert ni

heretat, serà transparent per defecte.

Afegim el color de fons taronja clar a la caixa d’alerta perquè ressalti entre el

text que té al voltant. No hauria de ser gaire fosc perquè és important que

mantingueu un nivell raonable de contrast entre el text i el color de fons*. Afe-

giu la propietat següent a la vostra regla de CSS:

Ara la caixa d’alerta s’assemblarà més a la figura 3:

Figura 3

Una caixa d’avís amb color de fons afegit.

Arxiu font de: “Figura 3”http://devfiles.myopera.com/articles/481/2_color.html

Aplicar la imatge de fons

Passem a afegir la imatge. La ruta a la imatge de fons ha d’estar entre url(),

tal com s’observa en el codi següent. Afegiu la línia ressaltada a la regla de CSS:

Ara la caixa d’alerta quedarà com a la figura 4:

Figura 4

S’ha afegit la imatge de fons, però la repetició queda horrible.

Arxiu font de: “Figura 4”http://devfiles.myopera.com/articles/481/3_image.html

Recordeu que cada propietat de fons té un valor per defecte que se li apli-

carà si no especifiqueu cap valor. Segurament ja us haureu adonat que la

imatge es repeteix per tota l’alerta com si fossin les tessel·les d’un mosaic.

Quina és la conclusió de tot això? Les imatges de fons estan configurades

per defecte per a repetir-se tant horitzontalment com verticalment. Els fons

que es repeteixen són especialment útils per a gradacions de colors i pa-

Vegeu com fer servir el color de fons amb els estils de text a l’apartat 3 d’aquest mòdul.

*http://www.w3.org/TR/2006/WD-WCAG20-20060427/

guidelines.html#visual-audio-contrast

.alert{background-color: #FFFFCC;}

.alert{

background-color: #FFFFCC;

background-image: url(alert.png);

}


trons que omplen la pantalla o un element d’HTML en concret, però en

aquest cas no és el que volem.

Controlar la repetició del fons

Figura 5

De manera semblant a la nostra imatge de fons, aquestes tessel·les es repeteixentant en horitzontal como en vertical.

Llegir especificacions pot ser un tasca intimidant, però l’especificació és molt

bon lloc per esbrinar com se suposa que funciona el CSS abans de passar a pro-

funditzar en la miríada de diferències existents entre navegadors. Feu una ulla-

da a la part dels colors i els fons de la W3C Specification* i intenteu trobar la

paraula clau per fer-los servir quan no vulgueu que es repeteixi una imatge de

fons. Tot seguit la farem servir en un exemple.

Ja l’heu trobada? Fixeu-vos que hi ha una secció per cada propietat de fons in-

cloent-hi background-repeat*. A sota de Value hi veureu totes les opcions

possibles incloent-hi: repeat, repeat-x, repeat-y, no-repeat i inherit.

Per defecte, les imatges de fons (inicials) es repeteixen. No s’especifica cap di-

recció, de manera que la imatge pot repetir-se en horitzontal o en vertical. Se-

gurament ja us haureu imaginat que no-repeat (sense repetició) és el valor

* http://www.w3.org/TR/CSS21/colors.html

* http://www.w3.org/TR/CSS21/colors.html#propdef-background-

repeat


que necessiteu per impedir que la imatge es repeteixi en qualsevol direcció.

Afegiu la següent línia ressaltada a la regla de CSS:

Ara la caixa d’alerta quedarà com a la figura 6:

Figura 6

La caixa d’alerta amb una única còpia de la imatge de fons (sense repeticions).

Arxiu font de: “Figura 6”http://devfiles.myopera.com/articles/481/4_repeat.html

A més, també podeu repetir-la en les dues direccions (com si fossin tessel·les

d’un mosaic) o en cap direcció. Les gradacions acostumen a repetir-se horit-

zontalment o verticalment (vegeu la figura 7). No és necessari que conegueu

la mida de l’element HTML; només cal que talleu un tros de la gradació i la feu

repetir-se en la direcció que vulgueu; ja sigui “x” per horitzontal o “y” per ver-

tical. Els patrons sovint es repeteixen en totes dues direccions i les icones nor-

malment no es repeteixen. Més endavant examinareu background-repeat

més a fons amb un altre exemple.

Figura 7

Les tessel·les o rajoletes d’aquest exemple només es repeteixen en horitzontal.

.alert{




}


Fixeu-vos ara en un exemple pràctic del meu web, observeu la figura 8:

Figura 8

Un exemple d’imatge repetida del meu web*.

Arxiu font de: “Figura 8”http://www.stubbornella.org/content/

El CSS que vaig fer servir per afegir aquest efecte decoratiu és relativament sen-

zill. Vaig fer que el fons es repetís horitzontalment amb repeat-x:

Attachment

attachment permet especificar com funciona el fons quan l’usuari desplaça

la pàgina cap avall. El funcionament per defecte és scroll, que fa que la imat-

ge de fons es desplaci juntament amb el contingut.

Per altra banda, si s’estableix background-attachment a fixed, l’element es

queda fix a la finestra del navegador, de manera que no es mou quan es des-

plaça el contingut de dins de l’element al qual està adjunt. Això crea alguns

efectes estranys que només seran visibles quan desplaceu la pàgina per sobre

l’element d’HTML al qual està adjunt. La W3C ho fa servir per assenyalar l’es-

tat de les especificacions, com per exemple la imatge de la “W3C Candidate

Recommendation” de dalt de tot a l’esquerra*. Desplaceu la pàgina cap avall i

veureu que la imatge es queda fixa al racó superior esquerre. Està adjunta a

l’element body, de manera que sempre és visible.

Aquest pas no tindrà cap efecte en la nostra visualització perquè els navega-

dors estableixen per defecte que les imatges de fons es desplacin, però afegim-

* http://www.stubbornella.org/content/

body{background-repeat: repeat-x}

* http://www.w3.org/TR/CSS21/colors.html#propdef-background-

repeat


ho igualment al codi perquè pugueu veure com es fa servir la propietat. Afegiu

la línia ressaltada a la regla de CSS:

Tal com s’observa a la figura 9, la visualització de la caixa d’alerta no és gaire

diferent de com era abans.

Figura 9

No ha canviat gaire, encara.

Arxiu font de: “Figura 9”http://devfiles.myopera.com/articles/481/5_attachment.html

Col·locar la imatge

La propietat de col·locació permet disposar la imatge de fons exactament on

vulgueu posar-la, tant horitzontalment com verticalment, a l’element d’HTML.

Aquesta propietat accepta paraules clau i valors com ara: top, center, right,

100%, -10%, 50px i -30em.

A la figura 10 es mostren els valors que poden utilitzar-se per col·locar les imat-

ges de fons en diferents posicions.

Figura 10

Diversos exemples de posició del fons mitjançant paraules clau, percentatges i píxels.

.alert{




background-attachment: scroll;

}


Passem ara a col·locar la imatge de fons: voleu que quedi a l’extrem superior

esquerre, però sense tocar els costats, de manera que necessiteu establir una

distància de 10 píxels tant des del límit superior com des de l’esquerre. Això es

pot fer afegint-hi la següent línia ressaltada a la regla CSS. Feu-ho ara.

El primer valor és la distància horitzontal i el segon la vertical. En aquest cas

són el mateix. Ara la caixa d’alerta quedarà com a la figura 11:

Figura 11

Hem fet servir la col·locació per situar la imatge de fons.

Arxiu font de: “Figura 11”http://devfiles.myopera.com/articles/481/6_position.html

Fer servir l’abreujament per combinar-ho tot com un professional

Com ja heu pogut veure, algunes propietats de CSS poden combinar-se. Per

exemple, el fons i totes les subpropietats relacionades. El codi de CSS que hem

escrit fins ara es pot reescriure abreujadament així:

1. color

2. image

.alert{




background-attachment: scroll;

background-position: 10px 10px;

}

Consella

Utilitzeu o bé només paraules clau o bé només valors numèrics, ja que

els navegadors antics pot ser que ignorin la vostra declaració si els feu

servir tots dos alhora. Si feu servir right i bottom aconseguireu el ma-

teix que 100% horitzontalment o verticalment.

.alert{background: #FFFFCC url(alert.png) no-repeat scroll 10px 10px;}

Consella

Quan combineu subpropietats de background, poseu sempre les propi-

etats en l’ordre següent. És important tant per la compatibilitat de tots

els navegadors com per l’organització i manteniment del full d’estil:


3. repeat

4. attachment

5. posició horizontal

6. posició vertical

Proveu a substituir el CSS antic amb l’abreujament anterior i el vostre exemple

us hauria de quedar exactament igual. Vegeu la figura 12.

Figura 12

Arxiu font de: “Figura 12”http://devfiles.myopera.com/articles/481/7_finishedProduct.html

5.2.3. Fer proves amb el codi

La millor manera de recordar tots els detalls del CSS és provar les opcions un

mateix. Proveu a canviar algunes de les propietats de l’exemple i vegeu com

queda. Establiu la background-position a 100% 100%, i fixeu-vos que dóna

el mateix resultat que fer servir les paraules clau de right i bottom. I si ho

canviéssiu a -5px 0? Per què creieu que ara no podeu veure part de la imatge?

5.2.4. Comprovar la qualitat

Les comprovacions són extremadament importants per oferir una bona expe-

riència a l’usuari. El fet que el lloc funcioni bé en el vostre equip amb la vostra

configuració específica no vol dir que es vegi bé en tots els ordinadors. Quan

comproveu la caixa d’alerta hauríeu de seguir aquests passos bàsics mínims:

• Augmenteu o reduïu la quantitat de text a l’interior de l’alerta.

• Augmenteu la mida del text del vostre navegador com a mínim dos nivells.

Hauria estat millor utilitzar ems per col·locar la imatge? Llavors què passa

quan augmenteu la mida del text?

• Apliqueu l’alerta class a d’altres elements com ara div, p, ul, strong o

em. Què necessiteu canviar per fer que la classe sigui agnòstica?

• Incloeu uns quants paràgrafs i una llista dins del div de l’alerta. Encara

funciona el codi?

• Verifiqueu l’alerta visualment als navegadors de grau 1* (també anomenat

grau A). El meu consell és que escriviu per a bons navegadors i adapteu per

a l’Internet Explorer quan estigueu segurs que el codi funciona.

Realitzar una sèrie rigorosa de proves forma part del procés d’aprendre a escriure

CSS. Si aneu amb molt de compte alhora d’aprendre, acabareu anant molt ràpid.

* http://www.bbc.co.uk/guidelines/futuremedia/technical/browser_support.shtml#support_t

able


5.3. Sprites

Els usuaris ho volen tot. Volen que el vostre lloc sigui atractiu, interactiu i, a

sobre, ràpid, però incloure grans quantitats d’imatges de fons de CSS pot alen-

tir molt el web, ja que quantes més peticions d’HTTP feu, més lent serà el lloc

(una petició de HTTP és quan l’ordinador està accedint a una pàgina web i ne-

cessita demanar al servidor que li enviï un altre valor que compon el lloc, com

ara un fitxer o una imatge de CSS; cada petició addicional significa més temps

de càrrega del lloc). Per tal de superar aquesta limitació, podeu combinar ico-

nes relacionades per formar una sola imatge, els anomenats sprites de CSS*. La

propietat de background-position permet col·locar la imatge en la posició

adequada de manera que les icones es vegin a través de la finestra de l’element

HTML al qual estan adjunts els sprites de CSS.

A la figura 13, per exemple, observareu que per veure la icona de la Terra a tra-

vés de la finestra HTML heu de col·locar la imatge fent servir left top. Per

moure la posició de la imatge de manera que es vegi la icona d’alerta, la posició

del fons s’ha de canviar a -80px 0. El valor negatiu horitzontal fa que la imat-

ge es desplaci a l’esquerra.

Figura 13

Utilització de sprites de CSS per reduir les peticions de HTTP.

5.3.1. Un exemple d’sprite complex i imatge de fons

Fixem-nos ara com es poden fer servir els sprites de CSS per aconseguir bons

efectes. Imaginem-nos que el nostre amic dissenyador ens ha enviat un altre

esbós. En aquest cas es tracta d’una llista d’enllaços a la pàgina de destinació

d’un bloc. Condueix al perfil LinkedIn, la subscripció RSS, fotos Flickr i els en-

llaços favorits de l’escriptor del bloc. Si ens fixem en cada enllaç, ens adona-

rem que hi ha una gradació de color que comença sent blanc fins arribar al gris

a la part superior i inferior de l’enllaç i, per acabar de complicar-ho més, el dis-

senyador ens ha demanat si podem fer que el fons de cada enllaç sigui de color

* http://www.alistapart.com/articles/sprites

Notaa

Si feu servir posicions de fons negatives, Safari repetirà la imatge encara

que hàgiu especificat no-repeat. Això cal tenir-ho en compte quan co-

menceu a jugar amb les imatges de fons per crear composicions més

complicades.


blanc neutre sense gradació quan els visitants hi passin el cursor per sobre; ve-

geu la figura 14.

Figura 14

L’esbós del nou disseny.

Els logos podrien incloure’s fent servir elements img en l’etiquetatge, però uti-

litzar sprites de CSS és molt més pràctic perquè com que només cal carregar

una imatge (i no quatre), els sprites es carreguen més de pressa, la qual cosa

simplifica l’HTML i redueix la quantitat d’etiquetatge necessari.

Crear l’sprite

El primer pas és retallar els quatre logos i crear el conjunt de sprites com a la

figura 15.

Figura 15

El conjunt de sprites.

També cal retallar un tros de la gradació d’un píxel d’amplada. Per millorar la

visibilitat, he retallat un tros lleugerament més gran, però vosaltres només ne-

cessiteu un píxel; vegeu la figura 16.

Figura 16

El tros del nostre fons de gradació.

L’HTML de la llista és una llista no ordenada d’enllaços. Fixeu-vos en els ele-

ments span buits que hi ha als enllaços. És molt important no tenir una

height i width fixa en els elements que contenen text, perquè al capdavall

no sabem com de gran serà el text. Què passaria si es traduís el text a l’ale-

many? Es poden fer servir aquests spans addicionals per mostrar els logos. Al-

ternativament, podeu decidir que no voleu tenir etiquetatge no semàntic

superflu atapeint l’HTML. En aquest cas necessitareu utilitzar un sprite més

gran i deixar espai blanc entre les icones. Tingueu en compte que això serà més

lent per als usuaris amb connexions lentes, sobretot els que accedeixen a In-


ternet per telèfon mòbil. El codi de la llista és el següent (afegiu-lo a una plan-

tilla HTML):

El CSS utilitza les dues imatges de fons. Primer, fixeu-vos en la gradació de la

imatge de fons. Té tres aspectes interessants:

1) El primer és que la imatge es repeteix horitzontalment (repeat-x). D’aquesta

manera podem fer que una imatge tan petita s’estengui per tota la llista.

2) El segon és que la imatge està centrada verticalment. El tros rodó de la

imatge ha de quedar al mig de l’element de la llista, de manera que heu de fer

servir una posició de fons de left center.

3) Per acabar, al CSS he aplicat un color de fons que és el mateix gris que el

gris de la nostra imatge de gradació. Així, si l’element es fa més gran, no que-

darà trencat. Per saber més sobre aquesta tècnica, recomano llegir Bulletproof

Web Design* de Dan Cederholm.

Afegiu el següent CSS a un nou fitxer CSS i enllaceu-lo al fitxer HTML:

<ul class=“navigation”>

<li id=“resume”>

<a href=“#”><span></span>Resume</a>

</li>

<li id=“rss”>

<a href=“#”><span></span>RSS Feed</a>

</li>

<li id=“photos”>

<a href=“#”><span></span>Photos</a>

</li>

<li id=“links”>

<a href=“#”><span></span>Links</a>

</li>

</ul>

* http://www.simplebits.com/publications/bulletproof/

.navigation, .navigation li {

margin:0;

padding:0;

}

.navigation li {

border-top: 1px solid white;

list-style-type:none

}


L’última línia significa que l’element no hauria de tenir color ni imatge de fons

quan l’usuari hi passi el ratolí per sobre o el seleccioni amb el teclat. Pot ser que

us estigueu preguntant per què he aplicat propietats de fons a l’enllaç i no a l’ele-

ment de la llista. La resposta és que l’Internet Explorer 6 i les versions anteriors

no reconeixen pseudoclasses com hover en elements que no siguin enllaços.

He fet l’ajust per adaptar-me a aquesta limitació.

Tot seguit podeu crear el CSS per als logos petits. Com sempre, podeu comen-

çar definint el cas més general per a tots els elements span del vostre mòdul

de navegació. És aquí on definiu la imatge que es farà servir en tots els spans,

la repetició i la posició del fons (cadascuna és diferent, de manera que farem

servir la primera). Per a aquesta regla podeu fer servir l’abreujament. Fixeu-vos

que utilitzo comentaris de CSS per dividir seccions del codi en trossos més

pràctics. Afegiu el següent codi al final del fitxer CSS:

Una vegada ben definit el cas general ja podeu passar a definir les excepcions,

o el que té de diferent cada logo en concret. En aquest cas, l’únic CSS que can-

via és la background-position. Cada element respectiu de la llista necessita

.navigation li a {

background: #E2E2E2 url(sprite_gradient_bkg.jpg) repeat-x left center;

padding:20px;

display:block;

font-family: Arial, Helvetica, sans-serif;

color:#333;

font-size:18px;

text-decoration:none

}

/* hover effects */

.navigation li a:hover, .navigation li a:focus{

background: transparent none;

}

/* cas general */

.navigation span {

background:url(sprite_logo.gif) no-repeat left top;

height:15px;

width: 15px;

margin-right:20px;

display:-moz-inline-box;

display:inline-block;

vertical-align: middle;

}


tenir la imatge 15 píxels més cap a l’esquerra perquè cada logo té 15 píxels

d’amplada. Afegiu el següent codi al final del fitxer CSS:

Aquest exemple pot ser que intimidi una mica al principi, però centreu-vos en

les imatges de fons. En aquest cas he fet servir valors de píxel negatius per

moure la imatge de fons cap a l’esquerra de manera que es vegi la part rellevant

de la imatge. Els valors positius mouen la imatge de fons cap avall i cap a la

dreta, mentre que els negatius mouen la imatge cap amunt i cap a l’esquerra.

Feu proves amb els valors de posició de la imatge de fons amb l’exemple aca-

bat, per entendre millor com ajustar la col·locació dels sprites.

Vegeu l’exemple acabat a: “Sprite example”http://dev.opera.com/articles/view/31-css-background-images/sprite.html

Resum

Ara ja hauríeu d’entendre les imatges de fons de CSS i, a més, ja deveu estar

adquirint pràctica a llegir les especificacions, de manera que si teniu algun

dubte sobre alguna propietat en particular, hauríeu de saber com consultar-lo.

En aquest apartat hem parlat del color de fons, la imatge, la repetició, l’adjun-

ció i la posició. També heu après per què els desenvolupadors fan servir sprites

de CSS i com utilitzar aquesta tècnica avançada.

Preguntes de repàs


1. Un paràgraf té unes dimensions de 40 píxels per 180 píxels i la imatge de fons

és de 60 píxels per 200 píxels. Veureu tota la imatge o només una part? Per què?

2. Heu de fer que una imatge quedi col·locada a l’extrem inferior esquerre de

l’element blockquote. Ompliu els espais amb els valors correctes.

/* exceptions */

#rss span {

background-position: -15px 0;

}

#photos span {


}

#links span {


}


blockquote{background: yellow url(quote.png) no-repeat

scroll ____ ____ ;}

3. Posem per cas que voleu que cada h2 del vostre document amb una class

de “pregunta” tingui un patró de gradació aplicat. Faríeu servir repeat-x,

repeat-y, no-repeat o repeat per aconseguir un resultat semblant a

l’exemple següent? Per què?

4. Quina seria la posició del fons de l’exemple de la pregunta 3? Com podríeu

fer servir un color de fons de forma creativa per garantir que el fons pugui am-

pliar-se a qualsevol alçada? Per què és important això?

5. Quin abreujament podeu utilitzar per eliminar totes les propietats de fons?

6. Per a què serveixen els sprites de CSS?


Rendiment i peticions HTTP a la Yahoo Developer Network

http://developer.yahoo.com/performance/rules.html#num_http

L’especificació CSS2-Colors i fons

http://www.w3.org/TR/REC-CSS2/colors.html

CSS Sprites—Image Slicing’s Kiss of Death

http://www.alistapart.com/articles/sprites

Bulletproof Web Design—El meu llibre favorit

http://www.simplebits.com/publications/bulletproof/

Crèdits de les imatges

The Tiles, DimsumDarren

http://www.flickr.com/photos/dimsumdarren/1342305614/

little glass tiles, emdot

http://www.flickr.com/photos/emdot/6099842/


6. Estils de llistes i enllaçosBen Buchanan

Molts elements de les pàgines web són una mica “indulgents” pel que fa al dis-

seny: no és gaire greu si no estan “del tot bé”. Però llistes i enllaços són una

altra història, perquè si no es fan bé poden causar problemes greus a la gent

que vulgui fer servir el vostre lloc web.

En concret, els enllaços tenen alguns requisits bàsics pel que fa a l’estil i a les

expectatives dels usuaris. Els enllaços amb estils mal fets poden arruïnar l’ex-

periència que tindrà l’usuari quan faci servir el web, perquè la gent haurà

d’aturar-se a pensar on ha de clicar. En el pitjor dels casos, l’usuari no sabrà

determinar ni tan sols quins elements de la pàgina són enllaços.

En aquest apartat ens centrarem en les competències bàsiques que calen per

crear uns estils de llistes i d’enllaços ben fets. També parlarem d’algunes ma-

neres d’evitar errors fonamentals d’aquests elements i de produir un resultat

final que funcioni en qualsevol navegador i que sigui accessible per als usuaris

amb discapacitats.

Vegeu exemples reals a: “styling-lists-and-links examples”http://dev.opera.com/articles/view/32-styling-lists-and-links/styling-lists-and-links-examples.zip

6.1. Aplicar estils a les llistes

Primer de tot, us ensenyaré els conceptes bàsics relacionats amb l’aplicació

d’estils a les llistes amb CSS i després passaré a fer una ullada a algunes de les

tècniques una mica més complicades.

6.1.1. Pics i números bàsics

aEl punt més bàsic a tenir en compte a l’hora de crear un estil per a una llista

és pensar en quina forma de pic o de número volem fer servir. També pot ser

que no vulgueu fer servir cap mena de pic o de número. Tal com heu après en

veure l’HTML per a les llistes, existeixen moltes possibilitats que s’estableixen

mitjançant la propietat list-style-type.

Notaa

En aquest apartat es faran servir diversos exemples, així que us podeu

descarregar els fitxers de mostra de les llistes i els enllaços per anar ve-

ient-los a mesura que seguiu la lliçó.

Vegeu les llistes a l’apartat 2 del mòdul “El text central d’HTML”.


Per exemple, per especificar que totes les llistes no ordenades del lloc web fa-

cin servir pics quadrats, podeu utilitzar aquest CSS:

D’aquesta manera aconseguirem un resultat semblant al de la figura 1:

Figura 1

Llista no ordenadaamb pics quadrats.

A la figura 2 es mostren alguns exemples de llista molt habituals:

Figura 2

Estils més habituals de llistes.

Podeu veure algunes opcions més a la pàgina d’exemples a: “styling-lists-example-basics”http://dev.opera.com/articles/view/32-styling-lists-and-links/

Fixeu-vos que els pics i els números es representen amb el color que s’especi-

fiqui a li o que aquest hereti. Si necessiteu que el pic sigui d’un color diferent

del text, haureu de fer servir una imatge o solucionar-ho utilitzant altres ele-

ments dels punts enumerats a la llista (pot ser molt fàcil si la llista està formada

per enllaços, per exemple).

ul li {

list-style-type: square;

}


6.1.2. Pics personalitzats mitjançant imatges

El conjunt de pics estàndard és suficient per al contingut bàsic, però sovint es

demana als dissenyadors que substitueixin els pics per una imatge pròpia.

L’especificació de CSS inclou la propietat list-style-image per afegir una

imatge de llista personalitzada. No obstant això, la propietat té poques opci-

ons de col·locació de la imatge de fons i, en determinades circumstàncies, no

funciona en absolut a l’IE. Per això ha acabat essent molt més habitual establir

una imatge de fons en els elements enumerats a la llista.

Posem per cas que teniu una llista de canals d’informació RSS i voleu canviar

el pic per la típica icona taronja de l’RSS. Aplicarem la classe “rss” a la llista per

diferenciar-la d’altres llistes.

Primer establirem que la llista no tingui list-style-type i eliminarem el

marge i el farcit (padding). Aleshores, només cal afegir una imatge de fons a

cada element enumerat de la llista, una mica de farcit a l’esquerra per despla-

çar el text perquè es pugui veure la imatge i una mica de farcit al voltant del

botó per espaiar els elements de la llista.

<ul class=“rss”>

<li><a href=“http://example.com/rss.xml”>News</a></li>

<li><a href=“http://example.com/rss.xml”>Sport</a></li>

<li><a href=“http://example.com/rss.xml”>Weather</a></li>

<li><a href=“http://example.com/rss.xml”>Business</a></li>

<li><a href=“http://example.com/rss.xml”>Entertainment</a></li>

<li><a href=“http://example.com/rss.xml”>Funny News</a></li>

</ul>

.rss {

margin: 0;

padding: 0;

list-style-type: none;

}

.rss li {

background: #fff url(“icon-rssfeed.gif”) 0 3px no-repeat;

padding: 0 0 5px 15px;

}


D’aquesta manera ens quedarà una llista amb la imatge del RSS en lloc de pics,

tal com es pot observar a la figura 3:

Figura 3

Llista amb pics fets amb unaimatge.

Tingueu en compte que la imatge de fons està situada fent servir píxels per a

col·locar-la de manera precisa. Depenent del disseny que vulgueu aplicar, pot ser

que també pugueu fer servir %, ems o paraules clau. De tota manera, aneu amb

compte quan el disseny inclogui contingut que pugui fer que un element de la

llista acabi tenint diverses línies de text, perquè si establiu el fons en center ver-

tical o 50% pot quedar força estrany, tal com es veu a la figura 4:

Figura 4

Demostració d’imatges de pic centrades verticalment en un element de llista de diverses línies.

En canvi, si establiu que la imatge quedi a la part superior de l’element de la

llista, conservareu el comportament tradicional dels pics (és a dir, quedarà da-

vant de la primera línia). Vegeu la figura 5:

Figura 5

Demostració d’imatges de pic alineades a la part superior d’un element de llista amb més d’una línia.

6.1.3. Marges i farcit de llistes

Si es fan servir bé, els marges i el farcit poden fer que les llistes quedin molt

més endreçades i professionals, però cal que sapigueu què esteu fent i tenir en

compte que la situació és diferent per a cada tipus de llista. En aquest subapar-


tat us ensenyaré com aplicar marges i farcit als dos tipus de llista més habituals

de forma assenyada.

Llistes no ordenades

Una cosa que probablement notareu de seguida és que l’estil predeterminat de

les llistes aplica un sagnat més destacat que l’estil predeterminat per als parà-

grafs. Vegeu la figura 6:

Figura 6

Les llistes amb l’estil predeterminat tenen un sagnata l’esquerra.

Si voleu que els elements d’una llista desordenada quedin alineats al mateix punt

que la resta de contingut, haureu de crear alguns estils per modificar el sagnat com

més us agradi. Cada navegador requereix uns paràmetres diferents, en alguns s’ha

d’eliminar el marge i en d’altres s’ha d’eliminar el farcit. Per tant, per establir els

valors inicials a tots els navegadors, establiu el següent:

Pot ser que això no tingui l’efecte que esperàveu perquè farà que tot el text

quedi a la mateixa alçada tocant a l’esquerra, però els pics quedaran més enllà

del text com es veu a la figura 7:

Figura 7

Els pics queden més a l’esquerra que el text.

Per tant, per alinear els pics a l’esquerra, el que heu de fer és establir un marge

per a la llista d’elements i que així quedi tot al mateix nivell:

ul {

margin: 0;

padding: 0;

}

ul {

margin-left: 0;

padding-left: 0;

}


Arribats a aquest punt encara trobareu una diferència d’un píxel entre un na-

vegador i un altre, però l’efecte és bàsicament el més consistent possible. Ve-

geu la figura 8:

Figura 8

Els pics col·locats al mateix nivell que els paràgrafsanteriors i posteriors.

Llistes ordenades

Ara heu de tenir en compte el mateix, però aplicat a les llistes ordenades.

Aquestes llistes són més complicades perquè els símbols numèrics estan aline-

ats segons l’element de la llista que tingui el número més alt. Per exemple, si

teniu una llista de 10 elements, els decimals es col·locaran de manera que l’ele-

ment de dos dígits, el “10”, quedi com es veu a la figura 9:

Figura 9

Els símbols numèrics dels elementsde l’1 al 9 tenen un farcit al’esquerra per quedar alineats ambl’element 10.

Per tant, en realitat no es pot fer que aquesta llista quedi tota alineada a l’es-

querra i al mateix nivell que la resta del text, tret que establiu que la llista faci

servir list-style-type: decimal-leading-zero;, que solucionarà el

problema tal com es veu a la figura 10:

ul li {

margin-left: 1em;

}


Figura 10

Els zeros a l’esquerra omplen l’espaibuit dels elements de l’1 al 9.

És més habitual acceptar senzillament la diferència d’espaiat. Això, però, sig-

nifica que els símbols de les llistes ordenades i desordenades no podran aline-

ar-se fàcilment a l’esquerra de manera consistent. Només es podrà alinear el

text de les llistes.

Necessiteu com a mínim 2 em de marge a l’esquerra per incloure tant les llistes

ordenades com les no ordenades. A la figura 11, fixeu-vos com s’alinea el text

dels elements a les dues llistes.

Figura 11

El text s’alinea tant a les llistes ordenadescom desordenades.

ul, ol {

margin-left: 0;

padding-left: 0;

}

li {

margin-left: 2em;

}


Aleshores què s’ha de fer?

Bàsicament teniu tres opcions:

1) Acceptar la col·locació per defecte de les llistes i dels seus símbols.

2) Especificar l’alineació del text de les llistes.

3) Establir un estil diferent per a ul i ol.

No hi ha una manera “correcta” ni “incorrecta” de fer-ho i és força habitual

que es deixi tot amb la configuració predeterminada per a les llistes de contin-

gut general.

6.1.4. Utilitzar una col·locació de tipus llista

Si voleu que el text d’elements de més d’una línia quedin per sota del sím-

bol de la llista, haureu de configurar la propietat list-style-position

a inside per així obtenir el resultat que es veu a la figura 12:

Figura 12

La posició de la llista inside fa que, a partir de la segona línia, el text quedi per sota del símbol en lloc d’alineat amb el sagnatdel text.

Aquest estil de símbols envoltats de text no és gaire popular. La propietat

list-style-position està establerta per defecte en outside, la qual cosa

produeix el resultat del qual es parla més endavant en aquest apartat.

6.1.5. I les llistes de definicions, què?

En general, les llistes de definicions no requereixen gaire atenció a part d’establir

un estil dt (normalment text en negreta) i controlar el sagnat de les definicions:

dt {

font-weight: bold;

}

dd {

margin-left: 2em;

}


Això defineix un estil clar i senzill per a llistes de definicions, tal com es veu a

la figura 13:

Figura 13

Una llista de definicions amb un estil molt senzill.

Malgrat que les llistes de definicions poden reestructurar-se amb elements flo-

tants i posicionaments, això és complicat i, en general, és millor fer les coses

senzilles. Tal com són, ja són prou útils; només els cal una mica d’ajuda per

fer que els termes de la definició destaquin una mica més i que les definicions

tinguin un sagnat adequat.

6.1.6. Llistes imbricades

aJa vau aprendre a imbricar llistes. Quan creeu el vostre propi CSS heu d’anar

amb compte de mantenir uns trets de disseny molt clars per mostrar la relació

entre una llista imbricada i la llista que la inclou. La manera més fàcil d’acon-

seguir-ho és aplicar un sagnat als elements de la llista imbricada que, de fet, és

la configuració predeterminada a tots els navegadors.

Si establiu el vostre sagnat de llista personal, la configuració bàsica es multi-

plicarà. Per exemple, vegeu el CSS següent:

Cada element subsegüent de la llista filla de la cadena hereta el valor de

margin del seu element de llista pare a més de tenir 2 em propis més afegits

a sobre. Així, doncs, un element de llista de nivell superior (un que no tin-

gui un element de llista com a element pare) tindrà un marge esquerre de

2 em, mentre que un element de llista fill del primer element de llista he-

retarà 2 em del seu pare i tindrà 2 em més afegits a sobre, és a dir, un total

de 4 em, etc.

Vegeu les llistes al subapartat 2.4 del mòdul “El text central d’HTML”.

ul, ol {

margin-left: 0;

padding-left: 0;

}

li {

margin-left: 2em;

}


6.1.7. Llistes horitzontals

Un dels canvis més comuns que són necessaris per treballar amb una llista és

crear una llista horitzontal, és a dir, fer que els elements de la llista apareguin

un al costat de l’altre en comptes d’un a sota de l’altre. Es tracta d’un truc molt

habitual per a la navegació per llocs web. Vegem un exemple de l’apartat dels

menús de navegació (figura 14):

Figura 14

Una llista senzilla.

Convertim-la en una llista horitzontal com es veu a la figura 15:

Figura 15

Una llista horitzontal senzilla.

Per aconseguir aquest efecte hem de fer tres coses a la llista:

1) Eliminar margin i padding de <ul>.

2) Establir els elements de la llista a display: inline;.

3) Aplicar una mica d’espaiat a la dreta dels elements de la llista perquè no

xoquin.

En aquest exemple, la llista té l’ID “mainmenu” (menú principal), així que el

farem servir com a selector contextual per garantir que només canviem la llista

que volem canviar. El CSS és el següent:

aEn aquest senzill exemple només cal establir els elements de la llista a dis-

play: inline;. Tingueu en compte que si feu servir float: left;, també

aconseguireu un resultat semblant. Més endavant en aquesta assignatura

aprendreu més coses sobre els elements flotants.

#mainmenu {

margin: 0;

padding: 0;

}

#mainmenu {

display: inline;

padding: 0 1em 0 0;

}

Vegeu els elements flotants en l’apartat 9 d’aquest mòdul didàctic.


6.1.8. “Columnes falses”

Abans hem creat una llista de canals d’informació de RSS. Ara imagineu-vos

que aquella llista s’ha situat en una barra lateral del vostre lloc. El dissenyador

vol que la llista aparegui en dues columnes amb una vora al voltant de tot el

grup tal com es veu a la figura 16:

Figura 16

Una llista de canals d’informació en dues columnes amb unaicona de RSS com a pic.

Vegeu l’exemple a: “Styling lists example columns”http://devfiles.myopera.com/articles/485/styling-lists-example-columns.html

Suposem que la llista es troba dins d’un <div> que estableix l’amplada i la vo-

ra. La llista bàsica quedaria d’una manera semblant a la figura 17:

Figura 17

La llista sense estils dins de la vora.

Vegeu la llista bàsica original a : “Styling lists example image bullet”http://devfiles.myopera.com/articles/485/styling-lists-example-image-bullet.html

Per aconseguir l’efecte de “faux columns” o columnes falses, afegiu la icona

RSS tal com hem vist abans i apliqueu un marge de 5 píxels a dalt, a la dreta i

a l’esquerra.

.rss {

margin: 5px 5px 0 5px;

padding: 0;

}

.rss li {





}

Notaa

Fixeu-vos que s’afegeix display:-moz-inline-box; perquè l’exem-

ple es pugui veure correctament amb el Firefox 2.

No cal que li afegim marge al botó perquè l’últim element de la llista ja apli-

carà l’espaiat adient amb el seu farcit tal com s’observa a la figura 18:

Figura 18

Ja gairebé hem acabat; aratenim un espaiat i unes iconesde pic ben fetes.

Ara establiu els elements de la llista a display: inline-block; i establiu

l’amplada a 40% i el marge dret a 2% (també podeu fer servir amplades en pí-

xels). També heu d’especificar que el <ul> tingui una amplada de 100% per ga-

rantir que els elements de més d’un línia quedin com han de quedar i que la

llista tingui la mida correcta:

A la majoria de navegadors, amb això n’hi haurà prou per crear l’efecte de la

columna, però haureu d’especificar que l’IE faci “flotar” els elements de la llis-

ta a l’esquerra. Utilitzem un estil condicional per a totes les versions fins a l’IE7

(ja que encara no sabem què faran les futures versions).

.rss {

margin: 5px 5px 0 5px;

padding: 0;

width: 100%;

}

.rss li {

display: inline-block;

width: 40%;

margin: 0 2% 0 0;





}

<!--[if lte IE 7]>

<style type=“text/css”>

.rss li {

float: left;

}


Ara ja tenim l’efecte de les dues columnes, tal com es veu a la figura 19:

Figura 19

La llista completa.

Navegadors antics

Si se us demana que creeu aquest disseny per a navegadors més antics que no

accepten inline-block (bloc inserit), haureu de fer “flotar” els elements de

la llista a l’esquerra a tots els navegadors i fer servir un ajust de distància com

el que es descriu a l’article Clearing a float container without source markup*. Per

sort, l’última fornada de navegadors han fet que el inline-block sigui una

propietat de visualització viable, així que, tret que tingueu una participació

molt gran per a navegadors antics com ara Firefox 2, hauríeu de poder fer ser-

vir el mètode inline-block.

6.1.9. Conclusió de les llistes

Ja hem cobert un conjunt bàsic d’opcions d’aplicació d’estils i mètodes per a

llistes. Podeu fer servir aquests exemples com a punt de partida i combinar-los

per crear un gran nombre de dissenys. Com que les llistes sovint es combinen

amb enllaços, passem a parlar dels enllaços.

6.2. Aplicar estils als enllaços

Aplicar estils als enllaços pot considerar-se una mena d’art. En aquest camp

s’apliquen molts requisits diferents i pot ser difícil complir-los tots i, a la vega-

da, obtenir un resultat estèticament satisfactori. D’altra banda, és perfecta-

ment possible sempre i quan es tinguin en compte una sèrie de normes molt

senzilles:

• comprendre els diferents estats dels enllaços,

• no apartar-se gaire de les expectatives de l’usuari,

• utilitzar els colors adequadament.

Si seguiu aquestes regles, podreu crear enllaços clars i fàcils de fer servir.

</style>

<![endif]-->

* http://www.positioniseverything.net/

easyclearing.html


6.2.1. Comprendre els estats dels enllaços

Abans d’aplicar estils als enllaços, heu de comprendre els diferents estats dels

enllaços. Hi ha un total de cinc estats: no visitat o predeterminat, visitat, se-

leccionat, per sobre i actiu.

• No visitat. L’estat per defecte d’un enllaç quan encara no s’ha activat o vi-

sitat.

• Visitat. L’estat d’un enllaç que l’usuari ja ha visitat.

• Seleccionat. S’aplica mentre l’enllaç està seleccionat, per exemple quan el

cursor de l’usuari del teclat es troba sobre l’enllaç. Actualment, l’IE no ac-

cepta l’estat seleccionat i només fa servir active (actiu) en lloc de focus

(seleccionat).

• Per sobre (‘hover’). S’aplica quan un usuari té el punter del ratolí per sobre

de l’enllaç però encara no l’ha clicat.

• Actiu. S’aplica quan l’usuari activa l’enllaç, és a dir, mentre l’està clicant.

En alguns navegadors aquest estil també s’aplica quan l’enllaç s’ha obert en

una altra finestra o pestanya.

Sempre heu d’especificar el CSS per a cadascun d’aquests estats. Cadascun

aporta informació a l’usuari sobre el fet d’interactuar amb un enllaç. En cas

de dubte sobre si fer servir focus (seleccionat), hover (per sobre) o active

(actiu), podeu aplicar l’estil focus i hover de la mateixa manera perquè les

seves funcions són prou semblants per no causar confusió amb el mateix es-

til d’enllaç. Després podeu afegir alguna variació senzilla per a active, per

exemple posar el text en cursiva. En cas necessari, podeu aplicar el mateix

estil a tots tres.

6.2.2. Com l’evolució dels navegadors va crear expectatives

Per entendre millor algunes expectatives dels usuaris pel que fa als enllaços, va

bé saber una mica de la història del web.

Pot ser que hàgiu sentit a parlar dels “valors per defecte de Netscape” dels en-

llaços o que els enllaços sempre haurien de ser blaus i porpra. Això es remunta

als principis de la creació del web, quan els navegadors establien els colors del

contingut i els creadors de webs no tenien gaire control sobre la forma de re-

presentació de les seves pàgines.

Notaa

Fixeu-vos que no tots aquests estats són mútuament excloents (tot i que

en realitat no és possible que un enllaç estigui visitat i no visitat a la ve-

gada), és perfectament possible que un enllaç estigui en estat “per so-

bre”, “actiu” i “visitat” a la vegada.


El text era negre, el fons era gris i tots els enllaços estaven subratllats. Els en-

llaços sense visitar eren blaus, els enllaços visitats eren porpra i els enllaços ac-

tius eren vermells. Això era tot. Vegeu la figura 20 per observar-ne una mostra.

Figura 20

Una captura de pantalla de Mosaic.

Malgrat que era una mica monòton, era totalment consistent i va establir la

base de les futures expectatives dels usuaris. Concretament, els usuaris en-

cara a dia d’avui esperen que el text subratllat sigui un enllaç. Potser no s’es-

perin que tots els enllaços estiguin subratllats, però sí que esperen que es pugui

clicar sobre un text subratllat. I és millor no decebre aquesta expectativa.

Alguns llocs fan servir enllaços blaus i porpres, que encara són els colors predeter-

minats del contingut sense estil a la majoria de navegadors. Encara que sempre

podeu adaptar-vos a la moda “retro” i seguir amb aquesta parella de colors, en ge-

neral als usuaris no els fa res trobar-se amb altres colors, dintre de certs límits.

6.2.3. Expectatives de l’usuari

Hi ha una sèrie de regles generals per a les expectatives de l’usuari pel que fa

als enllaços.


• Els usuaris esperen trobar enllaços que tinguin un aspecte diferent de la

resta del text que no són enllaços

• Els usuaris esperen que els enllaços reaccionin d’alguna manera quan es

passa el cursor per sobre o quan es selecciona l’enllaç.

• Els usuaris esperen que els enllaços canviïn després de visitar-los.

• Als usuaris els agrada la consistència dels estils dels enllaços de la mateixa

funció per així saber què han de clicar.

• Els usuaris esperen que el text subratllat sigui un enllaç, així que no subrat-

lleu una altra cosa.

Sempre heu de complir aquestes normes bàsiques perquè contribueixen al

fet que els usuaris puguin identificar i utilitzar els enllaços ràpidament.

Heu de crear estils que no obliguin la gent a dubtar de quines parts del text

són enllaços.

Aquestes expectatives es tradueixen en unes normes de codificació molt sen-

zilles:

• definir estils per a tots els estats d’enllaç,

• fer servir el subratllat només per als enllaços.

6.2.4. Utilització adequada dels colors

Quan apliqueu estils als enllaços, aneu amb compte de no basar-vos única-

ment en el color per distingir els diferents estats d’enllaç. No tothom pot veure

igual els colors (per exemple, hi ha gent que no pot veure els colors), de ma-

nera que heu de fer servir colors i també estils com ara subratllats diferents,

icones o colors invertits.

També hauríeu d’assegurar-vos que els colors que escolliu tinguin prou con-

trast. És molt fàcil si es fan servir eines com ara Colour Contrast Analyser (tant

per a PC com per a Mac)* o la barra d’eines d’accessibilitat del web per a Ope-

ra** (tots dos de Paciello Group).

Amb el Colour Contrast Analyser (vegeu la figura 21) es pot utilitzar un selec-

tor de colors per seleccionar els colors de lletra i de fons de la pantalla i després

obtenir una avaluació senzilla del contrast que fan:

* http://www.paciellogroup.com/resources/contrast-analyser.html

** http://www.paciellogroup.com/resources/wat-about.html


Figura 21

Captura de pantalla del Colour Contrast Analyser.

Si els quatre resultats són “pass” (superat), la combinació de colors és adient.

No us oblideu de comprovar tots els estats d’enllaç. Pot ser que hagueu d’in-

troduir-ne alguns manualment al camp “hex” per comprovar l’estat “selecci-

onat”, “per sobre” i “actiu”.

6.2.5. Entrem en matèria: el CSS

Ara que ja enteneu les normes bàsiques dels enllaços, passem a veure el codi. En

aquest subapartat es descriu tot el CSS que necessitareu per aplicar estils com cal.

Aplicar estils d’estat d’enllaç en l’ordre adient

Per començar, tingueu en compte que si no apliqueu els estils als enllaços en

l’ordre correcte en el full d’estil, les definicions s’anul·laran entre elles i els es-

tats dels enllaços no funcionaran. Els estils dels enllaços sempre han d’anar en

aquest ordre:

1. link

2. visited

3. focus

4. hover

5. active

Un truc mnemònic per recordar-ho podria ser: “La Vaca Fa Hola i Adéu”. Si

creieu que no us recordareu d’aquesta frase, haureu de recordar l’ordre de les


propietats de memòria o copiar i enganxar el bloc de codi que es mostra tot

seguit.

Els estils dels diferents estats dels enllaços s’apliquen fent servir les seves “pseudo-

classes” (:link :visited :focus :hover :active) que s’adjunten al selec-

tor d’element d’enllaç, a. Per tant, el CSS inicial hauria de ser el següent:

Si voleu definir una regla de CSS per a tots els enllaços en tots els estats, podeu

aplicar l’estil a directament. Només heu de recordar-vos de col·locar primer la

regla genèrica per mantenir l’ordre:

Això va molt bé si teniu pensat substituir el subratllat per defecte per una vora

inferior, que és el que s’acostuma a fer per obtenir un millor control visual de

l’estil.

Controlar les opcions per defecte

Per defecte, la majoria de navegadors estableixen que tots els enllaços estan su-

bratllats i els enllaços en estat “seleccionat” tenen un contorn, tal com es pot

veure a la figura 22:

Figura 22

D’esquerra a dreta: els estils per defecte de “seleccionat” de l’Opera 9, del Firefox 2 i de l’IE7.

Si voleu substituir aquests estils per uns altres, podeu canviar o desactivar

aquests valors predeterminats.

a:link{}

a:visited{}

a:focus{}

a:hover{}

a:active{}

a {}

a:link{}

a:visited{}

a:focus{}

a:hover{}

a:active{}


Subratllat

El subratllat (underline) es defineix mitjançant la propietat text-decoration* :

Podeu desactivar el subratllat establint la propietat en none:

Fins i tot si manteniu l’estil del subratllat, pot ser que us sigui més fàcil desac-

tivar text-decoration i fer servir border-bottom per establir un subratllat

fals. A l’exemple que es mostra més endavant ho veurem més detingudament.

Contorn

El contorn de l’estat “seleccionat” es controla amb la propietat outline*. El

contorn és molt semblant a una vora, però no ocupa espai ni provoca que la

pàgina reflueixi quan apareix (fixeu-vos que l’IE7 i versions anteriors no el re-

coneixen). La manera més fàcil de controlar el contorn és amb la propietat

d’abreujament:

Aquest exemple es representaria més o menys com es veu a la figura 23:

Figura 23

Representació d’exemple d’un contorn negre i gruixut.

Si teniu dubtes sobre què fer amb el contorn, limiteu-vos a deixar-lo en la for-

ma predeterminada pel navegador.

* http://www.w3.org/TR/REC-CSS2/text.html#lining-striking-

props

a {


}

a {


}

* http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines

a:focus{

outline: thick solid #000;

}


6.2.6. Exemple: recreació de les opcions per defecte de Netscape

Per donar un exemple fàcil d’estil dels enllaços, recrearem les opcions per de-

fecte del Netscape, és a dir, el blau, el porpra i el vermell. Mantindrem el su-

bratllat, però farem que l’estat actiu es mostri en cursiva. Augmentarem la

mida del text només per veure com queda i establirem un fons blanc per a la

pàgina.


Figura 24

Recreació de les opcions per defecte de Netscape.

Subratllats falsos amb border-bottom

Molts dissenyadors han observat que el subratllar és una mica massa gruixut i

tapa les astes descendents de les lletres minúscules, és a dir, la línea del subrat-

body{

background: #fff;

color: #000;

font-size: 2em;

}

a {


}

a:link{

color: #0000CC;

}

a:visited{

color: #6D006D;

}

a:focus{

color: #CC0000;

}

a:hover{

color: #CC0000;

}

a:active{

color: #CC0000;

font-style: italic;

}


llat creua la part inferior de les lletres “g”, “j”, “p”, i “y”, tal com es mostra la

figura 25:

Figura 25

La línia del subratllattalla les astesdescendents de lesminúscules.

Posem per cas que la persona que s’encarrega del disseny de la pàgina hi està

d’acord i li agradaria que la línia del subratllat fos més fina i que no toqués el

text. Per complir aquest requeriment, que és molt habitual, farem servir una

vora en lloc d’un subratllat de manera que quedi com a la figura 26:

Figura 26

Fer servir una vora encomptes del subratllatqueda més bonic.

Primer, desactiveu el subratllat per a tots els estats d’enllaç i després establiu

una vora inferior que encaixi amb el color de l’enllaç en cada estat.

body{

background: #fff;

color: #000;

font-size: 2em;

line-height: 2em;

}

a {


}

a:link{

color: #00c;

border-bottom: 1px solid #00c;

}

a:visited{

color: #6D006D;

border-bottom: 1px solid #6D006D;

}

a:focus{

color: #c00;

border-bottom: 1px solid #c00;

}

a:hover{

color: #c00;


}



Figura 27

Enllaços amb el subratllat fals aplicat.

Si feu servir el mètode de la vora falsa, aneu amb compte de tenir prou line-

height (alçada de línia) establert perquè el subratllat no xoqui amb el text de

la línia següent.

Estils no basats en el color

Com que l’exemple que hem fet servir fins ara es basa totalment en els colors

per distingir quatre dels cinc estats dels enllaços, hauríem de fer el pas següent

i canviar la vora inferior per als estats “visitat”, “seleccionat” i “per sobre”. Do-

nem als enllaços visitats una vora de punts, i als enllaços “per sobre” i “selec-

cionat” una vora discontinua:

a:active{

color: #c00;


font-style: italic;

}

body{

background: #fff;

color: #000;

font-size: 2em;

}

a {


}

a:link{

color: #00c;

border-bottom: 1px solid #00c;

}

a:visited{

color: #6D006D;

border-bottom: 1px dotted #6D006D;

}

a:focus{

color: #c00;

border-bottom: 1px dashed #c00;

}



Figura 28

Canviar l’estil de vora per a cada estat d’enllaç.

Aquest mètode, que accepta el “seleccionat” i el “per sobre” com a estats amb es-

tils equivalents, fa que els estats d’enllaç es distingeixin amb més factors a més a

més del color. Fins i tot si haguéssiu de veure aquests enllaços en blanc i negre po-

dríeu identificar els diferents estats d’enllaç tal com es mostra la figura 29:

Figura 29

Ara els estats d’enllaç poden distingir-se encara que estiguin en blanc i negre.

6.2.7. Icones en enllaços

Alguns llocs web fan servir icones i símbols per afegir informació sobre els en-

llaços. Per exemple, algunes pàgines utilitzen una fletxa per indicar que un en-

llaç condueix a un lloc extern o fan servir una marca d’aprovat per indicar que

l’enllaç ja s’ha visitat.

Aquests efectes són molt fàcils d’aplicar amb imatges de fons tal com es mostra

a la figura 30:

Figura 30

Exemple d’enllaços amb icones distintives.

Per afegir una icona de fletxa als enllaços externs podeu afegir la classe external

a l’etiqueta de l’enllaç (link):

a:hover{

color: #c00;

border-bottom: 1px dashed #c00;

}

a:active{

color: #c00;


font-style: italic;

}

<a href=“http://example.com/” class=“external”>external link</a>


Després, al vostre full d’estil, apliqueu una imatge de fons per a aquesta classe

sense oblidar-vos d’afegir el farcit perquè hi càpiga la imatge:

Aquest exemple aplicaria la icona a tots els casos d’enllaç visitat, en tots els es-

tats. Si volguéssiu limitar la icona només als enllaços externs no visitats, po-

deu combinar classes i les pseudoclasses de l’estat d’enllaç al selector.

Combinar classes i estats proporciona una àmplia gamma de possibilitats cre-

atives per aplicar als enllaços. Mentre recordeu comprovar els colors, l’únic lí-

mit a partir d’aquí és la vostra imaginació.

6.3. Combinar-ho tot: un senzill menú de navegació

Per demostrar una manera de combinar les llistes i els enllaços, els exemples

en zip inclouen un submenú de navegació senzill, tal com es veu a la figura

31. Els submenús són un sistema de navegació molt habitual.

Figura 31

Captura de pantalla del submenú d’exemple.

Vegeu els exemples a: “Simple flyout navigation menu”http://dev.opera.com/articles/view/32-styling-lists-and-links/stylinglistsexampleflyout.html

Resum

Per a un dissenyador web és essencial saber molt bé com aplicar estils a llistes

i enllaços perquè es fan servir per tot arreu. S’acostumen a combinar per crear

a.external {

background: #fff url(“icon-external.gif”) center right no-repeat;

padding-right: 30px;

}

a.external:link{

background: #fff url(“icon-external.gif”) center right no-repeat;

padding-right: 30px;

}


la navegació pel lloc i un estil clar dels enllaços és vital perquè un lloc web si-

gui fàcil d’utilitzar. Uns estils dels enllaços mal fets poden confondre molt a

tothom i fins i tot poden fer que determinades persones no puguin fer servir

el lloc.

Preguntes de repàs


1. Com es poden escollir els estils bàsics de les llistes, com per exemple pics

quadrats o números romans en una llista ordenada?

2. Què és un sprite d’imatge i per què es pot fer servir?

3. Per què el contrast dels colors és important i com es pot garantir que els

colors dels enllaços siguin de colors adequats?

4. Quin és l’ordre correcte per aplicar estils a cada estat d’enllaç?

Bibliografia

WCAG Samurai Errata for WCAG 1.0, que fa referència específicament al punt

Guideline 2. Don’t rely on colour alone.

http://www.wcagsamurai.org/errata/errata.html

http://www.wcagsamurai.org/errata/errata.html#GL2

“Type and Colour” (un capítol de Building Accessible Websites, de Joe Clark)

http://joeclark.org/book/sashay/serialization/Chapter09.html

“Juicy Studio: Highlighting Links”

http://juicystudio.com/article/highlighting-links.php

“Max Design—Simple, accessible external links”

http://www.maxdesign.com.au/presentation/external/

“Resource Center—Contrast Analyser 2.0 (Paciello Group)”

http://www.paciellogroup.com/resources/contrast-analyser.html

“A List Apart: Sprites de CSS: Image Slicing’s Kiss of Death”

http://www.alistapart.com/articles/sprites


7. Estils de les taulesBen Buchanan

A vegades sembla que en el món actual del desenvolupament web les taules

estiguin una mica marginades. Es fa tant de cas a la norma de “no feu servir

taules!” que a vegades la gent s’oblida que en realitat la frase és: “no feu servir

taules per a la composició”. Les taules van molt bé per al seu objectiu original,

que és mostrar dades tabulars. Per això és útil saber com aplicar-los estils cor-

rectament.

Aquesta guia es centra en com aplicar CSS d’una manera eficaç per obtenir es-

tils de taules de dades clares i llegibles. A més, també parlaré d’alguns requeri-

ments habituals de disseny pel que fa a les taules.

Descarregueu els exemples a: “table-examples.zip”http://dev.opera.com/articles/view/33-styling-tables/table-examples.zip

7.1. Estructura de les taules

Abans de centrar-nos en el CSS, fixem-nos en els elements estructurals bàsics

de les taules a les quals haureu d’aplicar estils de manera clara:

• Encapçalaments de les taules.

• Cel·les de dades de les taules.

• Títols de les taules.

Quan els usuaris del vostre lloc llegeixin la vostra taula, haurien de poder en-

tendre i seguir fàcilment la seva estructura. La manera més senzilla d’aconse-

guir-ho és fent servir vores, colors de fons o totes dues coses.

No cal que seguiu aquestes convencions estilístiques, però sí hauríeu de garan-

tir que existeix una diferència clara entre les cel·les th i td; a més, el caption

hauria d’estar associat clarament amb la taula i diferenciat de la resta del text

de la pàgina.

Notaa

Pot ser que us resulti útil descarregar-vos els exemples de codi per a les

taules que es mostren en aquest apartat des de l’arxiu “table-exam-

ples.zip”, de manera que pugueu anar seguint l’apartat.


7.2. Conceptes bàsics

aFixeu-vos com es representa aquesta taula sense estil:

Les dades són comprensibles, però cal esforçar-se una mica per veure com va

tot. Afegim-li uns estils per fer que sigui més fàcil de llegir.

7.2.1. Amplada de taula i de cel·la

La primera decisió que cal prendre és quina amplada ha de tenir la taula. L’op-

ció per defecte del navegador és la mateixa que establir table { width:

auto; }, que dóna com a resultat que la taula s’estengui a l’amplada del con-

tingut. Això en general queda desordenat.

Posem per cas que la nostra taula ha d’entrar en una columna de contingut de

600 píxels d’amplada. Especifiquem que la taula s’ampliï fins al 100% de l’am-

plada disponible per aprofitar millor l’espai. Com que hi ha quatre columnes,

establim també l’amplada de les cel·les de taula a un 25% cadascuna.

De fet podeu limitar-vos a establir l’amplada a th i definirà l’amplada de totes

les columnes; tot i així, sempre va bé ser rigorós. Aquest estil tan senzill donarà

el resultat que es veu a la figura 1:

Figura 1

La taula d’exemple amb una configuració senzilla d’amplada.

Podeu veure el mateix exemple a l’apartat 5 del mòdul “El text central d’HTML”*.

table {

width: 100%;

}

th, td {

width: 25%;

}


Ara les cel·les queden amb una amplada igualada. Més endavant ja veurem

com especificar amplades desiguals, però de moment seguim amb el se-

güent pas.

7.2.2. Alineació del text

La taula encara és una mica confosa de llegir, de manera que especificarem que

l’alineació del text sigui una mica més clara. La norma addicional que es mos-

tra tot seguit alinearà a l’esquerra els encapçalaments perquè encaixin amb el

contingut (per defecte, els navegadors centren els títols de les taules):

Així es clarifica una mica la taula tal com es pot veure a la figura 2:

Figura 2

Taula amb alineació a l’esquerra.

Ara mateix, totes les cel·les estan alineades verticalment al centre. Si ho prefe-

riu, podeu definir que el text s’alineï a la part superior o inferior de la cel·la, o

qualsevol posició de vertical-align* que vulgueu. Les regles següents esta-

bleixen que el text s’alineï a la part superior.

table {

width: 100%;

}

th, td {

width: 25%;

text-align: left;

}

* http://www.w3.org/TR/REC-CSS2/visudet.html#line-height

table {

width: 100%;

}

th, td {

width: 25%;

text-align: left;

vertical-align: top;

}


Ara la taula queda com es veu a la figura 3:

Figura 3

La taula amb alineació vertical.

Fixeu-vos com ara tots els títols de la fila superior queden tocant a dalt encara

que “Last Major Eruption” queda en dues línies.

7.2.3. Vores

La taula ja queda una mica millor, però encara costa una mica llegir cada línia.

Ara aplicarem algunes vores per fer que tot sigui més fàcil de llegir. Heu d’es-

tablir les vores de manera independent per a cada part de la taula i després de-

cidir com s’haurien de combinar.

Per mostrar-vos on quedaran les vores, la figura 4 mostra diferents vores per a

table (solid black) (taula (negre sòlid)), caption (solid grey) (títol (gris

sòlid)), th (dashed blue) (línia discontinua blava) i td (dotted red) (línia

de punts vermella):

Figura 4

Mostra de les diferents vores en una taula.

Fixeu-vos com la vora de la table (taula) recorre el contorn exterior de totes

les cel·les d’encapçalament i de dades i després passa per entre les cel·les i el

títol de la taula. També podeu veure que, per defecte, les vores th i td es dis-

tancien una mica una de l’altra.

Passem ara a un altre estil de taula. Podeu crear una vora negra senzilla per a

la taula i les cel·les mitjançant la propietat border (vora). Això es fa amb les

regles següents:

table {

width: 100%;


}


I dóna com a resultat el que es mostra a la figura 4b:

Figura 4b

Taula amb vores negres senzilles.

Això fa que les files siguin més fàcils de llegir, però pot ser que no us agradi

l’espai que queda entre les cel·les. Hi ha dues maneres de canviar-ho.

Primer, podeu limitar-vos a tancar els buits fent servir la propietat border-

spacing (espaiat de vores), per exemple així:

D’aquesta manera les vores es tocaran en lloc de quedar separades. Així es can-

via la vora d’1 píxel en una vora de 2 píxels tal com es veu a la figura 5:

th, td {

width: 25%;

text-align: left;



}

table {

width: 100%;


}

th, td {

width: 25%;

text-align: left;



border-spacing: 0;

}


Figura 5

Taula sense espaiat entre vores que produeix un efecte de vora de 2 píxels.

També podeu augmentar l’espai entre les cel·les fent servir border-spacing,

encara que cal tenir en compte que aquesta propietat no funciona amb l’In-

ternet Explorer.

Si voleu mantenir l’efecte de vora d’1 píxel, necessitareu definir la taula de ma-

nera que les vores “col·lapsin” les unes sobre les altres. Podeu aconseguir-ho

utilitzant la propietat border-collapse (superposició de vores) en lloc de la

de border-spacing (espaiat de vores):

D’aquesta manera obtindreu una taula amb una vora d’1 píxel tal com s’ob-

serva a la figura 6:

Figura 6

Taula amb border-collapse (superposició de vores) definit per a superposar-se i així reduir la vora a 1 píxel.

Quan definiu que les vores se superposin, heu de tenir en compte que això us

pot causar problemes si teniu estils de vores diferents aplicats a les cel·les ad-

jacents. Quan els estils de vores diferents se superposin els uns sobre els altres,

entraran en “conflicte” entre ells. Això se soluciona mitjançant les regles de

resolució de conflictes de vores de taula de la W3C CSS2*, que determinen

quin estil “guanya” quan se superposen.

table {

width: 100%;


}

th, td {

width: 25%;

text-align: left;



border-collapse: collapse;

}

* http://www.w3.org/TR/REC-CSS2/tables.html#border-conflict-

resolution


7.2.4. Farcit

Ara que ja heu aplicat vores a les cel·les, pot ser que vulgueu afegir una mica

d’espai en blanc a les cel·les del títol i de la taula. Per fer-ho només heu de fer

servir el padding (farcit).

Això fa que el text “respiri” una mica, tal com es veu a la figura 7:

Figura 7

Taula amb farcit aplicat a totes les cel·les

7.2.5. Col·locació del caption

Fins ara el caption ha estat sempre a la part superior de la taula. Tanma-

teix, pot ser que vulgueu moure’l a un altre lloc. Per desgràcia, en l’IE no

es pot fer, però en tots els altres navegadors podeu canviar-ne la posició

fent servir la propietat caption-side. Les opcions possibles són: top (su-

perior), bottom (inferior), left (esquerra) i right (dreta). Ara el posarem

el títol a la part inferior:

table {

width: 100%;


}

th, td {

width: 25%;

text-align: left;




padding: 0.3em;

}

caption {

padding: 0.3em;

}

table {

width: 100%;


A la figura 8 es mostra el resultat:

Figura 8

Taula amb el caption mogut a la part inferior

aSi voleu canviar la posició del caption, recordeu que cap canvi de costat no

funcionarà amb l’IE. Per exemple, si voleu afegir tres vores per fer que el títol

“s’uneixi” a la part inferior de la taula, a l’IE no quedarà així perquè el títol

seguirà quedant a la part superior. Haureu de fer servir comentaris condicio-

nals* per reaplicar l’estil a la taula per a l’IE.

Per a la resta d’exemples deixaré el caption a la part superior.

7.2.6. Fons

Una altra manera molt senzilla d’aplicar estils a les taules és afegir colors i

imatges de fons. Això es fa amb la propietat background (fons), encara que

heu de tenir present que les diferents parts de la taula actuaran com “capes”

una a sobre de l’altra. L’especificació CSS2 explica els efectes de capes de fons

força detalladament* però, en poques paraules: els fons es taparan els uns als

altres en aquest ordre:

1. taula (que queda “al fons de tot” o “darrere de tot”)

2. grups de columnes


}

th, td {

width: 25%;

text-align: left;




padding: 0.3em;

caption-side: bottom;

}

caption {

padding: 0.3em;

}

Per saber-ne més, vegeu també el subapartat 7.2.7.

* http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/

* http://www.w3.org/TR/REC-CSS2/tables.html#table-layers


3. columnes

4. grups de files

5. files

6. cel·les (per “dalt” o “davant” de tot, és a dir, que el seu fons tapa tots els altres)

Per tant, si establiu un fons per a la taula i un color diferent per a les cel·les, el

fons de la cel·la taparà el fons de la taula. Si heu fet que les vores se superposin

amb collapse, el fons de la taula no es veurà gens. No obstant això, si heu

establert border-collapse en separate, el fons de la taula es veurà per en-

tre les vores.

a

Imagineu-vos que definiu la taula de manera que tingui un fons vermell i les

cel·les amb fons blanc. Entre la separació de les cel·les es veu el vermell, però

les cel·les segueixen sent blanques, tal com es mostra a la figura 9:

Figura 9

Taula que demostra com l’element de fons de taula vermell es veu entre els fons blancs de les cel·les

També podeu fer servir una imatge de fons. Per exemple, si voleu tenir una

gradació que es vegi entre les cel·les, podríeu definir th i td amb fons blancs,

però establir el fons de table amb una gradació de colors:

A l’apartat 11 d’aquest mòdul aprendreu més coses sobre z-index.Notaa

Fixeu-vos que el concepte d’elements diferents un a sobre de l’altre a la pà-

gina és controlable; podeu controlar a quina alçada de la “pila” queda un

element en relació amb els altres canviant la seva propietat z-index.

table {

border-collapse: separate;

border-spacing: 5px;

background: #000 url(“gradient.gif”) bottom left repeat-x;

color: #fff;

}

td, th {

background: #fff;

color: #000;

}


Fixeu-vos que el color de fons s’estableix en negre, que omple l’espai a la part

superior on acaba la gradació cromàtica (sempre heu de tenir en compte que

pot ser que la taula sigui més alta que la imatge de fons). El color de davant de

tot s’estableix en blanc per si en algun moment aquests colors per defecte es

veuen a través del contingut de les cel·les. En general, els estils de les cel·les

cancel·laran la configuració del color del text de l’estil de table {}, però sem-

pre s’haurien de definir colors de fons i de primer pla que facin contrast.

Aquests estils creen una taula que quedaria com a la figura 10 a la majoria de

navegadors.

Figura 10

Taula amb una imatge de fons amb gradació de colors que es veu entre les cel·les.

Per defecte, amb l’IE no es veurà tant el fons perquè no reconeix border-spa-

cing. Tanmateix, s’aconsegueix el mateix efecte, tal com s’observa a la figura 11:

Figura 11

L’IE proporciona menys espai entre vores.

Depenent de les circumstàncies, pot ser que us conformeu amb aquesta dife-

rència de representació entre navegadors. Lògicament, però, això no sempre

és possible, per exemple quan un client especifica que vol que un disseny que-

di exactament igual a tots els navegadors.

7.2.7. Arreglar l’IE amb estils condicionals

Existeix una manera de solucionar els problemes de l’IE que hem mencionat

abans. Cal furgar una mica en l’IE i un full d’estil extra, però funciona. Podeu fer

servir una expression per fer l’espai més ample i després carregar aquesta ex-

pressió mitjançant comentaris condicionals. La sintaxi de l’expressió és aquesta:

Aquest CSS només serveix per a l’IE, de manera que només l’IE l’ha de poder

aplicar. L’expressió també invalidarà el full d’estil, de manera que els desenvo-

lupadors prefereixen aïllar les manipulacions de l’IE a un full d’estil apart que

només carregui l’IE.

Per fer-ho, creeu un full d’estil nou que es digui ie-only.css (“només IE”) i en-

llaceu-lo dins de comentaris condicionals:

Fixeu-vos que [if lte IE 7] significa “si menys que o igual a la versió 7 de

l’IE”. Això revela el codi a l’IE7 i a totes les versions anteriors de l’IE, però el

comentari d’HTML que l’envolta oculta el codi a tots els altres navegadors. Po-

deu ajustar-ho a qualsevol versió de l’IE que necessiteu, per exemple, si es trac-

ta de la versió IE6 i anterior feu servir: [if lte IE 6].

Al vostre full d’estil principal, establiu l’estil normal:

I aleshores establiu l’estil únicament per a l’IE com ie-only.css:

table {

border-collapse: expression(“separate”, cellSpacing = “5px”);

}



table {



border-spacing: 5px;

background: #000 url(“gradient.gif”) bottom left repeat-x;

}

table {

border-collapse: expression(“separate”, cellSpacing = “5px”);

}


Així, l’IE mostrarà una taula amb espais amples entre les cel·les. Només heu de

recordar-vos de conservar la configuració d’amplada addicional. Si actualitzeu

el vostre full d’estil principal, també haureu d’actualitzar ie-only.css. Com

és lògic, els comentaris condicionals permeten fer moltes coses més, a part

d’aplicar estils a les taules, perquè el full d’estil extra pot incloure tot el CSS

que necessiteu per arreglar errors de l’IE.

7.2.8. Un disseny senzill

La majoria de dissenys utilitzen combinacions senzilles de fons. Per tant, ara

aplicarem als encapçalaments de la taula un fons gris i canviarem el títol de

manera que sigui text blanc sobre fons negre:

Això queda com es veu a la figura 12:

Figura 12

Taula amb títol de text blanc sobre fons negre i fons gris clar a les cel·les d’encapçalament

table {

width: 100%;


}

th, td {

width: 25%;

text-align: left;




padding: 0.3em;

caption-side: bottom;

}

caption {

padding: 0.3em;

color: #fff;

background: #000;

}

th {

background: #eee;

}


7.3. Variacions habituals

En aquest subapartat em centraré en alguns arquetips de disseny habituals que

veureu moltes vegades a moltes taules del web.

7.3.1. Aplicar línies de zebra

Una cosa que s’acostuma a demanar molt pel que fa a les taules és crear files

de colors alterns. Es solen anomenar “línies de zebra”. Malgrat que hi ha certa

polèmica sobre si les línies de zebra ajuden o no realment al lector*, són un

estil molt popular. A la figura 13 es mostra un exemple:

Figura 13

Taula amb “línies de zebra”, files alternatives de color blanc o gris clar.

La manera més fàcil d’aplicar l’efecte de les línies de zebra és afegir una classe

per alternar files de la taula i després utilitzar un selector de CSS contextual per

aplicar estils a les cel·les d’aquestes files. Primer de tot s’afegeixen les classes

“parell” (odd) i “senar” (even) a les files de la taula, així:

Podeu saltar-vos la fila del títol perquè ja té un estil propi. Llavors afegiu una

classe contextual per definir el fons de totes les cel·les de les files de la classe

senar (“odd”).

* http://www.alistapart.com/articles/zebrastripingdoesithelp

...

<tr class=“odd”>

...

<tr class=“even”>

...

.odd th, .odd td {

background: #eee;

}


Aquesta és la manera més senzilla d’afegir línies de zebra a una taula d’HTML

que funcioni en tots els navegadors, però no és del tot perfecta perquè, què

passa si després afegiu una fila a la taula? Doncs que hauríeu de desplaçar tots

els noms de classe odd i even perquè tot quedés bé.

Hi ha dues opcions alternatives:

• Podeu afegir les classes mitjançant JavaScript no obstrussiu, tal com es

mostra a A List Apart: Zebra Tables*. La majoria de frameworks de JavaScript

també tenen un mètode adequat: Zebra Table Showdown** compara una

gamma d’implementacions.

• Podeu fer servir el selector de CSS3 :nthchild, però encara no el reconeixen

tots els navegadors. De tota manera, amb el pas del temps això anirà millorant.

Podeu trobar més informació sobre les línies de zebra amb nth-child en un

apartat de dev.opera.com*.

7.3.2. Graelles incompletes

Alguns dissenys responen bé amb graelles d’aspecte més obert i menys estruc-

turat. Una variant molt senzilla consisteix a eliminar les vores verticals i deixar

que el fons ompli el títol, com a la figura 14:

Figura 14

Taula amb vores gris clar només pels extrems i per sota de cada cel·la.

El CSS per aconseguir aquest efecte és:

* http://www.alistapart.com/articles/zebratables/

** http://jquery.com/blog/2006/10/18/zebra-table-showdown/

* http://dev.opera.com/articles/view/zebra-striping-tables-with-

css3/

table {

width: 100%;


text-align: left;


margin: 0 0 1em 0;

caption-side: top;

}


També podeu anar un pas més enllà i eliminar totes les vores tret de la vora

superior i inferior per donar una mica més de definició a la taula central. Ve-

geu la figura 15:

Figura 15

Taula amb vores només a la part superior i inferior de la taula central.

El CSS per aconseguir aquest efecte és el següent:

caption, td, th {

padding: 0.3em;

}

th, td {

border-bottom: 1px solid #999;

width: 25%;

}

caption {

font-weight: bold;

font-style: italic;

}

table {

width: 100%;

text-align: left;


margin: 0 0 1em 0;

caption-side: top;

}

caption, td, th {

padding: 0.3em;

}

tbody {

border-top: 1px solid #000;


}

tbody th, tfoot th {

border: 0;

}


7.3.3. Graelles interiors

Pot ser que a vegades us interessi eliminar la vora exterior però conservar la

graella interior de vores com a la figura 16:

Figura 16

Taula amb un disseny de graella interior

Per aplicar aquest efecte a tots els navegadors actuals, heu d’afegir una classe

a les cel·les th i td que apareixen en últim lloc de cada fila, així:

th.name {

width: 25%;

}

th.location {

width: 20%;

}

th.lasteruption {

width: 30%;

}

th.eruptiontype {

width: 25%;

}

tfoot {

text-align: center;

color: #555;

font-size: 0.8em;

}

...

<tr>

<th scope=“col”>Volcano Name</th>

<th scope=“col”>Location</th>

<th scope=“col”>Last Major Eruption</th>

<th scope=“col” class=“last”>Type of Eruption</th>

</tr>

...


Aleshores utilitzem la classe per eliminar la vora dreta d’aquestes cel·les. El CSS

complet és el següent:

Graelles interiors amb:lastchild

Quan millori la compatibilitat dels navegadors, podrem utilitzar el pseudose-

lector :lastchild per aconseguir aquest efecte sense classes. El CSS seria:

table {

width: 100%;

text-align: left;


margin: 0 0 1em 0;

caption-side: top;

}

caption, td, th {

padding: 0.3em;

}

th, td {


border-right: 1px solid #000;

}

th.last, td.last {

border-right: 0;

}

tfoot th, tfoot td {

border-bottom: 0;

text-align: center;

}

th {

width: 25%;

}

table {

width: 100%;

text-align: left;


margin: 0 0 1em 0;

caption-side: top;

}

caption, td, th {

padding: 0.3em;

}


Això ja funciona actualment a les darreres versions d’Opera, Firefox i Safari.

7.4. Dos errors comuns

En aquest últim subapartat parlaré de dos errors realment molt habituals per-

què estigueu preparats per quan us els trobeu. Tenen a veure amb les vores i

els títols.

7.4.1. Error de superposició de les vores

Quan definiu la taula amb border-collapse: collapse; descobrireu que

Firefox i Safari no mostren correctament l’amplada dels elements de la taula.

Per exemple, si establiu una vora d’1 píxel per a la taula, les cel·les i el títol,

Firefox mostrarà el títol 1 píxel més curt per la banda esquerra, tal com es veu

a la figura 17:

Figura 17

L’error de border-collapse afecta Firefox i Safari.

Safari fa el mateix, però a la banda dreta. Aquest error es basa en una qüestió

d’arrodoniment que es redueix al problema de com representar un “mig pí-

xel”. Es podria afirmar que no es tracta d’un error per se, però els navegadors

no hi estan d’acord, de manera que en la pràctica, sí que es tracta d’un error.

Com es pot solucionar? Si voleu fer servir una vora d’1 píxel i un fons de títol,

no hi ha cap altra solució a part d’acceptar-ho. És una diferència molt petita i

no es tracta d’un problema greu. És a dir, la taula segueix sent perfectament

th, td {


border-right: 1px solid #000;

}

th:lastchild, td:lastchild {

border-right: 0;

}

th {

width: 25%;

}


llegible. Per tant, molta gent opta per acceptar les diferències entre navega-

dors. El web té aquestes coses.

Si no us fa res utilitzar una vora més gran, com per exemple de 2 píxels, podeu

establir una vora d’1 píxel a la taula, les cel·les i el títol i després definir la taula

perquè tingui les vores separades i aplicar un espai de zero entre elles.

En el cas del Firefox, com a mínim les vores d’1 píxel es sumen per a crear la

vora representada de 2 píxels que volem obtenir, de manera que ens estalviem

el problema de l’arrodoniment. El Safari, en canvi, segueix deixant un espai.

Per altra banda, podeu evitar el problema si no apliqueu vora ni color de fons

al títol. El problema no desapareixerà, però no es notarà gens. Probablement,

aquesta és la solució, més fàcil i efectiva.

7.4.2. Error de marge/caption

Si utilitzeu un caption i establiu un marge a table (taula), heu de tenir en

compte que pot ser que el Firefox i el Safari disposin el marge de la taula entre

les cel·les de la taula i el títol.

Per evitar que passi això al Firefox, podeu definir el marge a tres costats de

la taula, definir explícitament el caption-side (costat en què apareix la

caption) i després afegir el quart marge a la caption (títol). Per desgràcia,

en el cas del Safari aquesta solució causarà error. Per tant, no es tracta real-

ment d’una solució, tret que estigueu disposats a tolerar l’error a Firefox o

Safari.

L’única manera d’evitar un problema al Firefox i, a la vegada, al Safari, és es-

tablir un marge zero al costat de la caption. Per exemple, si el títol es troba a

la part superior, podeu establir el marge al costat de la dreta, a baix i al costat

esquerre o només a baix. Això pot ser que funcioni si definiu tots els marges

al mateix costat dels elements de contingut de manera que no faci falta que el

marge creï espais entre la taula i el contingut adjacent.

table {


border-spacing: 0;


}

th, td, caption {


}


Resum

A hores d’ara ja hauríeu de dominar les opcions d’estil bàsiques per a taules.

Hi ha certs límits que imposen les inconsistències dels navegadors, però en ge-

neral hauríeu de poder crear taules clares i llegibles sense cap problema. No-

més heu de fixar-vos bé en les vores, donar-li al text una mica d’espai perquè

pugui respirar i anar amb compte amb els fons.

Preguntes de repàs


1. Com es controla l’espai entre la taula i les vores de les cel·les?

2. Què passa quan table (taula) té un color de fons, les cel·les th i td tenen

un altre color de fons i border-collapse (superposició de vores) està esta-

blert en collapse (superposició)?

3. Com poden establir-se amplades diferents per a cada columna?


W3C: CSS2 Tables, sobretot l’apartat que parla sobre les capes de fons de taula

de CSS2.

http://www.w3.org/TR/REC-CSS2/tables.html

“A Dao of Web Design—deixen que la web sigui la web”. A List Apart. Un ar-

ticle clàssic que explica per què una diferència d’1 píxel entre navegadors no

és realment important.

http://www.alistapart.com/articles/dao/

“Zebra Tables” i “Zebra striping: Does it Really Help?”. A: A List Apart.

http://www.alistapart.com/articles/zebratables/

http://www.alistapart.com/articles/zebrastripingdoesithelp/

“Zebra striping tables with CSS3”

http://dev.opera.com/articles/view/zebra-striping-tables-with-css3/

“Supporting IE with conditional comments”

http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/

“A CSS styled table” i “A CSS styled calendar”. A: Veerle’s blog

http://veerle.duoh.com/blog/comments/a_css_styled_table/

http://veerle.duoh.com/index.php/blog/comments/a_css_styled_calendar/


“CSS Table Gallery” mostra una sèrie de dissenys per a taules (tot i que cal tenir

en compte que moltes no compleixen les recomanacions de contrast de color

del W3C).

http://icant.co.uk/csstablegallery/index.php

http://www.w3.org/TR/AERT#color


8. Disseny, composició i presentació de formularis amb CSSBen Henick

L’apartat dels formularis HTML us va presentar els conceptes bàsics de creació

de formularis i estils. Aquest apartat continua on va acabar l’altre, ofereix més

detalls sobre els elements i estils de formulari i sobre com s’inclouen els for-

mularis en els dissenys d’aplicació web del món real.

Descarregeu el fitxer de codi d’exemple complet a: “Styling forms code examples”http://dev.opera.com/articles/view/34-styling-forms/styling_forms_code.zip

8.1. Conceptes nous que presenta aquest apartat

En aquest apartat trobareu informació sobre la implementació de formularis i

la composició d’interfícies.

8.1.1. Sobrecàrrega de regles i etiquetes

aEs pot dir que fer servir moltes etiquetes class i id incompleix el principi

KISS. Tanmateix, les composicions exigents sovint provoquen conflictes de

cascada, conflictes que es poden resoldre molt fàcilment afegint etiquetes i re-

dactant regles de full d’estil que continguin diversos selectors.

Les composicions més exigents estan plenes de casos límit, els quals és millor

solucionar assignant un id als elements que defineixen un context molt con-

cret i especial.

8.1.2. Elements de camp de formulari nous

Un formulari efectiu sovint ha de ser quelcom més que un conjunt de botons

i camps d’introducció de text, perquè és habitual estructurar les respostes de

l’usuari en termes d’opcions. L’HTML proporciona diverses opcions per als

dissenyadors que es trobin amb aquest requisit.

Notaa

Podeu descarregar-vos el fitxer de codi d’exemple complet

“styling_forms_code.zip” perquè pugueu jugar-hi en el vostre ordina-

dor. A més, en diversos punts de l’apartat s’ofereixen enllaços als fitxers

d’exemple.

El principi KISS s’explica a l’apartat 4 d’aquest mòdul.


8.1.3. Principis del disseny de formularis

Els formularis d’un lloc web són normalment punts centrals per a la interacció

amb l’usuari i l’obtenció de dades. Per tant, acostumen a ser fonamentals per

a l’èxit d’un web, la qual cosa exigeix dissenyar-los amb tota la cura possible.

8.1.4. La regla dels terços

Els usuaris acostumen a centrar la seva atenció en quatre punts d’un llenç (i

en les línies que el travessen). Aquest apartat presenta aquest fenomen al lec-

tor i ofereix suggeriments per aprofitar-lo al màxim amb el CSS.

8.1.5. Quadrícules

aEn apartats anteriors ja s’ha explicat com garantir unes tipografies consistents

i treure el màxim profit de l’espai en blanc. Aquest apartat va una mica més

enllà i explica com es poden fer servir les unitats em per aplicar un grau de

consistència a la composició, que seria impossible sense CSS.

8.1.6. Capes de suport de plataforma

Un requisit habitual dels projectes comercials és la representació gairebé exac-

ta del disseny aprovat del web en un o més navegadors. En aquest apartat es

tractarà breument les causes, els efectes i els processos relacionats amb el com-

pliment d’aquest requisit.

8.2. Un formulari de contacte senzill

aEls formularis de contacte amb què els visitants d’un web poden enviar un cor-

reu electrònic directament a un compte de correu són molt habituals per raons

òbvies: són accessibles a qualsevol persona que tingui una adreça activa de

correu electrònic i són fàcils de filtrar a una carpeta de correu específica.

aL’etiquetatge que s’ha utilitzat en un mòdul anterior sobre formularis fa servir

un d’aquests formularis, que s’ha decorat molt.

8.2.1. Etiquetatge

Podeu veure com garantir unes tipografies consistents a l’apartat 3 d’aquest mòdul i com treure el màxim profit de l’espai en blanc a l’apartat 5 del mòdul “Conceptes de disseny web”.

Podeu veure els formularis de contacte a l’apartat 6 del mòdul “El text central d’HTML”.

Vegeu l'apartat 6 del mòdul "El text central d'HTML".

1 <form id=“contactForm” method=“post” action=“/cgi-bin/service_email_script.php”>

2 <ul>

3 <li id=“nameField” class=“required”><label for=“realname”>Name:</label>

<input type=“text” name=“name” value=““ class=“medium” id=“realname” />


8.2.2. Canvis pel que fa al formulari anterior

A més d’incloure diversos elements nous, s’han afegit algunes classes i ID a

l’etiquetatge als quals es pot fer referència des del full d’estil. D’aquesta mane-

ra es pot fer referència a cada formulari, parella de camp/valor i camp de forma

individual, sigui quin sigui el context.

<span class=“note”>required</span></li>

4 <li id=“addressField” class=“required”><label for=“address”>Email:</label>

<input type=“text” name=“email” value=““ class=“medium” id=“address” />

<span class=“note”>required</span></li>

5 <li id=“subjectField”><label for=“natureOfInquiry”>General subject:</label>

6 <select name=“subject” class=“medium” id=“natureOfInquiry”>

7 <option value=“support”>Support</option>

8 <option value=“billing”>Accounts & billing</option>

9 <option value=“press”>Press</option>

10 <option value=“other_q”>Other questions</option>

11 </select>

12 </li>

13 <li id=“acctTypeField”><label for=“acctNone”>Account type:</label>

14 <fieldset>

15 <label for=“acctGold”>Gold</label><input type=“radio” name=“acct_type”

id=“goldAcct” class=“rInput” />

16 <label for=“acctSilver”>Silver</label><input type=“radio”

name=“acct_type” id=“acctSilver” class=“rInput” />

17 <label for=“acctBronze”>Bronze</label><input type=“radio”

name=“acct_type” id=“acctBronze” class=“rInput” />

18 <label for=“acctNone”>None</label><input type=“radio” name=“acct_type”

id=“acctNone” class=“rInput” checked=“checked” />

19 </fieldset>

20 <span class=“note”>required</span>

21 </li>

22 <li id=“availabilityField”>

23 <label for=“availability”>My account is unavailable:</label>

<input type=“checkbox” name=“is_down” id=“availability”

class=“rInput” /></li>

24 <li id=“messageField”><label for=“messageBody”>Comments:</label>

<textarea name=“comments” cols=“32” rows=“8” class=“long”

id=“messageBody”></textarea></li>

25 <li class=“submitField”><input type=“submit” value=“Send”

class=“submitButton” /></li>

26 </ul>

27 </form>


Els nous identificadors també fan que sigui més fàcil que el dissenyador pugui

distingir els camps que s’han d’omplir obligatòriament dels que no.

Per acabar, hi ha algunes classes noves que ofereixen suggeriments de la quan-

titat i del tipus d’informació que haurien de mostrar els elements de formulari

als quals estan adjuntats. Aquestes classes permeten aplicar detalls de compo-

sició a elements arbitraris múltiples de forma simultània.

8.2.3. Defectes aparents

Com se suposa que el formulari de demostració és el contingut principal,

la legend (llegenda) utilitzada en formularis anteriors s’ha substituït per

un títol.

Les llegendes són molt adients en els fieldsets (conjunts de camps) en

comptes de les labels o etiquetes (que poden identificar-se amb controls

únics). En aquest cas, l’element legend s’ha omès completament perquè és di-

fícil aplicar-hi estils.

Cal destacar també que és millor col·locar les etiquetes “obligatori” sobre els

camps als quals els correspongui abans que el camp al codi font, per facilitar

les coses als usuaris amb programari de lector de pantalla. No obstant això, la

propietat position (de la qual no parlarem en aquest apartat) és necessària

per disposar aquests elements de forma adequada. Per tant, les etiquetes “obli-

gatori” s’han col·locat després dels seus controls associats en el codi font (tot i

que en el mateix context).

8.2.4. Camps de formulari nous? Què és això?

A l’apartat anterior ja es va parlar dels camps de text i dels controls de tramesa.

Tal com ja s’ha mencionat anteriorment, hi ha diversos casos d’ús que reque-

reixen que l’usuari pugui seleccionar una de dues o tres opcions. Aquests ele-

ments es descriuen breument tot seguit.

Escollir descripcions: input type=“checkbox”

Les preguntes de participació o no participació acostumen a gestionar-se amb

un d’aquests controls. Un altre cas en què es fan servir és quan cal escollir ar-

…

<label for=“availability”>My account is unavailable:</label>

<input type=“checkbox” name=“is_down” id=“availability” class=“rInput” />


bitràriament entre diverses opcions com, per exemple, una llista d’interessos

personals.

Escollir entre un de dos possibles estats mútuament excloents: input

type=“radio”

Un grup d’aquests permet presentar diverses opcions l’una al costat de l’altra

i de les quals només se’n pot escollir una. Un bon exemple de cas d’ús d’un

conjunt de controls de radio (tria d’un element entre diversos) és l’assignació

d’una nota en una escala d’1 a 5 o d’1 a 10.

Al contrari que altres controls de formulari, els controls de radio no només

permeten sinó que, de fet, requereixen que els controls associats tinguin el

mateix name (nom).

Aquests elements prenen el seu nom d’una interfície habitual en els aparells

de ràdio de cotxe sintonitzats mecànicament. Al contrari que els canals pro-

gramables típics dels aparells de sintonització digital, els botons mecànics de

memòria, quan es premen acostumen a centrar el receptor en una gama de fre-

qüències de la banda que s’està sintonitzant.

Els controls de checkbox (casella de selecció) i radio permeten un atribut

checked (comprovat) que, si s’aplica, activa el control per defecte la primera

vegada que es representa.

Abans de respondre a la pregunta de si fer servir controls de radio en lloc de

controls de checkbox cal tenir en compte diversos factors. Si voleu que l’usu-

ari confirmi una decisió subjectiva (com per exemple ser membre d’una llista

de correu), probablement seran millors els controls checkbox. Si us estimeu

1

2

3

4

5

6

7

…

<label for=“acctNone”>Account type:</label>

<fieldset>

<label for=“acctGold”>Gold</label><input type=“radio” name=“acct_type”

id=“goldAcct” class=“rInput” />

<label for=“acctSilver”>Silver</label><input type=“radio” name=“acct_type”

id=“acctSilver” class=“rInput” />

<label for=“acctBronze”>Bronze</label><input type=“radio” name=“acct_type”

id=“acctBronze” class=“rInput” />

<label for=“acctNone”>None</label><input type=“radio” name=“acct_type”

id=“acctNone” class=“rInput” checked=“checked” />

</fieldset>


més que l’usuari esculli entre dues opcions objectives (com, posem per cas, el

gènere), és millor fer server els controls de radio.

Quan hi ha massa opcions per escollir: select/option

Els elements select i option ofereixen resultats semblants als proporcionats

per una sèrie de controls de radio però ocupen molt menys espai. Escollir un

element select en lloc d’una sèrie de controls de radio sol ser una qüestió

de com es fa servir l’espai a la interfície d’usuari; una llista llarga de zones ge-

ogràfiques o departaments en un web de comerç electrònic acostuma a ser més

adient per a elements select, mentre que una sèrie més curta d’opcions (com

ara sí/no, veritat/mentida, gamma d’edat, gamma d’ingressos) hauria d’esta-

blir-se com una sèrie de controls de radio.

Si posem a prova de manera meticulosa la nostra creació comprovarem que el

nivell de control motriu necessari per manipular una llista select és elevat,

però augmenta lleugerament en proporció amb el nombre de options que in-

clou. El resultat pràctic és que a les llistes curtes d’opcions mútuament ex-

cluents és millor aplicar-hi un format com una sèrie de controls radio amb

labels ben escrites.

Agrupar sèries de controls: fieldset

La funció principal de l’element fieldset és assignar un únic context a una

sèrie de controls íntimament relacionats (controls text per a un número de

telèfon, elements select per a una data, etc.).

8.3. De zero fins a un formulari complet

Ara que ja hem presentat breument el material nou d’aquest apartat, ha arribat

el moment de veure aquest material en acció: les dotze demostracions que pro-

gressen a través de diversos conceptes de disseny i reptes d’aplicar estils que es

poden trobar a l’hora de crear formularis web.

…

<label for=“natureOfInquiry”>General subject:</label>

<select name=“subject” class=“medium” id=“natureOfInquiry”>

<option value=“support”>Support</option>

<option value=“billing”>Accounts & billing</option>

<option value=“press”>Press</option>

<option value=“other_q”>Other questions</option>

</select>


8.3.1. Demostració 1

Començant amb una regla com: html { margin: 0; padding: 0; }, el

primer pas és configurar el body (text central) de la pàgina.

Arxiu font de: “Pàgina sense gaires estils”http://dev.opera.com/articles/view/34-styling-forms/demo_form_unstyled.html

Arxiu font de: “Pàgina amb estils body aplicats”http://dev.opera.com/articles/view/34-styling-forms/demo_form01.html

8.3.2. Demostració 1: consideracions prèvies

• Quan l’XHTML conté el Content-Type adequat, per a un agent d’usuari

que l’accepti com cal, el margin (marge) i/o padding (farcit) de la pàgina

per defecte es representen a l’element html.

• En la resta de casos no descrits en el paràgraf anterior, es col·loca un canal

de 10 píxels al voltant del perímetre de la pàgina; Opera ofereix aquest ele-

ment com a valor de padding, però d’altres navegadors populars ho ofe-

reixen (d’una manera una mica contraintuïtiva) com a valor margin. El

full d’estil de demostració normalitza el resultat.

• Tot i que molts puristes de l’accessibilitat s’oposen al valor de mida de lletra de

14 px, és integral de les propietats de caixa i tipografia que s’han especificat en

una altra part del full d’estil, bàsicament denominats en setenes parts d’un em.

Es recomana als lectors que guardin el material de demostració al seu

disc dur i que facin proves amb les regles de full d’estil.

Notaa

Aquestes demostracions avancen per ordre de codi font, en lloc de per

l’ordre de creació del full d’estil. Més endavant, en aquest apartat, es

parla dels motius i les implicacions d’aquesta divergència.

body{

margin: 0;

padding: 1.714em;

background-image: url(images/bg_grid.gif);

font-size: 14px;

font-family: Helvetica,Arial,sans-serif;

line-height: 1.714em;

}


Al final de l’apartat es proporciona una taula de conversió de fraccions a deci-

mals per a aquells que vulguin saber com és l’aritmètica utilitzada.

• S’ha escollit el valor 14 px perquè és la mida més petita de text central que

pot llegir gairebé tothom amb la vista corregida.

• Ja que un dels objectius d’aquest apartat és demostrar la feina que cal fer

per obtenir una quadrícula extremadament consistent, s’ha aplicat a la pà-

gina un fons de quadrícula en increments de 24 píxels.


Ara que hem parlat dels contenidors de la pàgina, els pròxims dos passos mo-

difiquen o eliminen els estils d’agent d’usuari.

Arxiu font de: “Aplicar estil al títol principal i eliminar els canals no desitjats”http://dev.opera.com/articles/view/34-styling-forms/demo_form02.html


• La progressió de la mida de la lletra dels títols és diferent a cada plataforma;

tanmateix, els valors predeterminats sempre són una proporció del valor

medium utilitzat per al text de paràgraf sense estil i, per tant, s’hereten a tra-

vés de la cascada. El resultat del valor proporcionat ha de canviar la propor-

ció predeterminada.

• Es considera òptim utilitzar h1 per al primer títol d’una pàgina. En aquest

cas aquesta pràctica s’ignora perquè en un entorn de producció comercial,

h3 {

margin: 0 0 1.2em 0;

border-bottom: .05em solid rgb(0,96,192);

font-size: 1.429em;

line-height: 1.15em;

}

form {

width: 35.929em;

margin: 0;

}

ul {

margin: 0;

padding: 0;


}


el títol del lloc generalment es troba en un h1 de la pàgina i el títol de la

pàgina hauria d’estar més baix en la jerarquia d’encapçalaments. En molts

casos, la prominència del formulari serà igual a la prominència d’altres

continguts o formularis del mateix document.

• L’objectiu de l’aplicació d’estils h3 és crear una caixa de contingut de 24

píxels d’alçada amb 24 píxels de canal just a sota, de manera que:

• L’assignació d’un valor width (amplada) tant al form (formulari) com als

objectes de la llista és necessària si els elements s’han de justificar adequa-

dament sense confiar en el posicionament. El valor utilitzat produeix un

valor estàtic de 503 píxels; l’única discrepància de píxels (tenint en compte

una unitat de quadrícula atòmica de 24 píxels) és un producte d’errors pro-

duïts per l’arrodoniment i l’antialiàsing.

• Els estils predeterminats d’agent d’usuari per a llistes varien d’un navegador a

un altre. Internet Explorer dóna a cada element de la llista un marge esquerre

de 40 píxels i col·loca el símbol d’entrada de llista al canal creat, mentre que

d’altres navegadors apliquen farcit a la part esquerra del bloc de contingut del

formulari en general. De la mateixa manera que les propietats de composició

modificades a la regla body, aquesta regla està pensada específicament per

normalitzar la presentació en tots els navegadors.


Passem ara a establir els contenidors dels elements del formulari.

Arxiu font de: “Elements de la llista d’estil (contenidors de la parella d’etiqueta/valor) i del fieldset”http://dev.opera.com/articles/view/34-styling-forms/demo_form03.html

(((14 × 1.429) × 1.15) + (20 × .05)) ≈ 24

14 * 1.429 ≈ 20; 20 * 1.15 == 23; 20 * .05 == 1;

(20 × 1.2) = 24

li {

clear: both;

height: 1.714em;

margin: 0;

}

fieldset {

height: 1.429em;

margin: 0 0 -.143em 0;

border: 0;

}



• Si considerem el formulari com una sèrie de files, veurem que és necessari

aplicar estils a l’alçada de cadascun per preservar una quadrícula. Els mar-

ges dels elements de la llista s’estableixen a zero de cara a l’Internet Explo-

rer i, per si de cas, de cara a la resta.

• Com que a molts dels elements del formulari se’ls aplicarà valors float, als

elements de la llista que inclou se’ls aplica un valor de clear: both per ga-

rantir que cadascun quedarà per sota del seu predecessor automàticament.

• A part de l’eliminació del marge (que és part de l’estil per defecte de l’agent

d’usuari), les propietats de composició del fieldset semblen haver-se es-

tablert de forma arbitrària. De fet, van ser assignades després de les proves

en tots els navegadors, de la qual cosa parlaré de nou breument en les notes

adjuntes a la “Demostració 11”.

• Arribats en aquest punt, no s’han assignat valors display ni float, la

qual cosa explica per què el contingut del fieldset xoca amb el següent

control select.

8.3.7. Crear una quadrícula

Un dels punts més significatius del bon disseny gràfic (i, de retruc, del bon dis-

seny d’interfícies) és que els elements es disposen a intervals regulars. A

aquests intervals, se’ls sol anomenar quadrícula.

Tal com ja s’ha mencionat anteriorment, la unitat atòmica de la quadrícula del

formulari de demostració són 24 píxels quadrats, però la composició coherent va

més enllà de garantir que els elements de disseny es situïn a intervals petits però

regulars. Una quadrícula realment efectiva té les característiques següents:

• Els marges de columna se situen a intervals consistents de la quadrícula en

tot el document.

• Les seccions seqüencials d’un mateix document comparteixen els mateixos

marges superiors amb els elements de les columnes adjacents.

• Les il·lustracions d’una composició es retallen o es redueixen fins que te-

nen unes dimensions que respecten les amplades de les dues columnes i els

intervals de quadrícula atòmica.

• Fins i tot en els casos en què el contingut cap en una sola columna amb

uns quants elements float, tots aquests últims elements tenen els matei-

xos estàndards de mida i composició.


Les composicions que manifesten aquestes característiques són més atractives

i fàcils de seguir, la qual cosa contribueix a la usabilitat del lloc.

Crear l’estructura d’una quadrícula en un compost

L’eina que fan servir la majoria de professionals per crear compostos de composi-

cions per al web és Adobe Photoshop, i un dels avantatges que té és l’accés fàcil a

les línies de quadrícula que ofereix. Per visualitzar una quadrícula atòmica amb el

Photoshop, es pot seleccionar View (Vista) → Show (Mostrar) → Grid (Quadrícula),

amb la qual cosa es mostraran les línies de la quadrícula en els intervals establerts

a Guides & Grid Preferences (Guies i preferències de quadrícula).

Superposar guies sobre elements com ara columnes s’aconsegueix seleccio-

nant View (Vista) → Rulers (Regles), canviant a l’eina Move (Moure) i arrosse-

gant el punter des de la regla com faci falta.

Aplicar la quadrícula al full d’estil

Tal com es comenta a l’apartat dels estils, reforçat per algunes de les regles que

s’inclouen al full d’estil de demostració, la millor manera d’aplicar una qua-

drícula atòmica en una composició és la de confiar en les unitats em. Tanma-

teix, només amb això no n’hi ha prou; l’especialista en estils també ha de

mantenir la correcció de les conversions de fraccions a decimals quan tracta

amb altres mides de tipografia, canals i marges.

Al full d’estil de la demostració es pot veure una altra tècnica per aplicar qua-

drícules: la provisió d’etiquetes class (classe) que poden fer referència a di-

verses mides d’elements i columnes d’un document. Quan es fa servir de

forma consistent, aquestes etiquetes s’encarreguen de gairebé tot el procés

d’aplicació de la quadrícula.


Mantenir els elements alineats a una quadrícula significa assignar propietats

de composició a les etiquetes i controls de formulari.

label {

display: block;

float: left;

clear: left;

width: 10.286em;

overflow: auto;

padding-right: 1.714em;

text-align: right;

}


Arxiu font de: “Alinear les dues columnes principals”http://dev.opera.com/articles/view/34-styling-forms/demo_form04.html


• Tots els controls de formulari, incloent-hi les àrees de text i les etiquetes, es

representen com elements en línia per defecte.

• Per crear una columna esquerra consistent cal assignar una width (ampla-

da) als elements label; en el mode “estricte” de representació, el padding

proporcionat fa possible un canal factible entre controls i etiquetes.

• Fer que tant les etiquetes com els controls quedin a la mateixa alçada con-

tra el mateix marge fa que el formulari sigui fàcil de llegir. En el tema de la

regla dels terços es tracta aquest fet i altres aspectes de la composició (vegeu

tot seguit).

• Arribats en aquest punt, hi ha problemes clars amb el formulari:

– A les labels adjuntades als controls radio se’ls assigna els mateixos va-

lors de display i float que a les altres labels del formulari. En alguns

navegadors, juntament amb els valors existents de height (alçada) i

overflow (desbordament) aquests elements xoquen amb la següent

parella de control d’etiquetes.

– A Safari 3, els marges dels controls de text desapareixen en aquest des-

plaçament. Se sospita que això sigui un error de representació.

– Els controls radio semblen estar-se tocant sense separació en l’ordre

del codi font; això passa perquè els controls label que intervenen estan

en un context de composició diferent.

– Una altra curiositat que val la pena mencionar és l’assignació de

overflow: auto a etiquetes. El truc de màgia que s’aplica en aquest

cas pot descriure’s com una regla: Si tenim un element de bloc dintre

d’un altre, i tenint en compte que només un d’ells té una height espe-

cificada en unitats estàtiques o ems que s’estenen a un nombre deter-

minat de píxels, assignar overflow: auto a l’altre element (el que no

té un valor de height) farà que s’estengui fins adquirir l’alçada de l’ele-

ment que sí té un valor de height diferenciat. Aquesta tècnica també

es fa servir a la “Demostració 11”.

input {

height: 1.143em;

border: .071em solid rgb(96,96,96);

padding: .071em;

line-height: 1;

}


8.3.10. La regla dels terços

Figura 1

Una escena de principis de primavera a Portland, Oregon. Sobre aquesta fotos’han superposat unes línies per demostrar la regla dels terços; fixeu-vos que laintersecció inferior dreta i les línies que la formen lliguen tota l’activitat visible.Foto ©2000 de l’autor; tots els drets reservats

Si es vol aconseguir una bona composició, hi ha un recurs gairebé universal:

Si es divideix en terços una disposició o il·lustració, descobrireu que l’observa-

dor centra la mirada en les línies (i sobretot en les interseccions de les línies)

que assenyalen aquestes divisions. Si no s’aprofita aquesta estranya tendència

de la vista, la composició quedarà desequilibrada.

L’explicació més senzilla d’aquest fenomen és que aquestes quatre línies

s’adapten pràcticament a la perfecció a la quadrícula que segueix la secció àu-

ria, una proporció propera a un sisè. La secció àuria sol trobar-se en diferents

camps de les matemàtiques i en el món natural.

Figura 2

Una captura de pantalla de msnbc.msn.com amb els primers set rectangles aurissuperposats. Les dimensions del quart i cinquè rectangle un al costat de l’altreaclareixen el caràcter de la quadrícula de composició de pàgina en general

El formulari de demostració s’ha disposat de manera que els controls del for-

mulari quedin justificats al marge esquerre situat a un terç de la distància del

marge dret del formulari en conjunt; va ser una decisió feta a propòsit. Molt

menys a propòsit és la composició vertical del formulari, perquè, quan es té en


compte el títol, els camps de text tallen les dues línies descrites en el paràgraf

anterior. I encara que no es tingui en compte el títol, els camps obligatoris ta-

llen la part superior d’aquestes línies.

El punt principal per a un especialista en estils és que si la secció àuria i la qua-

drícula es tenen en compte abans de començar a crear un full d’estil, el fet de

normalitzar el full d’estil pot simplificar-se de forma considerable.


Per garantir que la quadrícula que volem crear es conservi verticalment i ho-

ritzontalment, cal tenir en compte alguns detalls. Aquests canvis són gairebé

del tot estètics.

Arxiu font de: “Retocar la presentació dels controls textarea i select”http://dev.opera.com/articles/view/34-styling-forms/demo_form05.html


• A les plataformes Windows, els controls select poden modificar-se per elimi-

nar part del bisellat, la qual cosa fa que s’assemblin més als controls de text.

• Com la facilitat d’ús sol millorar donant-li a l’usuari una manera de distin-

gir a primera vista les dades que introdueix de la resta del formulari, la ti-

pografia utilitzada per representar els valors del formulari serà diferent de

la utilitzada a la resta del formulari. Tenint això en compte, aquesta demos-

tració aplica el primer d’aquests valors.

• La cascada no acostuma a tenir-se en compte pel que fa a la representació

del text en els controls del formulari, la qual cosa és un altra explicació de

textarea {

height: 4.714em;

margin-bottom: .286em;

border: .071em solid rgb(96,96,96);

padding: 0;

}

select {

display: block;

float: left;

height: 1.571em;

font-family: Futura,’Century Gothic’,sans-serif;

}

option { font-size: 100%; }


per què hi ha diversos valors de text/font. S’ha evitat inherit (heretar) per

raons de preferència i costum i no per algun motiu objectiu.


La demostració prèvia manipula algunes representacions de tipografia, així

que ara és el moment d’acabar d’arrodonir la feina.

Arxiu font de: “Normalitzar la presentació dels controls de text i ajustar l’efecte de la cascada en eltext de control de select”http://dev.opera.com/articles/view/34-styling-forms/demo_form06.html


• En aquesta demostració veiem el primer exemple de valors que s’han re-

servat a propòsit per a una assignació simultània a selectors múltiples.

L’absència de valors border d’aquestes regles és deguda al procés de

producció, que es va realitzar en un ordre diferent al de la presentació

d’aquestes demostracions, un punt del qual es parla més detalladament

més endavant.

• Tal com he mencionat anteriorment, els valors de text i font dels controls

de formulari no obtenen l’avantatge de la cascada. Aquestes regles soluci-

onen aquest fet. Per tant, la majoria dels diversos controls ara ja s’adapten

a la composició desitjada.

• A causa del comportament d’Internet Explorer 6, al balanç dels controls del

formulari se’ls dóna un valor float de left. Aquest valor es va assignar

per costum i per certes experiències (desagradables), però no és estricta-

ment necessari.

• En assignar valors block als controls de text, el problema de represen-

tació de Safari vist a les dues demostracions anteriors ja s’ha solucionat.

input, textarea {

display: block;

float: left;

overflow: hidden;

font-family: Futura,’Century Gothic’,sans-serif;

font-size: 1em;

}

input, textarea, select {

margin-top: 0;

font-size: 100%;

}


Les coses rares com aquestes són habituals quan s’apliquen estils a for-

mularis.

• De la mateixa manera que els valors border no s’han normalitzat com cal,

tampoc s’han normalitzat els valors font-size (mida de la font); l’assig-

nació de valors 1em als controls de text i valors 100% als controls select

va ser totalment arbitrària.


Les amplades dels diversos controls de text s’han de canviar des dels seus va-

lors per defecte.

Arxiu font de: “Modificar les amplades dels controls de text per fer-les més usables o, com a mínim,més consistents”http://dev.opera.com/articles/view/34-styling-forms/demo_form07.html


• Una reexaminació de l’etiquetatge d’origen revela que a cada control se li

ha assignat una class, tres relacionades amb l’amplada per al text i els

controls select i d’altres classes per als controls que es basen en informa-

ció del punter/cursor i no en informació teclejada.

• Les classes s’han d’assignar a controls bàsicament perquè el suport d’Inter-

net Explorer per als selectors avançats és limitat. Pel que fa a selectors, la

classe rInput podria substituir-se fàcilment per input[type=“radio”],

input[type=“checkbox”]… si les versions de producció actuals d’Inter-

net Explorer acceptessin els segons.

• L’assignació de tres possibles valors per a controls de text és totalment

arbitrària i es deixa a la voluntat del dissenyador. En els entorns comer-

cials, alguns dissenyadors entreguen uns treballs tan particulars sobre la

composició que els selectors de class com els que s’utilitzen aquí seri-

en funcionalment inútils. Assignar un id a cada parella d’etiqueta/con-

trol ofereix la referència més senzilla possible per a cada element amb el

formulari, una senzillesa que és valuosa a l’hora d’aplicar estils al treball

d’un dissenyador que insisteix a donar el seu toc a cada detallet de la

composició del lloc.

.medium { width: 11.714em; }

select.medium { width: 12em; }

.long { width: 20.429em; }

.rInput { border: 0; }



El botó “enviar” del formulari decau…

Arxiu font de: “Ajustar amb precisió la composició del botó ‘enviar’ del formulari”http://dev.opera.com/articles/view/34-styling-forms/demo_form08.html


• El repte més complicat al qual ens enfrontem quan apliquem estils a bo-

tons de tramesa és el fet de situar-los exactament on el dissenyador vol. En

la pràctica, l’aspecte desitjat s’obté després de molts ajustaments de la com-

posició i les propietats line-height; alguns desenvolupadors pot ser que

trobin menys laboriós fer servir una substitució d’imatge (vegeu la biblio-

grafia) o input type=“image”.

• A primera vista, l’assignació de display: block per a aquest element

sembla redundant i, de fet ho és, si només tenim en compte un únic for-

mulari d’una única pàgina. Tanmateix, en el context de tot un lloc web,

podria no ser redundant; molts llocs web i aplicacions tenen múltiples for-

mularis en un document amb diferents valors de display.


Posem les etiquetes “required” (necessàries) on corresponguin.

.submitButton {

display: block;

clear: both;

width: 7.2em;

height: 2em;

margin: 0 0 0 16.8em;

border: 1px solid rgb(128,128,128);

padding: 0;

font-size: 10px;

text-align: center;

}

li.required span.note {

display: block;

width: auto;

float: right;

color: rgb(128,128,128);

font-size: .714em;

line-height: 2.4em;


Arxiu font de: “Moure les etiquetes ‘required’ de manera que quedin tocant al marge dret teòric delformulari i canviar les seves propietats de text”http://dev.opera.com/articles/view/34-styling-forms/demo_form09.html


• En el seu estat actual, el fieldset que conté els controls radio segueix

sent un element de bloc, de manera que s’estén fins al marge dret del for-

mulari. Per tant, l’etiqueta associada a aquest conjunt de controls es des-

plaça per sota del final calculat del fieldset.

• El valor auto que es proporciona per a width de les etiquetes “necessàries”

dicta que no haurien de ser més amples que el seu contingut.

• Si ens fixem més en l’aritmètica utilitzada per a la tipografia de les etiquetes

“necessàries”, veurem una mida de lletra de deu píxels i un espai interlineal

de 24 (equivalent a una unitat atòmica de la quadrícula que es fa servir).

• L’estructura utilitzada per indicar els camps obligatoris s’ha creat pensant

en la interactivitat amb l’usuari; amb les diverses classes aplicades al formu-

lari és possible validar les dades introduïdes per l’usuari amb JavaScript i

canviar els estils de les etiquetes, camps i/o etiquetes en els conjunts eti-

queta/control que l’usuari no ha manipulat adequadament.


Finalment ha arribat el moment d’establir les col·lisions dels controls radio

amb els camps que hi ha a sota en l’ordre de les fonts.

line-height: 2.4em;

font-style: italic;

}

fieldset label {

margin-right: .25em;

padding-right: 0;

line-height: 1;

}

fieldset .rInput { margin-right: .75em; }

fieldset label, fieldset .rInput {

width: auto;

display: inline;

float: none;

font-size: .857em;


Arxiu font de: “Alinear els controls radio i les seves etiquetes horitzontalment”http://dev.opera.com/articles/view/34-styling-forms/demo_form10.html


• El resultat principal d’aquestes regles, a part de fer els ajustaments estètics,

és canviar el valor display dels controls radio i checkbox de nou a

inline. Això es fa per evitar els problemes que suposa aplicar-los float

com a la resta dels elements input del formulari.

• Tot i l’assignació de display: inline als controls associats, romanen

com a elements “substituïts”: elements en línia amb dimensions estàtiques

conegudes en temps d’execució (és a dir, abans que el navegador comenci

a representar el contingut). És per aquest motiu que poden aplicar-se mar-

ges a aquests elements.

• El caràcter peculiar dels elements fieldset (és a dir, que són els únics ele-

ments de bloc pensats específicament per a fer-se servir en formularis), fa que

en aquest cas sigui necessari aplicar una amplada diferenciada a qualsevol con-

trol que inclogui fieldset que necessiti activació per part de l’usuari. (Vegeu

els paràgrafs anteriors sobre la composició d’etiquetes “necessàries”).


Finalment, per acabar com uns senyors i aconseguir que els últims detalls que-

din alineats com cal…

}

li.required fieldset {

width: 18.857em;

float: left;

}

#acctTypeField fieldset {

padding: .286em 0 0 0;


}

#acctTypeField .rInput { margin-top: .167em; }

#availabilityField label {

height: 3.143em;

padding-top: .286em;


}


Arxiu font de: “Retocar els últims detalls a diversos controls”http://dev.opera.com/articles/view/34-styling-forms/demo_form11.html


• La màgia de l’overflow que hem aplicat a la demostració 4 es repeteix en

aquest cas; #availabilityField té una label de height coneguda i

passa el mateix amb la textarea de #messageField.

• L’ús de l’etiqueta #acctTypeField per canviar el valor padding del

fieldset que inclou pot ser massa específic. Això no obstant, cal treballar

de forma precisa a l’hora de redactar estils que poden veure’s afectats tan

fàcilment pels estils dels elements adjacents.

• La resta de les regles d’aquest bloc del full d’estil acaben de retocar una

mica la composició; es tracta de retocs que van determinar-se durant el pro-

cés de proves. Per desgràcia, les hores de comprovació i retocs no aconse-

gueixen revelar el comportament que produirà controls radio d’idèntica

composició tant a Safari 3 com a Firefox 3. El resultat és un punt de refe-

rència en les labels de control de radio que és molt poc convencional a

Firefox 3. En general es pot dir que aplicar estils als controls checkbox i

radio és una mena de màgia negra.


Tots els estils anteriors s’han desenvolupat per a Opera o Safari (escolliu el que

vulgueu, tots dos es van comportar força bé). Els que es mencionen a continu-

ació són específics d’Internet Explorer, especificats en un fitxer CSS enllaçat

amb link en un bloc de comentari condicional.

#availabilityField .rInput { margin-top: .286em; }

#availabilityField, #messageField {

height: 1%;

overflow: auto;

}

h3 { margin-bottom: 1.2em; }

li { margin: 0 0 -.214em 0; }

select { height: 1.429em; }

textarea { height: 4.571em; }

fieldset {

height: 1.583em;

padding-top: .417em;

}


Arxiu font de: “Pàgina completa”http://dev.opera.com/articles/view/34-styling-forms/demo_form_complete.html


• Com es pot observar, tots els estils mostrats anteriorment suggereixen lleu-

geres diferències en la manera com Internet Explorer transmet les mides de

font per cascada i disposa les caixes.

• Un altre tema interessant és el selector * html. Internet Explorer 5 i 6 són

els únics navegadors que reconeixen aquest selector, per la qual cosa és un

filtre de pas baix efectiu per a regles de full d’estil dirigides a aquests nave-

gadors.

8.4. Establir nivells de suport de plataforma

L’últim subapartat de demostracions presenta la mena d’estils reservats per a

Internet Explorer 6 i 7 i ens porta a parlar de com un bon equip de disseny

tracta navegadors de molt diverses menes.

La realitat del web és que els usuaris fan servir una àmplia varietat de na-

vegadors en tota classe d’entorns. Alguns són antics i d’altres són de rabiosa

actualitat. N’hi ha que funcionen en ordinadors convencionals i d’altres

que funcionen en aparells portàtils com ara telèfons mòbils. Tots ells es

desenvolupen amb sistemes operatius específics i després s’adapten a d’al-

.medium { width: 13.429em; }

select.medium { width: 13.714em; }

.long { width: 20.286em; }

fieldset .rInput { border: 0 !important; }

#subjectField { margin-bottom: -.214em; }

#availabilityField .rInput { margin-top: .286em; }

#messageField { padding-bottom: .286em; }

input.submitButton { margin-top: .15em; }

* html input, * html textarea { float: left; }

* html select { font-size: .643em; }

* html select.medium { width: 21.364em; }

* html textarea { height: 4.643em; }

* html #subjectField {

margin-top: .071em;

margin-bottom: 0;

}

* html #availabilityField label { padding-top: 0; }

* html input.submitButton { margin: .1em 0 0 7em; }


tres amb diferents nivells d’acceptació d’estàndards. Tret de l’Opera, tots

els fabricants de navegadors venen productes pensats per ser utilitzats jun-

tament amb d’altres títols d’una gran gama de productes, un requeriment

de producte que fa que els navegadors siguin més complexos del necessari

només per navegar pel web.

Com si no n’hi hagués prou amb pensar en els múltiples i variats avantat-

ges i desavantatges dels navegadors, també cal tenir en compte els errors:

errors de seguretat, errors de component i sobretot els errors de representa-

ció. Els usuaris de Safari 3.x han descobert que en un punt, el document de

demostració descobreix un molest error de representació en el seu propi na-

vegador.

La millor manera de solucionar aquests problemes és definir capes de su-

port. Els primers a promulgar aquest mètode van ser l’equip de desenvolu-

pament d’interfície de Yahoo!, que l’anomenà “Graded Browser Support”.

Per norma general, les capes de suport es divideixen en quatre grans cate-

gories.

1) El lloc web es representa tal com es va dissenyar originalment dintre dels

límits de les capacitats d’aquests navegadors i accepta totes les funcions. La

plataforma de desenvolupament defineix el que a vegades s’anomena el ni-

vell “A+”.

2) La desviació respecte de la composició preferent és evident, potser fins a un

nivell destacat; tanmateix, el lloc web encara segueix podent-se fer servir i ac-

cepta la majoria o totes les funcions del lloc.

3) El lloc web que es presenta als usuaris d’aquests navegadors és el més senzill

que es pot fer sense malmetre la marca del propietari del lloc i és possible que

determinades funcions del lloc quedin inactives. Aquests navegadors tenen

unes bases d’instal·lació comparativament petites i se’ls considera antiquats,

inestables o mancats de funcions.

4) Aquest nivell d’acceptació, que la documentació de Yahoo! denomina

“X Grade” o de grau X, es reserva per a les plataformes sense comprovar, és a

dir, habitualment els navegadors més nous amb bases d’instal·lació petites (ge-

neralment l’Opera, és clar). Un cop provats, aquests navegadors promocionen

a una capa superior.

Els detalls del procés de recopilació de requisits que informen sobre la de-

finició dels nivells de suport i hi assignen navegadors tendeixen a ser llar-

guíssims i molt avorrits i, per tant, s’ometen d’aquest apartat, que ja és

prou llarg.


8.5. Composicions de formulari complexes en la pràctica

(… en lloc d’en teoria)

Entre les consideracions prèvies proporcionades anteriorment, s’ha afirmat

que el seguit de demostració s’ha organitzat segons l’ordre del codi font del

full d’estil en lloc de segons l’ordre en què de fet es van afegir les regles al full

d’estil. Els motius per fer-ho inclouen:

• Per poder establir una sèrie de demostracions en ordre cronològic era ne-

cessari mantenir un diari (o guardar el full d’estil en un sistema de control

de versions), cosa que no es va fer mai. Quan es va detectar la descurança,

ja feia massa temps que havia passat la data límit d’entrega de l’apartat per

poder-ho corregir.

• Seqüenciar segons l’ordre del codi font fa que sigui molt més fàcil produir

els documents de demostració; una concessió més de l’ideal a la pràctica.

• Com que el full d’estil de la demostració original es va escriure anant amb cura

notable (si no total) per la normalització i l’ordre de les fonts (com s’hauria de

fer amb tots els fulls d’estil de producció), seqüenciar la demostració segons

l’ordre dels codis font garanteix que els estudiants que vulguin “Veure el codi

font” ho tindran molt més fàcil per entendre el que s’ofereix.

L’Opera 9.6 per a OS X ha estat l’agent d’usuari que s’ha fet servir per al des-

envolupament; amb aquesta advertència i les anteriors, tot seguit es presenta

l’ordre general en què es van fer els canvis i afegitons al full d’estil:

1) S’apliquen els estils del document (és a dir, body)

2) Es restableixen els valors predeterminats de llista, formulari i fieldset

3) S’especifica la tipografia

4) Es limiten i s’aplica clear als elements de la llista

5) S’apliquen les labels en general

6) S’especifica i normalitza la composició de control de formulari (sobretot les

mides)

7) Es crea el botó de trametre

8) S’apliquen els casos límit

9) Es prova Safari i Firefox i es canvien els valors del full d’estil per reflectir els

compromisos (allà on es pot)

10) Es prova Internet Explorer 6 i 7 i s’hi subministren ajustos de propietat/

valor en un full d’estil condicional

El procés que s’acaba de descriure comença amb les regles més generals i va

passant a les més concretes fins arribar a solucionar els petits problemes espe-

cífics de navegadors determinats... de manera molt semblant a l’ordre del codi

font del full d’estil en si. Tanmateix, els resultats no es correlacionen a la per-

fecció. Això passa perquè els diferents motors de representació i les peculiari-


tats d’elements com ara el context float comporten conseqüències

imprevistes quan es mescla tot, de manera que el procés real va més enllà de

realitzar unes quantes comprovacions, retocs i reconsideracions.

Resum

Aquest apartat proporciona una base completa per aplicar estils i composició

als formularis, però és possible anar més lluny encara. Les dificultats que plan-

tegen els sistemes operatius (els components dels quals es fan servir per crear

els controls de formularis web) i les diferències entre motors de representació

augmenten el repte que suposa per a un especialista en estils crear un formu-

lari web segons una sèrie d’especificacions. Aquest apartat deixa la porta ober-

ta a l’experimentació amb la multitud de petits problemes associats a aquesta

tasca i mostra la manera d’assolir un bon nivell de domini en un dels aspectes

més complicats de l’art de dissenyar webs.

Preguntes de repàs


1. Quin és el tipus de flux dels controls de formulari que accepta dades intro-

duïdes per l’usuari i quines dues característiques els fan destacables pel que fa

a la composició?

2. Quins dos atributs apart de value (valor) i disabled (desactivat) manipu-

len la configuració dels controls de formulari abans de la interacció amb

l’usuari, i a quins elements s’apliquen?

3. Aquest apartat de demostracions us proporciona els camps obligatoris.

Escriviu com a mínim una regla d’estil que, d’un cop, pugui canviar l’as-

pecte d’un camp que inclogui un error o omissió d’introducció de dades de

l’usuari.

4. Descriviu un cas d’ús de l’element select, del control checkbox i del con-

trol radio. Confirmeu cada descripció amb una explicació dels avantatges

que ofereix la vostra elecció comparat amb altres opcions possibles.

5. Utilitzant una referència en línia escollida pel vostre instructor, trobeu i

descriviu breument alternatives a input type=“submit”.

6. Creeu un element select que permeti seleccionar múltiples options afe-

gint la parella atribut/valor de multiple=“multiple”. Després d’examinar

el comportament d’aquest element, expliqueu per què gairebé no se’l troba

mai als llocs de producció.


Taula: conversions de fraccions a decimals

A la taula següent, els dígits que s’inclouen entre parèntesi amb un asterisc

darrere es repeteixen fins a l’infinit; per exemple, 0,2(6*) és equivalent a

0,266666666666666… (el 6 es periòdic).

Els valors més propers a zero es troben a l’esquerra de la taula i avancen cap a

l’u llegint la taula d’esquerra a dreta.


Bos, Bert, et al. (2007). Cascading style sheets level 2 revision 1 (CSS 2.1) specifi-

cation. World Wide Web Consortium. [Data de consulta: 28 de maig de 2008.]


Henick, Ben (2006). “12 lessons for those afraid of CSS and standards”. A: A

List Apart. [Data de consulta: 16 de desembre de 2008.]

http://www.alistapart.com/articles/12lessonsCSSandstandards

Horton, Sarah, and Lynch, Patrick (2002). Web style guide: basic principles for

creating web sites (2a. ed.). New Haven, Conn.: Yale University Press.


Knott, Ron (2008). The golden section ratio: phi. Departament de Matemàti-

ques, Universitat de Surrey (UK). [Data de consulta: 18 de desembre de 2008.]

http://www.mcs.surrey.ac.uk/Personal/R.Knott/Fibonacci/phi.html

Meyer, Eric (2007). “Formal weirdness”. Meyerweb.com. [Data de consulta: 17

de desembre de 2008.]

http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

x 1/x 2/x 3/x 4/x 5/x 6/x 7/x 8/x 9/x 10/x 11/x 12/x 13/x 14/x 15/x

2 0,5 - - - - - - - - - - - - - -

3 0,(3*) 0,(6*) - - - - - - - - - - - - -

4 0,25 0,5 0,75 - - - - - - - - - - - -

5 0,2 0,4 0,6 0,8 - - - - - - - - - - -

6 0,1(6*) 0,(3*) 0,5 0,(6*) 0,8(3*) - - - - - - - - - -

7 0,(142857*) 0,(285714*) 0,(428571*) 0,(571428*) 0,(714285*) 0,(857142*) - - - - - - - - -

8 0,125 0,25 0,375 0,5 0,625 0,75 0,875 - - - - - - - -

9 0,(1*) 0,(2*) 0,(3*) 0,(4*) 0,(5*) 0,(6*) 0,(7*) 0,(8*) - - - - - - -

10 0,1 0,2 0,3 0,4 0,5 0,6 0,7 0,8 0,9 - - - - - -

11 0,(09*) 0,(18*) 0,(27*) 0,(36*) 0,(45*) 0,(54*) 0,(63*) 0,(72*) 0,(81*) 0,(90*) - - - - -

12 0,08(3*) 0,1(6*) 0,25 0,(3*) 0,41(6*) 0,5 0,58(3*) 0,(6*) 0,75 0,8(3*) 0,91(6*) - - - -

13 0,(076923*) 0,(153846*) 0,(230769*) 0,(307692*) 0,(384615*) 0,(461538*) 0,(538461*) 0,(615383*) 0,(692307*) 0,(769230*) 0,(846153*) 0,(923076*) - - -

14 0,0(714285*) 0,(142857*) 0,2(142857*) 0,(285714*) 0,3(571428*) 0,(428571*) 0,5 0,5(714285*) 0,6(428571*) 0,(714285*) 0,7(857142*) 0,(857142*) 0,9(285714*) - -

15 0,0(6*) 0,1(3*) 0,2 0,2(6*) 0,(3*) 0,4 0,4(6*) 0,5(3*) 0,6 0,(6*) 0,7(3*) 8 0,8(6*) 0,9(3*) -

16 0,0625 0,125 0,1875 0,25 0,3125 0,375 0,4375 0,5 0,5625 0,625 0,6875 0,75 0,8125 0,875 0,9375


Microsoft Corporation. msnbc.com. [Data de consulta: 17 de desembre de

2008.]

http://msnbc.msn.com/

Raggett, Dave, et al. (1999). “HTML 4.01 specification”. World Wide Web

Consortium. [Data de consulta: 30 de juny de 2008.]

http://www.w3.org/TR/1999/REC-html401-19991224

Reynolds, Garr (2005). “From golden mean to ‘rule of thirds’”. Presentation

Zen. [Data de consulta: 16 de desembre de 2008.]

http://www.presentationzen.com/presentationzen/2005/08/

from_golden_mea.html

Santa Maria, Jason (2008). “Making modular layout systems”. 24 Ways. [Data

de consulta: 16 de desembre de 2008.]

http://24ways.org/2008/making-modular-layout-systems

Wikipedia. 2008. “Fahrner image replacement”. [Data de consulta: 19 de de-

sembre de 2008.]

http://en.wikipedia.org/wiki/Fahrner_Image_Replacement

“Yahoo! Developer Network” (2008). Graded browser support. [Data de con-

sulta: 16 de desembre de 2008.]

http://developer.yahoo.com/yui/articles/gbs/


9. Elements flotants i clearingTommy Olsson

En aquest apartat veurem què són els elements flotants i el clearing, dues eines

indispensables per al dissenyador de webs moderns. Són unes eines molt ver-

sàtils que podeu utilitzar per fer que el text flueixi al voltant de les imatges o

fins i tot crear composicions de múltiples columnes.

9.1. Per a què serveixen float i clear?

Si mireu qualsevol revista veureu que hi ha imatges que il·lustren els apartats

i que el text les envolta i flueix al seu voltant. La propietat float del CSS es

va crear per permetre aquest estil de composició a les pàgines web. Quan es fa

“flotar” una imatge o qualsevol altre element, aquesta es desplaça cap a una

banda i permet que el text flueixi per l’altra. Aplicar clearing a un element flo-

tant empeny aquest element cap avall, si cal, per evitar que aparegui al costat

del text.

Tot i que en principi qualsevol element pot ser un element flotant, els disse-

nyadors utilitzen aquesta propietat bàsicament per aconseguir composicions

de múltiples columnes sense necessitat d’abusar de l’etiquetatge de taula.

9.2. Una mica de teoria molt avorrida

Per explicar com funcionen els elements flotants, primer haurem de fer una

mica de teoria i veure com s’ho fa un navegador web per mostrar un document

HTML/CSS. No us preocupeu, seré breu.

Tots els elements HTML visibles generen una “caixa” que immediatament es

delimita. Si mireu el document en una pantalla d’ordinador o en un telèfon

mòbil, els quadres apareixen a la pantalla. Si imprimiu el document, els qua-

dres apareixen en el paper. Si utilitzeu un lector de pantalla, el contingut dels

quadres es reprodueix oralment en forma de parla.

De la mateixa manera que en l’HTML hi ha elements de bloc i elements en lí-

nia, en el CSS hi ha caixes de bloc i quadres en línia. Per defecte, els elements

de bloc generen caixes de bloc i els elements en línia generen caixes en línia.

A banda de les caixes generades pels elements, també es generaran altres cai-

xes; per exemple, per al contingut textual del document. Les caixes de bloc es

presenten normalment en l’ordre en el qual apareixen els elements en l’eti-

quetatge, de dalt a baix. Les caixes de bloc no poden aparèixer unes al costat

de les altres, si no és que hi apliquem CSS. Les caixes en línia es distribueixen


horitzontalment. La propietat direction determina si es distribueixen d’es-

querra a dreta o de dreta a esquerra (si no s’especifica aquesta propietat, aques-

tes caixes es distribueixen per defecte d’esquerra a dreta).

Això es coneix com el flux de document: les caixes en línia flueixen horitzon-

talment dins de les seves caixes de bloc mare, i les caixes de bloc hi flueixen

verticalment. Les caixes apareixen en el mateix ordre que els elements de l’eti-

quetatge HTML.

Posem per cas el següent document HTML, que és molt bàsic (només hi he in-

clòs la part que hi ha dintre de l’element body):

La figura 1 mostra una captura de pantalla d’aquest document amb una sobre-

impressió que mostra les dues caixes de bloc generades pels elements p i la cai-

xa en línia generada per l’element em.

Figura 1

Mostra de les caixes de bloc generades pels elements p i de la caixa en línia generada per l’element em

Totes les caixes en línia que formen una “línia” en el dispositiu de sortida es-

tan tancades en rectangles imaginaris que es coneixen com a caixes de línia.

Les caixes de línia es distribueixen sempre de dalt a baix sense cap espai entre

elles, tal com podeu veure a la figura 2.

Figura 2

Cada línia representada està tancada en una caixa de línia independent

9.3. Com funcionen els elements flotants?

Molt bé! Ara que ja hem vist totes aquestes qüestions teòriques tan avorrides, pas-

sem a veure la sintaxi dels elements float i clear i a veure’n alguns exemples.

<p>This is a very simple document.</p>

<p>It consists of <em>two</em> paragraphs.</p>


La propietat float té quatre valors vàlids: left, right, none i inherit. Els

dos primers valors són de lluny els que s’utilitzen més habitualment, i fan que

una caixa floti cap a la dreta o cap a l’esquerra. La declaració float:none, que

és el valor per defecte, es fa servir normalment només per “desfer” una decla-

ració d’alguna altra regla. L’ús de float:inherit no és gens habitual; jo no

l’he vist mai enlloc i probablement només existeix per una qüestió de cohe-

rència. Fa que l’element hereti el valor de float del seu element pare.

Una caixa flotant s’extreu del flux del document i es desplaça tot el possible

cap a l’esquerra o cap a la dreta, segons la direcció de flotació especificada.

“Tot el possible” significa normalment fins que la vora exterior de l’element

flotant toca la vora del bloc que el conté (l’interior del seu farcit, si està defi-

nit). Així, doncs, en el cas de float:left, la caixa es desplaça cap a l’esquerra

fins que el marge esquerre de l’element flotant toca la vora esquerra del pare.

Els lectors que hagin estat alerta poden haver vist que he anat fent servir “normal-

ment”. Si ja hi ha una caixa flotada cap a l’esquerra quan en flotem una altra en

aquesta mateixa direcció, la segona caixa s’aturarà quan toqui aquesta primera. És

a dir, que els elements flotants no es poden posar uns sobre els altres.

Ja ha arribat el moment de veure els elements flotants en acció, o sigui que ja

podeu preparar el vostre editor de textos.

1. Creeu un arxiu nou, copieu-hi el codi següent i guardeu el document com

a float.html.

1

2

3

4

5

6

7

8

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/

strict.dtd”>

<html>

<head>


<title>Floating</title>

</head>

<body>

<p id=“p1”><span id=“span-a”>Lorem ipsum</span>

<span id=“span-b”>dolor sit amet</span>

<span id=“span-c”>consectetuer</span> adipiscing elit.

Curabitur feugiat feugiat purus.

Aenean eu metus. Nulla facilisi.

Pellentesque quis justo vel massa suscipit sagittis.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per

inceptos hymenaeos.

Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, ut

tincidunt metus arcu vel lorem.

Praesent metus orci, adipiscing eget, fermentum ut, pellentesque non, dui.


Ja sé que és molt de contingut, però el necessitem per veure bé com funciona.

2. Obriu el document en el vostre navegador web per veure quin aspecte té.

Avorrit, oi?

3. Creeu un altre document amb l’editor de textos, copieu-hi el codi següent

i guardeu-lo amb el nom style.css en el mateix directori que el fitxer HTML

del pas 1.

4. Enllaceu el full d’estil al document HTML inserint la línia següent just

abans de l’etiqueta </head>.

9

10

11

12

Sed sagittis, metus a semper dictum, sem libero sagittis nunc, vitae

adipiscing leo neque vitae tellus.

Duis quis orci quis nisl nonummy dapibus.

Etiam ante. Phasellus imperdiet arcu at odio.

In hac habitasse platea dictumst. Aenean metus.

Quisque a nibh. Morbi mattis ullamcorper ipsum.

Nullam odio urna, feugiat sed, bibendum sed, vulputate in, magna.

Nulla tortor justo, convallis iaculis, porta condimentum, interdum nec, arcu.

Proin lectus purus, vehicula et, cursus ut, nonummy et, diam.</p>

<p id=“p2”>Nunc ac elit. Vestibulum placerat dictum nibh. Proin massa.

Curabitur at lectus egestas quam interdum mollis.

Cras id velit a lacus sollicitudin faucibus.

Proin at ante id nisi porttitor scelerisque.

In metus. Aenean nonummy semper enim.

Aenean tristique neque quis arcu tincidunt auctor.

Fusce consequat auctor ligula.

Fusce nulla lorem, sagittis a, lacinia et, nonummy in, eros.

In nisi augue, aliquam eget, convallis vel, malesuada quis, libero.</p>

<p id=“p3”>Hello, World!</p>

</body>

</html>

#span-a {

float: left;

background-color: #cfc;

color: #030;

}

<link rel=“stylesheet” type=“text/css” href=“style.css”>


5. Guardeu-lo i actualitzeu la pàgina en el navegador. Veureu que l’element span

que conté les paraules “Lorem ipsum” s’ha desplaçat flotant cap a l’esquerra. Tam-

bé hi he posat un fons de color verd clar per fer que destaqui una mica.

6. Encara no és fàcil veure què passa aquí, o sigui que farem que l’element flotant

sigui una mica més gran. Afegiu al vostre full d’estils la següent declaració:

7. Guardeu i actualitzeu, i veureu que l’àrea de color ara és una mica més

gran, ja que hi hem afegit una mica de farcit pels quatre costats del quadre.

L’element flotant ocupa l’alçada de tres línies de text i podem veure clarament

que l’altre text flueix al voltant d’aquest element flotant.

9.3.1. Els detalls

Ara analitzarem amb més detall què és el que passa realment aquí. La caixa flo-

tant generada pel primer element span s’ha desplaçat cap a l’esquerra, fins a

la vora del document, i les caixes de línia adjacents s’han reduït. Tot i que en-

cara no és visible, la caixa de bloc generada pel paràgraf que conté l’element

flotant no es veu afectada. Ara destacarem el paràgraf perquè quedi més clar.

1. Afegiu la següent regla CSS al full d’estils:

2. Torneu a guardar l’arxiu CSS i actualitzeu la finestra del navegador. Ara

hauríeu de veure una vora vermella al voltant de cadascun dels paràgrafs; ob-

serveu que l’element flotant es troba dintre d’un dels paràgrafs.

3. Ara modificarem l’última regla per verificar que l’element flotant s’atura

quan arriba a la vora interior de l’àrea de separació del pare:

#span-a {

float: left;


color: #030;

padding: 1em;

}

p {

border: 1px solid #f00;

}

p {


padding: 1em;

background-color: #ff9;

}


4. Guardeu i actualitzeu, i veureu la prova del que us he dit abans: El quadre flo-

tant es desplaça fins a la vora del bloc que el conté, mentre que la separació del

pare queda fora d’aquest. També veureu que el fons groc del paràgraf s’estén per

sota de la caixa flotant. Clarament, el fet de flotar una caixa filla no afecta en ab-

solut la caixa del paràgraf, només les caixes de línia que hi ha al seu interior.

5. Ara farem uns quants experiments més: què passa si l’element flotant és

més alt que el seu pare? Modifiqueu la regla per a l’element flotant de la ma-

nera següent:

Ara veureu una cosa ben interessant: la caixa flotant sobresurt fora de la caixa

mare; la caixa mare no s’amplia per poder contenir la seva caixa filla flotant.

També podeu veure (si heu utilitzat una separació inferior prou gran) que les

caixes de línia adjacents a l’element flotant del segon paràgraf s’han escurçat.

9.3.2. Més elements flotants

Ara crearem un altre element flotant per veure què passa quan es desplacen

dos elements flotants en la mateixa direcció.

1. Afegiu una regla nova al full d’estils, guardeu i actualitzeu igual que heu fet

abans.

L’element span que conté les paraules “dolor sit amet” també s’ha desplaçat

flotant cap a l’esquerra. Veureu que s’ha desplaçat cap a l’esquerra fins que

toca el primer element flotant; és a dir, “tot el possible”.

#span-a {

float: left;


color: #030;

padding: 1em 1em 10em;

}

Notaa

Si la finestra del navegador és estreta, és possible que hàgiu d’utilitzar

un valor més gran que 10 em per a la separació inferior perquè l’àrea

verda s’estengui més enllà de la vora inferior del paràgraf.

#span-b {

float: left;

background-color: #ccf;

color: #003;

padding: 1em;

}


2. I per què només dos elements flotants? En crearem encara un tercer. Afegiu

la regla següent al vostre full d’estils:

3. També hi vull afegir una regla temporal per veure un exemple de què passa

quan no hi ha prou espai per a un element flotant en una línia. Afegiu la regla

següent al final del full d’estils:

4. Igual que abans, guardeu el vostre full d’estils i actualitzeu el document al

navegador; veureu alguna cosa similar al que hi ha a la figura 3.

Figura 3

No ben bé el que esperàveu?

#span-c {

float: left;

background-color: #fcc;

color: #300;

padding:2em 1em;

}

span {

width: 34%;

}


Ves per on! Què ha passat? El tercer element flotant apareix ara sota el segon.

(I l’Internet Explorer 6 fa algunes altres coses estranyes, que de moment igno-

raré). Com que l’amplada de cadascun dels elements span és el 34% de l’am-

plada del paràgraf (tal com especifica la regla afegida en el pas 3), més una

mica de separació, no hi ha prou espai per a tots tres l’un al costat de l’altre

(3 × 34% = 102%). Els dos primers elements flotants caben a la mateixa línia,

però el tercer no i es desplaça cap avall. El que és important és que es desplaça

cap avall només el necessari per cabre a la línia. No es desplaça sota del primer

element flotant més alt perquè hi ha espai suficient a la seva dreta.

Una altra cosa interessant que cal tenir en compte és que heu assignat una am-

plada als elements span. Això no hauria de representar cap diferència, perquè

span és un tipus d’element en línia. No obstant això, quan es fa flotar una cai-

xa, aquesta es converteix automàticament en caixa de bloc, la qual cosa signi-

fica que li podem assignar dimensions i marges verticals.

9.3.3. Marges en els elements flotants

Ara veurem el que es pot fer amb els marges dels elements flotants:

1. En primer lloc, elimineu la regla temporal per als elements span que

heu afegit abans i llavors guardeu i actualitzeu, de manera que els tres ele-

ments flotants tornin a quedar l’un al costat de l’altre. És a dir: esborreu

aquesta regla:

Ara els tres elements flotants estan totalment junts i el text adjacent co-

mença immediatament després de l’últim element flotant (tret que utilit-

zeu el Microsoft Internet Explorer 6 o una versió anterior, ja que en aquest

cas hi haurà un espai de 3 píxels a la dreta a causa del problema dels tres

píxels)*. Com es pot crear una mica d’espai al voltant d’un quadre flotant?

La resposta són els marges.

2. Ho provarem amb l’element flotant central; canviarem la regla CSS per

a l’element flotant central de la manera següent i llavors guardarem i ac-

tualitzarem:

span {

width: 34%;

}

* http://positioniseverything.net/explorer/threepxtest.html

#span-b {

float: left;



Ara sí que hi ha una mica d’espai als dos costats de l’element flotant central.

3. També podeu definir marges verticals per a una caixa flotant; feu els

canvis següents en la regla per al tercer element flotant, guardeu i actualit-

zeu.

El tercer element flotant s’ha desplaçat cap avall i també hi ha una mica d’es-

pai addicional a sota.

4. Com que ja anem llançats cap a l’aventura, vegem què passa si comencem

a jugar amb marges negatius. Feu els cavis següents en la regla per al tercer ele-

ment flotant, guardeu i actualitzeu:

Ara veureu el resultat que es mostra a la figura 4:

color: #003;

padding: 1em;

margin-left: 1em;

margin-right: 1em;

}

#span-c {

float: left;


color: #300;

padding:2em 1em;

margin-top: 2em;

margin-bottom: 2em;

}

#span-c {

float: left;


color: #300;

padding:2em 1em;

margin-top: 2em;

margin-bottom: 2em;

margin-left: -4em;

}


Figura 4

Ara els elements flotants apareixen els uns sobre els altres!

Com pot ser? Qui ha dit que els elements flotants no poden aparèixer els uns so-

bre els altres? El marge negatiu desplaça tot l’element flotant cap a l’esquerra.

L’ús de marges negatius en els elements flotants pot ser molt útil per crear al-

guns tipus de composicions de múltiples columnes.

9.4. Clearing

Ara que ja hem vist els fonaments dels elements flotants, podem passar a un

altre tema molt relacionat: el clearing.

Tal com hem vist en els exemples al llarg d’aquest apartat, el text flueix al vol-

tant d’un element flotant i les caixes de bloc no es veuen afectades pels ele-

ments flotants. Algunes vegades és preferible que un element no acabi

col·locat just al costat d’un element flotant. Per exemple, un títol que intro-

dueix una secció nova d’un apartat no ha d’aparèixer al costat d’una imatge

de la secció prèvia. És molt millor fer que el títol aparegui sota la imatge, fins

i tot encara que la imatge sobresurti per sota de l’últim paràgraf. L’única ma-

nera de fer-ho és fer servir la propietat clear (distanciar) en el títol.

Un altre exemple és l’omnipresent composició de tres columnes amb un peu

de pàgina que ocupa tota l’amplada. Si les columnes són flotants, llavors uti-

litzareu la propietat clear al peu per garantir que aparegui sota totes les co-

lumnes, sigui quina sigui la més llarga.

La propietat clear té tres valors útils: left (esquerra), right (dreta) i both

(ambdós). També són vàlids els valors none (cap), que és el valor per defecte i

inherit (heretar).

L’ús de clear:left en un element garanteix que la seva caixa generada aparei-

xerà sota de qualsevol caixa flotada prèviament cap a l’esquerra. Si utilitzeu

clear:both apareixerà sota de tots els elements flotants previs dels dos costats.


La distància s’aconsegueix desplaçant l’element cap avall (l’espai en blanc

s’afegeix sobre el seu marge superior), si és necessari, fins que la seva vora su-

perior es troba sota les vores inferiors de tots els quadres flotants en la o les

direccions especificades. Vegem-ne un exemple per il·lustrar-ho millor.

1. Abans de fer la prova, netegem primer el full d’estils. Elimineu les regles per

a #span-b i #span-c de manera que quedi només l’element flotant verd de

l’esquerra. Comproveu que la seva separació inferior sigui prou gran com per

estendre’s dins el segon paràgraf.

2. Afegiu la regla següent per al segon paràgraf, guardeu i actualitzeu:

Mireu! El segon paràgraf es desplaça cap avall fins que queda per sota de l’ele-

ment flotant, tal com podeu veure a la figura 5.

Figura 5

Ara el segon paràgraf queda per sota del primer

#p2 {

clear: left;

}


Per complicar encara més les coses, podem utilitzar float i clear en el ma-

teix element.

3. Afegiu una regla al segon element flotant per separar-lo del primer, guar-

deu i actualitzeu:

L’element flotant blau apareix ara sota l’element flotant verd, totalment fora

del paràgraf pare. Com que també ha flotat cap a l’esquerra, el segon paràgraf

es desplaça una mica més cap avall per quedar-ne separat.

9.5. Contenir elements flotants

Tal com ja hem vist abans, la caixa mare no s’amplia normalment per contenir

els fills flotants. Això sovint pot provocar confusions, per exemple quan tots

els fills d’un element floten en crear un menú horitzontal a partir d’una llista

no ordenada mitjançant la flotació de tots els elements li. Com que les caixes

flotants es treuen del flux i no afecten la caixa mare, el fet de fer flotar totes

les filles fa que en realitat la mare quedi buida i passi a tenir una altura zero.

Algunes vegades això no és el que volem, per exemple a l’hora de definir un

fons per a la mare. Si la mare té una altura zero, el fons no es veurà.

És evident que necessitem algun mecanisme per aconseguir que una caixa

mare s’ampliï per incloure-hi les filles flotants. El mètode tradicional consistia

a incloure un element addicional a l’etiquetatge, just abans de l’etiqueta de

tancament de la caixa mare, i definir-hi clear:both. Això funciona, però no

és gaire acceptable perquè implica introduir un etiquetatge addicional poc se-

màntic i innecessari. Per sort, hi ha altres maneres que explicaré a continuació.

El primer mètode consisteix senzillament a fer flotar també la mare. Les caixes

flotants s’amplien sempre per incloure totes les seves caixes filles.

1. Per provar-ho en el nostre document d’exemple, elimineu una altra vegada

la regla per a #span-b, feu flotar el primer paràgraf de la manera següent i

guardeu i actualitzeu:

#span-b {

float: left;

clear: left;

padding: 1em;


color: #003;

}

#p1 {

float: left;

}


El paràgraf s’amplia ara fins a incloure l’element flotant de color verd. Tot això

està molt bé, però algunes vegades no tenim l’opció de fer flotar la caixa mare.

Una altra manera de fer el mateix sense fer flotar el pare és definint la propietat

overflow (desbordament) del pare a un valor diferent de visible. Si hi de-

finiu el valor hidden i no especifiqueu cap altura, la caixa mare inclourà les

caixes filles flotants.

2. Substituïu l’última regla per la següent, guardeu-ho i actualitzeu-ho:

Tingueu en compte que l’últim mètode no funciona amb l’Internet Explorer 6

o anterior.

9.6. Ajustar

Ja he comentat abans que el fet de fer flotar una caixa inserida feia que es con-

vertís en una caixa en línia, la qual cosa permet especificar les seves dimensi-

ons i marges verticals. Fer flotar una caixa de bloc també té una conseqüència

sorprenent: si no s’especifica l’amplada de la caixa, aquesta “s’ajusta” per

adaptar-se al seu contingut. Això no era visible en el document d’exemple

quan heu fet flotar el primer paràgraf perquè ja tenia prou contingut com per

omplir tota la finestra (tret que tinguéssiu un monitor realment ample).

Ara farem flotar l’últim paràgraf per veure’n l’efecte. De fet, només per tenir

una mica de variació, farem una bogeria i el farem flotar a la dreta.

Afegiu la regla següent al full d’estils, guardeu i actualitzeu:

El paràgraf que diu “Hello, World!” flotarà cap a la dreta i tindrà només l’am-

plada del text més una mica de farcit que heu especificat en una regla anterior

per a tots els paràgrafs.

9.7. Centrar elements flotants

Algunes vegades voldreu fer flotar un element, potser perquè inclogui fills flo-

tants, però a la vegada mantenir-lo centrat horitzontalment dintre del seu pa-

#p1 {

overflow: hidden;

}

#p3 {

float: right;

}

re. Això representa un problema: no és possible utilitzar el truc habitual de

definir els marges esquerre i dret a auto per als elements flotants, i no existeix

cap valor float:center. Hi ha alguna manera de solucionar-ho?

a

De fet, n’hi ha. El guru del CSS Paul O’Brien explica com fer-ho en el seu article

When is a float not a float?*. Implica l’ús d’un element d’embolcall addicional,

però és perfectament assumible. El principi utilitza el posicionament relatiu,

que explicarem a l’apartat següent. Desplaçant l’element d’embolcall cap a la

dreta i a continuació l’element flotant cap a l’esquerra, es pot arribar a centrar

un element flotant ajustat d’una amplada desconeguda. (Podeu fer servir

aquest coneixement per impressionar la vostra parella en la vostra pròxima ci-

ta. No falla mai).

Intentem-ho. A l’exemple següent afegirem una barra de menú horitzontal a

la vostra pàgina. El menú estarà basat en una llista no ordenada amb elements

flotants.

1. Inseriu l’etiquetatge següent just després de l’etiqueta <body> del vostre

document HTML:

2. Afegiu les regles següents de CSS al full d’estils per aplicar estils al menú:

* http://www.search-this.com/2007/09/19/when-is-a-float-not-a-

float/

Vegeu a l’apartat 10 d’aquest mòdul.

<div class=“wrap”>

<ul id=“menu”>

<li><a href=“#”>Home</a></li>

<li><a href=“#”>News</a></li>

<li><a href=“#”>Products</a></li>

<li><a href=“#”>Services</a></li>

</ul>

</div>



<div class=“clear”></div>

#menu {

margin: 0;

padding: 0.5em;


}

#menu li {

float: left;


margin: 0 0 0 0.5em;


3. Guardeu els dos arxius i actualitzeu el navegador. Veureu el menú a la part

superior esquerra: ara el centrarem horitzontalment.

4. Desplaceu l’element d’embolcall fins al punt central modificant la regla de

.wrap tal com s’indica a continuació:

El menú començarà en el centre horitzontal de la pàgina, però això no és el que

volíem; està massa desplaçat cap a la dreta, o sigui que l’haurem de desplaçar una

mica cap a l’esquerra. Com que heu fet flotar l’element d’embolcall, aquest s’ha

ajustat per adaptar-se a la llista. Heu de desplaçar la llista una distància equivalent

a la meitat de la seva amplada, la qual cosa també significa la meitat de l’amplada

de l’embolcall, o sigui que l’haurem de desplaçar un -50%.

5. Modifiqueu la regla #menu de la manera següent:

padding: 0.25em;


color: #ff9;


}

#menu a {

color: #ff9;


}

.wrap {

float: left;

margin-bottom: 2em;

}

.clear {

clear: left;

height: 1px;

margin-top: -1px;

}

.wrap {

float: left;

margin-bottom: 2em;

position: relative;

left: 50%;

}

#menu {

margin: 0;

padding: 0.5em;


El menú ja està centrat; l’únic problema és que pot haver-hi una barra de des-

plaçament horitzontal segons l’amplada de la llista i de la finestra del navega-

dor. Això passa perquè heu desplaçat l’element d’embolcall fins al centre de la

pantalla; si la llista és més ampla que la meitat de la finestra, una part d’aques-

ta quedarà fora.

6. Podeu evitar-ho definint overflow:hidden en un element pare adequat

per ocultar el desbordament. En aquest cas, el pare de l’embolcall és el body.

Algunes vegades no és factible ocultar el desbordament de l’element body, i

en aquest cas necessitareu un embolcall per a l’embolcall; aquí, però, tot fun-

ciona correctament.

Afegiu la regla següent al vostre full d’estils:

7. De fet, encara hi ha un altre problema. Si ho obriu amb l’Internet Explorer

veureu que encara no funciona del tot bé. La manera de solucionar-ho és fent

flotar la llista mateixa, però només a l’Internet Explorer, ja que en altres nave-

gadors quedaria trencada. Podeu solucionar-ho utilitzant un petit truc que ga-

ranteix que aquesta regla només s’aplicarà a l’Internet Explorer.

Afegiu la regla següent al vostre full d’estils:

9.8. Errors!

Els elements flotants i el clearing són molt útils, però desafortunadament la

majoria dels navegadors (de fet, quasi tots) aplica aquestes propietats d’una

manera errònia. L’Internet Explorer 6 presenta una sèrie increïble de com-

portaments estranys amb els elements flotants, que inclouen la desaparició

del contingut, marges dobles i el famós problema dels tres píxels. Però quan

es tracta d’aplicar els elements flotants i clearing, ni tan sols el Firefox i l’Ope-

ra estan totalment lliures de problemes. Position Is Everything* és un recurs


position: relative;

left: -50%;

}

body{

overflow: hidden;

}

* html #menu {

float: left;

}

* http://positioniseverything.net/


molt valuós en el qual es documenten tots aquests problemes, juntament

amb solucions per a la majoria dels casos.

Resum

El fet de fer flotar una caixa fa que aquesta es desplaci tot el possible cap a l’es-

querra o la dreta dintre del seu element pare. Una caixa flotant s’extreu del

flux del document i no afecta la caixa mare ni les caixes de bloc següents, tot

i que les caixes de línia adjacents s’escurcen. Quan no hi ha espai per a una

caixa flotant en una línia a causa d’altres elements flotants previs, aquesta es

desplaça cap avall fins que hi cap (o fins que no hi ha altres elements flotants).

Quan es fa flotar una caixa en línia, aquesta es converteix en una caixa de bloc.

Quan es fa flotar una caixa de bloc i no s’especifica cap amplada concreta,

aquesta s’ajusta per adaptar-se al seu contingut.

Per centrar elements flotants cal desplaçar el contingut cap avall, si és neces-

sari, fins que la seva vora superior es trobi per sota de les vores inferiors de to-

tes les caixes flotants en la direcció especificada.

Per centrar una caixa flotant continguda es pot afegir un element d’embolcall

i fer servir assenyadament el posicionament relatiu.

Preguntes de repàs


1. Què passa si feu flotar un element al mig d’un paràgraf; és a dir, si hi ha

text abans de l’element flotant? Proveu-ho en navegadors diferents, perquè es

comporten de maneres diferents. L’Opera i el Safari ho fan bé, però el Firefox

i l’Internet Explorer, no.

2. Com es poden fer servir els elements flotants per mostrar miniatures

d’imatges en una galeria de “cel·les” de la mateixa mida sense utilitzar una tau-

la per a la distribució?

3. Com podeu tenir un menú de navegació vertical a l’esquerra de la pàgina i

una columna de contingut a la dreta sense que el text del contingut envolti el

menú per sota?

4. Una composició de web molt habitual consisteix en una capçalera que ocu-

pa tota l’amplada, tres columnes de contingut a sota d’aquesta i a continuació

un peu de pàgina al final que torna a ocupar tota l’amplada. Com es pot acon-

seguir aquesta composició amb elements flotants i clearing?


10. Posicionament estàtic i relatiu en CSSTommy Olsson

En aquest apartat explicaré en profunditat la manera en què es pot utilitzar el

CSS per posicionar elements HTML en el lloc desitjat d’una pàgina amb la pro-

pietat position (posicionar) de CSS i algunes propietats relacionades.

La propietat position de CSS té quatre valors lícits (a banda de l’omnipresent

inherit): static (estàtic), relative (relatiu), absolute (absolut) i fixed

(fix). Aquests valors tenen un impacte molt important sobre la manera en què

es representa un element. Els valors static i relative estan molt relacio-

nats, i en aquest apartat els estudiarem en gran detall. Els valors absolute i

fixed també estan molt relacionats, però de moment els deixaré per al proper

apartat.

10.1. El meravellós món dels rectangles

aPer començar, recapitularem una mica tot el que hem dit en l’apartat dedicat

als elements flotants i al clearing, sobre el CSS i les caixes HTML. Un document

HTML consisteix en un nombre d’elements esquitxats amb dades de caràcters

(text). Quan un document d’aquesta mena es reprodueix en una pantalla d’or-

dinador o en una còpia impresa, aquests elements generen caixes rectangulars.

De la mateixa manera que un conjunt d’elements HTML es divideix en ele-

ments de bloc i elements en línia, les caixes del CSS també poden ser bàsica-

ment caixes de bloc o caixes en línia. Per defecte, el full d’estils de l’agent

d’usuari integrat d’un navegador fa que els elements HTML de bloc, com ara

p i div, generin caixes de bloc, mentre que els elements en línia, com ara

strong i span, generin caixes en línia. Podem utilitzar la propietat display

per controlar el tipus de caixa que es generarà.

Les caixes generades pels elements d’un document es disposen segons una sè-

rie de normes clarament definides segons l’especificació CSS2.1*. Aquestes re-

gles estan escrites per a les relativament escasses persones que escriuen

programari per a navegadors perquè puguin saber com funciona el CSS, però

no per a aquells de nosaltres que dissenyem pàgines web per guanyar-nos la

vida o com a afició. És per això que existeix tot aquest curs! Com a resultat,

l’especificació pot ser una mica difícil d’entendre. En aquest apartat intentaré

explicar els conceptes bàsics d’una manera que resulti apropiada per als disse-

nyadors i desenvolupadors de webs.

10.2. Posicionament estàtic

De fet, aquest nom no és gens adequat. En realitat, els quadres amb positi-

on:static no es “posicionen” en el sentit del CSS. Simplement es disposen

Vegeu l’apartat 9 d’aquest mòdul.

* http://www.w3.org/TR/CSS21


en l’ordre en què apareixen en l’etiquetatge i ocupen tot l’espai que necessi-

ten; aquest és el comportament per defecte que es dóna quan no s’aplica cap

CSS a l’HTML.

Hi ha algunes diferències fonamentals en la manera com es distribueixen les

caixes de bloc en comparació amb la distribució de les caixes en línia, o sigui

que examinarem els dos tipus un a un. Començaré amb les caixes de bloc, per-

què són més senzilles.

10.2.1. Disposició de caixes de bloc

Si no apliquem cap declaració CSS concreta, les caixes de bloc es disposen ver-

ticalment de dalt a baix en l’ordre en què apareixen a l’etiquetatge. Cada caixa

és normalment tan ampla com el document (l’element body), però, fins i tot

si les fem més estretes, aquestes no es distribuiran l’una al costat de l’altra en-

cara que hi hagi espai, sinó que se seguiran situant una sota l’altra. Podeu ima-

ginar-vos-ho com si cada caixa de bloc tingués un salt de línia implícit abans

i després, ja que així es garanteix que tindrà una “línia” pròpia.

La distància vertical entre dues caixes de bloc es controla amb la propietat

margin-bottom (marge-inferior) de la primera caixa i la propietat margin-

top (marge-superior) de la segona caixa (en aquesta assignatura ja hem vist

com manipular aquestes propietats). Per a les caixes del flux normal, és a dir,

les caixes que no són flotants o que no tenen un posicionament absolut, els

marges verticals entre dues caixes de bloc adjacents se superposaran, de mane-

ra que el resultat final no serà la suma dels dos marges, sinó el més gran dels

dos, tal com es pot veure a la figura 1, que es mostra més endavant.

Mireu el següent fragment d’HTML:

Quan es mostra en un navegador, els marges se superposen, tal com es pot

veure a la figura 1.

Figura 1

Els marges se superposen i la distància entre els dos és de 40 píxels, i no de60 píxels.

Una caixa de bloc inclourà només altres caixes de bloc o només caixes en línia.

Si un element de bloc conté una barreja de fills de bloc i en línia (una cosa per-

<p style=“margin-bottom:40px”>This paragraph has a 40px bottom margin.</p>

<p style=“margin-top:20px”>This paragraph has a 20px top margin.</p>


mesa, però semànticament qüestionable), es generarà el que es coneix com

caixes de bloc anònimes per incloure-hi les caixes filles inserides de manera que

la mare contingui només caixes de bloc.

Podeu especificar les dimensions d’una caixa de bloc amb les propietats width

(amplada) i height (alçada). També podeu especificar-ne els marges vertical i

horitzontal. El valor inicial (per defecte) per a width i height és auto, i el va-

lor inicial per a les propietats de marge és 0. Aquests factors combinats signi-

fiquen que una caixa de bloc serà per defecte tan ampla com la seva mare, tal

com mostra la figura 2.

Figura 2

Les caixes de bloc es distribueixen verticalment.

10.2.2. Disposició de caixes en línia

Les caixes en línia es generen per defecte a partir dels elements HTML en línia,

però també hi ha caixes en línia anònimes generades per incloure el contingut

de text dels elements.

Les caixes en línia es distribueixen horitzontalment, una després de l’altra, en

l’ordre en el qual apareixen a l’etiquetatge. Segons la propietat direction, els

quadres inserits es distribuiran d’esquerra a dreta (direction:ltr) o de dreta

a esquerra (direction:rtl). La direcció d’esquerra a dreta s’utilitza, per

exemple, amb els idiomes europeus, mentre que la de dreta a esquerra s’utilit-

za amb idiomes com l’àrab i l’hebreu.

El grup de caixes en línia que formen una línia en la pantalla (o en el paper)

està contingut en un altre rectangle, que es coneix com caixa de línia. Les cai-

xes de línia es distribueixen verticalment en el seu bloc mare, sense cap espai

entre elles. Podem modificar l’alçada de les caixes de línia amb la propietat

line-height.

Notaa

Aquest subapartat pot ser difícil d’entendre si no teniu gaire experiència

amb CSS, o sigui que potser l’haureu de llegir unes quantes vegades,

però tampoc us ha de preocupar. L’experimentació pel vostre compte és

probablement la millor manera per entendre bé totes aquestes qüesti-

ons; només cal que a l’hora de fer les proves utilitzeu un bon navegador

compatible amb els estàndards, com l’Opera o el Firefox.


Per a les caixes en línia no podem especificar cap dimensió. Podem especificar-

ne els marges horitzontals, però no els verticals.

Si cal, una caixa en línia es pot dividir en diverses caixes en línia distribuïdes

per dues o més caixes de línia. Quan es produeix una divisió d’aquesta mena,

tots els marges horitzontals i separacions, i totes les vores verticals, s’aplicaran

només abans de la primera caixa i després de l’última caixa. Imaginem-nos un

document amb la regla següent per als elements em:

Amb això s’obtindrà una composició similar a la que es pot veure a la figura 3,

en la qual els elements amb estil es divideixen en múltiples línies.

Figura 3

Els marges, la separació i la vora nos’apliquen on es produeix eltrencament.

L’alineació vertical de les caixes en línia dintre de la caixa de línia que les con-

té està determinada per la propietat vertical-align (alineament-vertical).

El valor per defecte és baseline, la qual cosa significa que les caixes en línia

s’alineen de manera que les seves línies base de text queden alineades. La línia

base és la línia imaginària sobre la qual se situen les lletres sense astes descen-

dents. Aquesta línia se situa una mica per sobre de la part inferior de la caixa

de línia per deixar espai per a les astes ascendents de les lletres en minúscules,

tal com mostra la figura 4.

Figura 4

Les lletres se situen sobre la línia base imaginària.

Observeu que la propietat vertical-align s’aplica només a les caixes en lí-

nia i a les cel·les de taula, i no s’hereta. La figura 5 mostra algunes imatges pe-

tites amb diferents alineacions verticals.

em {

margin: 0 2em;

padding: 0 1em;

border: 1px dotted blue;

}


Figura 5

Les imatges situades amb els valors de la propietat vertical-align del CSS.

Quan l’amplada total de les caixes en línia en una caixa de línia és inferior a

l’amplada de la caixa de línia en si, l’alineació vertical es controla amb la pro-

pietat text-align. Amb text-align:justify (alinear text: justificar) s’in-

sereix un espai addicional entre les caixes en línia, si cal, per alinear el

contingut a l’esquerra i a la dreta. Aquesta propietat s’aplica a les caixes de

bloc, a les cel·les de taules i als blocs en línia, i s’hereta. La figura 6 mostra el

resultat d’aplicar valors diferents de la propietat text-align al text que hi ha

a l’interior de les cel·les d’una taula.

Figura 6

Controlar l’alineació del text amb la propietat text-align.

10.3. Posicionament relatiu

El posicionament relatiu és un sistema de posicionament de CSS, però està

més relacionat amb el “posicionament” estàtic que no pas amb els seus cosins-

germans: el posicionament absolut i el fix.

Un element amb position:relative es col·loca en principi igual que qualsevol

element estàtic; de bloc o inserit. Però llavors passa una cosa molt interessant: la

caixa generada es desplaça segons les propietats top, bottom, left i right.

El que cal recordar sobre el posicionament relatiu és que només es desplaça la

caixa generada. L’element segueix essent allà on era en el flux del document

estàtic. Aquí és on “ocupa espai” pel que fa als altres elements. Això significa

que la caixa desplaçada pot acabar a sobre d’altres caixes d’elements, ja que

aquestes segueixen actuant com si l’element amb un posicionament relatiu

s’hagués quedat on havia de ser abans d’aplicar el posicionament. Pel que fa

al flux del document, l’element no s’ha mogut; és només el resultat visual final

el que mostra la caixa desplaçada. Vegem com funciona a la pràctica.

1. Copieu el següent codi HTML en un document nou de l’editor de textos

que més us agradi i guardeu-lo amb el nom relative.html.


2. Obriu l’arxiu amb el vostre navegador web per veure quin aspecte té en

aquest moment; hauríeu de veure només un paràgraf de text normal.

3. Creeu un document nou en el vostre editor, copieu-hi el codi CSS següent

i guardeu l’arxiu amb el nom style.css.

4. Enllaceu el full d’estil al document HTML inserint la línia següent just

abans de l’etiqueta </head>.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>


<title>Relative Positioning</title>

</head>

<body>

<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit.

Curabitur feugiat feugiat purus.

Aenean eu metus. Nulla facilisi.

Pellentesque quis justo vel massa suscipit sagittis.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per

inceptos hymenaeos.

Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, ut

tincidunt metus arcu vel lorem.

Praesent metus orci, adipiscing eget, fermentum ut, pellentesque non, dui.

Sed sagittis, <span>metus a semper</span> dictum, sem libero sagittis nunc,

vitae adipiscing leo neque vitae tellus.

Duis quis orci quis nisl nonummy dapibus.

Etiam ante. Phasellus imperdiet arcu at odio.

In hac habitasse platea dictumst. Aenean metus.

Quisque a nibh. Morbi mattis ullamcorper ipsum.

Nullam odio urna, feugiat sed, bibendum sed, vulputate in, magna.

Nulla tortor justo, convallis iaculis, porta condimentum, interdum nec, arcu.

Proin lectus purus, vehicula et, cursus ut, nonummy et, diam.</p>

</body>

</html>

p {

width: 20em;

}

span {

background-color: lime;

}


5. Guardeu els dos arxius i actualitzeu la pàgina en el navegador. He fet que

el paràgraf sigui més estret perquè els salts de línia siguin sempre en la mateixa

posició fins i tot quan la finestra del navegador sigui petita. Ara l’element

span té un color de fons una mica cridaner per fer-lo més visible.

6. Seguidament modificarem el full d’estils afegint tres declaracions a la regla

per a l’element span:

7. Guardeu i torneu a carregar la pàgina en el navegador per veure els efectes

del posicionament relatiu.

Heu desplaçat l’element span tant verticalment com horitzontalment. Obser-

veu que queda superposat sobre la línia de text següent i que al lloc on es tro-

bava ara hi ha un espai buit.

La manera en què s’ha desplaçat la caixa generada potser no era la que esperà-

veu d’aquest codi. Heu especificat top:1em, però la caixa s’ha desplaçat cap

avall. A més, la caixa també s’ha desplaçat cap a la dreta tot i haver especificat

left:2em. Per què?

La clau per entendre el funcionament d’aquestes propietats amb el posiciona-

ment relatiu és adonar-se que especifiquen la vora a la qual s’aplica el movi-

ment, i no la direcció del moviment. És a dir, que la propietat top desplaça la

caixa en relació amb la seva vora superior, la propietat left el desplaça en re-

lació amb la seva vora esquerra, i així anar fent. La caixa s’allunya de la vora

especificada; per tant, top:1em desplaça el quadre 1 em des de la posició su-

perior, és a dir, cap avall. Els nombres negatius desplacen el quadre en la di-

recció oposada i, per tant, bottom:-1em és el mateix que top:1em.

Això ens porta a una altra conclusió: no té cap sentit especificar alhora una

propietat top i una propietat bottom (o left i right) per al mateix element.

Les regles del CSS diuen que si s’especifica top, llavors bottom s’ha d’ignorar.

Pel que fa al moviment horitzontal, això depèn de la propietat direction. Si

s’especifiquen left i right alhora, en un entorn d’esquerra a dreta s’ignora

right i en un entorn de dreta a esquerra s’ignora left.

<link rel=“stylesheet” type=“text/css” href=“style.css”>

span {

position: relative;

top: 1em;

left: 2em;


}


L’exemple que hem vist explica el posicionament relatiu, però no sembla gaire

útil, oi? Així, doncs, per a què serveix el posicionament relatiu? Fem una ulla-

da a un exemple més complicat.

10.3.1. Disposició de múltiples columnes amb requisits

d’ordre en el codi font

aAvís: aquest exemple és una mica complex. Si és la primera vegada que entreu

en el món del CSS us pot semblar fins i tot una mica desencoratjador, però

l’aniré explicant a un ritme molt pausat deixant ben clar què és el que faig en

cada moment. Si encara no heu llegit l’apartat que parla dels elements flotants

i clearing, ara seria un bon moment per fer-ho.

Hi ha un tipus de composició que és molt habitual a les pàgines web. Inclou una

capçalera, que normalment conté algun logotip o ensenya, sota la qual hi ha dues

o més “columnes”, una al costat de l’altra. Al final hi sol haver un peu de pàgina

que ocupa tota l’amplada, potser amb l’avís de copyright o la informació de con-

tacte. La figura 7 mostra un exemple d’aquest tipus de composició.

Figura 7

Una composició típica amb múltiples columnes entre una capçalera i un peu de pàgina.

A l’Edat Fosca (els anys 1990), aquest tipus de distribució se solia crear amb

taules. Això és un ús inadequat de l’etiquetatge de l’HTML per a finalitats

presentacionals, cosa gens aconsellada; per tant, en aquesta assignatura no

Vegeu a l’apartat 9 d’aquest mòdul.


ho ensenyarem. El CSS ofereix maneres d’aconseguir això mateix amb

display:table-cell i similars, però aquesta solució té un inconvenient

important: no hi ha cap versió de l’Internet Explorer que l’accepti, o sigui

que tampoc la veurem. Només ens queden dues opcions: els elements flo-

tants i el posicionament absolut. Aquests dos mètodes tenen avantatges i

inconvenients, però si voleu un peu de pàgina que ocupi tota l’amplada i

no sabeu d’entrada quina columna serà la més llarga, llavors necessitareu

els elements flotants per garantir la integritat del disseny.

El problema dels elements flotants és que només es desplacen cap a la dreta o

l’esquerra fins que toquen la vora del bloc pare o un altre element flotant. Això

vol dir que les columnes flotants han d’aparèixer en l’ordre correcte a l’etique-

tatge. Però algunes vegades es vol tenir un ordre presentacional diferent de

l’ordre del codi font. Potser us interessi que el contingut aparegui abans de la

navegació, per exemple, per tal de millorar la usabilitat de la navegació amb

el teclat i l’optimització en motors de cerca. Això es pot aconseguir, fins i tot

amb elements flotants, fent un ús entenimentat dels marges negatius i el po-

sicionament relatiu; vegem com fer-ho. Començarem amb un document

HTML que ens servirà de base per anar-hi treballant.

1. Copieu el codi següent al vostre editor de textos i guardeu l’arxiu amb el

nom layout.html.

2. Seguidament crearem l’embrió d’un full d’estils. Copieu el codi següent al

vostre editor de textos i guardeu l’arxiu amb el nom layout.css.



<html lang=“en”>

<head>


<title>Static and Relative Positioning</title>

<link rel=“stylesheet” type=“text/css” href=“layout.css”>

</head>

<body>

<div id=“header”>Header</div>

<div id=“main”>Main content</div>

<div id=“sidebar”>Sidebar</div>

<div id=“nav”>Navigation</div>

<div id=“footer”>Footer</div>

</body>

</html>


3. Deseu els dos arxius i carregueu la pàgina al navegador. Les cinc divisions

apareixen en ordre, de dalt a baix. Imagineu-vos que el departament de dis-

seny ha especificat que la navegació ha d’anar a l’esquerra, la barra lateral a la

dreta i el contingut principal a la columna del mig. La capçalera i el peu de

pàgina han d’ocupar tota l’amplada de la pàgina, però no sabem quina de les

tres columnes serà la més llarga. L’ordre del codi font ve determinat pels ex-

perts en accessibilitat i usabilitat i no és negociable. Com es poden combinar

tots aquests requisits per aconseguir una composició que funcioni? Perquè

funcioni haureu d’afegir un element addicional a l’etiquetatge. És inevitable,

però un element addicional és una cosa que no us hauria de preocupar gaire.

Necessitareu un element que embolcalli les tres “columnes”.

4. Inseriu les dues línies destacades en el document HTML:

Els dissenyadors (que, per sort, són conscients de l’accessibilitat i de la inde-

pendència de dispositiu) han estipulat que la navegació ha de tenir una am-

plada de 12 em i la barra lateral de 14 em. La columna amb el contingut

principal ha de tenir una amplada fluida, de manera que la composició s’adap-

ti a diferents mides de finestres, ja que les composicions amb una amplada fixa

no són gaire fàcils de fer servir per l’usuari. Per evitar que les línies de text si-

#header {


color: #fff;

}

#sidebar {


}

#nav {

background-color: #ddd;

}

#footer {


}

<div id=“header”>Header</div>

<div id=“wrapper”>

<div id=“main”>Main content</div>

<div id=“sidebar”>Sidebar</div>

<div id=“nav”>Navigation</div>

</div>

<div id=“footer”>Footer</div>


guin massa llargues i dificultin la llegibilitat, haureu de limitar la composició

a una amplada màxima. Per evitar l’encavalcament en finestres summament

estretes també haureu de limitar la composició a una amplada mínima. Dintre

d’aquestes limitacions, la composició s’ha de centrar horitzontalment a la fi-

nestra del navegador.

5. A continuació, assigneu les amplades a la navegació i a la barra lateral i de-

finiu les limitacions d’amplada i el centrat general afegint les regles següents

al final de l’arxiu CSS:

6. Guardeu els arxius i torneu-los a carregar; hauríeu de veure la barra lateral

groga i la navegació de color gris amb les amplades desitjades. Si la finestra del

navegador és prou ampla, també veureu que tota la pàgina té una amplada li-

mitada i que apareix centrada horitzontalment.

7. Intenteu canviar la mida de la finestra i mireu com s’adapta la compo-

sició.

body{

margin: 0 auto;

min-width: 40em;

max-width: 56em;

}

#sidebar {

width: 13em;

padding: 0 0.5em;


}

#nav {

width: 11em;

padding: 0 0.5em;


}

Notaa

Si utilitzeu la versió 6 o anterior del Microsoft Internet Explorer no po-

dreu veure els efectes de cap limitació de l’amplada. Això és així perquè

aquestes versions de l’IE no accepten amplades (o altures) mínimes i

màximes. Al final de l’exemple veurem una manera de solucionar

aquest problema. De fet, al llarg de tot aquest exemple anireu veient uns

resultats estranys, fins i tot amb l’IE7, perquè l’Internet Explorer té

molts errors de representació. En aquest exemple em centraré en la ma-

nera de fer les coses conforme amb els estàndards, i al final ja veurem

les solucions.


Si observeu el codi amb atenció veureu que les amplades estan fixades a 13 em i

11 em en lloc de 14 em i 12 em. Això és així perquè necessitem una mica de se-

paració horitzontal; no volem que el contingut d’aquestes columnes toqui les vo-

res, ja que no quedaria gaire bé. La separació s’afegeix a l’amplada, amb la qual

cosa 13 em + 0,5 em + 0,5 em sumen un total de 14 em, que és el que volem.

Crear columnes

Molt bé, ara ja tenim els components bàsics, però es mostren un després de

l’altre. Com que volem tres columnes, les haurem de començar a fer flotar.

1. Afegiu les regles següents al vostre arxiu CSS:

Amb aquest codi es fan flotar les columnes, sí, però no es mostren en l’ordre

correcte. A més, la columna del contingut principal és massa estreta. I què ha

passat amb el peu de pàgina?

2. En primer lloc ens encarregarem del peu de pàgina. El problema és que

hem fet flotar les tres columnes, amb la qual cosa han quedat fora del flux del

document. El peu de pàgina queda just a sota de l’encapçalament i la caixa de

línia que conté el text s’ha escurçat, de manera que la paraula “Footer” apareix

a la dreta dels elements flotants. Podem solucionar-ho fent que el peu de pà-

gina estigui a una certa distància de totes les columnes flotants. Afegiu la regla

següent al vostre arxiu CSS:

#main {

float: left;

}

#sidebar {

float: left;

width: 13em;

padding: 0 0.5em;


}

#nav {

float: left;

width: 11em;

padding: 0 0.5em;


}

#footer {

clear: left;


}


3. I ara ens dedicarem a les tres columnes. Ho farem pas a pas, i durant una

estona tot plegat tindrà un aspecte horrible; però no us desespereu, perquè al

final tot anirà molt bé.

La clau és l’element d’embolcall. Hi definirem uns marges esquerre i dret que

es corresponguin amb les amplades de les columnes laterals (la navegació i la

barra lateral). La columna del contingut principal ocuparà tota l’amplada de

l’embolcall i les columnes laterals es desplaçaran cap a l’espai que deixen buit

els marges. Sona complicat? No us preocupeu, perquè ho anirem fent de mica

en mica. En primer lloc definirem els marges de l’embolcall afegint la regla se-

güent a l’arxiu CSS:

Recordeu que els valors de la propietat margin abreujada s’especifiquen en

l’ordre TReBaLl, és a dir: top (superior), right (dret), bottom (inferior), left (es-

querre). Definim els marges superior i inferior a 0, el marge dret a 14 em (per

a la barra lateral) i el marge esquerre a 12 em (per a la navegació). També hi

hem afegit 1 em de separació horitzontal, perquè no volem que el contingut

toqui les columnes laterals; cal que respiri.

4. El següent pas és fer que la columna del contingut principal ocupi tota

l’amplada del seu element embolcall pare; el codi també defineix un color de

fons cridaner per a aquesta columna, temporalment:

5. Guardeu l’arxiu i torneu-lo a carregar; veureu una columna central del con-

tingut de color verd llima amb la barra lateral i la navegació a sota. També

veureu que hi ha molt d’espai en blanc als dos costats. El que hem de fer ara

és aconseguir que les nostres columnes laterals es desplacin cap a aquest espai

en blanc.

De moment ens dedicarem a la barra lateral, que és flotant i ja té l’amplada cor-

recta, però com que la columna #main té una amplada del 100% la barra lateral

es desplaça cap avall. Com podem fer que pugi i es col·loqui al costat de #main

#wrapper {

margin: 0 14em 0 12em;

padding: 0 1em;

}

#main {

float: left;

width: 100%;


}


tenint en compte que #main ocupa tota l’amplada? Ho farem en dos passos: en

primer lloc la mourem cap amunt i després la desplaçarem cap al marge.

6. Per aconseguir que la barra lateral flotant, que s’ha desplaçat cap avall, tor-

ni a anar cap amunt utilitzarem un truc molt enginyós. Afegiu el següent a la

regla #sidebar:

7. Guardeu, torneu a carregar i veureu que la barra lateral es troba ara a la ma-

teixa alçada vertical que la columna del contingut. Amb un marge esquerre

negatiu igual a l’amplada de la barra lateral, estem movent l’element cap a l’in-

terior de l’embolcall i ja no es desplaça cap avall. El problema és que queda

sobre el contingut.

8. Haureu de desplaçar-la cap al marge sense que torni a anar cap avall, i aquí

és on entra finalment en joc el posicionament relatiu. Aquest fa precisament

el que volem: desplaça la caixa generada sense moure l’element en si. Afegiu

les propietats destacades del codi següent a la regla per a #sidebar:

Observeu que hem hagut de desplaçar l’element 15 em, i no 14 em, això és així

perquè a l’embolcall hi ha 1 em de separació a la dreta que cal que superem. La

barra lateral ja es troba al lloc on ha de ser: cap al marge, al costat de la columna

del contingut i ben alineada amb les vores dretes de la capçalera i el peu de pàgina.

9. Ara heu de fer el mateix amb la navegació; el procediment és similar, però hi

ha un petit detall que heu de tenir en compte. Moure i desplaçar la barra lateral

ha estat fàcil, perquè els moviments eren bàsicament els mateixos que l’amplada

#sidebar {

float: left;

width: 13em;

padding: 0 0.5em;


margin-left: -14em;

}

#sidebar {

float: left;

width: 13em;

padding: 0 0.5em;


margin-left: -14em;

position: relative;

left: 15em;

}


de la columna: un marge negatiu de 14 em i un desplaçament de 14 em + 1 em

cap a la dreta. Però la columna de la navegació s’ha de moure per sobre de la co-

lumna del contingut i llavors encara s’ha de desplaçar més cap al marge.

Aquí els nostres aliats seran els percentatges. Un valor de percentatge als mar-

ges de la columna de la navegació serà relatiu a l’amplada del seu pare, l’em-

bolcall. Com que voleu moure la columna fins a l’extrem de l’embolcall,

afegiu la propietat destacada del codi següent a la regla per a #nav:

10. Ja ho tenim! Guardeu, torneu a carregar i veureu la navegació sobre la part

esquerra de la columna del contingut. Tot el que heu de fer és desplaçar-la cap

al marge. Afegiu les següents propietats ressaltades a la regla per a #nav:

Aquí també, l’amplada de la navegació és de 12 em, però tenim 1 em de sepa-

ració de l’embolcall que hem de superar, per la qual cosa cal que desplacem la

caixa 13 em. L’esteu desplaçant cap a l’esquerra, és a dir, des de la vora dreta,

i és per això que utilitzem la propietat right.

11. Elimineu el fons de color verd llima de la columna del contingut i ja ho

tindreu tot.

Solucionar els problemes amb l’Internet Explorer

Hi ha dues propietats d’aquesta composició que fan que no funcioni bé amb

l’Internet Explorer 6 per a Windows. Un dels problemes és que l’IE6 no accep-

#nav {

float: left;

width: 11em;

padding: 0 0.5em;


margin-left: -100%;

}

#nav {

float: left;

width: 11em;

padding: 0 0.5em;


margin-left: -100%;

position: relative;

right: 13em;

}

ta les propietats min-width (amplada mín.) i max-width (amplada màx.) i

l’altre és que l’IE és molt dolent amb els percentatges.

Per emular les restriccions d’amplada podeu fer servir la notació expression()

exclusiva de Microsoft. Agafa una expressió de JScript com el seu argument i

proporciona el valor de retorn d’aquesta expressió. Si exigeix fer molt càlculs,

aquesta expressió pot provocar problemes de rendiment, ja que es calcula cada

vegada que el navegador ha de definir l’amplada de body. També exigeix que

el JScript estigui activat, però podeu afegir-hi una degradació molt elegant, de

manera que si, per exemple, el JScript no està disponible, el disseny recorrerà

a una alternativa que seguirà essent utilitzable. En aquest exemple fareu que

la maquetació sigui totalment elàstica en lloc del disseny fluid limitat que

hem creat abans, si el JScript està desactivat.

La manera recomanada de fer servir regles d’estils per solucionar problemes a

l’Internet Explorer és utilitzant els “comentaris condicionals”. Aquesta és una

funció única de Microsoft que integra lògica condicional en els comentaris de

l’HTML (hi ha un apartat dedicat exclusivament als comentaris condicionals*

a dev.opera.com).

1. Afegiu les línies següents al codi HTML just abans de l’etiqueta </head>.

2. Ara creeu un arxiu nou amb el nom layout-ie6.css que contingui el

següent:

* http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/



body{

width: 50em;

width: expression(w=document.documentElement.offsetWidth,

em=document.getElementById(“nav”).offsetWidth/12,

(w<40*em?”40em”:(w>56*em?”56em”:”auto”)));

}

#wrapper {

height: 1em;

}

#nav {

margin-left: -22em;

margin-left: expression((-(document.getElementById(“wrapper”).clientWidth))

+”px”);

left: 13em;

}


Així se solucionen els dos problemes de l’IE6. Utilitzem expressions JScript per

emular les propietats min-width i max-width, que l’IE6 no accepta, amb un

valor alternatiu elàstic de 50 em. A continuació utilitzem una altra expressió

del JScript per definir un marge esquerre en píxels en lloc de percentatges,

també amb un valor alternatiu elàstic. L’alçada per a #wrapper és només per

habilitar la propietat hasLayout específica de Microsoft, que necessitem perquè

el posicionament relatiu de la navegació funcioni correctament. Microsoft ha do-

cumentat hasLayout* en la MSDN, però no és precisament fàcil d’entendre.

I què passa amb l’IE7? Sí que accepta min-width i max-width, però segueix

situant malament l’element de la navegació; és el mateix problema de

hasLayout de l’IE6 que torna a treure el cap. Cal que habiliteu hasLayout a

l’element #wrapper. Per sort, podeu fer-ho de manera que no comprometi els

navegadors conformes amb els estàndards, o sigui que no caldrà que creeu un

full d’estils diferent per a l’IE7; podeu afegir-hi senzillament la regla següent

per manipular l’embolcall:

La definició d’una altura mínima habilita hasLayout i no provoca cap pro-

blema en altres navegadors, o sigui que ho podeu posar en el full d’estils

principal.

Aquestes solucions no són perfectes; si la mida de la finestra es modifica a

determinades dimensions la composició seguirà fent coses rares en l’IE6 i

l’IE7, tot i que si es torna a carregar la pàgina, la composició quedarà bé una

altra vegada.

10.3.2. Altres usos del posicionament relatiu

L’ús més habitual del posicionament relatiu no implica desplaçar la caixa ge-

nerada. Això pot sonar estrany: per què hauríeu de fer servir el posicionament

relatiu sense desplaçar la caixa? Explicarem la raó en l’apartat següent, perquè

també té a veure amb el posicionament absolut. Així, doncs, us haureu d’es-

perar una mica.

Definir position:relative (sense desplaçar la caixa) també pot ser útil amb

alguns problemes de representació estranys de l’Internet Explorer. Defineix la

famosa propietat hasLayout interna, que té un impacte molt profund en la

representació que fa l’Internet Explorer dels elements.

* http://msdn.microsoft.com/library/shared/deeptree/asp/rightframe.asp?dtcfg=/library/

deeptreeconfig.xml&url=/library/en-us/IETechCol/cols/dnexpie/

expie20050831.asp?frame=true&hidetoc=false

#wrapper {

margin: 0 14em 0 12em;

padding: 0 1em;

min-height: 1em;

}


Resum

El posicionament estàtic és la manera per defecte de fer les coses. Les caixes de

bloc es distribueixen verticalment segons l’ordre en què apareixen al codi

font, mentre que les caixes en línia es distribueixen horitzontalment en caixes

en línia dintre d’aquestes caixes de bloc.

El posicionament relatiu permet desplaçar la caixa generada en una o dues di-

mensions. L’element segueix ocupant espai com si fos estàtic, però la caixa ge-

nerada es pot desplaçar a una altra posició. El posicionament relatiu es fa servir

principalment en combinació amb elements flotants per crear composicions

en què l’ordre de la presentació és diferent de l’ordre del codi font.

Preguntes de repàs


1. Què passa quan dos marges adjacents d’un context de format estàtic se su-

perposen i un o tots dos marges són negatius?

2. Afegiu una vora vertical entre cadascuna de les columnes laterals i la co-

lumna del contingut principal. Recordeu que totes tres columnes són flotants,

amb la qual cosa l’alçada de l’element d’embolcall ha passat a ser zero.

3. Com podeu fer que totes les columnes tinguin la mateixa alçada (o que

com a mínim ho sembli), de manera que els colors de fons arribin fins al peu

de pàgina sigui quina sigui la columna més llarga? (Consell: cerqueu “faux co-

lumns” en el vostre motor de cerca preferit).


11. Posicionament absolut i fix amb CSSTommy Olsson

Ara és el moment de fixar-nos en el segon parell de valors de propietat de

position: absolute (absoluta) i fixed (fixa). El primer parell de valors:

static (estàtica) i relative (relativa), estan íntimament relacionats, i ja els

vam veure al darrer apartat.

Els elements posicionats absolutament s’eliminen completament del flux del

document. Això significa que no tenen cap efecte sobre el seu element pare ni

sobre els elements que els segueixen en el codi font. Per tant, un element po-

sicionat absolutament es superposarà sobre altres continguts tret que prengui

alguna mesura per evitar-ho. De vegades, per descomptat, aquesta superposi-

ció és exactament el que voldreu, però hauríeu de ser conscients d’això per as-

segurar-vos que obteniu la composició que desitgeu.

El posicionament fix és de fet una forma especialitzada del posicionament ab-

solut; els elements amb posicionament fix estan fixos en relació amb la fines-

tra o viewport del navegador en comptes d’estar-ho en relació amb l’element

contenidor; fins i tot si es desplaça la pàgina, es mantenen exactament a la ma-

teixa posició a la finestra del navegador.

En aquest apartat us donaré alguns exemples pràctics de l’ús dels posiciona-

ments absolute i fixed, observarem alguns petits problemes de compatibi-

litat de navegadors i ens fixarem en el concepte d’índex z.

Abans de començar a parlar de tot això, però, tractaré un concepte previ es-

sencial: els blocs contenidors.

11.1. Blocs contenidors

Un concepte fonamental pel que fa al posicionament absolut és el bloc conte-

nidor: la caixa de bloc respecte de la qual es troben la posició i les dimensions

de la caixa posicionada absolutament.

Per a les caixes estàtiques i posicionades relativament, la caixa contenidora és

l’avantpassat a nivell de bloc més proper o, dit d’una altra manera, l’element

pare. No obstant això, per als elements posicionats absolutament és una mica

més complicat. En aquest cas, la caixa contenidora és l’avantpassat posicionat

més proper. Amb “posicionat” em refereixo a un element la propietat position

del qual està establerta en relative, absolute o fixed, és a dir, qualsevol

cosa excepte elements estàtics normals.


De manera que, establir position:relative per a un element el converteix

en bloc contenidor de qualsevol descendent posicionat absolutament (ele-

ments fills), tant si apareixen immediatament a sota de l’element posicionat

relativament a la jerarquia, o més avall.

Si un element posicionat absolutament no té un avantpassat posicionat, ales-

hores el bloc contenidor és el que s’anomena bloc contenidor inicial, que a la

pràctica equival a l’element html. Si esteu mirant la pàgina web en pantalla,

això vol dir la finestra del navegador; si voleu imprimir la pàgina, significa els

límits de la pàgina.

Els elements amb posicionament fix difereixen lleugerament, ja que el seu

bloc contenidor sempre és el bloc contenidor inicial.

Així, doncs, resumim això en una sèrie de senzilles passes; per trobar el bloc

contenidor d’un element amb position:absolute, això és el que heu de fer:

1. Mireu l’element pare de l’element posicionat absolutament: la propietat

position d’aquest element té un dels valors relative, absolute o fixed?

2. Si és així, heu trobat el bloc contenidor.

3. En cas contrari, passeu a l’element pare del pare i comenceu de nou des del

pas 1 fins que trobeu el bloc contenidor o us quedeu sense avantpassats.

4. Si heu arribat a l’element html sense trobar un avantpassat posicionat,

aleshores el bloc contenidor és l’element html.

11.2. Posicionament absolut

El posicionament fix és una forma especial de posicionament absolut, de ma-

nera que l’estudiarem més endavant i ara ens concentrarem en el cas més ge-

neralitzat. Tret que s’indiqui el contrari, quan utilitzo el terme “posicionat

absolutament” des d’ara fins al final de l’apartat em referiré tant a elements

amb position:fixed com a elements amb position:absolute.

11.2.1. Especificació de la posició

Amb el posicionament relatiu, heu après que les propietats top, right, bottom

i left es podien utilitzar per especificar la posició de la caixa. Per especificar

la posició d’una caixa posicionada absolutament es fan servir les mateixes pro-

pietats, però la forma d’utilitzar-les és força diferent.

Per a un element posicionat relativament, les quatre propietats especifiquen

la distància relativa per desplaçar la caixa generada. Recordeu que en el cas del


posicionament relatiu es complementen entre si, de manera que top:1em i

bottom:-1em volen dir el mateix, i no té gaire sentit especificar tant top com

bottom (o left i right) per al mateix element, perquè un dels valors s’ignorarà.

Aquests punts no són certs en el cas del posicionament absolut. En aquest cas, es

poden utilitzar les quatre propietats al mateix temps per especificar la distància

des de cada vora de l’element posicionat fins a la vora corresponent del bloc con-

tenidor. També es pot especificar la posició d’una de les cantonades del quadre

posicionat absolutament, per exemple utilitzant top i left, i aleshores especifi-

car les dimensions del quadre mitjançant width i height (o simplement no uti-

litzar width i height si voleu deixar que s’ajusti per encaixar el seu contingut).

La versió 6 del Microsoft Internet Explorer i anteriors no accepten el mètode

d’especificar les quatre vores, però sí el mètode d’especificar una cantonada

més les dimensions.

El que heu de recordar en aquest cas és que els valors que heu establert per a

les propietats top, right, bottom i left especifiquen les distancies des de les

vores de l’element fins a les vores del seu bloc contenidor corresponent. No és

com en un sistema de coordinades on cada valor és relatiu a un punt d’origen.

Per exemple, right:2em significa que la vora dreta del quadre posicionat ab-

solutament serà a 2em de la vora dreta del bloc contenidor.

És absolutament essencial saber quin és el bloc contenidor quan s’utilitza el

posicionament absolut. Per això és tan útil configurar position:relative

en el bloc contenidor, fins i tot si no es desplaça realment la posició del qua-

dre. Permet fer que un element sigui el bloc contenidor dels seus descendents

posicionats absolutament, és a dir, us proporciona el control.

/* Aquest mètode funciona a IE6 */

#foo {

position: absolute;

top: 3em;

left: 0;

width: 30em;

height: 20em;

}

/* Aquest mètode no funciona a IE6 */

#foo {

position: absolute;

top: 3em;

right: 0;

bottom: 3em;

left: 0;

}


Provem un exemple per veure com funciona.

1. Copieu el codi següent al vostre editor de text i guardeu el document com

absolute.html.

2. A continuació, copieu el codi següent a un nou arxiu i guardeu-lo com

absolute.css.

3. Guardeu els dos arxius i carregueu el document HTML al vostre navegador.

Veureu un rectangle gris envoltat d’un marc una mica més ample de color verme-

ll. L’element #inner té una amplada i alçada especificades i un color gris de fons.

L’element #outer, que és el pare estructural de #inner, té un marc vermell. Tam-

bé té un marge de 5 em al voltant per allunyar-lo de les vores de la finestra del

navegador i deixar-nos veure més clarament què és el que hi passa.

Res sorprenent fins ara, oi? L’alçada de l’element #outer ve donada pel seu

element fill (#inner) i l’amplada pels marges horitzontals.



<html>

<head>


<title>Absolute Positioning</title>

<link rel=“stylesheet” type=“text/css” href=“absolute.css”>

</head>

<body>

<div id=“outer”>

<div id=“inner”></div>

</div>

</body>

</html>

html, body {

margin: 0;

padding: 0;

}

#outer {

margin: 5em;


}

#inner {

width: 6em;

height: 4em;


}


4. Mireu què passa ara si feu que l’element #inner estigui posicionat absolu-

tament. Afegiu la següent línia ressaltada a la regla de #inner:

5. Guardeu i recarregueu. En comptes d’un marc vermell al voltant del rectan-

gle gris, ara hi ha el que sembla un marc més gruixut només a la part superior.

I el quadre gris no s’ha mogut en absolut. Us ho esperàveu?

Passen dues coses interessants aquí: en primer lloc, fer que #inner estigui po-

sicionat absolutament l’ha eliminat completament del flux del document.

Això significa que el seu pare, #outer, ara no té fills que es trobin al flux nor-

mal, per tant la seva alçada es redueix a zero. El que sembla una línea vermella

de 2 píxels de gruix és realment una vora d’1 píxel al voltant d’un element

amb alçada zero: esteu veient les vores superior i inferior sense res al mig.

La segona cosa interessant és que el quadre posicionat absolutament no s’ha mo-

gut. El valor predeterminat per a les propietats top, right, bottom i left és

auto, la qual cosa significa que el quadre posicionat absolutament apareixerà

exactament on hauria estat si no hagués estat posicionat. Com que s’ha eliminat

del flux, es superposarà a qualsevol element del flux normal que el segueixi, però.

Això és realment molt útil: podeu fer-ho servir si només voleu moure un qua-

dre generat en una dimensió. Per exemple, en un menú desplegable de CSS,

els panells “desplegables” es poden posicionar absolutament especificant no-

més la propietat top. Aleshores apareixeran automàticament a la coordinada

prevista al llarg de l’eix X (el mateix que el seu pare).

6. A continuació, establim una alçada per a l’element #outer de manera que

torni a semblar un rectangle i movem #inner lateralment. Afegiu les següents

línies ressaltades a les regles de CSS:

#inner {

width: 6em;

height: 4em;


position: absolute;

}

#outer {

margin: 5em;


height: 4em;

}


7. Guardeu i recarregueu, i hi veureu alguns canvis. L’element #outer ara és un

rectangle una altra vegada, ja que hi heu especificat una alçada. L’element #in-

ner s’ha desplaçat lateralment, però no on es podria esperar trobar-lo. No és a

1 em de la vora esquerra del seu pare, sinó a 1 em de la vora esquerra de la finestra.

El motiu és que, com s’ha explicat abans, #inner no té un avantpassat posi-

cionat, de manera que el seu bloc contenidor és el bloc contenidor inicial. Si

especifiqueu una posició diferent d’auto, és relativa a la vora corresponent del

bloc contenidor. Quan heu establert left:1em, la vora esquerra de #inner ha

acabat a 1 em de la vora esquerra de la finestra.

8. Si en comptes d’això, el voleu a 1 em de la vora esquerra del seu element

pare, heu de fer pare el bloc contenidor. Per a fer-ho, ara fareu servir el truc

que he esmentat anteriorment en aquest apartat: fer que el bloc pare estigui

posicionat relativament. Afegiu la següent línia ressaltada a la regla #outer:

9. Guardeu i recarregueu: passeu i vegeu! El rectangle gris ara és a 1 em de la

vora esquerra de l’element pare. Establir position:relative a la regla

#outer ha fet que estigui posicionat i l’ha establert com el bloc contenidor per

a qualsevol descendent posicionat relativament que pugui tenir. El left:1em

que heu establert per a #inner ara compta a partir de la vora esquerra de

#outer, no la vora esquerra de la finestra del navegador.

11.2.2. Especificació de les dimensions

Els elements posicionats absolutament s’ajustaran per encabir el seu contin-

gut, tret que especifiqueu les seves dimensions. Podeu especificar l’amplada

#inner {

width: 6em;

height: 4em;


position: absolute;

left: 1em;

}

#outer {

margin: 5em;


height: 4em;

position: relative;

}


definint les propietats left i right, o bé definint la propietat width. Podeu

especificar l’alçada definint les propietats top i bottom, o bé definint la pro-

pietat height.

Qualsevol d’aquestes sis propietats es pot especificar com a percentatge. Els

percentatges són, per la seva pròpia naturalesa, relatius a alguna altra cosa. En

aquest cas són relatius a les dimensions del bloc contenidor.

Per a un element posicionat absolutament, els valors de percentatge per a les

propietats left, right i width són relatius a l’amplada del bloc contenidor.

Els valors de percentatge per a les propietats top, bottom i height són rela-

tius a l’alçada del bloc contenidor.

El navegador Internet Explorer 6 i anteriors, i també Opera 8 i anteriors, ho

van interpretar de manera totalment errònia i van utilitzar les dimensions del

bloc pare en el seu lloc. Anem a provar amb un altre exemple per veure com

això pot suposar una gran diferència.

1. Comenceu especificant les dimensions de #inner mitjançant valors de

percentatge; feu els següents canvis a la regla #inner:

2. Guardeu i recarregueu, i veureu que el rectangle gris es fa més ample i més curt

(com a mínim si esteu fent servir un navegador modern). El bloc contenidor és

encara #outer, perquè té position:relative. L’amplada de l’element #inner

ara és la meitat de la de #outer, i la seva alçada és la meitat de l’alçada de #outer.

3. Fem la finestra del bloc contenidor una vegada més, per veure la diferència.

Feu el següent canvi a #outer:

#inner {

width: 50%;

height: 50%;


position: absolute;

left: 1em;

}

#outer {

margin: 5em;


height: 4em;

position: static;

}


4. Guardeu i recarregueu; una diferència notable, oi? El quadre gris és ara la

meitat d’ample i la meitat d’alt que la finestra del navegador.

Com podeu veure, conèixer els vostres blocs contenidors és absolutament es-

sencial.

11.2.3. La tercera dimensió: índex Z

És natural considerar que una pàgina web té dues dimensions. La tecnologia

no ha evolucionat prou perquè les pantalles 3D estiguin generalitzades, de

manera que ens hem de conformar amb amplada, alçada i falsos efectes 3D.

Però la representació CSS realment és produeix en tres dimensions. Això no

vol dir que pugui fer que un element voli davant del monitor (encara), però

pot fer altres coses útils amb els elements posicionats.

Els dos eixos principals d’una pàgina web són l’eix X horitzontal i l’eix Y ver-

tical. L’origen d’aquest sistema de coordenades es troba a la cantonada supe-

rior esquerra de la finestra, és a dir, on tant el valor X com Y són 0.

Però també hi ha un eix Z, que podem imaginar com perpendicular a la super-

fície del monitor (o del paper, si es tracta d’una impressió). El valors Z més alts

indiquen una posició de “davant dels” valors Z més baixos. El valors Z també

poden ser negatius, i en aquest cas indiquen una posició “darrera” d’algun

punt de referència (explicaré aquest punt de referència d’aquí un moment).

Els elements posicionats (incloent-hi els elements posicionats relativament) es

representen dintre del que es coneix com a context d’apilament. Els elements

dins d’un context d’apilament tenen el mateix punt de referència al llarg de

l’eix Z. Tot seguit ho explicaré més detalladament. Podeu canviar la posició Z

(també denominada nivell de pila) d’un element posicionat utilitzant la pro-

pietat z-index. El valor pot ser un número sencer (que pot ser negatiu) o una

de les paraules clau auto o inherit. El valor predeterminat és auto, la qual

cosa vol dir que l’element té el mateix nivell de pila que el seu pare.

Heu de tenir en compte que només podeu especificar una posició índex al llarg

de l’eix Z. No podeu fer que un element aparegui 19 píxels darrera o 5 centí-

metres davant d’un altre. Penseu en això com si fos una baralla de cartes: Po-

deu apilar les cartes i decidir que l’as d’espases estigui sobre el tres de diamants;

cada carta té el seu nivell de pila, o índex Z.

Notaa

Abans de continuar, haig d’advertir-vos que aquest és un dels temes més

complicats de CSS, així que no us desmoralitzeu si no ho enteneu a la

primera.


Si especifiqueu z-index com un enter positiu, li assigneu un nivell de pila

“davant de” la resta d’elements del mateix context d’apilament que tenen

un nivell de pila inferior. Un z-index de 0 (zero) significa el mateix que au-

to, però hi ha una diferència de la qual parlaré en un moment. Un valor en-

ter negatiu per a z-index assigna un nivell de pila “darrera” el nivell

d’apilament pare.

Quan dos elements del mateix context d’apilament tenen el mateix nivell de

pila, el que apareix posteriorment al codi font apareixerà a sobre dels seus ger-

mans predecessors.

De fet, no poden haver menys de set capes en un context d’apilament, i en

cadascuna d’aquestes capes poden haver-hi qualsevol nombre d’elements,

però no us preocupeu: el més probable és que mai hàgiu de tractar amb set ca-

pes en un context d’apilament. L’ordre en què els elements (tots els elements,

no només els posicionats) es representen en un context d’apilament, des de

darrera cap a davant, és el següent:

1. El fons i les vores dels elements que formen el context d’apilament

2. Descendents posicionats amb nivells de pila negatius

3. Descendents a nivell de bloc en el flux normal

4. Descendents flotants

5. Descendents de nivell en línia en el flux normal

6. Descendents posicionats amb el nivell de pila definit com auto o 0 (zero)

7. Descendents posicionats amb nivells de pila positius

Les entrades ressaltades són els elements amb un nivell de pila que es pot can-

viar mitjançant la propietat z-index.

Tot plegat pot ser bastant difícil d’imaginar, així que fem alguns experiments

pràctics per a il·lustrar l’índex Z.

1. Comenceu afegint la següent línia ressaltada al vostre petit document de

mostra:

2. A continuació us explicaré com restaurar els CSS de manera que #outer si-

gui el bloc contenidor i com establir dimensions no percentuals de #inner.

<body>

<div id=“outer”>

<div id=“inner”></div>

<div id=“second”></div>

</div>

</body>


Fem que #outer sigui una mica més alt, també, per a tenir més espai per fer

proves. Feu els següents canvis ressaltats a les dues regles:

3. Afegiu una regla per a l’element #second, també:

4. Guardeu i recarregueu i veureu un quadre blau brillant que es superposa a

un de gris. Els dos quadres tenen el mateix nivell de pila (auto, el valor inicial,

que significa un nivell de pila 0) però el quadre blau es representa davant del

quadre gris, perquè apareix més tard al codi font. Podeu fer que el quadre gris

aparegui davant assignant-li un nivell de pila positiu. Només heu d’especificar

que sigui més gran que 0: no cal exagerar i utilitzar un valor com ara 10.000.

Afegiu la següent línia ressaltada a la regla #inner:

#outer {

margin: 5em;


height: 8em;

position: relative;

}

#inner {

width: 5em;

height: 5em;


position: absolute;

left: 1em;

}

#second {

width: 5em;

height: 5em;

background-color: #00f;

position: absolute;

top: 1em;

left: 2em;

}

#inner {

width: 5em;

height: 5em;


position: absolute;

left: 1em;

z-index: 1;

}


5. Guardeu i recarregueu, i veureu com el quadre gris apareix davant del qua-

dre blau.

Contexts d’apilament local

La resta d’aquest subapartat tracta dels contexts d’apilament locals. Molt pro-

bablement, no us trobareu amb això gaire sovint treballant com a dissenya-

dors, tret que intenteu fer alguna cosa realment avançada amb posicionament

absolut, però he decidit incloure-ho igualment per completesa. Si voleu, po-

deu saltar-vos aquesta secció.

Cada element que tingui el z-index especificat com un enter estableix un con-

text d’apilament nou, “local”, en el qual el propi element té un nivell de pila 0.

Aquesta és la diferencia que he mencionat abans entre z-index: auto i z-in-

dex: 0. L’anterior no estableix un nou context d’apilament, però el darrer, sí.

Quan un element estableix un context d’apilament local, els nivells de pila

dels seus descendents posicionats s’apliquen només en aquest context local.

Aquests descendents es poden tornar a apilar els uns respecte dels altres, i res-

pecte del seu pare, però no respecte dels germans del pare. És com si el pare

formés una “gàbia” al voltat dels seus descendents de manera que no poden

abandonar-la. Els descendents es poden moure amunt i avall en aquesta gàbia,

però no poden abandonar-la. El pare i els seus descendents formaran una uni-

tat indivisible en el context d’apilament que envolta el pare.

Imagineu-vos que esteu classificant la paperassa abans de lliurar-la al contable

que porta els vostres assumptes fiscals. Teniu informes de despeses, rebuts,

confirmacions de comandes i tot això, i apileu un paper a sobre de l’altre: per

facilitar-li la vida al vostre gestor, introduïu els tipus de documents que van

junts en diferents sobres.

Un context d’apilament local és semblant a aquest tipus de sobre. Manté els

elements relacionats junts i impedeix que altres elements s’introdueixin entre

ells. Podeu classificar el contingut de cada sobre com vulgueu, però aquest or-

dre de classificació només s’aplica a aquest sobre i no afecta a la pila de docu-

ments en conjunt. La vostra pila conté ara una barreja de documents

independents (elements amb el nivell de pila auto) i sobres (elements amb un

nivell de pila enter). Els sobres amb nivells de pila positius queden per sobre

dels documents independents, mentre que els sobres amb nivells de pila ne-

gatius apareixen a sota de tot de la pila.

Cada vegada que assigneu un valor enter a la propietat z-index d’un element,

es crea un “sobre” que conté aquest element i els seus descendents.

Vegem com funcionen aquests contexts d’apilament local. Pot semblar con-

fús, però realment no és gaire diferent de tot el que ja heu vist. Si seguiu els

exemples, acabareu obtenint fent-vos una bona idea de com funciona tot.


1. Comenceu afegint algun contingut als vostres dos elements interns: afegiu

les línies ressaltades al vostre document HTML:

2. Afegiu una regla CSS que s’aplicarà a aquest dos elements span:

Això fa que els elements span quedin posicionats absolutament i estableix les

seves posicions i dimensions. Però un moment, els elements span són en lí-

nia... Com es poden especificar les dimensions dels elements en línia? La res-

posta és que els elements posicionats absolutament, com els elements flotants,

generen automàticament caixes de bloc.

Les posicions que especifiqueu s’aplicaran en relació al bloc contenidor de

cada span. Com que ambdós elements span tenen un div posicionat absolu-

tament com a pare, aquests pares assumeixen la funció de blocs contenidors.

3. Afegim ara una mica de color als elements span perquè podeu veure on

apareixen; afegiu les següents regles al vostre full d’estils:

4. Guardeu i recarregueu i veureu un quadre groc a la cantonada inferior dreta

del quadre gris més gran i un quadre de color cian a la cantonada inferior dreta

del quadrat blau més gran. Els quadres gris i groc apareixen davant dels qua-

dres blau i cian perquè el quadrat gris té un z-index:1.

<div id=“inner”>

<span></span>

</div>

<div id=“second”>

<span></span>

</div>

span {

position: absolute;

top: 2em;

left: 2em;

width: 3em;

height: 3em;

}

#inner span {


}

#second span {

background-color: #0ff;

}


5. I si voleu que el quadrat cian quedi davant de tots els altres quadrats? Tot

el que heu de fer és aplicar-li un nivell de pila més alt que al quadrat gris. De

fet, n’hi ha prou amb donar-li exactament el mateix nivell de pila que el qua-

drat gris, ja que el quadrat cian apareix més endavant a l’etiquetatge. Provem-

ho; feu el següent canvi al vostre CSS:

6. Guardeu i recarregueu. Si el vostre navegador admet correctament la reco-

manació CSS, el quadrat cian hauria de ser ara al davant.

El quadrat gris té un z-index:1, la qual cosa vol dir que estableix un context

d’apilament local. En altres paraules, heu creat un d’aquests “sobres” i heu

col·locat el quadrat gris i el seu quadrat fill de color groc a l’interior.

Seguiu sense veureu clar del tot? A veure si amb el següent experiment ho aca-

bem d’aclarir.

1. Establiu un nivell de pila alt per al quadrat groc per portar-lo al davant; feu

el següent canvi al vostre CSS:

2. Si guardeu i recarregueu, veureu... cap canvi en absolut. El nivell de pila

que hem especificat per al quadrat groc s’aplica en el context d’apilament

local establert pel quadrat gris, és a dir: el quadrat groc es troba en un sobre

juntament amb el seu pare gris. Podríeu moure el quadrat cian fins al da-

vant perquè el seu pare (el quadrat blau) no estableix un context d’apila-

ment local: té un z-index:auto implícit. El quadrat blau és un paper

independent a la pila. Els quadrats groc i cian estan realment sols en petits

sobres individuals (tenen un nivell de pila enter i estableixen contexts

d’apilament local pel seu compte).

3. Si feu que el quadrat blau estableixi un context d’apilament local, no po-

dreu moure el quadrat cian al davant tret que també porteu el seu pare (el qua-

drat blau) al davant. Provem-ho. Feu els següents canvis al vostre CSS:

#second span {

background-color: #0ff;

z-index: 1;

}

#inner span {


z-index: 4;

}


4. Guardeu i recarregueu. Ara, tant el quadrat gris com el quadrat blau esta-

bleixen contexts d’apilament local, de manera que es creen dos sobres. A la

part inferior de la pila hi ha un sobre amb el nivell de pila 1 que inclou dos

sobres interiors (el quadrat blau i el quadrat cian). A la part superior de la pila

hi ha un sobre amb el nivell de pila 2 que inclou dos sobres interiors (el qua-

drat gris i el quadrat groc). En el primer sobre, el quadrat blau té un nivell de

pila local 0 i, per tant, es mostra darrera del quadrat cian, que té un nivell de

pila local 3. En el segon sobre, el quadrat gris té un nivell de pila local 0, de

manera que apareix darrera del quadrat groc amb nivell de pila local 4.

La figura 1 mostra els quatre quadres i els dos contexts d’apilament local des

del lateral, al llarg de l’eix Z.

Figura 1

Il·lustració de diferents contexts d’apilament. Elselements que apareixen dins de “2” sempre apareixerandavant de tots els elements dins de “1”. Després, dinsde cada context d’apilament, els elements amb unnúmero d’índex z més gran apareixen davant delselements amb un número d’índex z més petit. Si doselements tenen el mateix número d’índex z, el queapareix més tard a l’etiquetatge apareixerà davant.

#inner {

...

z-index: 2;

}

#second {

...

z-index: 1;

}

#second span {

...

z-index: 3;

}


Aquesta part és probablement bastant complicada, especialment si els CSS us ve-

nen de nou. La qüestió és que heu de conèixer els vostres contexts d’apilament si

esteu intentant canviar els nivells d’apilament de diferents elements. Si un ele-

ment pertany a un context d’apilament local, només podeu canviar la seva posi-

ció al llarg de l’eix Z en aquest context local. Un element en un context

d’apilament local no es pot colar entre dos elements d’un altre context d’apila-

ment local.

La bona notícia és que molt probablement mai us trobareu amb aquests pro-

blemes. Els canvis a z-index no són molt comuns en les bones composicions,

i en cas que es produeixin, generalment sempre és en un context d’apilament.

11.3. Posicionament fix

Un element amb position:fixed és fix respecte a la finestra. Es manté on és

encara que es desplaci el document. Per a media=“print” es repetirà un ele-

ment fix a cada pàgina impresa.

Tingueu en compte que les versions 6 i anteriors de l’Internet Explorer i anteriors

no admeten de cap de les maneres el posicionament fix. Si utilitzeu un d’aquests

navegadors no podreu veure els resultats dels exemples d’aquest subapartat.

Mentre que la posició i dimensions d’un element amb position:absolute són

sempre relatives al seu bloc contenidor, la posició i dimensions d’un element amb

position:fixed són sempre relatives al bloc contenidor inicial. Aquest acostu-

ma a ser el viewport: la finestra del navegador o el quadre de la pàgina impresa.

Per demostrar-ho, en l’exemple següent fareu fix un dels vostres elements. Fa-

reu l’altre molt alt perquè es generi una barra de desplaçament i així fer més

fàcil l’efecte que té.

1. Feu els següents canvis al vostre codi CSS:

#inner {

width: 5em;

height: 5em;


position: fixed;

top: 1em;

left: 1em;

}

#second

width: 5em;

height: 150em;

background-color: #00f;


2. Guardeu i recarregueu. Si no obteniu una barra de desplaçament vertical,

augmenteu el valor height per a #second (però quin tipus de monitor gegant

teniu?).

L’element blau alt s’allarga més enllà de la part inferior de la finestra. Despla-

ceu la pàgina cap avall i observeu el quadrat gris de la cantonada superior es-

querra. Ara #inner queda fix a la posició a 1em de la part superior de la

finestra i a 1em del costat esquerra, per tant, a mida que us desplaceu, el qua-

dre gris queda al mateix lloc de la pantalla.

Resum

Els elements posicionats absolutament s’eliminen completament del flux del

document. Es superposaran sobre altres continguts tret que els feu espai. Si

tots els elements fills d’un contenidor estan posicionats absolutament, l’alça-

da del pare es reduirà a zero.

Els elements posicionats absolutament ho estan respecte d’un bloc conteni-

dor, que és l’avantpassat posicionat més proper. Si no hi ha avantpassat posi-

cionat, el viewport serà el bloc contenidor.

Els elements amb posicionament fix ho estan respecte de la finestra: aquesta

és sempre el seu bloc contenidor. Sempre apareixen al mateix lloc de la fines-

tra del navegador quan es veuen en pantalla; quan s’imprimeixen, apareixen

a cada pàgina.

Les posicions de cada vora d’un element posicionat absolutament es poden es-

pecificar mitjançant les propietats top, right, bottom i left. El valor de

cada propietat especifica la distancia d’aquesta vora a la vora corresponent del

bloc contenidor de l’element.

Tots els elements posicionats es representen a un nivell de pila determinat en un

context d’apilament. Podeu canviar el nivell de pila d’un element posicionat uti-

litzant la propietat z-index. Quan s’especifica z-index com un valor enter, l’ele-

ment estableix un context d’apilament local per als seus descendents.

Preguntes de repàs


1. Desfeu els canvis de l’exemple de posicionament fix i, a continuació, can-

vieu l’ordre d’apilament entre els quatre quadrats posicionats absolutament

position: absolute;

top: 1em;

left: 2em;

}


de manera que el quadrat gris estigui a la part del darrera, seguit dels quadrats

blau, groc i cian en aquest ordre (consell: elimineu totes les declaracions de z-

index i comenceu de nou).

2. Moveu el quadrat groc cap amunt i a la dreta especificant top:-1em i

left:8em. A continuació, feu que aparegui darrera de l’element #outer, de

manera que la vora vermella aparegui a través del quadrat groc.

3. Repliqueu la disposició de tres columnes que vam crear a l’apartat de posi-

cionament estàtic i relatiu utilitzant el posicionament absolut en el seu lloc.

Com que serà impossible tenir un peu d’amplada completa, podeu eliminar

l’element #footer, però no podeu canviar res més a l’etiquetatge (apart de

l’enllaç al full d’estils).

4. Modifiqueu la disposició de l’exercici anterior per fer que la navegació uti-

litzi el posicionament fix. Haureu d’eliminar els marges horitzontals automà-

tics de l’element body per fer-ho possible. Afegiu prou contingut a la columna

principal i/o la barra lateral perquè aparegui una barra de desplaçament, de

manera que pugueu verificar que funciona.

css - programador | fotógrafo · pdf filecss ben buchanan christian heilmann ben henick...

Documents