Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Formatage des listes avec les propriétés CSS

Formatage des listes avec les propriétés CSS

A titre de rappel, on entend par les listes, les balises permettant d'insérer une liste numérotée (ordonnée) ou une liste à puces (liste non ordonnée). Voici un tableau récapitulatif :

Liste à puces <ul>
<li>Maroc</li>
<li>France</li>
<li>Espagne</li>
</ul>
  • Maroc
  • France
  • Espagne
Liste ordonnée <ol>
<li>matin</li>
<li>midi</li>
<li>soir</li>
</ol>
  1. matin
  2. midi
  3. soir

Vous pouvez agir sur l'apparence des listes en changeant la police, la couleur, l'arrière-plan etc. avec les propriétés traditionnelles dont on a parlé (font-family, color, background-color etc.). Mais il existe d'autres propriétés très intéressantes, dont l'usage est strictement attaché aux listes. Elles sont au total trois et elles commencent toujours par list-style (style de la liste), puis l'effet qui est concerné : 'type' ou 'position' ou 'image'.

La propriété CSS list-style-type

La propriété CSS list-style-type reconnaît deux catégories de constantes : une pour les éléments 'ul', et l'autre pour les éléments 'ol' (chiffres arabes, chiffres romains ou lettre alphabétiques). La propriété CSS list-style-type n'opère pas, si vous spécifiez une image pour vos listes avec la propriété CSS list-style-image.

Listes non ordonnées 'ul' (unordonned list)

Pour les listes non ordonnées, la propriété CSS list-style-type peut prendre les valeurs suivantes :

Exemple :

ul {
list-style-type: circle; /* puces sous forme de cercle vide*/
} 

Changez les valeurs de cette liste déroulante, pour voir l'aperçu des différentes valeurs possibles :

Listes ordonnées 'ol' (ordonned list)

Les mentions possibles sont :

  1. decimal : numérotation numérique sous la forme : 1, 2, 3, 4, 5... (réglage par défaut) ;
  2. decimal-leading-zero : numérotation numérique sous la forme : (01, 02, 03, 04, 05...). Ne peut pas être interprétée par Internet Explorer 6 et 7 ;
  3. upper-alpha : numérotation alphabétique, en majuscules (A, B, C...) ;
  4. lower-alpha : numérotation alphabétique, en minuscules (a, b, c...) ;
  5. upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...) ;
  6. lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...) ;
  7. lower-greek : numérotation grecque. Ne peut pas être interprétée par Internet Explorer 6 et 7 ;
  8. none : pas de numérotation.

Testez avec cette liste déroulante les différentes mentions possibles :

La propriété CSS list-style-image

Cette propriété est particulièrement intéressante avec les éléments 'ul'. Si les constantes prédéfinies dans la propriété CSS list-style-type ne vous satisfont pas, vous serez donc amené à user de la propriété CSS list-style-image, pour choisir votre propre image qui va servir de marqueur pour la liste. Exemple :

ul {
list-style-image: url("../../maPuce.png");
}

L'URL doit être spécifiée en fonction du contexte, où la règle CSS a été prédéfinie :

Pour de plus amples détails, reportez-vous au chapitre : lier des styles CSS avec la balise link, la règle CSS @import, la balise style ou l'attribut style.

Remarques

La propriété CSS list-style-position

Le rôle de cette propriété consiste à définir si le texte d'une liste doit être mis en retrait ou non, en cas de retour à la ligne automatique lorsque le texte atteint le bord du conteneur, ou bien en cas de retour à la ligne avec la balise <br/ >. Cette propriété reconnait 2 valeurs :

la propriété CSS list-style-position avec les listes XHTML
N'oubliez pas qu'un retour à la ligne est nécessaire pour que l'effet de retrait soit visible. La syntaxe est la suivante :

ul, ol {
list-style-position: outside;
}

La propriété générique list-style

La méga-propriété list-style résume les trois propriétés qu'on vient de voir. Voici deux exemples :

ol {
list-style: lower-roman inside; 
}
ul {
list-style: url("dossier.jpg") inside circle; 
}

Notez que pour les propriétés raccourcies, les valeurs passées sont séparées par des espaces et que leur ordre n'importe pas. Le navigateur peut identifier facilement les propriétés CSS rien qu'avec les valeurs passées.

Vous n'êtes pas tenu de mentionner toutes les valeurs, mais seulement celles qui vous intéressent. Si vous avez omis certaines d'entre-elles, les valeurs par défaut seront reprises par le navigateur.

Voilà, encore d'autres propriétés CSS ont été ajoutées dans votre sac avide Les prochains chapitres seront dédiés à certaines propriétés CSS qui sont plus ou moins compliquées

Chapitre suivant : la propriété CSS float.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau