Стилизация списков в CSS

В этой главе:

  • Изменение и удаление маркеров

  • Замена маркеров картинками

  • Удаление левого отступа

Возможности свойств CSS для стилизации списков

  • Изменение вида стандартного маркера для нумерованных списков
  • Установка типа маркера для маркированных списков
  • Установка изображения вместо маркера для элементов списка

С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные. По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.

Изменение и удаление маркеров

Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type, в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.

Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:

CSS Свойство:
list-style-type:
Результат:
  1. Кликните на значение свойства list-style-type
  2. Наблюдайте за сменой маркеров
  3. Используйте для своих списков наиболее подходящие маркеры
CSS Код:
ol#myList {
list-style-type: decimal;
}
 
Кликните на любое значение свойства, чтобы увидеть результат
 

Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      .class1 { list-style-type: circle; }
      .class2 { list-style-type: disc; }
      .class3 { list-style-type: square; }
    </style>
  </head>
 
  <body>
    <ul class="class1">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class2">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class3">
      <li>Кофе</li><li>Чай</li>
    </ul>
  </body>
</html>

С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      ul { list-style-type: none; }
      ol { list-style-type: none; }
    </style>
  </head>
 
  <body>
    <ul>
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ol>
      <li>Кофе</li><li>Чай</li>
    </ol>
  </body>
</html>

Замена маркеров картинками

Если вам не подходит ни один из предлагаемых по умолчанию маркеров, то CSS предоставляет возможность заменить их любой картинкой, в этом вам поможет свойство list-style-image, в значении которого нужно прописать путь к выбранному изображению.

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

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      ul { list-style-image: url('sqpurple.gif'); }
      ol { list-style-image: url('donald.gif'); }
    </style>
  </head>
 
  <body>
    <ul>
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ol>
      <li>Кофе</li><li>Чай</li>
    </ol>
  </body>
</html>

Удаление левого отступа

При удалении маркеров у пунктов списка можно также удалить или уменьшить размер левого отступа, устанавливаемый браузером по умолчанию. Для полного удаления отступа нужно будет воспользоваться свойством padding-left, которое позволяет регулировать внутренний отступ:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      ul {
        list-style-type: none;
        padding-left: 0;       
      }
      ol { padding-left: 0; }
    </style>
  </head>
 
  <body>
    <ul>
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ol>
      <li>Кофе</li><li>Чай</li>
    </ol>
  </body>
</html>

В примере мы полностью убрали отступ с левой стороны, поэтому пункты списка теперь вплотную прилегают к краю окна браузера. И как видно из примера маркированный список отображается именно так, как и было задумано, но в нумерованном списке пропали маркеры. Причина кроется в самих маркерах - по умолчанию маркеры не являются частью содержимого пунктов списка, поэтому если убрать левой отступ они не сдвигаются вместе с содержимым элементов <li>, а просто скрываются за краем окна браузера.

Свойство list-style-position указывает, должен ли маркер располагаться внутри или снаружи пунктов списка. Данное свойство может принимать два значения:

  • outside - маркер располагается слева от содержимого (является значением по умолчанию)

  • inside - маркер располагается внутри пункта списка вместе с содержимым

Теперь можно переписать предыдущий пример так, чтоб отступ с левой стороны был убран, но маркеры при этом не уезжали за край браузера:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      li { border: 1px solid red; }
      .class1 { list-style-position: outside; }
      .class2 { list-style-position: inside; }
      .class3 {
        list-style-position: inside;
        padding-left: 0;
      }
    </style>
  </head>
 
  <body>
    <ul class="class1">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class2">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class3">
      <li>Кофе</li><li>Чай</li>
    </ul>
  </body>
</html>

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