« Introduction au webdesign/CSS » : différence entre les versions
Nouvelle page : {{Chapitre |titre=Les CSS |idfaculté=infographie |leçon=Introduction au Webdesign |numero=5 |précédent=[[Introduction au Webdesign/Modèle de Boîtes|Le Modèle de Boît... |
(Aucune différence)
|
Version du 23 juillet 2007 à 16:15
Préambule
Les CSS ou "feuilles de style" sont utilisées pour permettre de "styler", "d'habiller" les pages web.
Contrairement au "Modèle de Boîtes" abordé au chapitre précédent, les éléments (X)HTML ne sont utilisés que pour structurer les informations d'une manière "logique".
A quoi servent les CSS ?
Chaque élément (X)HTML peut se retrouver affublé de divers attributs suivant l'élément qui le contient, l'élément qui le précède, son "id", son "name", ses "classes" et même ses autres attributs ou son contenu... et (presque) tout est possible, on peut "styler" :
- la police (de caractères)
- la bordure
- le fond
- la position
- l'empilement
- la visibilité
- le comportement (lorsqu'on passe la souris dessus, lorsqu'on la bouge...)
- la voix (pour les navigateurs vocaux ou les lecteurs d'écrans pour non-voyants)
- le contenu
et ce, selon que la page est affichée :
- sur l'écran d'un ordinateur
- par une imprimante (lorsqu'on imprime la page)
- par un navigateur vocal ou lecteur d'écran
- sur un "handled Device" (un PDA, Téléphone... ou tout matériel à petit écran)
- ...
Applications
Les css, outre le fait de permettre simplement de styler des pages web, permettent des les habiller différemment sans devoir toucher au contenu des pages. Ainsi, en séparent le contenu de la forme on parvient à une maintenance plus aisée, et on obtient quelque chose de plus joli, accessible et clair.
Les CSS permettent aussi de mieux cloisonner les métiers : le développeur développe, le webdesigner habille.
Enfin les CSS permettent de changer d'habillage comme on le souhaite : simplement pour faire joli, ou pour permettre à des mal voyants de mieux lire, en leur permettant de choisir un thème graphique plus contrasté, avec un texte plus gros, avec moins d'images...
Exemples
L'exemple le plus complet permettant de montrer toute la puissance et les applications des CSS est le CSS Zen Garden (suivez ce lien pour la version française) qui permet de voir la même page web mais stylée différemment par des centaines de designers du monde entier.