LIST-STYLE

 

La propriété raccourcie LIST-STYLE sert à spécifier une mise en forme des listes en se servant des balises HTML <UL> et <OL>. Outre les définitions de couleurs et de polices existant en CSS, il est possible de placer des images. Une énumération ou autres choix devient plus agréable dans les pages Web qui sont nombreuses à utiliser les listes (sommaire, références commerciales, histoire...).

Dans l'ordre sont étudiés :
- Listes à puces et numérotées.(list-style-type)
- Le retrait avec positionnement des puces et numéros.(list-style-position)
- Les icônes de puces (images).(list-style-image)
- Le moyen de définir globalement les paramètres.(list-style)

 

Listes non numérotées ( UL ) et numérotées et alphabétiques( OL )

 

 En bleu les valeurs traitées dans cette page avec exemples. Les autres valeurs sont laissées à votre initiative, en pensant que tout le monde ne dispose pas des polices appropriées, et sans oublier les navigateurs capricieux.( lower-latin | upper-latin sont assimilables à lower alpha | upper-alpha)

list-style-type

Les Puces (listes non numérotées)

Ce sont de petites icônes (symboles) non numériques qui servent dans les entrées de liste : disc, circle,square,none = cercle vide, cercle plein, petit carré plein et la spéciale "none".

• disc (valeur par défaut)
• petit cercle plein
• list-style-type: circle

• circle
• petit cercle vide
• list-style-type: disc

• square
• petit carré plein
• list-style-type: square

• none
• aucun item
• list-style-type: none

 

Codes dans HEAD

 

Code appliqué en ligne pour les listes non numérotées

 

Remplacer < UL > par < OL> pour les listes numérotées et alphabétiques

 

Les listes numérotées et alphabétiques

1. Décimal
2. numérotation normale
3. list-style-type: decimal type

1. Lower-roman
2. chiffres romains minuscules
3. list-style-type: lower-roman
4. chiffre, quatrième item
5. chiffre, cinquième item

1. Upper-roman
2. chiffres romains majuscules
3. list-style-type: upper-roman

1. Lower-alpha
2. minuscules alphabet latin
3. list-style-type: lower-alpha

1. Upper-alpha
2. majuscules alphabet latin
3. list-style-type: lower-roman

---

Listes imbriquées

 

Code 1 placé dans BODY

<UL STYLE="list-style-type : decimal ">
<LI> Niveau 1, item 1
<OL STYLE="list-style-type : upper-alpha ">
<LI> Niveau 2, item 1
<LI> Niveau 2, item 2
<OL STYLE="list-style-type : lower-alpha ">
<LI> Niveau 3, item 1
<LI>Niveau 3, item 2
</OL>
<LI> Niveau 2, item 1
</OL>
<LI>Niveau 1, item 2
</UL>

 

Exemple 1 avec les 3 niveaux placés en couleurs différentes, et noter le niveau 1 qui reprend son deuxième item en bas de la présentation, après que le niveau 1, item 1 , ait affiché le niveau 2 et niveau 3.

 

---

 

 

list-style-position

Cette propriété spécifie l'emplacement de la liste par rapport à la bordure et au texte. On utilise les valeurs suivantes : <UL STYLE="list-style-position: outside "> <LI>...

outside

• outside (valeur par défaut)
• list-style-position: outside
• Remarquer le décalage de ces deux items "outside" par rapport à ceux qui suivent dans "inside". Ici plus près de la bordure gauche de la page. Mais surtout voir l'ensemble du texte qui se trouve à coté des items.

inside

• inside
• list-style-position: inside
• Par opposition à l'exemple "outside", les items sont dans le même alignement que le texte. Remarquer qu'ils sont plus à droite que ceux qui précèdent dans "outside". 

---

 

list-style-image

Valeurs :

- none = permet de désactiver l'affichage de l'image dans les listes imbriquées.
- url = soit accès local soit accès externe

 

Code 2 placé dans BODY

<UL STYLE="list-style-image: url(aimages/v303.gif); list-style-type: circle ;" >
<LI><b> { list-style-image: url ( "aimages/v303.gif" ) ; }</b> pour acc&egrave;s
image locale.</LI>
<LI><b>{ list-style image: url( &quot; http://www.aidenet.com/css/aimages/v303.gif
&quot; ) ; }</b> pour acc&egrave;s image externe.</LI>
</UL>

 

Exemple 2 avec code placé dans HEAD

Certains navigateurs ne supportant pas cette propriété, pour conserver malgré tout une présentation de liste, ajouter la déclaration suivante : list-style-type: circle ; ce qui au final donnera avec le code placé en ligne

< UL STYLE= "list-style-image: url (aimages/v303.gif) ; list-style-type: circle ; " >

 

---

 

list-style

Cette propriété raccourcie, autorise des valeurs pour une, deux ou trois déclarations.

OL { list-style-type: decimal inside ; } (attention espace) , sera égal à  OL { list-style-type: decimal ; list-type-position: inside ; }

UL { list-type: inside url (aimages/v303.gif) ; list-style-type: circle ; }, sera égal à  UL { list-style-position: inside ; list-style-image: url (aimages/v303.gif) ; list-style-type: circle ; }