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. d’une 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 type de style de liste vous permet de contrôler la forme ou l’apparence du marqueur.
-
Le position de style de liste spécifie si un point long qui se termine sur une deuxième ligne doit s’aligner sur la première ligne ou commencer sous le début du marqueur.
-
Le image de style de liste spécifie une image pour le marqueur plutôt qu’une puce ou un numéro.
-
Le style liste sert de raccourci pour les propriétés précédentes.
-
Le décalage de marqueur 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é list-style-type
Le type de style de liste La propriété 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 –
| Sr.No. | Valeur et description |
|---|---|
| 1 |
aucun N / A |
| 2 |
disque (par défaut) Un cercle rempli |
| 3 |
cercle Un cercle vide |
| 4 |
carré Un carré rempli |
Voici les valeurs, qui peuvent être utilisées pour une liste ordonnée –
| Valeur | Description | Exemple |
|---|---|---|
| décimal | Nombre | 1,2,3,4,5 |
| zéro décimal | 0 devant le chiffre | 01, 02, 03, 04, 05 |
| alpha inférieur | Caractères alphanumériques minuscules | un, b, c, ré, e |
| alpha supérieur | Caractères alphanumériques majuscules | A, B, C, D, E |
| bas-romain | Chiffres romains minuscules | je, ii, iii, iv, v |
| haut-romain | Chiffres romains majuscules | I, II, III, IV, V |
| bas-grec | Le marqueur est en bas-grec | alpha, bêta, gamma |
| bas-latin | Le marqueur est bas-latin | un, b, c, ré, e |
| haut-latin | Le marqueur est en haut latin | A, B, C, D, E |
| hébreu | Le marqueur est la numérotation hébraïque traditionnelle | |
| arménien | Le marqueur est la numérotation arménienne traditionnelle | |
| géorgien | Le marqueur est la numérotation géorgienne traditionnelle | |
| cjk-idéographique | Le marqueur est composé de nombres idéographiques simples | |
| hiragana | Le marqueur est hiragana | un, je, tu, 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 | JE, RO, HA, NI, HO, IL, À |
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>
Cela produira le résultat suivant –
La propriété list-style-position
Le position de style de liste La propriété indique si le marqueur doit apparaître à l’intérieur ou à l’extérieur de la boîte contenant les puces. Il peut prendre l’une des deux valeurs −
| Sr.No. | Valeur et description |
|---|---|
| 1 |
aucun N / A |
| 2 |
à l’intérieur Si le texte va sur une deuxième ligne, le texte s’enroulera sous le marqueur. Il apparaîtra également en retrait à l’endroit où le texte aurait commencé si la liste avait une valeur de l’extérieur. |
| 3 |
dehors 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>
Cela produira le résultat suivant –
La propriété list-style-image
Le 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 la valeur de la propriété suivies de l’URL entre parenthèses. 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>
Cela 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>
Cela produira le résultat suivant –
La propriété marker-offset
Le décalage de marqueur La propriété 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>
Cela produira le résultat suivant –
#CSS #Listes