Styliser les listes avec CSS
Les listes sont une partie très importante de nombreuses pages Web.
CSS peut les styliser en utilisant plusieurs propriétés.
list-style-typeest utilisé pour définir un marqueur prédéfini à utiliser par la liste:
li {
list-style-type: square;
}Nous avons beaucoup de valeurs possibles, que vous pouvez voir icihttps://developer.mozilla.org/en-US/docs/Web/CSS/list-style-typeavec des exemples de leur apparence. Certains des plus populaires sontdisc,circle,squareetnone.
list-style-imageest utilisé pour utiliser une image personnalisée comme marqueur, lorsqu'un marqueur prédéfini n'est pas approprié:
li {
list-style-image: url(list-image.png);
}list-style-positionvous permet d'ajouter le marqueuroutside(la valeur par défaut) ouinsidedu contenu de la liste, dans le flux de la page plutôt qu'en dehors de celle-ci
li {
list-style-position: inside;
}Lelist-styleLa propriété shorthand nous permet de spécifier toutes ces propriétés dans la même ligne:
li {
list-style: url(list-image.png) inside;
}Téléchargez mon gratuitManuel CSS
Plus de didacticiels CSS:
- Le guide Flexbox
- Tutoriel CSS Grid
- Variables CSS (propriétés personnalisées)
- Introduction à PostCSS
- La propriété CSS margin
- Comment centrer un élément avec CSS
- Polices système CSS
- Comment imprimer votre HTML avec style
- Un guide d'introduction aux transitions CSS
- Un didacticiel sur les animations CSS
- Introduction au CSS
- Le guide CSS
- Comment configurer Tailwind avec PurgeCSS et PostCSS
- La feuille de triche de Tailwind
- Comment faire pivoter en continu une image en utilisant CSS
- Rendre un tableau réactif en utilisant CSS
- Comment déboguer CSS en divisant en deux
- Sélecteurs CSS
- Cascade CSS
- Spécificité CSS
- Sélecteurs d'attributs CSS
- Couleurs CSS
- Unités CSS
- URL CSS ()
- Typographie CSS
- Le modèle CSS Box
- La propriété de position CSS
- Requêtes multimédias CSS et conception réactive
- Requêtes de fonctionnalités CSS
- Transformations CSS
- Comment styliser des listes en utilisant CSS
- Préfixes de fournisseur CSS
- Héritage CSS
- Pseudo-classes CSS
- Pseudo éléments CSS
- Styliser les tableaux HTML avec CSS
- La propriété d'affichage CSS
- La fonction CSS calc ()
- Bordures CSS
- Importer un fichier CSS avec @import
- Gestion des erreurs CSS
- Filtres CSS
- Dimensionnement de la boîte CSS
- Arrière-plans CSS
- Commentaires CSS
- Polices CSS
- Remplissage CSS
- La propriété CSS float et la compensation
- Normalisation CSS
- La propriété CSS z-index
- Comment désactiver la sélection de texte à l'aide de CSS
- Comment mettre un élément au bas de son conteneur en utilisant CSS
- Comment inverser les couleurs en utilisant CSS
- Balises pré réactives en CSS
- Intégrations de vidéos YouTube réactives
- Quelles sont les bonnes valeurs CSS Breakpoint pour le Responsive Design?
- Comment aligner le centre dans Flexbox