Styler les listes avec des attributs CSS

Introduction

Dans ce laboratoire, les étudiants exploreront l'art de styliser les listes à l'aide de CSS, en se concentrant sur la transformation de l'apparence par défaut des listes ordonnées, non ordonnées et de description. Les participants apprendront à personnaliser les marqueurs de liste grâce à diverses propriétés CSS telles que list-style-type, list-style-image et list-style-position, leur permettant de créer des designs de liste attrayants et uniques.

Le laboratoire guide les apprenants dans un processus étape par étape de création d'un projet HTML avec différents types de listes puis d'application de techniques CSS pour modifier les styles de liste. À la fin du laboratoire, les étudiants auront une expérience pratique dans le changement de types de marqueurs de liste, le remplacement des marqueurs par défaut avec des images personnalisées, l'ajustement du placement des marqueurs et l'utilisation de la propriété raccourcie list-style pour styliser efficacement les listes.

Configurer le projet HTML et créer une liste de base

Dans cette étape, vous allez configurer un projet HTML de base et créer votre première liste pour préparer l'exploration du style de liste CSS. Nous commencerons par créer une structure de projet simple et un fichier HTML avec différents types de listes.

Tout d'abord, accédez au répertoire du projet :

cd ~/projet

Créez un nouveau répertoire pour votre projet de style de liste CSS :

mkdir css-list-styling
cd css-list-styling

Maintenant, créez un fichier HTML nommé index.html à l'aide de l'IDE Web :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
  </head>
  <body>
    <h1>Mes langages de programmation préférés</h1>

    <h2>Liste ordonnée (numérotée)</h2>
    <ol>
      <li>Python</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>C++</li>
    </ol>

    <h2>Liste non ordonnée (à puces)</h2>
    <ul>
      <li>Développement web</li>
      <li>Science des données</li>
      <li>Apprentissage automatique</li>
      <li>Applications mobiles</li>
    </ul>

    <h2>Liste de description</h2>
    <dl>
      <dt>HTML</dt>
      <dd>Hypertext Markup Language pour la structure web</dd>
      <dt>CSS</dt>
      <dd>Feuilles de style en cascade pour la conception web</dd>
    </dl>
  </body>
</html>

Ce fichier HTML montre trois types de listes :

Liste ordonnée (<ol>) : Numérotée automatiquement
Liste non ordonnée (<ul>) : Utilise les points de suspension par défaut
Liste de description (<dl>) : Utilisée pour les paires terme - description

Exemple de sortie lorsqu'elle est affichée dans un navigateur :

La liste ordonnée affichera des numéros (1, 2, 3, 4)
La liste non ordonnée affichera des points de suspension
La liste de description affichera les termes et les descriptions

Appliquer list-style-type pour changer le marqueur de liste

Dans cette étape, vous allez apprendre à utiliser la propriété CSS list-style-type pour personnaliser l'apparence des marqueurs de liste. La propriété list-style-type vous permet de changer les points de suspension ou les numéros par défaut en différents styles prédéfinis.

Ouvrez le fichier index.html dans l'IDE Web et ajoutez une section <style> dans la balise <head> pour définir les règles CSS :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
    <style>
      /* Styles de liste non ordonnée */
      .square-list {
        list-style-type: square;
      }

      .circle-list {
        list-style-type: circle;
      }

      .disc-list {
        list-style-type: disc;
      }

      /* Styles de liste ordonnée */
      .decimal-list {
        list-style-type: decimal;
      }

      .lower-alpha-list {
        list-style-type: lower-alpha;
      }

      .upper-roman-list {
        list-style-type: upper-roman;
      }
    </style>
  </head>
  <body>
    <h1>Exemples de types de style de liste</h1>

    <h2>Styles de liste non ordonnée</h2>
    <ul class="square-list">
      <li>Marqueurs carrés</li>
      <li>Développement web</li>
      <li>Techniques de conception</li>
    </ul>

    <ul class="circle-list">
      <li>Marqueurs en cercle</li>
      <li>Programmation</li>
      <li>Génie logiciel</li>
    </ul>

    <h2>Styles de liste ordonnée</h2>
    <ol class="decimal-list">
      <li>Chiffres décimaux</li>
      <li>Numérotation standard</li>
      <li>Style par défaut</li>
    </ol>

    <ol class="lower-alpha-list">
      <li>Lettres minuscules</li>
      <li>Ordre alphabétique</li>
      <li>Style a, b, c</li>
    </ol>

    <ol class="upper-roman-list">
      <li>Romains majuscules</li>
      <li>Numérotation classique</li>
      <li>Style I, II, III</li>
    </ol>
  </body>
