Blog ENI : Toute la veille numérique !
💥 Un livre PAPIER acheté
= La version EN LIGNE offerte pendant 1 an !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. HTML5 et CSS 3
  3. Les styles pour les conteneurs de texte
Extrait - HTML5 et CSS 3 Maîtrisez les standards de la création de sites web (3e édition)
Extraits du livre
HTML5 et CSS 3 Maîtrisez les standards de la création de sites web (3e édition)
1 avis
Revenir à la page d'achat du livre

Les styles pour les conteneurs de texte

Les titres, les paragraphes et les citations

Rappelons que les conteneurs pour les titres sont les éléments allant de <h1> à <h6>. L’élément <p> permet d’afficher des paragraphes et <blockquote> des citations.

Pour tous ces éléments, nous pouvons appliquer des propriétés CSS pour le texte que nous avons vues dans le chapitre précédent. Pour ces conteneurs, il n’y a pas de propriété qui leur soit spécialement dédiée, contrairement aux listes, aux tableaux et aux formulaires, comme nous allons le voir dans les titres suivants.

Les listes

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 :

  • disc : puce noire et pleine, c’est la valeur par défaut.

  • circle : puce creuse, blanche en son centre.

  • square : carré noir et plein.

Pour les listes numérotées...

Les tableaux

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.

Notez que les propriétés CSS applicables aux tableaux que nous allons étudier faisait déjà partie des CSS 2.1.

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> 
 ...

Les formulaires

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...