devstory

Le Tutoriel de CSS Lists

  1. HTML Lists
  2. CSS list-style-type
  3. CSS list-style-image
  4. CSS list-style-position
  5. CSS margin, padding

1. HTML Lists

En HTML, il existe deux types de Liste (List) : Unordered Lists (Listes non ordonnées) et Ordered Lists (Listes ordonnées).
  • Unordered Lists - Utilise des puces (bullets) pour marquer les articles (item) de la liste.
  • Ordered Lists - Utilisez des chiffres (chiffres réguliers ou chiffres romains) ou des lettres (Letter) pour marquer les éléments d'une liste.
Les propriétés (property) de CSS List vous permettent de définir ce qui suit :
  • Permet de choisir le type de ::marker sera affiché dans la Unordered List.
  • Permet de choisir le type de ::marker sera affiché dans la Ordered List.
  • Utilise une image comme une ::marker pour une Unordered List.
  • Établit la localisation de ::marker.

2. CSS list-style-type

La propriété (property) CSS list-style-type est utilisée pour l'étiquette <UL> (Unordered List) pour définir le style des éléments (item) de la liste.
CSS list-style-type peut obtenir une des valeurs :
  • disc
  • circle
  • square
  • none
ul-list-style-type-example.html
<h3>list-style-type: dist (Default)</h3>
<ul style="list-style-type: dist;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h3>list-style-type: circle</h3>
<ul style="list-style-type: circle;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h3>list-style-type: square</h3>
<ul style="list-style-type: square;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

<h3>list-style-type: none</h3>
<ul style="list-style-type: none;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>
CSS list-style-type peut être appliqué à la <OL> (Ordered List), ses valeurs peuvent être :
  • none
  • disc
  • circle
  • square
  • armenian
  • decimal
  • cjk-ideographic
  • decimal-leading-zero
  • georgian
  • hebrew
  • hiragana
  • hiragana-iroha
  • katakana
  • katakana-iroha
  • lower-alpha
  • lower-greek
  • lower-latin
  • lower-roman
  • upper-alpha
  • upper-greek
  • upper-latin
  • upper-roman
list-style-type-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>List Styles Example</title>
      <meta charset="UTF-8">
      <style>
         table {
         border-collapse: collapse;
         border: 1px solid black;
         width:100%;
         }
         td  {
         border: 1px solid black;
         padding: 5px;
         vertical-align: top;
         white-space: nowrap;
         }
      </style>
      <script src="list-style-type-example.js"></script>
   </head>
   <body onLoad="initRadios()">
      <table>
         <tr>
            <td id="radio-container"></td>
            <td>
               <h3 id ="my-info">list-style-type: none</h3>
               <ol style="list-style-type: none;" id="my-list">
                  <li>HTML</li>
                  <li>CSS</li>
                  <li>Javascript</li>
               </ol>
            </td>
         <tr>
      </table>
   </body>
</html>
list-style-type-example.js
var types= [
  "none",
    "disc",
    "circle",
    "square",
   "armenian",
    "decimal",
    "cjk-ideographic",
    "decimal-leading-zero",
    "georgian",
    "hebrew",
    "hiragana",
    "hiragana-iroha",
    "katakana",
    "katakana-iroha ",
    "lower-alpha",
    "lower-greek",
    "lower-latin",
    "lower-roman",
    "upper-alpha",
    "upper-greek",
    "upper-latin",
    "upper-roman"]; 
function initRadios()  {
  var radioContainer = document.getElementById("radio-container");

  for(var i = 0; i< types.length; i++) {
      var radioElement = document.createElement("input");
      radioElement.type = "radio";
      radioElement.name = "type";
      radioElement.value = types[i];
      var spanElement = document.createElement("span");
      spanElement.innerHTML = types[i];
      spanElement.style.marginRight = "5px";
      var brElement = document.createElement("br");
      radioElement.addEventListener("click", function(event)  {
         var infoElement = document.getElementById("my-info");
         infoElement.innerHTML = "{ list-style-type: " + event.target.value + " }";
         var listElement = document.getElementById("my-list");
         listElement.style.listStyleType = event.target.value;
      });
      radioContainer.appendChild(radioElement);
      radioContainer.appendChild(spanElement);
      radioContainer.appendChild(brElement);
  }
}

3. CSS list-style-image

La propriété (property) CSS list-style-image est utilisé pour l'étiquette <UL> pour afficher une image alternative pour les ::marker.
Remarque : list-style-image a priorité sur le list-style-type. Si l'image fournie par list-style-image n'existe pas ou ne peut pas afficher le list-style-type à utiliser.
<ul style="list-style-image: URL('../right-arrow-16.png')">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

4. CSS list-style-position

La propriété (property) CSS list-style-position est utilisé pour les étiquettes <UL>, <OL> afin de définir la position des ::marker.
Les valeurs possibles de CSS list-style-position sont :
  • outside
  • inside
  • initial
  • inherit
list-style-position
Description
outside
Des ::marker sont situé à l'extérieur des éléments (item) de la liste.
inside
Des ::marker sont situé à l'intérieur des éléments (item) de la liste.
list-style-position-example.html
<h3>list-style-position: outside (Default)</h3>
<ul style="list-style-position: outside">
    <li>
        Coffee - A brewed drink prepared from roasted coffee beans,
        which are the seeds of berries from the Coffea plant
    </li>
    <li>
        Tea - An aromatic beverage commonly prepared by pouring hot
        or boiling water over cured leaves of the Camellia sinensis,
        an evergreen shrub (bush) native to Asia
    </li>
</ul>

<h3>list-style-position: inside</h3>
<ul style="list-style-position: inside">
    <li>
        Coffee - A brewed drink prepared from roasted coffee beans,
        which are the seeds of berries from the Coffea plant
    </li>
    <li>
        Tea - An aromatic beverage commonly prepared by pouring hot
        or boiling water over cured leaves of the Camellia sinensis,
        an evergreen shrub (bush) native to Asia
    </li>
</ul>

5. CSS margin, padding

L'image ci-dessous montre la structure de la HTML List et vous pouvez utiliser CSSpour modifier son margin/padding.
Voici un exemple de margin/padding personnalisée de la HTML List :
margin-padding-example.css
ul {
  background: #3399ff;
  padding: 20px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}
ol {
  background: #ff9999;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
margin-padding-example.html
<!DOCTYPE html>
<html>
<head>
    <title>CSS List</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="margin-padding-example.css" />
</head>
<body>
    <h3>ul {padding: 20px;} ul li {margin: 5px}</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
    <h3>ol {padding: 20px;} ol li {margin-left: 35px; padding: 5px;}</h3>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol>
</body>
</html>

Tutoriels CSS

Show More

Articles les plus récents

Show More