Les CSS - Créer son site Web professionnel

Les CSS
1. L’état des lieux
Avant 1999, quand un designer de sites Web voulait effectuer la mise en forme et la mise en page de ses créations Web, il devait le faire dans le code HTML. C’est­à­dire qu’il fallait « mélanger » la description du contenu et la mise en forme, le tout dans un joyeux fatras ! Ceci ne facilitait pas les mises à jour des mises en forme et des mises en page. Avec l’HTML 4, en décembre 1996, sont apparues les CSS, les Cascading Style Sheets, ou feuilles de style en cascade dans la langue de Molière. Les feuilles de style ont pour objectif de séparer la description du contenu qui incombe à l’HTML, de la mise en forme et de la mise en page. Nous avons ainsi deux langages avec des rôles bien définis, bien distincts. Actuellement, ce sont les CSS 2.1 qui prévalent (recommandation officielle du W3C en juin 2011). Utiliser les CSS n’a que des avantages : ●
Séparation claire et nette du contenu, de la mise en forme et de la mise en page. ●
Beaucoup plus de possibilités de mise en forme. ●
Mises en page mieux structurées. ●
Création unique de styles pour la mise en forme et la mise en page. Donc risque d’erreur quasiment nul, puisqu’il n’y a pas de répétition de saisie. ●
Réutilisabilité des styles à volonté. ●
Mise à jour « instantanée » sur la totalité du site. Comme pour l’HTML, les CSS évoluent. Actuellement les CSS arrivent en version 3, avec de belles nouveautés pour les designers Web : zones d’affichage aux coins arrondis, ombres portées, des dégradés et de la transparence, utilisation de polices de caractères variées, des formulaires de saisie interactifs... De nouveau, cette nouvelle version 3 des CSS n’est pas encore en recommandation, elle est toujours en version de travail (Working Draft) et les navigateurs Web ne reconnaissent pas encore la totalité des spécifications. Mais les designers utilisent aujourd’hui certains éléments reconnus par tous les navigateurs. 2. Les sélecteurs
Pour effectuer une mise en forme et une mise en page en CSS (les concepteurs parlent de site « full CSS » pour les sites Web qui utilisent parfaitement les deux langages, HTML et CSS, dans leurs rôles dédiés), le designer doit indiquer sur quoi vont s’appliquer les styles CSS qu’il a créés. Pour indiquer sur quoi vont s’appliquer ses styles, le designer utilise des sélecteurs. Il existe beaucoup de types de sélecteurs ; voici, de manière non exhaustive, trois des sélecteurs les plus utilisés : ●
●
●
Le sélecteur de classe permet de créer un style et de l’appliquer sur les éléments HTML que le designer souhaite. Le sélecteur d’élément permet de créer un style et de l’appliquer uniquement sur les éléments HTML voulus. Le sélecteur d’identification permet de créer un style et de l’appliquer de manière unique sur un élément HTML spécifié. Ceci est surtout utilisé pour la mise en page. 3. La mise en forme
© ENI Editions - All rights reserved - boulet02 boulet02
- 1-
Les CSS permettent d’effectuer une mise en forme très élaborée par rapport à ce que nous pouvions faire en HTML. La mise en forme typographique est évoluée, avec l’utilisation de polices de caractères et d’unités variées. La mise en forme des images, des tableaux et des formulaires est fine et précise. 4. La mise en page
Les CSS exploitent toute leur « puissance » dans les fonctions de mise en page. Le designer va pouvoir définir des zones d’affichage positionnées de manière très précise à l’écran, pour ensuite y placer les contenus voulus. Voilà un exemple de structuration en zones d’affichage pour la page d’accueil du site du journal Le Monde. Avec les CSS, vous pouvez créer des barres de navigation évoluées, des éléments interactifs pour afficher du contenu (système d’onglets, d’accordéon, des galeries photos...). Exemple de la barre de navigation du site du journal Le Monde, non déployée : Exemple de la barre de navigation du site du journal Le Monde, déployée : - 2-
© ENI Editions - All rights reserved - boulet02 boulet02
Exemple de système avec deux onglets sur le site d’Apple : Exemple d’un système d’accordéon sur le site de Canon : © ENI Editions - All rights reserved - boulet02 boulet02
- 3-
- 4-
© ENI Editions - All rights reserved - boulet02 boulet02
© ENI Editions - All rights reserved - boulet02 boulet02
- 5-