CSS - Listes

Les listes sont très utiles pour transmettre un ensemble de points numérotés ou à puces. Ce chapitre vous apprend à contrôler le type, la position, le style, etc. de la liste à l'aide de CSS.

Nous avons les cinq propriétés CSS suivantes, qui peuvent être utilisées pour contrôler les listes -

  • le list-style-type vous permet de contrôler la forme ou l'apparence du marqueur.

  • le list-style-position spécifie si un point long qui s'enroule sur une deuxième ligne doit s'aligner sur la première ligne ou commencer sous le début du marqueur.

  • le list-style-image spécifie une image pour le marqueur plutôt qu'une puce ou un numéro.

  • le list-style sert de raccourci pour les propriétés précédentes.

  • le marker-offset spécifie la distance entre un marqueur et le texte de la liste.

Maintenant, nous allons voir comment utiliser ces propriétés avec des exemples.

La propriété de type liste-style

La propriété List-style-type vous permet de contrôler la forme ou le style de la puce (également appelée marqueur) dans le cas de listes non ordonnées et le style des caractères de numérotation dans les listes ordonnées.

Voici les valeurs qui peuvent être utilisées pour une liste non ordonnée -

N ° Sr. Valeur et description
1

none

N / A
2

disc (default)

Un cercle rempli
3

circle

Un cercle vide
4

square

Un carré rempli

Voici les valeurs qui peuvent être utilisées pour une liste ordonnée -

Valeur La description Exemple
décimal Nombre 1,2,3,4,5
zéro décimal 0 avant le nombre 01, 02, 03, 04, 05
alpha inférieur Caractères alphanumériques minuscules a, b, c, d, e
alpha supérieur Caractères alphanumériques majuscules A, B, C, D, E
bas-romain Chiffres romains minuscules i, ii, iii, iv, v
supérieur-romain Chiffres romains majuscules I, II, III, IV, V
bas-grec Le marqueur est le grec inférieur alpha, bêta, gamma
bas-latin Le marqueur est en bas-latin a, b, c, d, e
latin supérieur Le marqueur est en haut-latin A, B, C, D, E
hébreu Le marqueur est une numérotation hébraïque traditionnelle  
arménien Le marqueur est la numérotation arménienne traditionnelle  
géorgien Le marqueur est une numérotation géorgienne traditionnelle  
cjk-idéographique Le marqueur est constitué de nombres idéographiques simples  
Hiragana Le marqueur est hiragana a, i, u, e, o, ka, ki
Katakana Le marqueur est katakana A, I, U, E, O, KA, KI
Hiragana-iroha Le marqueur est hiragana-iroha je, ro, ha, ni, ho, il, à
katakana-iroha Le marqueur est katakana-iroha I, RO, HA, NI, HO, HE, TO

Voici un exemple -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Il produira le résultat suivant -

La propriété list-style-position

La propriété list-style-position indique si le marqueur doit apparaître à l'intérieur ou à l'extérieur de la zone contenant les puces. Il peut avoir l'une des deux valeurs -

N ° Sr. Valeur et description
1

none

N / A
2

inside

Si le texte va sur une deuxième ligne, le texte sera enveloppé sous le marqueur. Il apparaîtra également en retrait par rapport à l'endroit où le texte aurait commencé si la liste avait une valeur extérieure.
3

outside

Si le texte va sur une deuxième ligne, le texte sera aligné avec le début de la première ligne (à droite de la puce).

Voici un exemple -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Il produira le résultat suivant -

La propriété list-style-image

L' image de style de liste vous permet de spécifier une image afin que vous puissiez utiliser votre propre style de puce. La syntaxe est similaire à la propriété background-image avec les lettres url commençant par la valeur de la propriété suivie de l'URL entre crochets. S'il ne trouve pas l'image donnée, les puces par défaut sont utilisées.

Voici un exemple -

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Il produira le résultat suivant -

La propriété de style liste

Le style liste vous permet de spécifier toutes les propriétés de la liste dans une seule expression. Ces propriétés peuvent apparaître dans n'importe quel ordre.

Voici un exemple -

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Il produira le résultat suivant -

La propriété marker-offset

La propriété marker-offset vous permet de spécifier la distance entre le marqueur et le texte relatif à ce marqueur. Sa valeur doit être une longueur comme indiqué dans l'exemple suivant -

Malheureusement, cette propriété n'est pas prise en charge dans IE 6 ou Netscape 7.

Voici un exemple -

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Il produira le résultat suivant -