List-style-image, list-style-position, list-style-type
Ordre & Listes désordonnéess

Ordre & Listes désordonnées

Vous pouvez définir une apparence pour vos listes (balise HTML <li> et </li>).

  • La syntaxe est la suivante : propriété: valeur;.

A savoir sur les puces : list-style regroupe les propriété list-style-type, list-style-position et list-style-image.

D’une manière général en CSS, les propriétés et leurs valeurs sont toujours séparées par un espace. L’ordre dans lequel elles sont indiquées n’a pas d’importance.

  • list-style-image: définit l’image qui va remplacer les formats de puce couramment utilisés. La valeur possible présente la propriété «url()». Est, ensuite spécifié entre les paranthèses,l’adresse de l’image.
  • list_style_position: définit la position des puces par rapport au contenu des points de la liste en cas de retrait. Les valeurs possibles sont «inside» c’est à dire sans retrait ou «outside» c’est à dire avec retrait, c’est la valeur par défaut.
  • list_style_type: définit l’apparence de la puce. Les syntaxes possibles sont «circle» c’est à dire cercle, «disc» c’est à dire rond, «square» c’est à dire carré ou «none» (sans puce au début).

A savoir : Dans ce chapitre, la notion d’héritage est appliquée. (voir notion d’héritage sur ce lien)

Image devant la liste

Vous pouvez utiliser une image devant une liste ordonnées ou non grâce à la propriété :

list-style : list-style-image: url(path_to_image.gif, jpg or png);

A savoir : Si vous utiliser une image, vous pouvez utiliser la propriété « list-style-type » aussi car cela permet de déactiver l’image en cas de besoin

Voir un exemple de code CSS :

 ul {padding: 10px 0 15px 20px;margin:0;} li {margin-bottom:5px;list-style-image: URL(url-vers-ton-image/star.png);color: #3B6EBF;}

 Voir un exemple de code dans l’élément

<ul>
 <li>liste 1</li>
 <li>liste 2</li>
 <li>list 3</li>
</ul>

Position de la liste

Vous pouvez aussi contrôler la position d’un liste grâce à la propriété : list-style-position : list-style-position: valeur;

Valeurs possibles :

  1. inside
  2. outside
  3. inherit

Voir un exemple

Effet sur une liste

Vous pouvez mettre des effets grace au CSS avec la propriété : list-style-type list-style-type: valeur;

Valeurs possibles :

  1. disc
  2. circle
  3. square
  4. decimal
  5. lower-roman
  6. upper-roman
  7. lower-alpha
  8. upper-alpha
  9. none

Voir un exemple de list-style-type en css

Les styles CSS appliqués aux listes ordonnées concernant les listes ordonnées, permette de spécifier l’apparence des numéros.

Voici un exemple de code CSS :

ol { list-style-type: upper-roman; list-style-position: inside;}

La syntaxe toujours est la suivante : propriété: valeur;

list-style-type définit l’apparence des numéros. Les valeurs possibles sont «decimal» (1., 2., 3., etc), «decimal-leading-zero» (01., 02., 03., etc), «lower-roman» (i., ii., iii., etc), «upper-roman» (I., II., III., etc), «lower-alpha» (a., b., c., etc), «upper-alpha» (A., B., C., etc), «lower-greek» (numérotation selon l’alphabet grec), «hebrew» (numérotation selon l’alphabet hébreu), «hiragana» (numérotation selon l’alphabet japonais).

list-style-position définit le comportement des puces par rapport au contenu des points de la liste en cas de retrait. Les valeurs possibles sont «inside» (sans retrait) ou «outside» (avec retrait, valeur par défaut).

list-style regroupe les propriétés list-style-type et list-style-position. Les valeurs doivent être séparées par un espace. L’ordre dans lequel elles sont défini n’a pas d’importance.

Défintion des Largeur et Hauteur en CSS >>>

Le CSS en 3 questions/réponses – en bref

🖥️ C'est quoi HTML et CSS ?

Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l’aspect graphique d’une page en HTML

🤔 Qu'est-ce que le CSS ?

CSS est l’acronyme de « Cascading Style Sheets » c’est à dire « feuille de style en cascade ». Le CSS est un langage informatique permettant de mettre en forme des pages web (HTML ou XML).

📆 Différence entre CSS et CSS3 ?

CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript. En plus de cela, il fournit également des fonctionnalités de développement mobile.