Властивість list style (type, image, position) - правила css для настройки зовнішнього вигляду списку на

Взагалі списки серед блокових елементів стоять особняком. Це пов'язано з тим, що вони включають в себе маркери і нумерацію, які розставляє сам браузер.

Властивість List style - оформлення списку на html сторінці

У мові CSS існує три властивості починаються з list-style, які відповідають за оформлення маркованих і нумерованих списків. Плюс ще є збірне правило list-style, що дозволяє скоротити кількість коду.

Всі ці властивості допустимо використовувати як для html елементів li, так і для елементів ul і ol. Єдина відмінність, якщо правила прописати для конкретного значення списку li, то воно тільки для нього і таким чином, застосовується. А якщо ці ж css правила прописати для контейнерів ul або ul, то вони застосуються для всіх елементів li укладених в цих контейнерах.

Почнемо з атрибута list-style-type. який задає вид маркерів або нумерації у пунктів списку:

Як видно, властивість list-style-type має багато доступних значень, які можуть задавати як вид маркера, так і різні види нумерації.

• disc - маркер у вигляді чорного кружка (значення за замовчуванням для маркованих списків).
• circle - маркер в вигляді не закрашеного гуртка.
• square - маркер у вигляді квадратика. Він може бути світлим або темним, в залежності від браузера.
• decimal - нумерація арабськими цифрами (значення за замовчуванням для нумерованих списків).
• decimal-leading-zero - нумерація арабськими цифрами від 01 до 99 з початковим нулем.
• lower-roman - нумерація маленькими римськими цифрами.
• upper-roman - нумерація великими римськими цифрами.
• lower-greek - нумерація маленькими грецькими буквами.
• lower-alpha і lower-latin - нумерація маленькими латинськими буквами.
• upper-alpha і upper-latin - нумерація великими латинськими літерами.
• armenian - нумерація традиційними вірменськими цифрами.
• georgian - нумерація традиційними грузинськими цифрами.
• none - маркерація і нумерація здійснюватися взагалі не буде.

Так приблизно будуть виглядати елементи списку в браузері з різними значеннями list-style-type:

При використанні CSS стилів байдуже якої елемент (OL або UL) використовується для створення списку. OL і UL відрізняються тільки поведінкою за замовчуванням і за допомогою властивості list-style-type ви можете легко перетворити один вид списку в інший.

Атрибут стилю list-style-image дозволяє задавати в якості маркера пунктів списку графічне зображення. При використанні атрибуту list-style-image значення атрибута list-style-type ігнорується:

Значення none прибирає маркер зображення і встановлює звичайний, не графічний. Це поведінка за умовчанням.

Приклад списку з картинкою в якості маркера:

А ось як це виглядає:

• перший пункт списку;
• другий пункт списку;
• третій пункт списку.

Зрозуміло, що при виборі картинки в якості маркера краще підбирати невелике зображення.

І остання властивість CSS із серії list-style - list-style-position, яке дозволяє визначити положення маркера або нумерації в пункті списку. Як значення може бути два варіанти:

У разі значення inside маркер або нумерація поміщається як би всередині списку, а в разі outside за межами елементів li. За замовчуванням використовується значення outside і маркер виноситься за межі.

Приклад списку з різними значеннями list-style-position:

• в першому пункті все за замовчуванням;
• у другому пункті list-style-position встановлений в inside. В цьому випадку, зверніть увагу, другий рядок розміщується на одному рівні з маркером;
• в цьому пункті list-style-position дорівнює outside.

Збірне CSS правило list-style

Наступне властивість CSS list-style є збірним для оформлення списків. Воно дозволяє записати всі три розглянутих вище CSS правила в одне єдине. Порядок вказівки значень в ньому може бути будь-яким і параметри, які ви не поставите в list-style браузер візьме прийняті за замовчуванням.

Розділяти значення в збірному правилі list-style слід пробілами:

list-style: list-style-type list-style-image list-style-position;

Реальне CSS правило для оформлення списків може виглядати приблизно ось так:

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

Як вже говорилося вище, значення можна вказувати в будь-якому порядку і будь-якій кількості. Так, наприклад, для того щоб прибрати маркери зі списку меню досить записи:

Теж саме можна зробити використовуючи властивість list-style-type: