Оформление списков: List-style

css

Содержание:



Свойство LIST-STYLE

Свойство Значения Пр* Нc*
list-style [ list-style-image; list-style-position; list-style-type ], inherit * +
list-style-type disk, circle, square, decimal, decimal-leading-zero, lowel-roman, upper-roman, lowel-latin, upper-latin, armenian, georgian, none, inherit * +
list-style-position inside, outside, inherit * +
list-style-image URL, none, inherit * +

Свойство List-style — сокращённая форма записи свойств, которые задают все стили маркеров для элементов списка. Эти свойства применяются, как к нумерованным, так и маркированным спискам — их нужно рассматривать по отдельности. Сокращённая форма записи может не включать какое-либо отдельное свойство, но порядок их записи должен соблюдаться: тип маркера — его позиция — путь к изображению.

Область применения*: элементы списков и любые другие, для которых значением свойства Display является list-item.

List-style-type

Свойство устанавливает тип маркера для каждого элемента списка. Типы маркеров различаются для маркированных и нумерованных списков.

Значения:

disk — маркер-точка.
circle — маркер-кружок.
square — маркер-квадратик.
decimal — арабские числа: 1, 2, 3 ….
decimal-leading-zero — арабские числа, начиная с нуля: 01, 02, 03 … 09.
lowel-roman — римская нумерация в нижнем регистре.
upper-roman — римская нумерация в верхнем регистре.
lowel-latin — строчные латинские буквы: a, b, c ….
upper-latin — заглавные латинские буквы: A, B, C ….
armenian — армянская нумерация.
georgian — грузинская нумерация.
none — отмена.
inherit — наследование от родительского элемента.

Пример:

<style type="text/css">
.element1 { list-style-type: upper-latin; }
.element2 { list-style-type: decimal; }
</style>

В примере используется два разных значения свойства List-style-type:

Свойство List-style-type

List-style-position

Свойство определяет расположение маркера элемента. Либо маркер находится внутри элемента, либо за его пределами.

Значения:

inside — маркер располагается внутри элемента списка.
outside — маркер вынесен за пределы текстового блока.
inherit — наследование от родительского элемента.

Пример:

<style type="text/css">
.element1 { list-style-position: inside; }
.element2 { list-style-position: outside; }
</style>

В примере наглядно видна разница между значениями inside и outside свойства List-style-position:

Свойство List-style-position

List-style-image

Свойство задает путь к картинке, которая будет служить маркером элемента нумерованного или маркированного списка. Расположением картинки-маркера можно управлять при помощи свойства List-style-position.

Значения:

URL — путь к графическому файлу.
none — отменяет картинку-маркер, например, для родительского элемента.
inherit — наследование от родительского элемента.

Пример:

ul {list-style-image: url(papka/find.png); list-style-position:inside;}

В примере мы использовали в качестве маркера картинку небольшого размера, что наглядно демонстрирует возможности свойства List-style-image:

Свойство List-style-image

Содержание: