Developpez.com

Plus de 14 000 cours et tutoriels en informatique professionnelle à consulter, à télécharger ou à visionner en vidéo.

Developpez.com - Développement Web
X

Choisissez d'abord la catégorieensuite la rubrique :


Les propriétés de liste : list-style

01/02/2003

Par giminik (Matthieu Petiot) (autres articles)
 

Cet article vous dévoilera les propriétés utiles à la mise en place d'une liste.ü


1. list-style-image (CSS 1)
2. list-style-position (CSS 1)
3. list-style-type (CSS 1)
4. list-style (CSS 1)


1. list-style-image (CSS 1)


Liste des navigateurs compatibles

  • Internet Explorer 5 et supérieurs
  • Netscape 4 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété sert à définir une puce personnalisée en indiquant l'adresse d'une image servant de puce. Cette propriété hérite du parent. Elle s'applique aux élèments dd, dt, li, ul et ol ou tout autre élément ayant pour propriété display:list-item;.

Syntaxe et valeurs possibles
/* définition d'une puce */ list-style-image : url(puce.gif) ; /* pas d'image de puce */ list-style-image : none ;
Visualisez un exemple.


2. list-style-position (CSS 1)


Liste des navigateurs compatibles

  • Internet Explorer 5 et supérieurs
  • Netscape 4 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété permet de déterminer le retrait de la puce. Il devient donc possible d’augmenter ou de réduire ce retrait. Cette propriété hérite du parent. Les valeurs possibles sont outside ou inside, outside étant la valeur initiale. Elle s'applique aux élèments dd, dt, li, ul et ol ou tout autre élément ayant pour propriété display:list-item;.

Syntaxe et valeurs possibles
/* position par défaut */ list-style-position : outside ; /* position décalée vers la droite */ list-style-position : inside ;
Visualisez un exemple.


3. list-style-type (CSS 1)


Liste des navigateurs compatibles

  • Internet Explorer 5 et supérieurs
  • Netscape 4 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété définit le type de puce : le type de caractère pour les listes ordonnées ol, ou la forme de la puce pour les listes non ordonnées ul. Cette propriété ne fonctionne que si aucune image n'a été spécifiée avec la propriété list-style-image. Elle s'applique aux élèments dd, dt, li, ul et ol ou tout autre élément ayant pour propriété display:list-item;. La valeur par défaut est disc pour la liste non ordonnée ul et decimal pour la liste ordonnée ol.

Syntaxe et valeurs possibles
/* valeurs possibles pour ul */ list-style-type : disc ; /* defaut */ list-style-type : circle ; list-style-type : square ; /* valeurs possibles pour ol */ list-style-type : decimal ; /* defaut 1, 2, 3... */ list-style-type : decimal-leading-zero ; /* 01, 02, 03... */ list-style-type : lower-alpha ; /* a, b, c... */ list-style-type : lower-roman ; /* i, ii, iii, iv... */ list-style-type : upper-alpha ; /* A, B, C... */ list-style-type : upper-roman ; /* I, II, III, IV... */ list-style-type : lower-greek ; /* caractères grecs minuscules */ /* pour qu'il n'y ait pas de puce pour ol ou ul */ list-style-type : none ;
Visualisez un exemple.


4. list-style (CSS 1)


Liste des navigateurs compatibles

  • Internet Explorer 5 et supérieurs
  • Netscape 4 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété permet de définir en une ligne les trois propriétés précédentes dans n'importe quel ordre. Les propriétés omises prennent alors la valeur par défaut. Cette propriété est bien sûr héritée de son parent et ne s'applique qu'aux élèments dd, dt, li, ul et ol ou tout autre élément ayant pour propriété display:list-item;.

Syntaxe et valeurs possibles
list-style : url(puce.gif) inside ; list-style : none outside ;
Visualisez un exemple.



Ce document est issu de http://www.developpez.com et reste la propriété exclusive de son auteur.
La copie, modification et/ou distribution par quelque moyen que ce soit est soumise à l'obtention préalable de l'autorisation de l'auteur.
Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -