ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Списки


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

  • 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 есть два основных типа списков:

  • неупорядоченные списки (<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;" означает, что маркеры будут вне элемента списка. Начало каждой строки элемента списка будет выровнено по вертикали. Это по умолчанию:

  • Coffee - Сваренный напиток, приготовленный из жареных кофейных зерен...
  • Tea
  • Coca-cola

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

  • Coffee - Сваренный напиток, приготовленный из жареных кофейных зерен...
  • Tea
  • Coca-cola

Пример

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 (указывает изображение как маркер элемента списка)

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


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

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

Все, что добавлено в тег <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
Попробуйте сами »

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

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

Ограниченный список на всю ширину
Этот пример демонстрирует, как создать ограниченный список без маркеров.

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


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


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

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