Стили списков

HTML списки и CSS свойства для их стилизации

В HTML существует два основных типа списков:

• неупорядоченные списки (<ul>) - элементы списка маркируются символьным маркером
• упорядоченные списки (<ol>) - элементы списка маркируются цифрами или буквами

CSS свойства для списков позволяют:

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

Различные маркеры для элементов списка

Свойство list-style-type определяет тип маркера элементов списка.

В следующем примере показаны некоторые возможные маркеры элементов списка:

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

Стоит сказать, что часть значений, использованных в предыдущем примере, относится к неупорядоченным спискам, а часть к упорядоченным.

Изображение как маркер элементов списка

Свойство list-style-image определяет изображение в качестве маркера элементов списка:

ul {
  list-style-image: url('sqpurple.gif');
}

Позиция маркеров элементов списка

Свойство list-style-position определяет положение маркеров элементов списка (маркерных точек).

Значение list-style-position: outside; означает, что маркерные точки будут располагаться за пределами элемента списка. Начало каждой строки элемента списка будет выравниваться по вертикали. Это значение по умолчанию:

• Кофе - Сваренный напиток, приготовленный из обжаренных кофейных зерен...
• Чай
• Кока Кола

Значение list-style-position: inside; означает, что маркерные точки будут располагаться внутри элемента списка. Являясь частью элемента списка, маркерные точки становятся частью текста и сдвигают текст в начале строки:

• Кофе - Сваренный напиток, приготовленный из обжаренных кофейных зерен...
• Чай
• Кока Кола

Пример:

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

Сброс значений по умолчанию

Значение list-style-type:none; позволяет убрать маркеры списка. Также, необходимо помнить, что у списков есть свои значения отступов и полей по умолчанию. Чтобы сбросить и их значения, следует добавить margin: 0; и padding: 0; к элементу <ul> или <ol>:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Короткая форма записи

Свойство list-style является короткой формой записи. Она используется для определения всех свойств стилей списков в одной декларации:

ul {
  list-style: square inside url("sqpurple.gif");
}

В короткой форме записи используется следующий порядок значений:

• list-style-type (это значение будет использоваться, если list-style-image определено, но изображение, по каким-либо причинам не может быть отображено)
• list-style-position
• list-style-image

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

Цветовое оформление списков

Чтобы сделать внешний вид списков выразительнее, можно оформить их при помощи цветов.

Любое CSS свойство, добавленное к тегу <ol> или <ul>, влияет на весь список, а свойства, добавленное к тегу <li>, влияют на конкретный элемент списка:

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}

Результат:

Все CSS свойства определения стиля списка