Cette page aborde le style et la grammaire du langage CSS lui-même.
Vous modifierez l'aspect de votre fichier CSS pour le rendre plus lisible.
Information : des CSS lisibles
Vous pouvez ajouter des blancs et des commentaires à vos feuilles de style pour les rendre plus lisibles. Vous pouvez également grouper des sélecteurs ensemble, lorsque les même règles s'appliquent à des éléments sélectionnés de manière différente.
Insertion de blancs
Les feuilles de style peuvent être aérées à l'aide d'espaces, de tabulations et de retours à la ligne. Elles deviendront ainsi plus lisibles.
Votre fichier CSS d'exemple a actuellement une règle par ligne, et à peu près le minimum possible d'espaces blancs. Dans une feuille de style complexe, ce type de mise en page devient rapidement difficile à lire, et rend la feuille difficile à maintenir.
La mise en page à utiliser est généralement une question de préférence personnelle, mais si vos feuilles de style font partie de projets partagés, ceux-ci peuvent avoir leurs propres conventions.
Certaines personnes aiment la mise en page compacte que nous avons utilisée jusqu'à présent, ne coupant une ligne que lorsqu'elle devient très longue :
.carotte {color: orange; text-decoration: underline; font-style: italic;}
D'autres préfèrent un couple propriété-valeur par ligne :
.carotte
{
color: orange;
text-decoration: underline;
font-style: italic;
}
Certains utilisent une indentation — deux espaces, quatre espaces, ou encore une tabulation :
.carotte {
color: orange;
text-decoration: underline;
font-style: italic;
}
D'autres apprécient que tout soit aligné verticalement (mais ce type de mise en page est difficile à maintenir) :
.carotte
{
color : orange;
text-decoration : underline;
font-style : italic;
}
Par ailleurs, si certains utilisent des tabulations, d'autres utiliseront uniquement des espaces. |
Commentaires
Les commentaires en CSS commencent avec /* et se terminent par */.
Vous pouvez utiliser les commentaires pour ajouter vos remarques dans la feuille de style, mais aussi pour mettre en commentaire temporairement certaines parties à des fins de tests.
Pour mettre en commentaire une partie de feuille de style, placez les marques de commentaire de part et d'autre de celle-ci afin que le navigateur l'ignore. Veillez à commencer et à terminer le commentaire à des endroits appropriés, le reste de la feuille de style doit conserver une syntaxe correcte.
/* style pour la lettre C initiale dans le premier paragraphe */
.carotte {
color: orange;
text-decoration: underline;
font-style: italic;
}
|
Sélecteurs groupés
Lorsque beaucoup d'éléments ont le même style, vous pouvez spécifier un groupe de sélecteurs en les séparant par des virgules. La déclaration s'applique à chacun des éléments sélectionnés.
Ailleurs dans votre feuille de style, vous pouvez spécifier à nouveau les mêmes sélecteurs individuellement, pour leur appliquer des règles de style uniques.
| Cette règle rend les éléments H1, H2 et H3 de la même couleur.
Il est pratique de spécifier la couleur en un seul endroit, au cas où celle-ci doit être changée par la suite.
/* couleur pour les titres */
h1, h2, h3 {color: navy;}
|
Action : ajout de commentaires et amélioration de la mise en page
Éditez votre fichier CSS, et assurez-vous qu'il comporte les règles suivantes (dans n'importe quel ordre) :
strong {color: red;}
.carotte {color: orange;}
.epinard {color: green;}
#premier {font-style: italic;}
p {color: blue;}
Rendez-le plus lisible en le réarrangeant d'une manière que vous trouvez logique, et en ajoutant des blancs et des commentaires où vous les trouvez appropriés.
Enregistrez le fichier et actualisez l'affichage de votre navigateur pour vérifier que vos changements n'ont pas affecté le fonctionnement de la feuille de style :
| Cascading Style Sheets |
| Cascading Style Sheets |
Mettez en commentaire une partie de votre feuille de style, sans rien changer d'autre, afin de rendre la toute première lettre de votre document rouge :
(Il existe plusieurs manières de faire.) |
Pour continuer
Votre feuille de style d'exemple mettait du texte en italique et souligné. La page suivante détaillera d'autres manières de spécifier l'apparence du texte dans votre document : Styles de texte