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

Ordre & Listes désordonnéess

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 grace à 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 controller la position d'un liste grace à 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 >>>

Voulez-vous laisser une note ou un commentaire ?

Avis sur la page http://www.cssdebutant.com/coder-en-css-list-style-image-et-list-style-position.html Votes: 4.4 / 5 étoiles - 8 vote(s) et 10 commentaires