Списки CSS

Unordered list:

  • Кофе
  • Чай
  • Coca Cola
  • Кофе
  • Чай
  • Coca Cola

Ordered list:

  1. Кофе
  2. Чай
  3. Coca Cola
  1. Кофе
  2. Чай
  3. Coca Cola

Списки HTML и свойства CSS

В HTML主要有 два типа списков:

  • Unordered list (ul) - элементы списка помечены маркерами
  • Ordered list (ol) - элементы списка помечены числами или буквами

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

  • Установка разных маркеров для ordered list
  • Установка разных маркеров для unordered list
  • Установка изображения в качестве маркера списка
  • Добавление фона для списка и элементов списка

Разные маркеры списков

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;
}

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

Комментарий:Некоторые значения используются для unordered list, а некоторые - для ordered list.

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

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

Пример

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

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

Позиционирование маркера списка

list-style-position Атрибут определяет положение маркера списка (символа списка).

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

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

"list-style-position: inside;" Это означает, что маркер будет внутри элемента списка. Поскольку он является частью элемента списка, он станет частью текста и будет推开 текст в начале:

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

Пример

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

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

Удаление défaut настройки

list-style-type:none Эти свойства также можно использовать для удаления маркеров/знаков. Обратите внимание, что список также имеет défaut的外边距 и внутренний отступ. Чтобы удалить это содержимое, добавьте в <ul> или <ol>: margin:0 и padding:0 :

Пример

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(Указать изображение в качестве маркера списка)

Если отсутствует одно из вышеуказанных свойств, то будет вставлен его défaut par défaut (если он есть).

Настройка цвета стиля списка

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

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

Пример

ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

Результат:

  1. Кофе
  2. Чай
  3. Coca Cola
  • Кофе
  • Чай
  • Coca Cola

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

Более примеров

Список с красной левой рамкой
Этот пример демонстрирует, как создать список с красной левой рамкой.
Список рамки полного экрана
Этот пример демонстрирует, как создать список с рамкой без маркеров.
Все различные маркеры списков
Этот пример демонстрирует все различные маркеры списков в CSS.

Все свойства списков CSS

Свойство Описание
list-style Краткое свойство. В одном заявлении устанавливает все свойства списка.
list-style-image Указывает изображение в качестве маркера списка.
list-style-position Определяет положение маркера списка (запятая).
list-style-type Определяет тип маркера списка.