• CSS Основы

• Что Такое CSS ?
• Синтаксис CSS
• Селекторы id и class
• Добавление Стилей в HTML Документ

• CSS Оформление

• CSS Фон
• CSS Текст
• Шрифты в CSS
• CSS Ссылки
• CSS Списки
• CSS Таблицы

• CSS Блоки

• CSS Блочная Модель
• CSS Границы
• CSS Контуры
• CSS Поля
• CSS Отступы

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

• Сгруппированные и Вложенные Селекторы
• CSS Размеры
• Отображение и Видимость Элементов
• CSS Позиционирование
• Плавающие Элементы
• CSS Выравнивание
• Псевдо Классы в CSS
• Псевдо Элементы в CSS
• Панель Навигации
• Галерея Изображений
• Прозрачность Изображений в CSS
• Спрайты Изображений
• CSS Медиа Типы
• Атрибутивные
  Селекторы
• Заключение

• CSS Примеры

• CSS Примеры

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

• CSS Справочник
• CSS Единицы Измерения
• CSS Значения Цветов
• CSS Названия Цветов
• CSS HEX Значения Цветов

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

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

Список

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

• неупорядоченные списки - пункты списка помечаются маркерами
• упорядоченные списки - пункты списка помечаются числами или буквами

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

Различные Маркеры Пунктов Списка

Тип маркера для пункта списка указывается с помощью свойства list-style-type:

Некоторые значения свойства list-style-type для неупорядоченных списков, и некоторые - для упорядоченных.

Изображение в качестве Маркера Пункта Списка

Чтобы указать изображение в качестве маркера пункта списка, используйте свойство list-style-image:

Пример выше не отображается одинаково вовсех браузерах. IE и Opera будут отображать маркер-изображение чуть выше, чем Firefox, Chrome, и Safari.

Если вы хотите, чтобы изображение-маркер размещался одинаково во всех браузерах, кросс-браузерное решение объяснено ниже.

Кросс-браузерное Решение

Следующий пример отрисовывает изображение-маркер одинаково во всех браузерах:

Объяснение примера:

• Для ul:
  • Установка list-style-type в none - чтобы удалить маркер пункта списка
  • Установка свойств padding и margin в 0px (для кросс-браузерной совместимости)
• Для li:
  • Установка адреса URL для изображения, и значения no-repeat (чтобы изображение выводилось только один раз)
  • Позиционирование изображения в желаемом месте (влево на 0px и вниз на 5px)
  • Установка левого отступа для текста в списке

Список - Стенографическое (Сокращенное) свойство

Также можно указать все свойства списка в одном - одиночном свойстве. Оно называется стенографическим (или сокращенным) свойством.

Стенографическое свойство для списков - это свойство list-style:

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

• list-style-type
• list-style-position (объяснение смотрите ниже - в таблице свойств CSS)
• list-style-image

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

Еще примеры

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

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