Table des matières:
Vidéo: Création d'un menu déroulant en HTML et en CSS 2025
Ce n'est pas tout à fait un arrière-plan, mais vous pouvez également utiliser des images pour les éléments de votre page Web HTML5 et CSS3. Parfois, vous pourriez vouloir un type de balle spéciale pour vos listes.
Sur cette page, plusieurs variétés de piments ont été répertoriées. Pour ce genre de liste, une balle de poivre personnalisée est juste la chose. Bien sûr, CSS est la réponse:
listImages. html li {list-style-image: url ("poivre.gif");}
Mes poivres favoris
- Vert
- Habenero
- Arrivivi Gusano
L'attribut list-style-image vous permet pour joindre une image à un élément de liste. Pour créer des puces personnalisées:
-
Commencez avec une image personnalisée.
Les images de balle doivent être petites, vous devrez donc peut-être faire quelque chose de petit. L'image sera réduite à une largeur appropriée, mais elle aura toute la hauteur de l'image originale, alors faites-la petite.
-
Spécifiez l'image de style de liste avec un attribut url.
Vous pouvez définir l'image en tant qu'image de style de liste et toutes les puces seront remplacées par cette image.
-
Testez la liste dans votre navigateur.
Assurez-vous que tout fonctionne correctement. Vérifiez que le navigateur peut trouver l'image, que la taille est correcte et que tout ressemble à ce que vous attendiez.
Si vous ne souhaitez pas utiliser d'image, CSS propose un certain nombre d'autres styles que vous pouvez appliquer à vos éléments de liste. Utilisez la règle de type style de liste pour définir votre liste à l'un des nombreux styles. Consultez la documentation CSS officielle pour obtenir une liste complète, mais les types de styles les plus couramment utilisés sont les suivants: disque, cercle, carré, décimal, romain supérieur, romain inférieur, latin supérieur et latin inférieur.
Notez que vous pouvez appliquer un style numérique à un élément de liste dans une liste ordonnée ou non ordonnée. La distinction entre ces types de liste est donc moins importante que par le passé.
