Як створити списки стилів за допомогою CSS

Програмування

Підсумок списків HTML

У HTML є два основних типи списків - упорядкований та невпорядкований .

У впорядкованих списках (

    ), порядок елементів списку важливий. Елементи можуть відображатись у порядку за номером, римською цифрою, буквою або іншим типом маркера. Маркером за замовчуванням для впорядкованих списків є число (або decimal):

    У невпорядкованих списках (

      ), порядок елементів списку не має значення. Елементи відображаються у форматі маркерів. Маркером за замовчуванням для невпорядкованих списків є кругла крапка або disc.

      Кожен елемент списку в упорядкованому або невпорядкованому списку створюється за допомогою тегу.

      Стилі, специфічні для списку

      Є три загальних властивості специфічні для укладання і стайлінгу списків: list-style-type, list-style-positionі list-style-image. Існує також скорочена властивість, яка включає всі три.

      list-style-type

      Маркери (або маркери), які відображаються в упорядкованих та невпорядкованих списках, можуть бути стилізовані різними способами. Властивість CSS для стилювання типу маркера - list-style-type. Значенням за замовчуванням list-style-typeдля впорядкованого списку є decimal, тоді як замовчуванням для невпорядкованого списку є disc.

      Приклад упорядкованого списку:

      /* css */ ol { list-style-type: upper-roman; }

      Приклад невпорядкованого списку:

      /* css */ ul { list-style-type: square; }

      Немає прикладу маркера:

      /* css */ ul { list-style-type: none; }

      Прийняті значення для list-style-typeвластивості включають:

      Невпорядковано:

      • диск ( за замовчуванням )
      • коло
      • площа

      Замовлено:

      • десятковий ( за замовчуванням )
      • десятковий лідер-нуль
      • нижньоримська
      • верхньоримський
      • нижньогрецька
      • нижньолатинська
      • верхньолатинське
      • вірменський
      • грузинський
      • нижній альфа
      • верхній альфа

      Інший:

      • жоден

      Примітка: усі перераховані вище значення властивостей можна використовувати для стилізації як упорядкованих, так і невпорядкованих списків (наприклад: упорядкований список із squareмаркерами списку).

      list-style-position

      list-style-positionконтролює, чи відображатиметься маркер списку всередині або поза кожним елементом елемента списку ( ). Властивість приймає два значення outside(за замовчуванням) або inside.

      Розмістіть маркер outsideелемента елемента списку, і всі текстові рядки та підрядки кожного елемента списку будуть вирівняні вертикально:

      /* css */ ul { list-style-position: outside; /* default */ }

      Розмістіть маркер inside, і перший текстовий рядок кожного елемента списку буде з відступом, щоб звільнити місце для маркера. Будь-які підрядки того самого елемента списку будуть вирівнюватися з маркером, а не з першим текстовим рядком:

      /* css */ ul { list-style-position: inside; }

      list-style-image

      list-style-imageВластивість приймає URL зображення замість списку маркерів. Значенням за замовчуванням для цієї властивості є none.

      /* css */ ul { list-style-image: url(//url-to-image); }

      list-style Shorthand

      list-style is a shorthand property for the three style properties listed above. The order of values list-style accepts is list-style-type, list-style-position, and list-style-image. If any value is omitted, the default value for that property will be used.

      Example:

      /* css */ ul { list-style: circle inside none; }

      More List-Specific Styling

      Ordered list tags also accept attributes that control the flow, count, or specific marker values of its list items. These include the start, reversed, and value attributes. See the MDN resources listed below for further details.

      General Styling

      List content can be styled just like other p or div elements. color, font-family, margin, padding, or border are just a few examples of properties that can be added to either the ul, ol, or li elements.

      Note that any styles added to the ul or ol element will affect the entire list. Styles added directly to the li elements will affect the individual list items. In the example below, the border and background-color properties are styled differently between the list and list item elements:

      /* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }

      List Spacing

      You may notice extra spacing in front of the list items when list-style-type is set to none. Setting padding to 0 (or whatever spacing is preferred) on the list element will override this default padding.

      /* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }

      Sources:

      The links below were referenced in compiling information found in this article. Please visit them for further details about this topic.

      More Information:

      MDN - Styling Lists

      W3Schools - CSS Lists

      CSS Tricks - list-style