Робота з маркерами списків ul на CSS

Ми з вами ще на початку книги розбиралися зі списками ul і ви напевно пам'ятаєте про те, що список ul має маркери у вигляді точок. Проте, вид цих маркерів можна змінити чи навіть прибрати їх зовсім. Робиться це за допомогою властивості list-style-type. Давайте подивимося, які значення воно може приймати для списку ul.

Значення square

Значення square дозволяє зробити маркери у вигляді квадратиків:

<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: square; }

:

Значення circle

Значення 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; }

:

Значення disc

Значення disc робить маркери у вигляді зафарбованих кружків (це значення за замовчуванням):

<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: disc; }

:

Значення none

Значення none зовсім прибирає маркери:

<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: none; }

:

Практичні задачі

Повторіть сторінку за цим зразком:

Повторіть сторінку за цим зразком:

Зробіть список без маркерів, як у цьому зразку: