Властивість list-style оформлення списків
Властивість 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 - успадкування від батьківського елемента.
У прикладі використовується два різних значення властивості List-style-type:
List-style-position
Властивість визначає розташування маркера елемента. Або маркер знаходиться всередині елемента, або за його межами.
• inside - маркер розташовується всередині елемента списку.
• outside - маркер винесений за межі текстового блоку.
• inherit - успадкування від батьківського елемента.
У прикладі наочно видно різницю між значеннями inside і outside властивості List-style-position:
List-style-image
Властивість задає шлях до картинки, яка буде служити маркером елемента нумерованого або маркірованого списку. Розташуванням картинки-маркера можна управляти за допомогою властивості List-style-position.
• URL - шлях до графічного файлу.
• none - скасовує картинку-маркер, наприклад, для батьківського елемента.
• inherit - успадкування від батьківського елемента.
У прикладі ми використовували в якості маркера картинку невеликого розміру, що наочно демонструє можливості властивості List-style-image:
