Les styles pour les conteneurs de texte

1. Les éléments des listes et les styles

Rappelons que les listes à puces s’insèrent avec l’élément <ul> et les listes numérotées avec <ol>. Chaque item de ces deux listes s’ajoute avec un élément <li>. Les listes de définitions s’utilisent avec les éléments <dl>, <dt> et <dd>. Pour tous ces éléments, vous pouvez parfaitement leur appliquer les styles CSS pour le texte que nous avons étudiés dans le chapitre précédent.

Notez que le W3C propose des modules dédiés à la mise en forme des listes. Nous avons Lists and Counters Module Level 3 (https://www.w3.org/TR/css-lists-3/) qui est en Working Draft au 17 novembre 2020. Ce module est classé dans la catégorie Refining, ce qui veut dire qu’il n’est pas encore utilisable actuellement. Le module Counter Styles Level 3 est en Candidate Recommendation Snapshot au 27 juillet 2021 : https://www.w3.org/TR/css-counter-styles-3/

Il est donc un peu mieux reconnu par les navigateurs. Ce module permet de générer des compteurs de liste personnalisés.

2. Les styles d’énumération

Le symbole d’énumération placé devant chaque item d’une liste numérotée ou à puces peut être choisi avec la propriété list-style-type. Notez bien que cette propriété faisait déjà partie des CSS 2.1 (https://www.w3.org/TR/CSS2/generate.html#propdef-list-style-type).

Pour les listes à puces, vous pouvez utiliser ces valeurs :

Pour les listes numérotées...

1. Le texte dans les tableaux

Toutes les propriétés CSS que nous avons vues pour le texte sont bien sûr applicables aux contenus textuels des cellules des tableaux.

2. La bordure du tableau

Nous allons pouvoir appliquer des bordures aux tableaux et aux cellules des tableaux. Nous allons commencer par ajouter une bordure au tableau. Cette bordure va se placer uniquement sur le pourtour du tableau.

Voici le code HTML du tableau qui sera utilisé :

<table id="resultats"> 
   <tr> 
       <th>Janvier</th> 
       <th>Février</th> 
       <th>Mars</th> 
   </tr> 
   <tr> 
       <td>123</td> 
       <td>134</td> 
       <td>156</td> 
   </tr> 
   <tr> 
       <td>213</td> 
       <td>256</td> 
       <td>273</td> 
   </tr> 
   <tr> 
       <td>321</td> 
 ...

1. La mise en forme du texte des champs

Tous les éléments textuels HTML qui interviennent dans les formulaires peuvent utiliser les propriétés CSS dédiées au texte que nous avons vu précédemment.

De même, tous les champs peuvent utiliser les propriétés des boîtes que nous allons voir dans le prochain chapitre : bordure, arrière-plan, remplissage...

2. Les états actif et inactif des objets

Nous avons étudié précédemment les pseudo-classes :enabled, :disabled et :checked. Nous allons pouvoir les utiliser dans des règles CSS pour mettre en forme des objets de formulaires, en fonction de leur état.

Voici le formulaire utilisé :

<form id="formulaire" method="#" action="#"> 
   <p> 
       <label for="nom">Votre nom : </label> 
       <input type="text" id="nom"> 
   </p> 
   <p> 
       <label for="age">Votre âge : </label> 
       <input type="text" id="age" disabled> 
   </p> 
   <p> 
       <input type="radio" name="sexe" id="homme" value="homme"> 
       <label for="homme">Homme</label> 
       <br> 
       <input type="radio" name="sexe" id="femme" value="femme"> 
       <label for="homme">Femme</label> 
   </p> 
   <p> 
       <input type="checkbox" id="accord" /> 
       <label for="accord">Je suis...