Список-стиль - CSS-хитрощі

list-styleВластивість є властивістю стенографії , що встановлює значення для трьох різних списків пов'язаних властивостей в одній декларації:

ul ( list-style: || || ; )

Ось приклад синтаксису:

ul ( list-style: square outside none; )

Що було б таким самим, як наступна довільна версія:

ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )

Якщо скоротити будь-які значення, вони повернуться до початкового стану.

Значення для list-style-type

list-style-typeВластивість визначає тип списку, встановивши зміст кожного маркера, або кулі, в списку. Допустимі значення ключових слів для list-style-typeвключають:

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none

MDN має більш повний перелік. Значення, не пов’язані з ключовими словами, були введені в CSS3, і вони починають бачити певну підтримку, наприклад:

ul ( list-style-type: "→"; )

Наступна демонстрація включає групу невпорядкованих списків для демонстрації кожного значення ключового слова:

list-style-typeВластивість застосовується до всіх списками, і до будь-якого елементу , який встановлюється в display: list-item.

Колір маркера списку буде таким, яким буде обчислений колір елемента (задається через colorвластивість).

Значення для list-style-position

В list-style-positionвизначає властивість , де помістити маркер списку, і він приймає одне з двох значень: insideабо за її межами. Вони продемонстровані нижче із paddingвилученими зі списків та доданими лівою червоною рамкою:

Значення для list-style-image

list-style-imageВластивість визначає , чи є список маркер встановлено з зображенням, і приймає положення «Ні» або URL , який вказує на зображення:

ul ( list-style-image: url(images/bullet.png.webp); )

Більше демонстрацій

Підтримка браузера

Chrome	Сафарі	Firefox	Опера	IE	Android	iOS
Працює	Працює	Працює	Працює	Працює	Працює	Працює

IE6 / 7 не підтримує всіх значень ключових слів для, list-style-typeа також має помилку, коли плаваючі елементи списку не відображають маркер списку. Це вирішується за допомогою фонового зображення (замість list-style-image) у елементах списку.