Les listes non-ordonnées HTML
Les listes non-ordonnées HTML
-
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:
-
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; -
Comment Créer une Liste sans Puces
-
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.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>1tem 3 </li>
</ul>
Exemple:
<!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>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-style ou list-style-type.
