base-syntax

Les bases de la syntaxe CSS (tutoriel)

Composition d'une règle CSS.

Une feuille de styles CSS n'est rien d'autre qu'un ensemble de règles définissant chacune une caractéristique de la mise en forme. Par exemple, la règle suivante signifie que les titres h1 sont en caractères de taille 24 points et de couleur rouge.

Une règle est composée de:

• Un sélecteur.

  Le sélecteur désigne les éléments auxquels on souhaite attribuer la mise en forme. Cela peut être comme ici une balise HTML, mais des sélecteurs beaucoup plus sophistiqués sont disponibles. Quand vous aurez terminé cette lecture, reportez vous à la liste des selectors.

  Tout ce qui se rapporte à un sélecteur est groupé entre accolades.

• Une ou plusieurs propriétés.

  font-size et color sont ce qu'on appelle des propriétés. Le nom des propriétés CSS laisse en général facilement deviner quel va être leur effet. CSS comporte de très nombreuses propriétés, ce qui fait sa richesse et laisse espérer des possibilités de mise en forme très étendues.

  Les propriétés sont séparées entre elles par un point virgule indispensable ( ; ). Il est recommandé, bien que ce ne soit pas obligatoire d'aller à la ligne après chaque propriété afin d'améliorer la lisibilité de la feuille de styles.

• Des valeurs.

  Chaque propriété est suivie par une ou plusieurs valeurs. Un caractère deux points ( : ) sépare le nom de la propriété de sa valeur.

  Certaines valeurs sont des nombres mais CSS reconnait de nombreuses valeurs prédéfinies, comme sur notre exemple, le nom de la couleur. Les propriétés d'alignement reconnaissent les valeurs left, center ou right. Et il y a beaucoup d'autres valeurs prédéfinies que vous découvrirez au fur et à mesure de votre apprentissage des CSS.

• Des unités.

  Les valeurs, lorsqu'il s'agit de nombres, sont la plupart du temps suivies par une unité. Sur notre exemple pt veut dire "point". L'unité est obligatoire, même si certains navigateurs se débrouillent sans, il y a toujours un risque qu'ils interprètent mal la valeur. Il n'y a que dans le cas où la valeur est zéro qu'on peut se permettre de ne pas préciser l'unité. De toute façon, 0cm (0 centimètres) est identique à 0in (0 pouces).

  Il ne faut pas laisser d'espace entre la valeur et son unité.

  Quand vous aurez terminé cette lecture, vous pourrez consulter la liste des unités CSS. Vous verrez que CSS reconnait bien sûr des unités de dimension, nécessaires pour fixer la taille des éléments ou des marges, mais aussi, ce qui peut surprendre, des unités de temps et de fréquence.

 

Précisons également que CSS n'est pas sensible à la casse mais l'habitude a été prise d'écrire les CSS en lettres minuscules. Les noms de propriétés ou les valeurs sont parfois des mots composés ; un tiret est généralement utilisé. Exemple font-size.

Soignez la présentation de vos CSS avec des sauts de ligne et, comme dans tout langage informatique, en gérant l'indentation (marges à gauche pour faire ressortir la logique). Le code ci-dessous :

body { font-family:"Arial" sans-serif; font-size:12pt; color:red; }

Est quand même plus lisible que :

body {font-family:"Arial" sans-serif;font-size:12pt;color:red;}

Les propriétés raccourcies.

Afin de faciliter l'écriture des styles, CSS reconnait de nombreuses propriétés raccourcies, c'est à dire des propriétés qui permettent de définir plusieurs valeurs en une seule fois, ce qui aurait nécessité normalement l'écriture de plusieurs propriétés.

Par exemple la propriété margin est un raccourci pour définir en une seule fois les quatre marges. Les deux écritures ci-dessous sont équivalentes.

margin:15px 0px 10px 0px;

margin-top:15px; margin-right:0px; margin-bottom:10px; margin-left:0px;

De même la propriété border est un raccourci qui permet de définir en une seule fois le type de bordure, son épaisseur et sa couleur.

border:double 3px lightgreen;

border-style:double; border-width:3px; border-color:lightgreen;

Attention ! Les propriétés raccourcies définissent toutes les valeurs prévues, même si certaines ne sont pas précisées. Ces dernières sont alors remises à leur valeur par défaut. Par exemple border:double; va fixer le style de bordure à double mais également l'épaisseur à medium qui est la valeur par défaut, et remettre la couleur de la bordure identique à celle du texte (ce qui est par défaut également).

Conclusion : si vous utilisez une propriété raccourcie, autant définir toutes les valeurs pour laquelle elle est prévue.

Les valeurs d'une propriété raccourcie sont séparées par des espaces.

CSS utilise toujours le même ordre pour énumérer les valeurs correspondant aux quatre cotés : on part du haut et on tourne dans le sens des aiguilles d'une montre : haut, droite, bas, gauche. Voir plus haut l'exemple avec margin.

Les commentaires.

Les commentaires sont ignorés par les programmes ; ils sont destinés aux humains qui peuvent avoir à déchiffrer la feuille de styles. Il peut s'agir d'explications sur des astuces utilisées, ou de simples petits aide-mémoire. On peut aussi utiliser les commentaires pour désactiver provisoirement une ou quelques règles, en général pour effectuer des tests.

Il est possible d'insérer des commentaires dans la définition des styles en les entourant de /* et */

/* mise en forme du bandeau */ .panel { ... }

Les valeurs de type url.

Certaines valeurs sont des url vers un image ou un autre fichier. CSS adopte alors une syntaxe du type fonction(). Par exemple, pour définir l'image à afficher en arrière-plan :

background-image:url('../images/fond.png');

Il peut s'agir d'une url absolue (qui commence par http://) ou d'une url relative. Dans ce dernier cas, le chemin est relatif à l'emplacement de la feuille de styles (et non pas des pages HTML qui utilisent ces styles).