Внимание! В материалах сайта используются несколько ссылок на посторонние ресурсы. Но из-за сегодняшней ситуации в мире, некоторые сайты по этим ссылкам могут быть заблокированы. Чтобы исключить блокировку, рекомендуем установить программное обеспечение VPN.

Что такое маркированные списки?

Маркированный список - это HTML список, пункты которого отмечены каким-либо символом, обычно символом bullet (пуля).

 

 

 

 


Простой пример маркированного списка:

 

Самый простой и наглядный пример маркированного списка - это содержание книги или меню сайта с категориями и подкатегориями

 

В HTML для создания маркированного списка обычно используется специальный тег <ul>. И давайте сразу рассмотрим простой пример:

 

 

В HTML-тег <ul> мы поместили HTML-тег <li>. Каждый новый пункт маркированного списка - это новый тег <li>.

 


Пример маркированного списка с вложенностью:

 

Маркированные списки могут быть многоуровневыми. Посмотрите пример ниже:

 

 

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

 


Примеры маркированных списков для горизонтального и вертикального меню сайта:

 

Очень часто маркированные списки <ul><li> используются для создания навигации (меню сайта), ведь такие списки выглядят понятно и легко читаются, а также стилизуются с помощью CSS-стилей.

 

 


Пример стилизации маркированного списка:

 

Для стилизации маркированного списка <ul><li> вы можете использовать CSS-селекторы, псевдоклассы и псевдоэлементы.

А стилизовать маркированный список вы можете с помощью CSS-свойства list-style-type, если по каким-то причинам вам не подходит стандартный значок слева bullet (пуля).

 

 

Если вы еще не знаете, что такое CSS-селекторы, обязательно прочитайте об этом статью.

 


Нумерованные HTML-списки

 

Что такое нумерованные списки?

 

Единственное отличие нумерованных списков от маркированного списка заключается в том, что каждый пункт имеет номер от 1 до бесконечности.

 


Простой пример нумерованного списка:

 

Для того чтобы создать нумерованный список, вам необходимо в HTML-тег <ol> поместить HTML-теги <li>, как в примере ниже:

 

 


Пример нумерованного списка с бесконечным вложением:

 

И конечно ваш нумерованный список может иметь бесконечную вложенность. Посмотрите пример нумерованного списка с вложенностью ниже:

 

 


Пример смешанных нумерованных и маркированных списков:

 

И даже мы можем смешивать нумерованные и маркированные списки как в примере ниже:

 

 


Примеры атрибутов для нумерованных списков: reversed, start и type

 

Для нумерованного списка можно задавать различные атрибуты, такие как reversed, start и type.

 

Атрибут reversed для нумерованного списка позволяет сортировать цифры в обратном порядке.

Атрибут start для нумерованного списка позволяет начинать список к примеру не с 1, как это задано по умолчанию, а с любой другой цифры.

А с помощью атрибута type вы можете задавать типы, которые будут заданы вместо арабских цифр. Например, вместо арабских цифр вы можете задавать буквы алфавита (a, b, c и т.д.) или римские цифры и буквы в разных регистрах.

 

Посмотрите на примеры атрибутов нумерованного HTML-списка ниже:

 

 


Примеры list-style-type для нумерованных списков

 

И вместо атрибутов вы конечно же можете использовать специальные CSS-свойства для стилизации нумерованных списков, такие как list-style-type или короткую запись list-style:

 


 

Заключение

Маркированные списки и нумерованные списки могут быть очень полезными при создании верстки веб-сайтов.

А если вы интересуетесь веб-разработкой, версткой сайтов, программированием, подпишитесь на YouTube канал FructCode, где периодически публикуются материалы на эти темы.

 

Источник: Fructcode.com, Codepen.io

 

 

   
Добавить комментарий