Списки CSS
- Предыдущая страница Шрифты CSS
- Следующая страница Обзор модели блока 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 |
- Предыдущая страница Шрифты CSS
- Следующая страница Обзор модели блока CSS