Списки CSS

Свойства списка CSS позволяют вам размещать, изменять маркеры элементов списка или использовать изображения в качестве маркеров.

Списки CSS

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

Так как списки так разнообразны, это делает их очень важными, и, следовательно, недостаточное разнообразие стилей списков в CSS действительно большая жалоба.

Тип списка

Чтобы повлиять на стиль списка, simplest (и наиболее полным) способом является изменение типа маркера.

Например, в unordered list маркер (маркер) элемента списка появляется справа от каждого элемента списка. В ordered list маркер может быть буквой, числом или символом из другой системы счисления.

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

ul {list-style-type: square}

В приведенном выше заявлении маркер списка в unordered list установлен в виде квадрата.

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

Иногда обычные маркеры недостаточны. Может быть, вы хотите использовать для каждого маркера изображение, что можно сделать с помощью: list-style-image достигается свойством:

ul li {list-style-image: url(xxx.gif)}

Достаточно просто использовать значение url() для использования изображения в качестве маркера.

Положение маркера списка

CSS2.1 может определить, появляется ли маркер вне или внутри содержимого списка. Это достигается с помощью: list-style-position Готово.

Краткий список стилей

Для упрощения можно объединить три перечисленных стиля списка в удобный атрибут:list-styleнапример, так:

li {list-style: url(example.gif) square inside}

Значения list-style могут быть указаны в любом порядке, и их можно игнорировать. Достаточно указать одно значение, и другие будут заполнены по умолчанию.

Пример списка CSS:

Маркировка элементов списка различных типов в неупорядоченном списке
Этот пример демонстрирует все различные типы маркеров списка в CSS.
Маркировка элементов списка различных типов в упорядоченном списке
Этот пример демонстрирует все различные типы маркеров списка в CSS.
Все типы стилей списка
Этот пример демонстрирует все различные типы маркеров списка в CSS.
Использовать изображение в качестве маркера списка
Этот пример демонстрирует, как использовать изображение в качестве маркера списка.
Разместить маркер списка
Этот пример демонстрирует, где放置ить маркер списка.
Определить все свойства списка в одном заявлении
Этот пример демонстрирует, как установить все свойства списка в кратком атрибуте.

Свойства списка CSS(list)

Свойства Описание
list-style Краткий атрибут. Используется для установки всех свойств списка в одном заявлении.
list-style-image Установить изображение в качестве маркера списка.
list-style-position Установить положение маркера списка в списке.
list-style-type Установить тип маркера списка.
marker-offset