Stylisation de listes CSS

Introduction

Dans ce laboratoire, vous apprendrez à transformer une liste HTML standard, sans style, en un menu de navigation horizontal visuellement attrayant à l'aide de CSS. Par défaut, les listes HTML (<ul>) sont affichées verticalement avec des puces. Nous utiliserons plusieurs propriétés CSS fondamentales pour supprimer le style par défaut et créer une barre de navigation propre et moderne.

Vous apprendrez à utiliser les propriétés CSS suivantes :

• list-style-type
• padding
• display
• background-color
• margin

À la fin de ce laboratoire, vous aurez une solide compréhension de la manière de styliser les listes, une tâche courante dans le développement web pour créer des menus, des listes d'éléments, et plus encore.

Définir list-style-type none sur l'élément ul

Dans cette étape, vous commencerez par supprimer les puces par défaut de la liste non ordonnée. La propriété list-style-type en CSS est utilisée pour contrôler l'apparence du marqueur d'élément de liste.

Tout d'abord, localisez le fichier styles.css dans l'explorateur de fichiers sur le côté gauche du WebIDE et ouvrez-le. Le fichier est actuellement vide.

Ajoutez maintenant la règle CSS suivante à styles.css. Cette règle cible l'élément <ul> et définit son list-style-type sur none, ce qui masquera les puces.

ul {
  list-style-type: none;
}

Après avoir ajouté le code, enregistrez le fichier styles.css. Pour voir le résultat, cliquez sur l'onglet "Web 8080" en haut de l'interface LabEx. Vous devriez voir la liste des éléments sans les puces.

Appliquer padding 0 pour supprimer le retrait par défaut

Dans cette étape, vous allez supprimer l'indentation par défaut que les navigateurs appliquent automatiquement aux listes non ordonnées. Cette indentation est en fait un padding sur le côté gauche de l'élément <ul>.

Pour la supprimer, vous allez mettre à jour la règle ul existante dans votre fichier styles.css. Ajoutez la propriété padding: 0; à la règle. Cela définit le padding sur les quatre côtés de l'élément à zéro, supprimant ainsi efficacement l'indentation du côté gauche.

Mettez à jour votre fichier styles.css pour qu'il ressemble à ceci :

ul {
  list-style-type: none;
  padding: 0;
}

Enregistrez le fichier et basculez vers l'onglet "Web 8080" pour prévisualiser vos modifications. Vous remarquerez que la liste est maintenant alignée tout à gauche de son conteneur.

Utiliser display inline-block pour une liste horizontale

Dans cette étape, vous allez changer la disposition des éléments de liste de verticale à horizontale. Par défaut, les éléments de liste (<li>) sont des éléments de niveau bloc, ce qui signifie que chacun occupe toute la largeur disponible et commence sur une nouvelle ligne.

Pour les placer côte à côte, vous pouvez modifier leur propriété display. Nous utiliserons la valeur inline-block, qui permet aux éléments de se placer les uns à côté des autres comme des éléments en ligne, tout en conservant les propriétés de niveau bloc telles que width, height et padding.

Ajoutez une nouvelle règle CSS pour l'élément li dans votre fichier styles.css.

li {
  display: inline-block;
}

Votre fichier styles.css complet devrait maintenant ressembler à ceci :

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
}

Enregistrez le fichier et vérifiez l'onglet "Web 8080". Les éléments de liste devraient maintenant être disposés en une seule ligne horizontale.

Ajouter background-color aux éléments li

Dans cette étape, vous allez ajouter un style visuel aux éléments de liste pour qu'ils ressemblent davantage à des boutons de navigation. Nous allons ajouter une couleur de fond et un peu de padding interne.

La propriété background-color définit la couleur de fond d'un élément, et la propriété padding ajoute de l'espace à l'intérieur de la bordure de l'élément.

Modifiez la règle li existante dans styles.css pour inclure ces nouvelles propriétés.

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
}

Ici, background-color: #f2f2f2; définit un fond gris clair. padding: 8px 16px; ajoute 8 pixels de padding en haut et en bas, et 16 pixels à gauche et à droite du texte à l'intérieur de chaque élément de liste.

Enregistrez le fichier et actualisez l'onglet "Web 8080". Vous verrez que chaque élément de liste a maintenant un fond gris et plus d'espace autour du texte, ce qui leur donne l'apparence de boutons distincts.

Implémenter une marge entre les éléments li

Dans cette dernière étape de style, vous allez ajouter de l'espace entre les éléments de liste pour éviter qu'ils ne se touchent. La propriété margin est utilisée pour créer de l'espace autour d'un élément, à l'extérieur de sa bordure.

Pour ajouter de l'espace uniquement entre les éléments, nous pouvons appliquer une marge sur le côté droit de chaque élément de liste en utilisant la propriété margin-right.

Mettez à jour la règle li dans votre fichier styles.css une dernière fois :

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
  margin-right: 5px;
}

Ceci ajoute une marge de 5 pixels à droite de chaque élément de liste, les séparant les uns des autres. Le dernier élément aura également une marge, mais elle ne sera pas visible car il n'y a pas d'élément à côté.

Enregistrez le fichier et visualisez l'onglet "Web 8080". Votre menu de navigation horizontal est maintenant terminé, avec un espacement approprié entre chaque bouton.

Résumé

Félicitations ! Vous avez terminé avec succès ce laboratoire sur le style des listes CSS.

Vous avez commencé avec une liste HTML verticale standard et l'avez transformée en un menu de navigation horizontal stylisé. En cours de route, vous avez appris et appliqué plusieurs propriétés CSS essentielles :

• list-style-type pour supprimer les puces de liste par défaut.
• padding pour supprimer l'indentation par défaut des listes.
• display: inline-block pour organiser les éléments de liste horizontalement.
• background-color et padding pour styliser les éléments comme des boutons.
• margin-right pour créer de l'espace entre les éléments.

Ces techniques sont fondamentales pour la création de barres de navigation et d'autres composants basés sur des listes sur les sites web modernes.