Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Списки являются одной из основных форм представления контента на странице. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В HTML представлены три вида списков:

2 <ul><li>Маркированные;</li>

3 <li>Нумерованные;</li>

4 <li>Списки определений.</li>

5 </ul>В предложении выше виды списков были сгруппированы с помощью маркированного списка. Он имеет небольшой отступ слева и обозначается маркером у каждого отдельного пункта. Каждый вид списка имеет такие черты, что позволяет быстро определить их на странице.

6 Помимо этого все списки имеют контейнеры - теги, внутри которых располагается информация. Эти контейнеры помогают странице определить, в каком месте начинается список и где он заканчивается.

7 В своем представлении каждый элемент списка является блочным элементом. Это означает, что он будет занимать всю доступную ему ширину и каждый новый элемент будет начинаться с новой строки.

8 <h2>Маркированные списки</h2>

9 Маркированный список - популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала "важнее - неважно" или "шаг 1 - шаг 2". Вы просто перечисляете контент, который пользователь должен увидеть.

10 Как и другие списки, создание маркированного списка начинается с указания контейнера. В роли контейнера выступает тег <ul></ul> - сокращение от Unordered List. Каждый элемент вкладывается внутрь этого контейнера и вкладывается в тег <li></li> - сокращение от List Item. Так браузер отделяет списки друг от друга.

11 Представим список из начала урока в виде HTML разметки. Для этого указывается контейнер и три тега <li></li>. Внутри каждого из этих тегов помещается один пункт списка.

12 Списки в HTML возможно вкладывать друг в друга. Это позволяет глубже структурировать информацию. Для создания вложенного списка новый контейнер вкладывается внутрь тега <li></li>. Как вы увидите, списки можно комбинировать. Маркированные вкладывать внутрь нумерованных. Нумерованные внутрь маркированных. В общем виде вложенность может быть описана так:

13 <a>Codepen</a>

14 У вложенного списка изменился маркер. Это позволяет даже при отсутствии отступов отделить вложенные списки от основного уровня. CSS позволяет управлять маркерами и настраивать их внешний вид. В конце урока будет изучено свойство, которое позволяет стилизовать маркеры и даже использовать свои изображения для этого.

15 <h2>Нумерованные списки</h2>

16 Структура нумерованных списков повторяет маркированные списки. Семантическое отличие нумерованных списков заключается в последовательности. Такие списки идут строго по порядку и обозначают последовательность какой-либо информации.

17 Нумерованный список использует контейнер <ol></ol>, в качестве пунктов списков используется тег <li></li>. Тег <ol> - сокращение от Ordered List. Примером такого списка может служить список дел на день.

18 <a>Codepen</a>

19 Нумерованные списки возможно вкладывать друг в друга. Внутри нумерованных списков могут лежать маркированные.

20 <a>Codepen</a>

21 <h2>Списки определений</h2>

22 С точки зрения HTML списки определений являются самыми сложными для верстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида "термин - определение". Такие списки удобны при составлении словарей или глоссариев.

23 В качестве контейнера для списков определений используется тег <dl></dl> от английского Definition List, внутри которого не привычная схема <li></li>, а система из двух тегов:

24 <ol><li><dt></dt> - термин. От английского Definition Term;</li>

25 <li><dd></dd> - определение. От английского Definition Description.</li>

26 </ol>Каждая новая пара повторяет схему из двух тегов. Список из нескольких терминов размечается следующим образом:

27 <a>Codepen</a>

28 <h2>Стилизация списков</h2>

29 Основным способом стилизации списков является изменение маркера, который появляется в левой части пункта списка. В маркированных и нумерованных списках его можно изменить с помощью свойства list-style-type. Оно принимает множество различных значений. Все их вы можете увидеть с помощью веб-инспекторов. Для создания маркера в виде квадрата используется значение square.

30 Свойство list-style-type позволяет скрыть маркер списка. Это частая практика при создании меню через списки, где нет необходимости в выделении пунктов маркерами. Для скрытия маркера используется значение none.

31 Изменять маркер можно одним из двух способов:

32 <ul><li>Установка свойства на контейнер. В этом случае все элементы списка получат тот маркер, который был указан в свойстве.</li>

33 <li>Установка свойства на элемент списка. Маркер изменится только у одного пункта списка, другие получат маркер по умолчанию.</li>

34 </ul>В качестве примера установим квадратный маркер для маркированного списка, а у второго элемента удалим маркер.

35 <a>Codepen</a>

36 <h3>Картинка в качестве маркера списка</h3>

37 Помимо встроенных в браузер значений маркеров списка, CSS дает возможность устанавливать пользовательские маркеры в виде картинок. Это позволяет сделать уникальную стилизацию списков для проекта, как для всего, так и для отдельных списков.

38 Чтобы установить маркер в виде своего изображения, используется свойство list-style-image, значением которого является ссылка на изображение. Оно указывается внутри url(), например:

39 <a>Codepen</a>

40 Важно:вы не можете контролировать размеры такого маркера. Это значит, что изображение нужно подстраивать по размерам заранее. Для стилизации списков с возможностью изменения размеров маркера используются псевдоэлементы, которые будут изучены в следующих уроках.