Урок 114 із 239
48%
Маркери списків ul у вигляді кружків в CSS
Вивчаємо значення circle властивості list-style-type для створення порожніх круглих маркерів у списках ul.
Маркери списків ul у вигляді кружків в CSS
За допомогою властивості list-style-type можна змінювати вигляд маркерів ненумерованого списку ul.
Значення circle створює маркери у вигляді порожніх кружків.
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>ul {
list-style-type: circle;
} ❗ Важливо:
Значення circle відрізняється від disc тим, що маркер не заповнений кольором всередині.
- disc — заповнений круглий маркер.
- circle — порожній круглий маркер.
- square — квадратний маркер.
📌 Завдання:
- №1. Створіть список ul із назвами фруктів.
- №2. Встановіть для списку list-style-type: circle.
- №3. Порівняйте результат зі значеннями disc та square.
💡 Показати підказку
Спробуйте змінювати значення list-style-type та спостерігайте, як змінюються маркери списку.
✅ Показати відповідь
ul {
list-style-type: circle;
}