Listes CSS (Listes)

Les attributs de liste contrôlent l'affichage des marqueurs des éléments de liste.

Types de liste HTML

Il y a trois types de listes différents en HTML :

• Liste non ordonnée — liste des éléments, où chaque élément est marqué par un point de liste.

• Liste ordonnée — liste des éléments, où chaque élément est numéroté.

• Liste de définition -liste des éléments, où chaque élément contient une description.

Pour en savoir plus sur les listes, consultezListe HTMLtutoriel.

CSS Style List

CSS fournit plusieurs propriétés pour styliser les listes non ordonnées et ordonnées les plus courantes. Ces propriétés CSS permettent généralement :

• Contrôler la forme ou l'apparence du marqueur.

• Spécifier l'image du marqueur au lieu du point de liste ou du nombre.

• Définir la distance entre le marqueur et le texte de la liste.

• spécifie où le marqueur ou le point de liste apparaît à l'intérieur ou à l'extérieur du cadre contenant une liste non ordonnée ou ordonnée.

type de style de liste

Par défaut,Liste ordonnéeles éléments dans sont marqués par des nombres arabes (1,2,3et autres) numérotés, tandis que dansdans une liste non ordonnée，les éléments sont marqués par des points de liste circulaires. Mais vous pouvez utiliser-style-L'attribut "type" change ce type de marqueur de liste par défaut en tout autre type, par exemple circulaire, carré, romain, lettres latines, etc.

ul {
　　　　list-style-type: carré;
}
ol {
　　　　list-style-type: majuscule-romain;
}

modifier la position du marqueur de liste

Par défaut, les marqueurs de liste sont situés à l'extérieur du cadre de l'élément de liste. Mais vous pouvez utiliser-style-La propriété "position" pour spécifier où le marqueur ou le point de liste apparaît à l'intérieur ou à l'extérieur du cadre de l'élément de liste.

Cette propriété utilise les valeurs "intérieur" ou "extérieur", et "extérieur" est la valeur par défaut. Si vous utilisez cette valeur "intérieur", ces lignes seront entourées sous le marqueur au lieu d'être indentées.

ul.in li {
　　　　list-style-position: intérieur;
}
ul.out li {
　　　　list-style-position: extérieur;
}

l'image comme marqueur de liste

Vous pouvez également utiliser-style-L'attribut "image" fixe l'image en tant que marqueur de liste.

Les règles de style dans cet exemple assignent à tous les éléments d'une liste non ordonnée une image PNG transparente nommée "arrow.png" en tant que marqueur de liste.

ul li {
　　　　list-style-image: url("arrow.png");
}

Les exemples ci-dessus ne produisent pas le même résultat dans tous les navigateurs. Internet Explorer et Opera affichent des marqueurs d'images légèrement plus hauts que Firefox, Chrome et Safari.

Solution de compatibilité croisée pour les balises d'images

Lorsque vous utilisez le list-style-Lorsque l'attribut image est utilisé pour l'image de liste, le marquage de liste ne peut pas être aligné précisément dans le navigateur. La solution consiste à background-image Les propriétés CSS alignent correctement les images de listes.

Les exemples suivants s'affichent de manière égale dans tous les navigateurs :

ul {
　　　　list-style-type: none;
}
ul li {
　　　　background-image: url("arrow.png");
　　　　background-position: 0px　5px;　　　　/*　X-pos Y-pos (from top-left)　*/
　　　　background-repeat: no-repeat;
　　　　padding-left:　20px;
}

Propriété abrégée de style de liste

Le list-La propriété style est une propriété abrégée définissant les trois propriétés suivantes : list-style-type, list-style-image et list-style-position d'une liste à un endroit.

Cette règle de style règle le marquage de liste des éléments de liste rangés en majuscules latines, qui apparaissent au début des éléments de liste :

ol {
　　　　list-style: upper-latin inside;
}