</html>

Valeurs clés de list-style-type :

Listes non ordonnées : disc (par défaut), circle, square
Listes ordonnées : decimal, lower-alpha, upper-roman, etc.

Exemple de sortie dans un navigateur :

Marqueurs carrés pour la première liste non ordonnée
Marqueurs en cercle pour la deuxième liste non ordonnée
Chiffres décimaux pour la première liste ordonnée
Lettres minuscules pour la deuxième liste ordonnée
Romains majuscules pour la troisième liste ordonnée

Utiliser list-style-image pour remplacer les marqueurs par défaut

Dans cette étape, vous allez apprendre à utiliser list-style-image pour remplacer les marqueurs de liste par défaut avec des images personnalisées. Tout d'abord, vous devrez télécharger quelques icônes d'exemple pour les utiliser comme marqueurs de liste.

Créez un répertoire images dans votre projet :

cd ~/projet/css-list-styling
mkdir images

Téléchargez des icônes d'exemple à l'aide de curl :

curl -o images/check-icon.png https://labex.io/cours/icones/check-icon.png
curl -o images/star-icon.png https://labex.io/cours/icones/star-icon.png

Maintenant, mettez à jour votre fichier index.html pour inclure des images de marqueurs de liste personnalisées :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling with Images</title>
    <style>
      .check-list {
        list-style-image: url("images/check-icon.png");
      }

      .star-list {
        list-style-image: url("images/star-icon.png");
      }

      /* Ajustez la taille de l'icône si nécessaire */
      .check-list li,
      .star-list li {
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Marqueurs de liste personnalisés avec des images</h1>

    <h2>Liste de contrôle</h2>
    <ul class="check-list">
      <li>Compléter le tutoriel CSS</li>
      <li>Pratiquez le style de liste</li>
      <li>Créer un projet web</li>
    </ul>

    <h2>Thèmes favoris</h2>
    <ul class="star-list">
      <li>Développement web</li>
      <li>Principes de conception</li>
      <li>Expérience utilisateur</li>
    </ul>
  </body>
</html>

Points clés sur list-style-image :

Utilise url() pour spécifier le chemin de l'image
Remplace les marqueurs de liste par défaut avec des images personnalisées
Fonctionne avec les listes ordonnées et non ordonnées
La taille de l'image peut être contrôlée avec le rembourrage CSS

Exemple de sortie dans un navigateur :

Liste de contrôle avec des marqueurs d'icône de case cochée
Liste de thèmes favoris avec des marqueurs d'icône d'étoile

Ajuster la position de list-style pour le placement des marqueurs

Dans cette étape, vous allez explorer la propriété CSS list-style-position, qui contrôle la façon dont les marqueurs de liste sont positionnés par rapport au contenu de la liste. Cette propriété a deux principales valeurs : outside (par défaut) et inside.

Mettez à jour votre fichier index.html pour démontrer différents emplacements de marqueurs de liste :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>List Style Position</title>
    <style>
      .outside-list {
        list-style-position: outside;
        background-color: #f0f0f0;
        padding: 10px;
        width: 300px;
      }

      .inside-list {
        list-style-position: inside;
        background-color: #e0e0e0;
        padding: 10px;
        width: 300px;
      }

      /* Ajoutez une séparation visuelle */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Démonstration de la position du style de liste</h1>

    <h2>Marqueurs de liste en dehors (par défaut)</h2>
    <ul class="outside-list">
      <li>Marqueurs positionnés en dehors de la zone de contenu</li>
      <li>Comportement CSS par défaut</li>
      <li>Marqueurs alignés à gauche du texte</li>
    </ul>

    <h2>Marqueurs de liste à l'intérieur</h2>
    <ul class="inside-list">
      <li>Marqueurs positionnés à l'intérieur de la zone de contenu</li>
      <li>Les marqueurs font partie du texte de l'élément de liste</li>
      <li>Le contenu commence immédiatement après le marqueur</li>
    </ul>
  </body>
</html>

Points clés sur list-style-position :

outside : Les marqueurs sont positionnés en dehors de la boîte de contenu (par défaut)
inside : Les marqueurs sont positionnés à l'intérieur de la boîte de contenu
Affecte la mise en page et l'alignement des éléments de liste
Utile pour créer des listes compactes ou visuellement distinctes

Exemple de sortie dans un navigateur :

Liste en dehors : Les marqueurs sont à gauche du texte
Liste à l'intérieur : Les marqueurs sont dans la zone de texte
Les couleurs de fond aident à visualiser la différence

Combiner les styles de liste avec la propriété list-style raccourcie

Dans cette étape, vous allez apprendre à utiliser la propriété raccourcie list-style pour combiner plusieurs attributs de style de liste dans une seule déclaration. Cette propriété vous permet de définir list-style-type, list-style-image et list-style-position en une seule ligne.

Mettez à jour votre fichier index.html pour démontrer la propriété raccourcie list-style :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Shorthand List Styles</title>
    <style>
      /* Raccourci avec type et position */
      .todo-list {
        list-style: square inside;
      }

      /* Raccourci avec image et position */
      .project-list {
        list-style: inside url("images/star-icon.png");
      }

      /* Raccourci complet avec type, image et position */
      .complete-list {
        list-style: lower-roman inside url("images/check-icon.png");
      }

      /* Remise à la valeur par défaut */
      .default-list {
        list-style: initial;
      }

      /* Suppression du style de liste */
      .no-style-list {
        list-style: none;
      }

      /* Ajoutez un peu d'espace pour la lisibilité */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Démonstration du style de liste raccourci</h1>

    <h2>Liste à faire (Marqueurs carrés)</h2>
    <ul class="todo-list">
      <li>Apprendre le style de liste CSS</li>
      <li>Pratiquez les propriétés raccourcies</li>
      <li>Créer des listes élégantes</li>
    </ul>

    <h2>Liste de projets (Icônes d'étoile)</h2>
    <ul class="project-list">
      <li>Projet de développement web</li>
      <li>Système de conception</li>
      <li>Tutoriels interactifs</li>
    </ul>

    <h2>Projets terminés (Icônes de vérification)</h2>
    <ol class="complete-list">
      <li>Principes fondamentaux du CSS</li>
      <li>Conception responsive</li>
      <li>Techniques avancées de style</li>
    </ol>

    <h2>Liste sans style</h2>
    <ul class="no-style-list">
      <li>Marqueurs de liste supprimés</li>
      <li>Liste propre sans style</li>
      <li>Aucun indicateur visuel</li>
    </ul>
  </body>
</html>

Points clés sur la propriété raccourcie list-style :

Combine list-style-type, list-style-image et list-style-position
L'ordre n'a pas d'importance pour la plupart des valeurs
none supprime tout le style de liste
initial remet les styles par défaut du navigateur

Exemples de combinaisons raccourcies :

list-style: square inside;
list-style: inside url('image.png');
list-style: lower-roman inside url('icon.png');

Résumé

Dans ce laboratoire, les participants explorent les techniques de style de liste CSS en créant un projet HTML avec différents types de listes, y compris les listes ordonnées, les listes non ordonnées et les listes de description. Le laboratoire guide les apprenants dans la personnalisation de l'apparence des listes à l'aide de propriétés CSS telles que list-style-type, list-style-image et list-style-position.

L'exercice pratique montre comment modifier les marqueurs de liste par défaut, remplacer les points de suspension standards par des images personnalisées et ajuster le placement des marqueurs, fournissant des compétences pratiques pour améliorer la conception des pages web et l'affichage visuel des listes à l'aide d'attributs CSS.