css - programador | fotógrafo · pdf filecss ben buchanan christian heilmann ben henick...
Post on 23-Mar-2018
246 Views
Preview:
TRANSCRIPT
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
Preguntes de repàs ............................................................................... 40
CC-BY-NC-ND • PID_00150451 CSS
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
Preguntes de repàs ............................................................................... 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
CC-BY-NC-ND • PID_00150451 CSS
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
Preguntes de repàs ............................................................................... 79
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
Preguntes de repàs ............................................................................... 96
Lectures complementàries ................................................................... 97
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
CC-BY-NC-ND • PID_00150451 CSS
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
Preguntes de repàs ................................................................................ 142
Lectures complementàries ................................................................... 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
CC-BY-NC-ND • PID_00150451 CSS
8.3.1. Demostració 1 ................................................................... 150
8.3.2. Demostració 1: consideracions prèvies ............................. 150
8.3.3. Demostració 2 ................................................................... 151
8.3.4. Demostració 2: consideracions prèvies ............................. 151
8.3.5. Demostració 3 ................................................................... 152
8.3.6. Demostració 3: consideracions prèvies ............................. 153
8.3.7. Crear una quadrícula ......................................................... 153
8.3.8. Demostració 4 ................................................................... 154
8.3.9. Demostració 4: consideracions prèvies ............................. 155
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.14.Demostració 6: consideracions prèvies ............................. 158
8.3.15.Demostració 7 ................................................................... 159
8.3.16.Demostració 7: consideracions prèvies ............................. 159
8.3.17.Demostració 8 ................................................................... 160
8.3.18.Demostració 8: consideracions prèvies ............................. 160
8.3.19.Demostració 9 ................................................................... 160
8.3.20.Demostració 9: consideracions prèvies ............................. 161
8.3.21.Demostració 10 ................................................................. 161
8.3.22.Demostració 10: consideracions prèvies ........................... 162
8.3.23.Demostració 11 ................................................................. 162
8.3.24.Demostració 11: consideracions prèvies ........................... 163
8.3.25.Demostració 12 ................................................................. 163
8.3.26.Demostració 12: consideracions prèvies ........................... 164
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
Preguntes de repàs ............................................................................... 167
Lectures complementàries ................................................................... 168
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
Preguntes de repàs ............................................................................... 186
CC-BY-NC-ND • PID_00150451 CSS
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
Preguntes de repàs ................................................................................ 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
Preguntes de repàs ............................................................................... 220
CC-BY-NC-ND • PID_00150451 9 CSS
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;
}
CC-BY-NC-ND • PID_00150451 10 CSS
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;
}
CC-BY-NC-ND • PID_00150451 11 CSS
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}
CC-BY-NC-ND • PID_00150451 12 CSS
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
CC-BY-NC-ND • PID_00150451 13 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.
* http://dev.opera.com/articles/view/27-css-basics/example-
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.
CC-BY-NC-ND • PID_00150451 14 CSS
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]{
border: 1px solid #000000;
}
img[src=“alert.gif”]{
border: 1px solid #000000;
}
* http://dev.opera.com/articles/view/css-3-attribute-selectors/
CC-BY-NC-ND • PID_00150451 15 CSS
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 {
...
}
CC-BY-NC-ND • PID_00150451 16 CSS
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.
CC-BY-NC-ND • PID_00150451 17 CSS
• :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;
}
CC-BY-NC-ND • PID_00150451 18 CSS
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;
}
CC-BY-NC-ND • PID_00150451 19 CSS
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.
CC-BY-NC-ND • PID_00150451 20 CSS
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;
}
CC-BY-NC-ND • PID_00150451 21 CSS
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;
CC-BY-NC-ND • PID_00150451 22 CSS
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);
CC-BY-NC-ND • PID_00150451 23 CSS
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>
CC-BY-NC-ND • PID_00150451 24 CSS
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;
CC-BY-NC-ND • PID_00150451 25 CSS
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>
CC-BY-NC-ND • PID_00150451 26 CSS
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.
* http://dev.opera.com/articles/view/27-css-basics/example-
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”.
CC-BY-NC-ND • PID_00150451 27 CSS
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>
CC-BY-NC-ND • PID_00150451 28 CSS
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ó?
CC-BY-NC-ND • PID_00150451 29 CSS
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
CC-BY-NC-ND • PID_00150451 30 CSS
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>
CC-BY-NC-ND • PID_00150451 31 CSS
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;
}
CC-BY-NC-ND • PID_00150451 32 CSS
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%;
}
CC-BY-NC-ND • PID_00150451 33 CSS
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>
CC-BY-NC-ND • PID_00150451 34 CSS
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;
text-decoration: none;
}
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.
CC-BY-NC-ND • PID_00150451 35 CSS
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.
CC-BY-NC-ND • PID_00150451 36 CSS
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;
}
CC-BY-NC-ND • PID_00150451 37 CSS
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
CC-BY-NC-ND • PID_00150451 38 CSS
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;
}
CC-BY-NC-ND • PID_00150451 39 CSS
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;
}
CC-BY-NC-ND • PID_00150451 40 CSS
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
Preguntes que hauríeu de poder respondre:
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
CC-BY-NC-ND • PID_00150451 41 CSS
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”.
CC-BY-NC-ND • PID_00150451 42 CSS
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;
…}
CC-BY-NC-ND • PID_00150451 43 CSS
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.
CC-BY-NC-ND • PID_00150451 44 CSS
• 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.
CC-BY-NC-ND • PID_00150451 45 CSS
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/
CC-BY-NC-ND • PID_00150451 46 CSS
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; }
CC-BY-NC-ND • PID_00150451 47 CSS
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; }
CC-BY-NC-ND • PID_00150451 48 CSS
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;
}
CC-BY-NC-ND • PID_00150451 49 CSS
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
Arxiu font de: “Full d’estil de la demostració 3”http://dev.opera.com/articles/view/29-text-styling-with-css/text_03.css
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
Arxiu font de: “Full d’estil de la demostració 4”http://dev.opera.com/articles/view/29-text-styling-with-css/text_04.css
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
CC-BY-NC-ND • PID_00150451 50 CSS
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
Arxiu font de: “Full d’estil de la demostració 5”http://dev.opera.com/articles/view/29-text-styling-with-css/text_05.css
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
CC-BY-NC-ND • PID_00150451 51 CSS
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; }
CC-BY-NC-ND • PID_00150451 52 CSS
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
Arxiu font de: “Full d’estil de la demostració 6”http://dev.opera.com/articles/view/29-text-styling-with-css/text_06.css
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
Arxiu font de: “Full d’estil de la demostració 7”http://dev.opera.com/articles/view/29-text-styling-with-css/text_07.css
q { letter-spacing: .143em; }
.pullQuote { word-spacing: .143em; }
CC-BY-NC-ND • PID_00150451 53 CSS
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
Arxiu font de: “Full d’estil de la demostració 8”http://dev.opera.com/articles/view/29-text-styling-with-css/text_08.css
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
Arxiu font de: “Full d’estil de la demostració 9”http://dev.opera.com/articles/view/29-text-styling-with-css/text_09.css
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; }
CC-BY-NC-ND • PID_00150451 54 CSS
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; }
CC-BY-NC-ND • PID_00150451 55 CSS
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
Arxiu font de: “Full d’estil de la demostració 1”http://dev.opera.com/articles/view/29-text-styling-with-css/text_11.css
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; }
CC-BY-NC-ND • PID_00150451 56 CSS
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
Preguntes que hauríeu de poder respondre:
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.
CC-BY-NC-ND • PID_00150451 57 CSS
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.
http://www.webstyleguide.com/
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/
CC-BY-NC-ND • PID_00150451 58 CSS
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.
CC-BY-NC-ND • PID_00150451 59 CSS
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.
CC-BY-NC-ND • PID_00150451 60 CSS
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; }
CC-BY-NC-ND • PID_00150451 61 CSS
... 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;
}
CC-BY-NC-ND • PID_00150451 62 CSS
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; }
CC-BY-NC-ND • PID_00150451 63 CSS
• 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;
}
CC-BY-NC-ND • PID_00150451 64 CSS
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.
CC-BY-NC-ND • PID_00150451 65 CSS
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.
CC-BY-NC-ND • PID_00150451 66 CSS
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
Arxiu font de: “Full d’estil de la demostració 2”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/layout_02.css
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.
CC-BY-NC-ND • PID_00150451 67 CSS
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
Arxiu font de: “Full d’estil de la demostració 3”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/layout_03.css
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.
CC-BY-NC-ND • PID_00150451 68 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
Arxiu font de: “Full d’estil de la demostració 4”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/layout_04.css
* http://www.positioniseverything.net/
** http://css-discuss.incutio.com/
#main { width: 42em; }
.pullQuote { width: 14em; }
CC-BY-NC-ND • PID_00150451 69 CSS
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.
CC-BY-NC-ND • PID_00150451 70 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
CC-BY-NC-ND • PID_00150451 71 CSS
é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
CC-BY-NC-ND • PID_00150451 72 CSS
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;
}
CC-BY-NC-ND • PID_00150451 73 CSS
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
CC-BY-NC-ND • PID_00150451 74 CSS
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:
CC-BY-NC-ND • PID_00150451 75 CSS
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
Arxiu font de: “Full d’estil de la demostració 5”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/layout_05.css
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; }
CC-BY-NC-ND • PID_00150451 76 CSS
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
Arxiu font de: “Full d’estil de la demostració 6”http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/layout_06.css
* http://www.alistapart.com/articles/fauxcolumns/
.pullQuote { float: right;
background-color: rgb(204,204,204); }
CC-BY-NC-ND • PID_00150451 77 CSS
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.
CC-BY-NC-ND • PID_00150451 78 CSS
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.
Lectures complementàries
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].
http://www.w3.org/TR/2007/CR-CSS21-20070719
CC-BY-NC-ND • PID_00150451 79 CSS
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
Preguntes que hauríeu de poder respondre:
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?
CC-BY-NC-ND • PID_00150451 80 CSS
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?
CC-BY-NC-ND • PID_00150451 81 CSS
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
CC-BY-NC-ND • PID_00150451 82 CSS
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.
CC-BY-NC-ND • PID_00150451 83 CSS
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;
CC-BY-NC-ND • PID_00150451 84 CSS
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.
CC-BY-NC-ND • PID_00150451 85 CSS
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);
}
CC-BY-NC-ND • PID_00150451 86 CSS
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
CC-BY-NC-ND • PID_00150451 87 CSS
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{
background-color: #FFFFCC;
background-image: url(alert.png);
background-repeat: no-repeat;
}
CC-BY-NC-ND • PID_00150451 88 CSS
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
CC-BY-NC-ND • PID_00150451 89 CSS
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-color: #FFFFCC;
background-image: url(alert.png);
background-repeat: no-repeat;
background-attachment: scroll;
}
CC-BY-NC-ND • PID_00150451 90 CSS
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-color: #FFFFCC;
background-image: url(alert.png);
background-repeat: no-repeat;
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:
CC-BY-NC-ND • PID_00150451 91 CSS
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
CC-BY-NC-ND • PID_00150451 92 CSS
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.
CC-BY-NC-ND • PID_00150451 93 CSS
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-
CC-BY-NC-ND • PID_00150451 94 CSS
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
}
CC-BY-NC-ND • PID_00150451 95 CSS
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;
}
CC-BY-NC-ND • PID_00150451 96 CSS
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
Preguntes que hauríeu de poder respondre:
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 {
background-position: -30px 0;
}
#links span {
background-position: -45px 0;
}
CC-BY-NC-ND • PID_00150451 97 CSS
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?
Lectures complementàries
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/
CC-BY-NC-ND • PID_00150451 98 CSS
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”.
CC-BY-NC-ND • PID_00150451 99 CSS
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;
}
CC-BY-NC-ND • PID_00150451 100 CSS
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;
}
CC-BY-NC-ND • PID_00150451 101 CSS
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-
CC-BY-NC-ND • PID_00150451 102 CSS
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;
}
CC-BY-NC-ND • PID_00150451 103 CSS
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;
}
CC-BY-NC-ND • PID_00150451 104 CSS
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;
}
CC-BY-NC-ND • PID_00150451 105 CSS
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;
}
CC-BY-NC-ND • PID_00150451 106 CSS
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;
}
CC-BY-NC-ND • PID_00150451 107 CSS
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.
CC-BY-NC-ND • PID_00150451 108 CSS
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 {
list-style-type: none;
background: #fff url(“icon-rssfeed.gif”) 0 3px no-repeat;
padding: 0 0 5px 15px;
display:-moz-inline-box;
}
Notaa
Fixeu-vos que s’afegeix display:-moz-inline-box; perquè l’exem-
ple es pugui veure correctament amb el Firefox 2.
CC-BY-NC-ND • PID_00150451 109 CSS
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;
list-style-type: none;
background: #fff url(“icon-rssfeed.gif”) 0 3px no-repeat;
padding: 0 0 5px 15px;
display:-moz-inline-box;
}
<!--[if lte IE 7]>
<style type=“text/css”>
.rss li {
float: left;
}
CC-BY-NC-ND • PID_00150451 110 CSS
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
CC-BY-NC-ND • PID_00150451 111 CSS
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.
CC-BY-NC-ND • PID_00150451 112 CSS
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.
CC-BY-NC-ND • PID_00150451 113 CSS
• 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
CC-BY-NC-ND • PID_00150451 114 CSS
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
CC-BY-NC-ND • PID_00150451 115 CSS
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{}
CC-BY-NC-ND • PID_00150451 116 CSS
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 {
text-decoration: underline;
}
a {
text-decoration: none;
}
* http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines
a:focus{
outline: thick solid #000;
}
CC-BY-NC-ND • PID_00150451 117 CSS
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.
D’aquesta manera aconseguirem un resultat semblant al de la figura 24:
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 {
text-decoration: underline;
}
a:link{
color: #0000CC;
}
a:visited{
color: #6D006D;
}
a:focus{
color: #CC0000;
}
a:hover{
color: #CC0000;
}
a:active{
color: #CC0000;
font-style: italic;
}
CC-BY-NC-ND • PID_00150451 118 CSS
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 {
text-decoration: none;
}
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;
border-bottom: 1px solid #c00;
}
CC-BY-NC-ND • PID_00150451 119 CSS
D’aquesta manera aconseguirem un resultat semblant al de la figura 27:
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;
border-bottom: 1px solid #c00;
font-style: italic;
}
body{
background: #fff;
color: #000;
font-size: 2em;
}
a {
text-decoration: none;
}
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;
}
CC-BY-NC-ND • PID_00150451 120 CSS
D’aquesta manera aconseguirem un resultat semblant al de la figura 28:
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;
border-bottom: 1px solid #c00;
font-style: italic;
}
<a href=“http://example.com/” class=“external”>external link</a>
CC-BY-NC-ND • PID_00150451 121 CSS
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;
}
CC-BY-NC-ND • PID_00150451 122 CSS
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
Preguntes que hauríeu de poder respondre:
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
CC-BY-NC-ND • PID_00150451 123 CSS
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.
CC-BY-NC-ND • PID_00150451 124 CSS
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%;
}
CC-BY-NC-ND • PID_00150451 125 CSS
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;
}
CC-BY-NC-ND • PID_00150451 126 CSS
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%;
border: 1px solid #000;
}
CC-BY-NC-ND • PID_00150451 127 CSS
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;
vertical-align: top;
border: 1px solid #000;
}
table {
width: 100%;
border: 1px solid #000;
}
th, td {
width: 25%;
text-align: left;
vertical-align: top;
border: 1px solid #000;
border-spacing: 0;
}
CC-BY-NC-ND • PID_00150451 128 CSS
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%;
border: 1px solid #000;
}
th, td {
width: 25%;
text-align: left;
vertical-align: top;
border: 1px solid #000;
border-collapse: collapse;
}
* http://www.w3.org/TR/REC-CSS2/tables.html#border-conflict-
resolution
CC-BY-NC-ND • PID_00150451 129 CSS
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%;
border: 1px solid #000;
}
th, td {
width: 25%;
text-align: left;
vertical-align: top;
border: 1px solid #000;
border-collapse: collapse;
padding: 0.3em;
}
caption {
padding: 0.3em;
}
table {
width: 100%;
CC-BY-NC-ND • PID_00150451 130 CSS
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
border: 1px solid #000;
}
th, td {
width: 25%;
text-align: left;
vertical-align: top;
border: 1px solid #000;
border-collapse: collapse;
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
CC-BY-NC-ND • PID_00150451 131 CSS
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;
}
CC-BY-NC-ND • PID_00150451 132 CSS
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
CC-BY-NC-ND • PID_00150451 133 CSS
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”);
}
<!--[if lte IE 7]><link rel=“stylesheet” media=“screen” href=“ie-only.css” />
<![endif]-->
table {
border: 1px solid #000;
border-collapse: separate;
border-spacing: 5px;
background: #000 url(“gradient.gif”) bottom left repeat-x;
}
table {
border-collapse: expression(“separate”, cellSpacing = “5px”);
}
CC-BY-NC-ND • PID_00150451 134 CSS
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%;
border: 1px solid #000;
}
th, td {
width: 25%;
text-align: left;
vertical-align: top;
border: 1px solid #000;
border-collapse: collapse;
padding: 0.3em;
caption-side: bottom;
}
caption {
padding: 0.3em;
color: #fff;
background: #000;
}
th {
background: #eee;
}
CC-BY-NC-ND • PID_00150451 135 CSS
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;
}
CC-BY-NC-ND • PID_00150451 136 CSS
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%;
border: 1px solid #999;
text-align: left;
border-collapse: collapse;
margin: 0 0 1em 0;
caption-side: top;
}
CC-BY-NC-ND • PID_00150451 137 CSS
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;
border-collapse: collapse;
margin: 0 0 1em 0;
caption-side: top;
}
caption, td, th {
padding: 0.3em;
}
tbody {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
tbody th, tfoot th {
border: 0;
}
CC-BY-NC-ND • PID_00150451 138 CSS
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>
...
CC-BY-NC-ND • PID_00150451 139 CSS
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;
border-collapse: collapse;
margin: 0 0 1em 0;
caption-side: top;
}
caption, td, th {
padding: 0.3em;
}
th, td {
border-bottom: 1px solid #000;
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;
border-collapse: collapse;
margin: 0 0 1em 0;
caption-side: top;
}
caption, td, th {
padding: 0.3em;
}
CC-BY-NC-ND • PID_00150451 140 CSS
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-bottom: 1px solid #000;
border-right: 1px solid #000;
}
th:lastchild, td:lastchild {
border-right: 0;
}
th {
width: 25%;
}
CC-BY-NC-ND • PID_00150451 141 CSS
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-collapse: separate;
border-spacing: 0;
border: 1px solid #000;
}
th, td, caption {
border: 1px solid #000;
}
CC-BY-NC-ND • PID_00150451 142 CSS
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
Preguntes que hauríeu de poder respondre:
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?
Lectures complementàries
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/
CC-BY-NC-ND • PID_00150451 143 CSS
“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
CC-BY-NC-ND • PID_00150451 144 CSS
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.
CC-BY-NC-ND • PID_00150451 145 CSS
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” />
CC-BY-NC-ND • PID_00150451 146 CSS
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>
CC-BY-NC-ND • PID_00150451 147 CSS
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” />
CC-BY-NC-ND • PID_00150451 148 CSS
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>
CC-BY-NC-ND • PID_00150451 149 CSS
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>
CC-BY-NC-ND • PID_00150451 150 CSS
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;
}
CC-BY-NC-ND • PID_00150451 151 CSS
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.
8.3.3. Demostració 2
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
8.3.4. Demostració 2: consideracions prèvies
• 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;
list-style-type: none;
}
CC-BY-NC-ND • PID_00150451 152 CSS
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.
8.3.5. Demostració 3
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;
}
CC-BY-NC-ND • PID_00150451 153 CSS
8.3.6. Demostració 3: consideracions prèvies
• 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ó.
CC-BY-NC-ND • PID_00150451 154 CSS
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.
8.3.8. Demostració 4
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;
}
CC-BY-NC-ND • PID_00150451 155 CSS
Arxiu font de: “Alinear les dues columnes principals”http://dev.opera.com/articles/view/34-styling-forms/demo_form04.html
8.3.9. Demostració 4: consideracions prèvies
• 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;
}
CC-BY-NC-ND • PID_00150451 156 CSS
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
CC-BY-NC-ND • PID_00150451 157 CSS
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.
8.3.11. Demostració 5
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
8.3.12. Demostració 5: consideracions prèvies
• 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%; }
CC-BY-NC-ND • PID_00150451 158 CSS
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.
8.3.13. Demostració 6
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
8.3.14. Demostració 6: consideracions prèvies
• 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%;
}
CC-BY-NC-ND • PID_00150451 159 CSS
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.
8.3.15. Demostració 7
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
8.3.16. Demostració 7: consideracions prèvies
• 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; }
CC-BY-NC-ND • PID_00150451 160 CSS
8.3.17. Demostració 8
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
8.3.18. Demostració 8: consideracions prèvies
• 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.
8.3.19. Demostració 9
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;
CC-BY-NC-ND • PID_00150451 161 CSS
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
8.3.20. Demostració 9: consideracions prèvies
• 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.
8.3.21. Demostració 10
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;
CC-BY-NC-ND • PID_00150451 162 CSS
Arxiu font de: “Alinear els controls radio i les seves etiquetes horitzontalment”http://dev.opera.com/articles/view/34-styling-forms/demo_form10.html
8.3.22. Demostració 10: consideracions prèvies
• 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”).
8.3.23. Demostració 11
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;
line-height: normal;
}
#acctTypeField .rInput { margin-top: .167em; }
#availabilityField label {
height: 3.143em;
padding-top: .286em;
line-height: normal;
}
CC-BY-NC-ND • PID_00150451 163 CSS
Arxiu font de: “Retocar els últims detalls a diversos controls”http://dev.opera.com/articles/view/34-styling-forms/demo_form11.html
8.3.24. Demostració 11: consideracions prèvies
• 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.
8.3.25. Demostració 12
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;
}
CC-BY-NC-ND • PID_00150451 164 CSS
Arxiu font de: “Pàgina completa”http://dev.opera.com/articles/view/34-styling-forms/demo_form_complete.html
8.3.26. Demostració 12: consideracions prèvies
• 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; }
CC-BY-NC-ND • PID_00150451 165 CSS
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.
CC-BY-NC-ND • PID_00150451 166 CSS
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-
CC-BY-NC-ND • PID_00150451 167 CSS
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
Preguntes que hauríeu de poder respondre:
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ó.
CC-BY-NC-ND • PID_00150451 168 CSS
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.
Lectures complementàries
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.]
http://www.w3.org/TR/2007/CR-CSS21-20070719
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.
http://www.webstyleguide.com/
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
CC-BY-NC-ND • PID_00150451 169 CSS
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/
CC-BY-NC-ND • PID_00150451 170 CSS
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
CC-BY-NC-ND • PID_00150451 171 CSS
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>
CC-BY-NC-ND • PID_00150451 172 CSS
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>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<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.
CC-BY-NC-ND • PID_00150451 173 CSS
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”>
CC-BY-NC-ND • PID_00150451 174 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;
background-color: #cfc;
color: #030;
padding: 1em;
}
p {
border: 1px solid #f00;
}
p {
border: 1px solid #f00;
padding: 1em;
background-color: #ff9;
}
CC-BY-NC-ND • PID_00150451 175 CSS
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;
background-color: #cfc;
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;
}
CC-BY-NC-ND • PID_00150451 176 CSS
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%;
}
CC-BY-NC-ND • PID_00150451 177 CSS
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;
background-color: #ccf;
CC-BY-NC-ND • PID_00150451 178 CSS
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;
background-color: #fcc;
color: #300;
padding:2em 1em;
margin-top: 2em;
margin-bottom: 2em;
}
#span-c {
float: left;
background-color: #fcc;
color: #300;
padding:2em 1em;
margin-top: 2em;
margin-bottom: 2em;
margin-left: -4em;
}
CC-BY-NC-ND • PID_00150451 179 CSS
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.
CC-BY-NC-ND • PID_00150451 180 CSS
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;
}
CC-BY-NC-ND • PID_00150451 181 CSS
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;
background-color: #ccf;
color: #003;
}
#p1 {
float: left;
}
CC-BY-NC-ND • PID_00150451 182 CSS
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;
}
CC-BY-NC-ND • PID_00150451 183 CSS
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>
<!--Això ens cal per a l’Internet Explorer-->
<div class=“clear”></div>
#menu {
margin: 0;
padding: 0.5em;
font-family: Verdana,sans-serif;
}
#menu li {
float: left;
list-style-type: none;
margin: 0 0 0 0.5em;
CC-BY-NC-ND • PID_00150451 184 CSS
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;
background-color: #600;
color: #ff9;
border: 2px solid #f00;
}
#menu a {
color: #ff9;
text-decoration: none;
}
.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;
CC-BY-NC-ND • PID_00150451 185 CSS
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
font-family: Verdana,sans-serif;
position: relative;
left: -50%;
}
body{
overflow: hidden;
}
* html #menu {
float: left;
}
* http://positioniseverything.net/
CC-BY-NC-ND • PID_00150451 186 CSS
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
Preguntes que hauríeu de poder respondre:
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?
CC-BY-NC-ND • PID_00150451 187 CSS
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
CC-BY-NC-ND • PID_00150451 188 CSS
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>
CC-BY-NC-ND • PID_00150451 189 CSS
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.
CC-BY-NC-ND • PID_00150451 190 CSS
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;
}
CC-BY-NC-ND • PID_00150451 191 CSS
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.
CC-BY-NC-ND • PID_00150451 192 CSS
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>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<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;
}
CC-BY-NC-ND • PID_00150451 193 CSS
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;
background-color: lime;
}
CC-BY-NC-ND • PID_00150451 194 CSS
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.
CC-BY-NC-ND • PID_00150451 195 CSS
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.
<!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>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>
CC-BY-NC-ND • PID_00150451 196 CSS
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 {
background-color: #369;
color: #fff;
}
#sidebar {
background-color: #ff6;
}
#nav {
background-color: #ddd;
}
#footer {
border-top: 1px solid #369;
}
<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>
CC-BY-NC-ND • PID_00150451 197 CSS
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;
background-color: #ff6;
}
#nav {
width: 11em;
padding: 0 0.5em;
background-color: #ddd;
}
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.
CC-BY-NC-ND • PID_00150451 198 CSS
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;
background-color: #ff6;
}
#nav {
float: left;
width: 11em;
padding: 0 0.5em;
background-color: #ddd;
}
#footer {
clear: left;
border-top: 1px solid #369;
}
CC-BY-NC-ND • PID_00150451 199 CSS
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%;
background-color: lime;
}
CC-BY-NC-ND • PID_00150451 200 CSS
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;
background-color: #ff6;
margin-left: -14em;
}
#sidebar {
float: left;
width: 13em;
padding: 0 0.5em;
background-color: #ff6;
margin-left: -14em;
position: relative;
left: 15em;
}
CC-BY-NC-ND • PID_00150451 201 CSS
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;
background-color: #ddd;
margin-left: -100%;
}
#nav {
float: left;
width: 11em;
padding: 0 0.5em;
background-color: #ddd;
margin-left: -100%;
position: relative;
right: 13em;
}
CC-BY-NC-ND • PID_00150451 202 CSS
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/
<!--[if lte IE 6]>
<link rel=“stylesheet” type=“text/css” href=“layout-ie6.css”>
<![endif]-->
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;
}
CC-BY-NC-ND • PID_00150451 203 CSS
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;
}
CC-BY-NC-ND • PID_00150451 204 CSS
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
Preguntes que hauríeu de poder respondre:
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).
CC-BY-NC-ND • PID_00150451 205 CSS
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.
CC-BY-NC-ND • PID_00150451 206 CSS
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
CC-BY-NC-ND • PID_00150451 207 CSS
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;
}
CC-BY-NC-ND • PID_00150451 208 CSS
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.
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<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;
border: 1px solid #f00;
}
#inner {
width: 6em;
height: 4em;
background-color: #999;
}
CC-BY-NC-ND • PID_00150451 209 CSS
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;
background-color: #999;
position: absolute;
}
#outer {
margin: 5em;
border: 1px solid #f00;
height: 4em;
}
CC-BY-NC-ND • PID_00150451 210 CSS
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;
background-color: #999;
position: absolute;
left: 1em;
}
#outer {
margin: 5em;
border: 1px solid #f00;
height: 4em;
position: relative;
}
CC-BY-NC-ND • PID_00150451 211 CSS
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%;
background-color: #999;
position: absolute;
left: 1em;
}
#outer {
margin: 5em;
border: 1px solid #f00;
height: 4em;
position: static;
}
CC-BY-NC-ND • PID_00150451 212 CSS
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.
CC-BY-NC-ND • PID_00150451 213 CSS
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>
CC-BY-NC-ND • PID_00150451 214 CSS
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;
border: 1px solid #f00;
height: 8em;
position: relative;
}
#inner {
width: 5em;
height: 5em;
background-color: #999;
position: absolute;
left: 1em;
}
#second {
width: 5em;
height: 5em;
background-color: #00f;
position: absolute;
top: 1em;
left: 2em;
}
#inner {
width: 5em;
height: 5em;
background-color: #999;
position: absolute;
left: 1em;
z-index: 1;
}
CC-BY-NC-ND • PID_00150451 215 CSS
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.
CC-BY-NC-ND • PID_00150451 216 CSS
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 {
background-color: #ff0;
}
#second span {
background-color: #0ff;
}
CC-BY-NC-ND • PID_00150451 217 CSS
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 {
background-color: #ff0;
z-index: 4;
}
CC-BY-NC-ND • PID_00150451 218 CSS
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;
}
CC-BY-NC-ND • PID_00150451 219 CSS
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;
background-color: #999;
position: fixed;
top: 1em;
left: 1em;
}
#second
width: 5em;
height: 150em;
background-color: #00f;
CC-BY-NC-ND • PID_00150451 220 CSS
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
Preguntes que hauríeu de poder respondre:
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;
}
CC-BY-NC-ND • PID_00150451 221 CSS
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.
CC-BY-NC-ND • PID_00150451 222 CSS
top related