CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 2 - Tuto CSS3: Les Feuilles de Style

Personnalisation des Puces dans les Listes HTML

Retour à la formation
Chapitre 3 Leçon 6
Précédent
Suivant

Découvrez comment utiliser les différentes propriétés CSS pour changer l'apparence des puces dans les listes HTML UL et OL.

Détails de la leçon

Description de la leçon

Cette leçon détaillée vous apprendra à modifier l'apparence des puces dans les listes HTML en utilisant diverses propriétés CSS. Que ce soit pour des listes non ordonnées (UL) ou ordonnées (OL), vous apprendrez à :

  • Utiliser list-style-type pour changer les types de puces tels que square, circle, ou disc.
  • Appliquer des valeurs décimales ou alphabétiques, même si cela a moins de sens sémantique pour les listes non ordonnées (UL).
  • Explorer les options alphabétiques et romaines avec upper-alpha, lower-alpha, lower-greek, upper-roman, et lower-roman.
  • Incorporer des images comme puces avec list-style-image, bien que cette pratique soit moins courante.

Vous verrez également comment les propriétés peuvent être utilisées pour gérer les cas spécifiques et les meilleures pratiques en matière de sémantique HTML.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :

  • Comprendre les différentes valeurs de la propriété list-style-type.
  • Savoir appliquer des styles variés aux puces des listes HTML.
  • Reconnaître l'importance de la sémantique dans le choix entre UL et OL.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir :

  • Des connaissances de base en HTML et CSS.
  • Une compréhension élémentaire des listes HTML.

Métiers concernés

Les concepts abordés dans cette vidéo sont essentiels pour les rôles professionnels tels que :

  • Développeur Front-End
  • Web Designer
  • Intégrateur Web

Alternatives et ressources

Pour les besoins spécifiques en création de puces personnalisées, d'autres solutions peuvent inclure :

  • Utiliser des pseudo-éléments CSS pour des conceptions plus avancées.
  • Incorporer des frameworks CSS comme Bootstrap ou Foundation qui offrent des styles prédéfinis pour les listes.

Questions & Réponses

Les valeurs incluent square, circle, disc, decimal, decimal-leading-zero, upper-alpha, lower-alpha, lower-greek, upper-roman et lower-roman.
Une liste UL est utilisée pour des éléments non ordonnés alors qu'une liste OL est utilisée pour des éléments qui doivent être ordonnés ou avoir un ordre particulier.
List-style-image est moins souvent utilisé car la gestion d'alignement des images avec le texte peut être difficile. Utiliser des images en arrière-plan offre souvent une meilleure gestion.