Les feuilles de style en cascade fournissent un ensemble d'outils pour personnaliser et contrôler l'apparence du site Web de votre entreprise. Changer le style de puce dans une liste non ordonnée est aussi simple que d'utiliser «list-style-type:» pour spécifier un cercle, un carré ou un disque. Il est également possible de remplacer une image pour personnaliser davantage les puces de la liste. La taille des puces de la liste, cependant, est déterminée par la taille de police actuelle. Pour contrôler la taille exacte des puces de la page afin de compléter l'aspect et la convivialité d'un site ou l'image de marque, vous devez utiliser le pseudo-élément «: avant».
1
Ouvrez le fichier CSS dans un éditeur de texte.
2
Spécifiez la taille et la famille de police pour le corps de la page Web. Pour cet exemple, utilisez:
body {font-famille: Verdana, Arial, Helvetica, sans-serif; taille de la police: 14 pt; }
Ces deux instructions définissent la police de caractères de la page sur les polices sans empattement couramment disponibles d'une taille de 14 points. La seule façon de vous assurer que vos puces sont plus petites que le texte qui l'accompagne est de spécifier la taille de la police plutôt que de s'appuyer sur un paramètre de navigateur standard.
3
Réinitialisez le style de liste non ordonnée sur aucun avec l'instruction:
ul {style liste: aucun; }
Cette instruction remplace à nouveau les valeurs par défaut du navigateur pour réinitialiser le style de liste non ordonnée sur «aucun».
4
Insérez le symbole à utiliser pour la puce et spécifiez la taille de police à utiliser comme ceci:
ul li: avant {contenu: "•"; taille de la police: 10pt; }
Le pseudo-élément «: before» insère un élément de puce devant le contenu de chaque élément de la liste. L'instruction «font-size» spécifie une puce légèrement plus petite de 10 points comme marqueur de liste. Ajustez la taille selon vos besoins pour votre page Web.