Наверх

Оформление списков в CSS

Для списков, о создании которых средствами HTML рассказано здесь, предусмотрены следующие CSS-правила.

list-style-type

Задаёт маркер или нумерацию списков вместо атрибута type в HTML-коде. Значения свойств для маркированных списков могут быть:

  • disk — кружок, установлен по умолчанию.
  • circle — окружность.
  • square — квадрат.

Для нумерованных списков свойству обычно присваиваются значения:

  • decimal — арабские цифры, значение установлено по умолчанию.
  • lower-roman — маленькие римские цифры.
  • upper-roman — заглавные римские цифры.
  • lower-alpha — строчные латинские буквы.
  • upper-alpha — прописные латинские буквы.

Также для любого типа списка свойству list-style-type можно указать значение none, которое вообще уберёт маркер.

Для нумерованных списков доступны и другие значения, например, cjk-ideographic задаёт идеографическую нумерацию, Armenian — традиционную армянскую, а decimal-leading-zero установит нумерацию римскими цифрами, но с нулём в начале: 01, 02, 03… 09, однако на практике эти и подобные им значения используются крайне редко.

Пример ниже отображает три списка: нумерованный с традиционной армянской нумерацией, маркированный с окружностью и нумерованный, элементы в котором нумеруются идеографически.

Код:

<!DOCTYPE html>
<html>
 <head>
  <title>Списки CSS</title>
  <style>
    #spisok1 {
    list-style-type: armenian;
   }
    #spisok2{
    list-style-type: circle;
   }
    #spisok3{
    list-style-type: cjk-ideographic;
   }
  </style>
 </head>
 <body>   
    <ol id="spisok1">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
      <li>Третий пункт</li>
    </ol>
    <ul id="spisok2">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
      <li>Третий пункт</li>
    </ul>
    <ol id="spisok3">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
      <li>Третий пункт</li>
    </ol>
 </body>
</html>

Результат.

Варианты списков

Цвет маркеров совпадает с цветом текста в списке, указанного свойством color.

list-style-image

Позволяет установить в качестве маркера списка собственное изображение. Например, если в папке с содержащей список страницей находится файл marker.png, который вы и хотите использовать, то код оформления будет следующим:

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

list-style-position

Определяет положение маркера: либо он вынесен за границу элемента списка (list-style-position: outside), либо текст его обтекает (list-style-position: inside).

В примере ниже показана разница между этими значениями. В первом случае маркер внутри списка, во втором случае он вынесен за его пределы.

<!DOCTYPE html>
<html>
 <head>
  <title>list-style-position</title>
  <style>
    #spisok1 {
    list-style-position: inside;
   }
    #spisok2 {
    list-style-type: outside;
   }
  </style>
 </head>
 <body>   
    <ul id="spisok1">
      <li>Вы просто посмотрите, чем отличаются inside от outside.</li>
      <li>В случае с inside маркер прямо-таки вписывается в список, не выходя за его пределы и не мешая вёрстке. Текст обтекает его, маркер как бы внутри.</li>
      <li>Значение outside выносит маркер за пределы списка.</li>
    </ul>
    <ul id="spisok2">
      <li>Вы просто посмотрите, чем отличаются inside от outside.</li>
      <li>В случае с inside маркер прямо-таки вписывается в список, не выходя за его пределы и не мешая вёрстке. Текст обтекает его, маркер как бы внутри.</li>
      <li>Значение outside выносит маркер за пределы списка.</li>
    </ul>
 </body>
</html>

В результате создаётся такая страница:

Отличие inside и outside

list-style

Позволяет сократить код, записав все три перечисленных свойства одной строкой. Записываются правила через пробел:

ul { list-style: square inside; }

Рассмотрим пример страницы с тремя списками. Первый нумеруется цифрами в формате 01, 02, второй маркируется пользовательским рисунком (файл marker.png в папке со страницей), маркер третьего списка отключен.

HTML-код приведён ниже.

<!DOCTYPE html>
<html>
 <head>
  <title>list-style</title>
  <style>
    #spisok1 {
    list-style: decimal-leading-zero inside;
    font-weight: bold;
   }
    #spisok2{
    list-style: outside url("marker.png");
   }
    #spisok3{
    list-style-type: none;
    font: oblique small-caps 12pt/1.2 Arial, sans-serif;
   }
  </style>
 </head>
 <body>   
    <ol id="spisok1">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
      <li>Третий пункт</li>
    </ol>
    <ul id="spisok2">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
      <li>Третий пункт</li>
    </ul>
    <ol id="spisok3">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
      <li>Третий пункт</li>
    </ol>
 </body>
</html>

Браузер отобразит следующую страницу.

Варианты списков
You must have Javascript enabled to use this form.