Secció 3: Propietats
2. Propietats relacionades amb el color i el fons (background)
2.7. background (shortcut property)
Com veurem al llarg d'aquesta secció, existeix un grapat de propietats anomenades shortcut properties, que en català es traduiria com a 'propietat abreujadora', que serveixen senzillament per assignar valors a un grup de propietats individuals en una sola declaració. Per tant no cal aprendre cap concepte nou, únicament quina és la sintaxi adequada.
La shortcut property background permet assignar totes les propietats relacionades amb el fons al mateix temps (background-color, background-image, background-repeat, background-postition i background-attachment). La sintaxi per background és la següent:
background: color image repeat position attachment
Podem especificar d'un a cinc valors en qualsevol ordre, sempre separats per espais. Pensa que el valor per la posició pot tenir dues paraules (posicions horitzontal i vertical), així que podem trobar fins a sis paraules en una sola propietat background.
Cal tenir en compte que les shortcut properties reinicialitzen les propietats a les que no haguem assignat un valor explícit (per exemple, si omitim la part 'background position' de la propietat background, pendrà el seu valor per defecte: 0% 0%). Entrarem en detall en aquesta qüestió una mica més endavant, quan estudiem la propietat font.
Recorda que és recomanable especificar un valor per al color del fons per si no es pot visualitzar la imatge, i que el color del text, que haurem d'establir amb la propietat color, ha de diferenciar-se suficientment del fons.
BODY {
background: url("fons0.gif") black repeat-y fixed;
color: white; }
.f1 { background: url('fons1.gif') yellow no-repeat center; }
.f2 { background: blue repeat-x url("fons2.gif") fixed 50% top; }
.f3 { background: url(fons3.gif); }
La tercera sentència és incorrecta, ja que barreja un percentatge amb una paraula clau per a la propietat bakcground-postition.
Recordaves que les adreces es poden escriure amb o sense cometes? :)
Pregunta
D'acord amb l'style sheet de l'exemple anterior, i suposant que totes les imatges són més o menys fosques:
- Quin valor per background-attachment té la sentència 'f1'?
- Quin defecte té la sentència 'f1'?
- Quin valor per background-color té la sentència 'f3'? I per background-attachment?
- Reescriu el valor de background-position amb dos valors de percentatge per a les sentències 'f1' i 'f3'.
2) És perfectament correcta, però el color de fons 'yellow' és perillós, ja que es pot confondre amb el color del text. Aquest no està especificat per 'f1' però sí s'hereta, concretament el valor 'white' del selector BODY.
3) El color de fons no s'hereta i pren, per tant, el valor per defecte, transparent. A través d'ell veurem la imatge (o el color de fons, si aquesta no està disponible) que hi hagi a sota, probablement la de l'element BODY. El mateix passa amb background-attachment, que pren també el valor per defecte, scroll.
4) Per 'f1': 50% 50% (la imatge queda perfectament centrada).
Per 'f3': 0% 0% (la imatge es situa a la cantonada superior esquerra).
3. Propietats relacionades amb el text: font-family
