CSS Списки

Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих

Неупорядоченные списки:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Упорядоченные списки:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

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

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

Свойства 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");
}
Попробуйте сами »

При использовании сокращенного свойства порядок значений свойств:

Если одно из значений свойства выше отсутствует, будет вставлено значение по умолчанию для отсутствующего свойства, если оно есть.

Список стилей с цветами

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

Все, что добавлено в тег <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. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola
Попробуйте сами »

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

Пользовательский список с красной левой границей
Этот пример демонстрирует, как создать список с красной левой границей.

Пример

Full-width bordered list
Этот пример демонстрирует, как создать ограниченный список без маркеров.

Пример

Все различные маркеры элементов списка для списков
Этот пример демонстрирует все различные маркеры элементов списка в CSS.

Пример

Проверьте себя с помощью упражнений!

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 »

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

Свойство Описание
list-style Устанавливает все свойства для списка в одном объявлении
list-style-image Определяет изображение как маркер элемента списка
list-style-position Определяет положение маркеров элемента списка (точки маркеров)
list-style-type Определяет тип маркера элемента списка
Сайт W3Schools на русском языке уроки W3Schols для начинающих по CSS онлайн Курсы CSS3 от W3schools для детей и взрослых основы CSS на сайте W3schools - каскадные таблицы стилей курсы CSS3 бесплатно от А до Я стилизация списков с помощью css неупорядоченные и упорядоченные списки в css оформление списков на веб-странице как создать список на HTML-странице создание списков на веб-страницах