Les bordures, arrière-plans et images
CHAPITRE 6
91
Le meilleur exemple de ce principe reste le célébrissime « Zen Garden »
(http://www.csszengarden.com), qui propose en un clic de choisir parmi des centaines
d’habillages différents tout en conservant exactement la même structure, c’est-à-dire
le même document HTML. Ce type de prouesses est possible en CSS, en appliquant
différentes images de la charte graphique en arrière-plan des éléments.
Ne versons pas pour autant dans l’excès inverse : les styles CSS doivent définir uniquement la présentation du document, sans se préoccuper des éléments de contenu.
Toutes les images ne relèvent pas de la présentation et de la mise en page : certaines
sont essentielles à la navigation ou à la compréhension du document.
Ainsi, les photographies d’un organigramme, partie intégrante du contenu de la
page, sortent du cadre de CSS. Il en va de même pour un menu graphique dépourvu
de solution de remplacement en mode texte (pour des raisons d’accessibilité, on
prendra garde de fournir de telles alternatives aussi souvent que possible).
Afficher une couleur de fond
Tous les éléments HTML peuvent bénéficier d’une couleur de fond, notion abordée
dans le chapitre 5, traitant de typographie et mise en place par la propriété backgroundcolor. Sa valeur n’est pas héritée mais les fonds étant par défaut « transparents », les éléments imbriqués apparaîtront de la même couleur que leur parent.
On précisera les couleurs comme pour la propriété border-color : toutes les notations introduites dans le chapitre 4 sont autorisées. Par exemple :
Insérer une image d’arrière-plan
La propriété background-image associe une image de fond à l’élément sur lequel elle
porte. Pour mettre en place une image d’arrière-plan valable pour tout le document,
on la placera sous la balise .
À RETENIR Bonnes habitudes de travail
Pour être sûr de ne pas exagérer l’emploi des styles dans votre présentation, visualisez vos pages web en
désactivant CSS (ce que permettent les navigateurs modernes comme Firefox de Mozilla). Vous garantirez ainsi une structure bien conçue où chaque visiteur pourra aisément naviguer.
Cette habitude est un principe de développement général, à suivre dès le début d’une conception web.
La structure du fichier HTML sera propre et fonctionnelle sans styles, scripts ni mise en page particulière :
un document web doit toujours être consultable sans mise en forme (CSS), scripts ou plug-ins.
N’hésitez pas à employer un lecteur en mode texte pour varier encore les conditions d’observation de
votre site, et garantir sa bonne interopérabilité.
div#global {background-color: #ffc0c0;}
CHAPITRE 6
91
Le meilleur exemple de ce principe reste le célébrissime « Zen Garden »
(http://www.csszengarden.com), qui propose en un clic de choisir parmi des centaines
d’habillages différents tout en conservant exactement la même structure, c’est-à-dire
le même document HTML. Ce type de prouesses est possible en CSS, en appliquant
différentes images de la charte graphique en arrière-plan des éléments.
Ne versons pas pour autant dans l’excès inverse : les styles CSS doivent définir uniquement la présentation du document, sans se préoccuper des éléments de contenu.
Toutes les images ne relèvent pas de la présentation et de la mise en page : certaines
sont essentielles à la navigation ou à la compréhension du document.
Ainsi, les photographies d’un organigramme, partie intégrante du contenu de la
page, sortent du cadre de CSS. Il en va de même pour un menu graphique dépourvu
de solution de remplacement en mode texte (pour des raisons d’accessibilité, on
prendra garde de fournir de telles alternatives aussi souvent que possible).
Afficher une couleur de fond
Tous les éléments HTML peuvent bénéficier d’une couleur de fond, notion abordée
dans le chapitre 5, traitant de typographie et mise en place par la propriété backgroundcolor. Sa valeur n’est pas héritée mais les fonds étant par défaut « transparents », les éléments imbriqués apparaîtront de la même couleur que leur parent.
On précisera les couleurs comme pour la propriété border-color : toutes les notations introduites dans le chapitre 4 sont autorisées. Par exemple :
Insérer une image d’arrière-plan
La propriété background-image associe une image de fond à l’élément sur lequel elle
porte. Pour mettre en place une image d’arrière-plan valable pour tout le document,
on la placera sous la balise .
À RETENIR Bonnes habitudes de travail
Pour être sûr de ne pas exagérer l’emploi des styles dans votre présentation, visualisez vos pages web en
désactivant CSS (ce que permettent les navigateurs modernes comme Firefox de Mozilla). Vous garantirez ainsi une structure bien conçue où chaque visiteur pourra aisément naviguer.
Cette habitude est un principe de développement général, à suivre dès le début d’une conception web.
La structure du fichier HTML sera propre et fonctionnelle sans styles, scripts ni mise en page particulière :
un document web doit toujours être consultable sans mise en forme (CSS), scripts ou plug-ins.
N’hésitez pas à employer un lecteur en mode texte pour varier encore les conditions d’observation de
votre site, et garantir sa bonne interopérabilité.
div#global {background-color: #ffc0c0;}