css:list-style

Un article de Polydoc.

[modifier] Synopsis

list-style permet de mettre en forme vos listes (x)HTML.

[modifier] Description

list-style est une propriété globale pour "personnaliser" vos listes en CSS. Elle en englobe plusieurs autres en une seule :

• list-style-type

• list-style-position

• list-style-image

[modifier] Utilisation

list-style: value;

[modifier] Arguments

Liste des arguments et ce qu'ils font :

Arguments pour list-style-type, défini la forme des puces :

• Pour les listes non ordonnées (balise <ul>' en (x)HTML) :
  • disc => un disque noir (par défaut).
  • circle => un cercle.
  • square => un carré.
  • none => aucune puce ne sera utilisée.

• Pour les listes ordonnées (balise <ol> en (x)HTML) :
  • decimal => nombres 1, 2, 3, 4, 5... (par défaut)
  • decimal-leading-zero => nombres commençant par zéro (01, 02, 03, 04, 05...)
  • upper-roman => numérotation romaine, en majuscules (I, II, III, IV, V...)
  • lower-roman => numérotation romaine, en minuscules (i, ii, iii, iv, v...)
  • upper-alpha => numérotation alphabétique, en majuscules (A, B, C, D, E...)
  • lower-alpha => numérotation alphabétique, en minuscules (a, b, c, d, e...)
  • lower-greek => numérotation grecque (α, β, γ, δ, ε...)
  • hiragana => numération en hiragana (あ, い, う, え, お...système d'écriture japonais)
  • katakana => numération en katanana (ア, イ, ウ, エ, オ...autre système d'écriture japonais)

Arguments pour list-style-position, retrait du texte lors d'un retour à la ligne:

• inside => sans retrait
• outside => avec retrait (par défaut)

Arguments pour list-style-image, utilisation d'image pour remplacer les puces "standards" :

• url("monchemin/image.format")

Note : Le chemin vers l'image peu être absolu ou relatif.

L'ordre n'a pas d'importance, mais il est préférable d'utiliser un ordre défini pour mieux s'y retrouver.

[modifier] Exemples

ul
{
list-style: inside url("monchemin/image.format");
/* Les puces de ma liste  de type <ul> seront l'image: "image.format" et le texte ne sera pas en retrait */
}
 
ol
{
list-style: upper-roman;
/* Les puces de ma liste de type <ol> seront en nombres romains majuscules (I, II, III, IV...)et le texte sera mis en retrait */
}