Objectifs
- ِ Connaitre les listes non-ordonnées en HTML.
Les listes non ordonne
- Comme leur nom l'indique, les listes non-ordonnées n'ont pas de notion d'ordre et on peut mélanger leurs éléments sans que cela modifie leur sens.
- Les listes non-ordonnées se définissent avec la balise <ul> et sont utilisées pour afficher des taches, créer des menus ou des sous-menus.
- Ces listes sont précédées d’un petit symbole qui peut être modifiable en CSS. Souvent c’est un cercle plein, cela peut être un carré, ou même une image personnalisée.
- Les listes non-ordonnées (Unordered List) fournissent un outil de structuration similaire au liste ordonnée mais sans la notion de numérotation.
- Elles sont également appelées liste à puce car chaque item est précédé d'une puce graphique qui, par défaut est un disque plein de la même couleur que le texte qui la suit.
- Une liste à puces est introduite par l'élément <ul> et fermée par </ul>. Comme l'élément <ol>, son seul contenu direct est un ou plusieurs éléments <li>.
- La valeur par défaut est les puces, qui sont de petits cercles noirs.
- La structure d'une liste à puces est donc la suivante:
<ul> <li>Item 1</li> <li>Item 2</li> <li>1tem 3 </li> </ul>Comment changer l'apparence des puces d’une liste non-ordonnée
- Si les disques noirs ne sont pas à votre goût, vous pouvez changer l'apparence des puces d’une liste non-ordonnée. Rien de plus simple, ajoutez la propriété "
list-style-type" à l’élément HTML "ul" et définissez la valeur qui représentera le style que vous souhaitez donner aux puces de votre liste. - Il existe plusieurs styles possibles aux puces d’une liste non-ordonnée, voici quelques possibilités :
- Disque noir: list-style-type:
disc; - Cercle: list-style-type:
circle; - Carré noir: list-style-type:
square; - Chiffres (ce qui revient à créer une liste ordonnée) : list-style-type:
decimal; - Caractère: list-style-type: '
@'; Vous pouvez utiliser n'importe quel caractère ASCII comme puce pour votre liste, cela offre donc un large panel de possibilités pour styliser vos listes ! - Aucune puce: list-style-type:
none;
<!DOCTYPE html> <html> <head> <title>Exemple liste</title> </head> <body> <h2>Exemple de la propriété list-style-type </h2> <ul style="list-style-type: square;"> <li>Apéritifs</li> <li>Plat principal</li> <li>Salades</li> </ul> <ul> <li>Boissons gazeuses</li> <li>Boissons chaudes</li> <li>Glaciers</li> </ul> </body> </html> - Disque noir: list-style-type:
- Si les disques noirs ne sont pas à votre goût, vous pouvez changer l'apparence des puces d’une liste non-ordonnée. Rien de plus simple, ajoutez la propriété "
Comment Créer une Liste sans Puces
Dans quelques cas, vous aurez besoin de supprimer les puces/style des listes ordonnées (<ol>) et non ordonnées(<ul>). Supprimer les puces des listes HTML, ce n'est pas dificile à faire. On peut le faire à l'aide des propriétés CSS
list-styleoulist-style-type.Comment remplacer les Puces de la Liste avec des Images
- CSS peut être utilisé pour convertir les puces de la liste aux séquences ou cercles, mais cela donne un peu de contrôle sur leur apparence ou location.
- Le changement des puces de la liste standard HTML aux images est un moyen incroyable pour les connecter au sujet de votre site web et rendre votre site visuellement plus attrayant.