CSS Списки

HTML-списки та CSS-властивості списків

В HTML є два основних типи списків:

• невпорядковані списки (<ul>) - елементи списку помічені маркерами
• впорядковані списки (<ol>) - елементи списку помічені цифрами або буквами

Властивості CSS списку дозволяють вам:

• Встановити різні маркери елементів списку для впорядкованих списків
• Встановити різні маркери елементів списку для невпорядкованих списків
• Встановити зображення як маркер елемента списку
• Додати кольори фону в списки та елементи списку

Різні маркери списку

Властивість list-style-type визначає тип маркера елемента списку.

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

Примітка: Деякі значення для невпорядкованих списків, а деякі для впорядкованих списків.

Зображення як маркер елемента списку

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

Розташуйте маркери елементів списку

Властивість list-style-position визначає положення маркерів елемента списку (марковані пункти).

"list-style-position: outside;" означає, що маркери будуть поза елементом списку. Початок кожного рядка елемента списку буде вирівняно по вертикалі. Це за замовчуванням:

• Кава - Зварений напій, приготовлений зі смажених кавових зерен...
• Чай
• Coca-cola

"list-style-position: inside;" означає, що маркери будуть всередині елемента списку. Оскільки він є частиною елемента списку, він буде частиною тексту та вставить текст на початку:

• Кава - Зварений напій, приготовлений зі смажених кавових зерен...
• Чай
• Coca-cola

Видалити налаштування за замовчуванням

Властивість list-style-type:none також може бути використано для видалення міток/маркерів. Зверніть увагу, що в списку також є поля за замовчуванням та відступи. Щоб видалити їх, додайте margin:0 та padding:0 до <ul> або <ol>:

Список - Скорочена властивість

Властивість list-style є скороченою властивістю. Використовується для встановлення всіх властивостей списку в одній об’яві:

При використанні скороченої властивості порядок значень властивостей:

• list-style-type (якщо вказано list-style-image, значення цієї властивості буде відображатися, якщо зображення з якоїсь причини не може бути відображено)
• list-style-position (визначає, чи повинні маркери елементів списку з’являтися всередині або поза потоком контенту)
• list-style-image (визначає зображення як маркер елемента списку)

Якщо одні зі значень властивості вище відсутнє, буде вставлено значення за замовчуванням для відсутньої властивості, якщо вона є.

Список стилів з кольорами

Ми також можемо стилізувати списки за допомогою кольорів, щоб вони вигляділи дещо цікавіше.

Все, що додано в тег <ol> або <ul> впливає на весь список, в той час як властивості, додані в тег <li>, впливають на окремі елементи списку:

Більше прикладів

Користувальницький список з червоною лівою межею
Цей приклад демонструє, як створити список з червоною лівою межею.

Обмежений список на всю ширину
Цей приклад демонструє, як створити обмежений список без маркерів.

Всі різні маркери елементів списку для списків
Цей приклад демонструє всі різні маркери елементів списку в CSS.

Всі властивості CSS Списку