ol.with-parentheses {
	counter-reset: myCounter;
	list-style: none;
}

counter-reset: myCounter;

сбрасываем счётчик.

list-style: none;

скрываем стандартные номера / маркеры.

ol.with-parentheses > li::before {
	content: counter( myCounter ) ') ';
	counter-increment: myCounter;
}

content: counter( myCounter ) ') ';

добавляем перед каждым пунктом списка номер и круглую скобку с пробелом: ‘) ‘.

counter-increment: myCounter;

увеличиваем счётчик на единицу.

myCounter — это переменная счётчика, которой можно определить любое другое имя, состоящее из английских букв (a-z), арабских цифр (0-9) и знаков подчёркивания (_), причём в качестве первого символа переменной рекомендуется использовать букву.

Сквозная нумерация

Для сброса нумерации нужно просто использовать класс start ещё раз.

Неактуальный способ

Ниже расположен код, в котором не используются counter-подобные свойства.

Единственное отличие данного списка от вышеприведённых — это наличие точки (.) после номера пункта.

Добавив отступ влево (margin-left: -10px;) больше 10 пикселей (например, 14), можно добиться слияния точки с круглой скобкой:

31.07.2014

Полное руководство по спискам в HTML и CSS

Перевод статьи «A complete guide about lists in HTML and CSS».

Что такое списки

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

Списки в HTML

Если вы хотите представлять на своих веб-страницах какие-то данные, являющиеся наборами чего-либо, список является прекрасным вариантом оформления. Благодаря спискам пользователи легче воспринимают информацию.

Виды списков

В HTML списки бывают трех видов:

1. Упорядоченные списки.
2. Неупорядоченные списки.
3. Списки определений.

Что такое упорядоченный список?

Упорядоченный список это набор элементов, представленных в определенном порядке. Форма упорядоченного списка лучше всего подходит для представления наборов данных, где порядок элементов имеет значение.

Примерами могут послужить кулинарные рецепты, где действия следует выполнять в определенном порядке, или списки инструкций простой программы.

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

Для создания упорядоченных списков используется тег <ol> (ordered list – «упорядоченный список»), а для каждого из его элементов – тег <li> (list – «список»).

HTML-код:

[html]<ol>
<li>Налейте воду в кастрюлю.</li>
<li>Добавьте сахар, чайные листья и специи.</li>
<li>Доведите до кипения и подержите на медленном огне около минуты.</li>
<li>Добавьте молоко.</li>
<li>Доведите до кипения и подержите на медленном огне 3-5 минут.</li>
<li>Процедите чай и перелейте его в чайник.</li>
</ol>
[/html]

Результат:

1. Налейте воду в кастрюлю.
2. Добавьте сахар, чайные листья и специи.
3. Доведите до кипения и подержите на медленном огне около минуты.
4. Добавьте молоко.
5. Доведите до кипения и подержите на медленном огне 3-5 минут.
6. Процедите чай и перелейте его в чайник.

Значения по умолчанию:

По умолчанию пункты списка обозначаются арабскими цифрами.

Это можно изменить, используя разные значения CSS-свойства list-style-type.

list-style-type: upper-alpha

See the Pen ordered-list-upper-alpha by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: upper-roman

See the Pen ordered-list-upper-roman by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: lower-alpha

See the Pen ordered-list-lower-alpha by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: lower-roman

See the Pen ordered-list-lower-roman by Amrish Kushwaha (@isamrish) on CodePen.

Это самые часто используемые значения свойства list-style-type. Но есть множество других значений, которые мы рассмотрим дальше.

Что такое неупорядоченный список?

Неупорядоченный список это список с элементами, которые могут быть представлены в произвольном порядке. Такие списки также называют маркированными.

Примеры таких списков – списки покупок, списки запланированных дел.

Для создания упорядоченных списков используется тег <ul> (unordered list), а для каждого из его элементов – тег <li> (как и в упорядоченном списке).

HTML-код:

[html]<ul>
<li>одежда</li>
<li>книги</li>
<li>ручки</li>
<li>ноутбук</li>
<li>сумка</li>
</ul>
[/html]

Результат:

• одежда
• книги
• ручки
• ноутбук
• сумка

Значения по умолчанию:

По умолчанию маркеры элементов представлены в виде кружочков. Это можно изменить, используя все то же CSS-свойство list-style-type.

list-style-type: circle

See the Pen unordered-list-circle by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: square

See the Pen unordered-list-square by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: disc

See the Pen unordered-list-disc by Amrish Kushwaha (@isamrish) on CodePen.

Дальше мы разберем и другие варианты стилей.

Что такое список определений?

Список определений отличается тем, что каждый его пункт состоит из двух элементов. Первый из них – термин, а второй – его определение.

Вы можете создать список определений при помощи тега <dl> (definition list – «список определений»). В пунктах списка термины (term) создаются при помощи тега <dt>, а описание (description) – при помощи тега <dd>.

Например:

See the Pen definition-list by Amrish Kushwaha (@isamrish) on CodePen.

Что такое вложенные списки?

Иногда бывают ситуации, когда вам нужно представить информацию в виде списка, причем его пункты сами могут быть отдельными списками. Такая структура называется вложенным списком.

Например:

See the Pen nested-list by Amrish Kushwaha (@isamrish) on CodePen.

Стиль списка

Для придания стилей списку используются три CSS-свойства.

list-style-type

Как вы уже знаете, это свойство используется для стилизации маркеров списка (как упорядоченного, так и неупорядоченного).

Это свойство может принимать несколько значений:

• disc (круг)
• square (квадрат)
• circle (окружность)
• decimal (арабские цифры)
• lower-alpha (строчные латинские буквы, =lower-latin)
• lower-roman (римские цифры в нижнем регистре)
• lower-latin (строчные латинские буквы, =lower-alpha)
• lower-greek (строчные греческие буквы)
• upper-alpha (заглавные латинские буквы, =upper-latin)
• upper-roman (римские цифры в верхнем регистре)
• upper-latin (заглавные латинские буквы, =upper-alpha)

С полным списком возможных значений свойства list-style-type можно ознакомиться здесь.

list-style-image

Это свойство используется, чтобы в качестве маркера списка установить изображение. Свойство может принимать два значения: url изображения или none.

Например:

See the Pen list-style-image by Amrish Kushwaha (@isamrish) on CodePen.

Поскольку значение этого свойства наследуется, для возвращения значения по умолчанию используется значение none.

list-style-position

Это свойство служит для определения положения маркера относительно элементов списка. Свойство list-style-position может принимать два значения: inside (внутри) и outside (снаружи).

Пример применения значения inside

See the Pen list-style-position-inside by Amrish Kushwaha (@isamrish) on CodePen.

Пример применения значения outside

See the Pen list-style-position-outside by Amrish Kushwaha (@isamrish) on CodePen.

А теперь давайте поиграем с цветами списка

Расцвеченный маркированный список

Вариант 1: элементы списка и маркеры имеют один цвет.

See the Pen same-color-unordered-list by Amrish Kushwaha (@isamrish) on CodePen.

Вариант 2: элементы списка и маркеры имеют разные цвета.

See the Pen different-color-unordered-list by Amrish Kushwaha (@isamrish) on CodePen.

Расцвеченный нумерованный список

Вариант 1: элементы списка и их номера имеют один цвет.

See the Pen colored-numbered-list by Amrish Kushwaha (@isamrish) on CodePen.

Вариант 2: элементы списка и их номера имеют разные цвета.

See the Pen different-color-numbered-list by Amrish Kushwaha (@isamrish) on CodePen.

Надеемся, статья вам понравилась. Если знаете о списках еще что-то интересное, добавляйте в комментарии!

HTML-списки

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

маркированный список — <ul> — каждый элемент списка <li> отмечается маркером,
нумерованный список — <ol> — каждый элемент списка <li> отмечается цифрой,
список определений — <dl> — состоит из пар термин <dt> — <dd> определение.

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

Создание HTML-списков

1. Маркированный список

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

Браузеры по умолчанию добавляют следующее форматирование блоку списка:

ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).

Для тега <ul> доступны ‎глобальные атрибуты.

<ul>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ul>

2. Нумерованный список

Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

Блок списка также имеет стили браузера по умолчанию:

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.

Для тега <ol> доступны следующие атрибуты:

<ol>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ol>

3. Список определений

Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.

Блок списка определений имеет следующие стили браузера по умолчанию:

dl {margin-top: 1em; margin-bottom: 1em;}

Для тегов <dl>, <dt> и <dd> доступны ‎глобальные атрибуты.

<dl>
  <dt>Режиссер:</dt>
    <dd>Петр Точилин</dd>
  <dt>В ролях:</dt>
    <dd>Андрей Гайдулян</dd>
    <dd>Алексей Гаврилов</dd>
    <dd>Виталий Гогунский</dd>
    <dd>Мария Кожевникова</dd>
</dl>

4. Вложенный список

Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей:

<ul>
 <li>Пункт 1.</li>
  <li>Пункт 2.
    <ul>
      <li>Подпункт 2.1.</li>
       <li>Подпункт 2.2.     
        <ul>
          <li>Подпункт 2.2.1.</li>
          <li>Подпункт 2.2.2.</li>
          </ul>
       </li>          
      <li>Подпункт 2.3.</li>
    </ul>
  </li>
 <li>Пункт 3.</li>
</ul>

5. Многоуровневый нумерованный список

Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:

<ol>
  <li>пункт</li> <!-1.->
  <li>пункт           
    <ol>
      <li>пункт</li> <!-2.1.->
      <li>пункт</li> <!-2.2.->
      <li>пункт
        <ol>
          <li>пункт</li> <!-2.3.1.->
          <li>пункт</li> <!-2.3.2.->
          <li>пункт</li> <!-2.3.3.-> 
        </ol>
      </li> <!-2.3.->
      <li>пункт</li> <!-2.4.->  
    </ol>
  </li> <!-2.->
  <li>пункт</li> <!-3.->        
  <li>пункт</li> <!-4.->        
</ol>

Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

ol {
/* убираем стандартную нумерацию */
list-style: none; 
/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ 
counter-reset: li; 
}
li:before {
/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
counter-increment: li; 
/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
content: counters(li,".") ". "; 
}

Как сделать список в HTML + подробный видеоурок

Доброго времени суток!

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

Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:

Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер.

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

1. Маркированные списки в HTML

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

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Фрукты</p>
    <ul>
        <li>Банан</li>
        <li>Яблоко</li>
        <li>Персик</li>
    </ul>
</body>
</html>

А вот так выглядит в браузере:

1.1 Стандартные маркеры для маркированного списка

На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

1.2 Маркер списка в виде пустого круга

Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку:

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
    <title>Пример маркированного списка с маркером в виде пустого круга</title>
</head>
<body>
    <p>Звезды:</p>
    <ul type="circle">
        <li>Сириус</li>
        <li>Арктур</li>
        <li>Поллукс</li>
        <li>Бетельгейзе</li>
        <li>Солнце</li>
    </ul>
</body>
</html>

Сразу смотрим как этот код будет выглядеть в браузере:

1.3 Маркер списка в виде квадрата

Посмотрим также и последний пример с квадратным маркером для HTML списка:

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<head>
    <title>Пример маркированного списка с маркером в виде квадрата</title>
</head>
<body>
    <p>Виды птиц:</p>
    <ul type="square">
        <li>Ара зеленокрылый</li>
        <li>Дрозд рябинник</li>
        <li>Индейка палевая</li>
    </ul>
</body>
</html>

Обратите внимание на маркер, он стал квадратным:

Важное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте здесь) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида.

Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 («<!DOCTYPE html>»), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — валидация сайта.

Ошибка будет следующая:

Из пояснения становится понятно, что этот атрибут является устаревшим и нужно использовать CSS вместо этого атрибута, чтобы задать вид маркера у списка. Как это сделать читайте в этом уроке по CSS — Урок 8. Оформление списков.

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

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

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

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

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
    <title>Пример стандартного нумерованного списка</title>
</head>
<body>
    <p>От одного до пяти:</p>
    <ol>
        <li>Первый</li>
        <li>Второй</li>
        <li>Третий</li>
        <li>Четвертый</li>
        <li>Пятый</li>
    </ol>
</body>
</html>

Таким образом выглядит нумерованный список со стандартными настройками в браузере:

Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

2.1 Стандартные маркеры для нумерованного списка

Здесь у нас есть выбор не из трех видов маркеров, а из пяти:

2.2 Своя нумерация в списке HTML

Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start». Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
    <title>Произвольная нумерация для нумерованного списка</title>
</head>
<body>
    <p>Начинаем нумерацию с двенадцати:</p>
    <ol type="a" start="12">
        <li>Двенадцать</li>
        <li>Тринадцать</li>
        <li>Четырнадцать</li>
        <li>Пятнадцать</li>
        <li>Шестнадцать</li>
    </ol>
</body>
</html>

Вот как это будет отображаться на реальном сайте:

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

Важное замечание: в нумерованном списке валидатор не выдаст ошибку, здесь можно использовать данные атрибуты, но также можно задать нумерацию и с помощью CSS. Подробнее об этом здесь — Урок 8. Оформление списков.

Ну а сейчас перейдем к вложенным спискам HTML.

3. Как сделать многоуровневый (вложенный) список в HTML

Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по выпадающему меню на CSS3), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.

На примере моделей автомобилей мы построим многоуровневый список в HTML:

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
    <title>Вложенный маркированный список HTML</title>
</head>
<body>
    <ul>
        <li>Citroen
            <ul>
                <li>Berlingo</li>
                <li>C1</li>
                <li>C2</li>
                <li>C3 Picasso</li>
                <li>C4 Grand Picasso</li>
            </ul>
        </li>
        <li>KIA</li>
        <li>Toyota</li>
        <li>Audi</li>
        <li>Lexus</li>
    </ul>
</body>
</html>

Обратите внимание, как выглядит многоуровневый список в браузере:

Мы делали многоуровневый список с помощью маркированного (тег <ul>). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута «type» мы можем переопределить маркеры (лучше задавать стили для маркеров с помощью CSS).

Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>
    <title>Нумерованные, маркированные и многоуровневые списки в HTML</title>
</head>
<body>
    <ul>
        <li>Первая группа тюльпанов
            <ol>
                <li>Первый класс
                    <ul>
                        <li>Простые ранние тюльпаны</li>
                    </ul>
                </li>
                <li>Второй класс
                    <ul>
                        <li>Махровые тюльпаны</li>
                    </ul>
                </li>
            </ol>
        </li>
    </ul>
</body>
</html>

В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.

Смотрим его вид в браузере:

4. Полезные материалы по спискам HTML

Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: основы CSS. Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).

4.1 Как сделать список HTML в строку

Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто:

4.2 Как сделать список HTML без значка

За это отвечает свойство list-style-type в CSS (подробнее здесь):

4.3 Как сделать список в HTML по центру

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

4.4 Как сделать список в HTML с картинками

Достаточно лишь одного свойства CSS list-style-image. Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:

4.5 Маркированный список HTML свой маркер

В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome). Тогда можно сделать любую иконку вместо стандартного маркера:

4.6 Как сделать список в HTML в несколько столбцов

Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:

5. Комбинированный список HTML

Чтобы сделать комбинированный список в HTML лучше всего использовать иконочные шрифты. Например, Flaticon или Fontawesome.

Эта информация уже для продвинутых, поэтому для начала необходимо будет изучить уроки по CSS.

6. Практика работы со списками

На видео ниже вы можете увидеть всю работу со списками HTML на практике:

Чтобы закрепить полученную информацию, я рекомендую все действия проделать вручную. Попробовать разные маркеры для списков, создать нумерованные списки, а после перейти к многоуровневым (вложенным) спискам и поэкспериментировать с ними.

На этом со списками заканчиваем и переходите к следующему уроку по изображениям.

Если вам нужно больше, чем просто основы сайтостроения, а хотите освоить профессию Front-end разработчика, то обратите внимание на курс от онлайн-школу Нетология — «Front-end разработчик с нуля» и онлайн-школу Skillbox и курс «Front-end разработчик«.

Курс длится долго, но знания вы получите структурированные, с которыми можно сразу устроится на работу, если вам интересно это направление.

Больше практикуйтесь!

Полное руководство по спискам в HTML и CSS

Перевод статьи «Полное руководство по спискам в HTML и CSS».

Что такое списки

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

Списки в HTML

Если вы хотите представлять на своих веб-страницах какие-то данные, являющиеся наборами чего-либо, список является прекрасным оформлением. Благодаря спискам легче воспринимают информацию.

Виды списков

В HTML-списки бывают трех видов:

1. Упорядоченные списки.
2. Неупорядоченные списки.
3. Списки определений.

Что такое упорядоченный список?

Упорядоченный список это набор элементов, представленных в определенном порядке.Форма упорядоченного списка лучше всего подходит для представления наборов данных, где порядок элементов имеет значение.

Примерами могут послужить кулинарные рецепты, где действия следует выполнять в определенном порядке, или списки инструкций простые программы.

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

Для создания упорядоченных списков используется тег

( o rdered l ist — «упорядоченный список»), а для каждого из его элементов — тег
1. ( ли ст — «список»).

   HTML-код:

   [html]

   
   
   1. Налейте воду в кастрюлю.
   
   
   2. Добавьте сахар, чайные листья и специи.
   
   
   3. Доведите до кипения и подержите на медленном огне около минуты .
   
   
   4. Добавьте молоко.
   
   
   5. Доведите до кипения и подержите на медленном огне 3-5 минут.
   
   
   6. Процедите чай и перелейте его в чайник. / li>
      
   
   [/ html]

   Результат:

   1. Налейте воду в кастрюлю.
   2. Добавьте сахар, чайные листья и специи.
   3. Доведите до кипения и подержите на медленном огне около минуты.
   4. Добавьте молоко.
   5. Доведите до кипения и подержите на медленном огне 3-5 минут.
   6. Процедите чай и перелейте его в чайник.

   Значения по умолчанию:

   По умолчанию пункты список обозначаются. арабскими цифрами.

   Это можно изменить, используя разные значения CSS-свойства list-style-type .

   список-стиль-тип: верхний альфа

   Посмотреть перо Order-list-upper-alpha от Амриша Кушвахи (@isamrish) на CodePen.

   список-стиль: верхний римский алфавит

   Посмотреть перо упорядоченный список-верхний римский алфавит, автор Амриш Кушваха (@isamrish) на CodePen.

   список-стиль-тип: нижний альфа

   Посмотреть перо Order-list-lower-alpha от Амриша Кушвахи (@isamrish) на CodePen.

   список-стиль: нижний римский алфавит

   Посмотреть перо упорядоченный список-нижний-римский, Амриш Кушваха (@isamrish) на CodePen.

   Это самые часто используемые значения свойства список-стиль-тип. Но есть множество других значений, которые мы рассмотрим дальше.

   Что такое неупорядоченный список?

   Неупорядоченный список это список с элементами, которые могут быть в представленном произвольном порядке. Такие списки также называют маркированными.

   Примеры таких списков — списки покупок, списки запланированных дел.

   Для создания упорядоченных списков используется тег

   ( u nordered l ist), а для каждого из его элементов — тег
   • (как и в упорядоченный список).

     HTML-код:

     [html]

     
     
     • одежда
     
     
     • книги
     
     
     • ручки
     
     
     • ноутбук
     
     
     • сумка
       
     
     [/ html]

     Результат:

     • одежда
     • книги
     • ручки
     • ноутбук
     • сумка

     Значения по умолчанию:

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

     список-стиль-тип: круг

     Посмотреть перо unordered-list-circle от Амриша Кушвахи (@isamrish) на CodePen.

     список-стиль: квадрат

     Посмотреть перо unordered-list-square от Амриша Кушвахи (@isamrish) на CodePen.

     list-style-type: диск

     Посмотреть перо unordered-list-disc от Амриша Кушвахи (@isamrish) на CodePen.

     Дальше мы разберем и другие варианты стилей.

     Что такое список определений?

     Список определений отличается тем, что каждый его пункт состоит из двух элементов. Первый из них — термин, а второй — его определение.

     Вы можете создать список определений при помощи тега

     ( d определение l ist — «список определений»). В пунктах списка термины ( t erm) при помощи тега

     , а описание ( d escription) — при помощи тега

     .

     Например:

     Посмотреть перо список определений Амриша Кушвахи (@isamrish) на CodePen.

     Что такое вложенные списки?

     Иногда бывают ситуации, когда вам нужно представить информацию в виде списка, причем его пункты сами могут быть отдельными списками. Такая структура называется вложенным списком.

     Например:

     Посмотреть перо вложенный список от Амриша Кушвахи (@isamrish) на CodePen.

     Стиль списка

     Для придания стилей списку используются три CSS-свойства.

     тип списка

     Как вы уже знаете, это свойство используется для стилизации маркеров списка (как упорядоченного, так и неупорядоченного).

     Это свойство может принимать несколько значений:

     • диск (круг)
     • квадрат (квадрат)
     • круг (окружность)
     • десятичное (арабские цифры)
     • низко-альфа (строчные латинские буквы, = нижняя латинская)
     • нижнеримские (римские цифры в нижнем регистре)
     • нижнелатинский (строчные латинские буквы, = нижняя альфа)
     • нижнегреческий (строчные греческие буквы)
     • альфа верхняя (заглавные латинские буквы, = верхняя латинская)
     • верхнеримские (римские цифры в регистре)
     • верхнелатынь (заглавные латинские буквы, = верхняя альфа)

     С полным списком следующие значения свойства тип-стиль-список можно ознакомиться здесь.

     изображение в стиле списка

     Это свойство используется, чтобы в качестве маркера списка установить изображение. Свойство может принимать два значения: url ​​ изображения или нет .

     Например:

     Посмотреть перо list-style-image от Амриша Кушвахи (@isamrish) на CodePen.

     значение свойства этого наследуется, для возвращение значения по умолчанию используется значение нет .

     позиция стиля списка

     Это свойство служит для определения положения маркера относительно элементов списка. Свойство list-style-position может принимать два значения: внутри (внутри) и снаружи (снаружи).

     Пример применения значения внутри

     Посмотреть перо list-style-position-inside, автор: Амриш Кушваха (@isamrish) на CodePen.

     Пример применения значения за пределами

     Посмотреть перо list-style-position-outside, автор: Амриш Кушваха (@isamrish) на CodePen.

     А теперь давайте поиграем с цветами списка

     Расцвеченный маркированный список

     Вариант 1: элементы списка и маркеры имеют один цвет.

     Посмотреть перо тот же цвет-неупорядоченный-список от Амриша Кушвахи (@isamrish) на CodePen.

     Вариант 2: элементы списка и маркеры имеют разные цвета.

     Посмотреть перо разный-цвет-неупорядоченный-список от Амриша Кушвахи (@isamrish) на CodePen.

     Расцвеченный нумерованный список

     Вариант 1: элементы списка и их номера имеют один цвет.

     Посмотреть перо цветной-пронумерованный-список Амриша Кушвахи (@isamrish) на CodePen.

     Вариант 2: элементы списка и их номера имеют разные цвета.

     Посмотреть перо список с номерами разных цветов, автор: Амриш Кушваха (@isamrish) на CodePen.

     Надеемся, статья вам понравилась. Если знаете о списках еще что-то интересное, добавляйте в комментарии!

     .

     : элемент упорядоченного списка — Веб-технологии для разработчиков

     HTML-элемент

     используется для упорядоченного списка — в частности для пронумерованного списка.

     Источник для интерактивного примера расположен в GitHub. Если вы желаете сделать вкладку в интерактивную часть, распакуйте https://github.com/mdn/interactive-examples и отправьте нам pull request.

     Категории контента	Основной поток, и если дочерний элемент включает в себя хотя бы один , явный контент.
     Разрешённое содержимое	Ноль или больше элементов, в свою очередь, содержащих вложенные элементы или .
     Пропуск тегов	Нет, открывающий и закрывающий теги обязательны.
     Разрешённые родители	Любой элемент, который принимает основной поток.
     Разрешённые ARIA-роли	каталог , группа , список , меню , строка меню , радиогруппа , список вкладок , панель инструментов , дерево , презентация
     DOM-интерфейс	HTMLOListElement

     Свойства

     Этот элемент включает глобальные атрибуты.

     сторнированный

     Атрибут логического значения (bool) показывает, что указано по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.

     начало

     Нумерация начнется с числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация введите в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы «г» или Римской «iv», використовуйте start = "4" .

     тип

     Задаёт тип нумерации:

     • а для строчных букв
     • A для заглавных букв
     • и для строчной Римской нумерации
     • I для заглавной Римской нумерации
     • 1 для цифр (по умолчанию)

     , тип используется для всего списка, если только не указан любой другой аттрибут , тип в элементе

     .

     Примечание: Если тип цифр в списке не имеет значений (к примеру, юридические или технические документы, где элементы обозначены обозначениями / цифрами), используйте свойство CSS list-style-type .

     Заметки об использовании

     Обычно, элементы списка отображены с маркером, предшествующим цифрам или буквам.

     Элементы

     и
     могут быть вложены (вложены) на любом уровне, передуясь между элементами
     и
     .

     Оба элемента

     и
     используются для списков. Различие лишь в том, что в элементе
     порядок имеет значение, как в примерах:
     • Инструкции рецепта
     • Направление по заданному
     • Список ингридиентов на информации о питании, в убывающих пропорциях.

     Чтобы определить, каким списком пользоваться, можно поменять порядок элементов с списке.Если значение меняется, використовуйте элемент

     — в противном случае
     .

     Примеры

     Обычный список

      
     
       
      Комиссия 
       
      Fi 
       
      Fo 
       
      Фум 
     
      

     Результат HTML кода выше:

     Список с Римскими числами

      
     
       
      Введение 
       
      Список приветствий 
       
      Заключение 
      

     Результат HTML кода выше:

     Используя свойство start

      
      Итоговые места конкурсантов не в круге победителей: 
     
     
       
      Speedwalk Stu 
       
      Сонтерин Сэм 
       
      Slowpoke Rodriguez 
     
      

     Результат HTML кода выше:

     Вложенный список

      
     
       
      первый элемент 
       
      второго элемента  тега здесь нет! ->
         
     
           
      второй элемент первый подпункт 
           
      второй элемент второй подпункт 
           
      второй элемент третий подпункт 
         
       
       ->
       
      третий пункт 
     
      

     Результат HTML кода выше:

     Неупорядоченный список внутри упорядоченного списка

      
     
       
      первый элемент 
       
      второго элемента  тега здесь нет! ->
         
     
           
      второй элемент первый подпункт 
           
      второй элемент второй подпункт 
           
      второй элемент третий подпункт 
         
       
       ->
       
      третий пункт 
     
      

     Результат HTML кода выше:

     Спецификации

     браузерами Поддержка

     Таблица «поддержка браузерами» сгенерирована с помощью структурированных данных.Если хотите внести вклад в данные, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам pull request. Обновите данные о совместимости на GitHub

     	Компьютеры						Мобильные
     	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Chrome для Android	Chrome для Android		Opera для Android	Safari на iOS	Samsung Internet
     ol	Chrome Полная поддержка Да	Кромка Полная поддержка 12	Firefox Полная поддержка 1	IE Полная поддержка Да	Opera Полная поддержка Да	Safari Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Опера Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка Да
     компакт Устаревшая Нестандартная	Хром Полная поддержка Да	Кромка Полная поддержка 12	Firefox Полная поддержка 1	IE Полная поддержка Да	Opera Полная поддержка Да	Safari Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Опера Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка Да
     обратное	Хром Полная поддержка 18	Край Полная поддержка ≤79	Firefox Полная поддержка 18	IE Нет поддержки Нет	Opera Полная поддержка Да	Safari Полная поддержка 6	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 18	Опера Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка Да
     старт	Хром Полная поддержка Да	Кромка Полная поддержка 12	Firefox Полная поддержка 1	IE Полная поддержка Да	Opera Полная поддержка Да	Safari Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Опера Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка Да
     тип	Хром Полная поддержка Да	Кромка Полная поддержка 12	Firefox Полная поддержка 1	IE Полная поддержка Да	Opera Полная поддержка Да	Safari Полная поддержка Да	WebView Android Полная поддержка Да	Chrome Android Полная поддержка Да	Firefox Android Полная поддержка 4	Опера Android Полная поддержка Да	Safari iOS Полная поддержка Да	Samsung Интернет Android Полная поддержка Да

     Легенда

     Полная поддержка

     Полная поддержка

     Нет поддержки

     Нет поддержки

     Нестандартная.Ожидается плохая кросс-браузерная поддержка.

     Нестандартная. Ожидается плохая кросс-браузерная поддержка.

     Устаревшая. Не следует использовать в новых веб-сайтах

     Устаревшая. Не следует использовать в новых веб-сайтах

     Смотрите также

     • Другие элементы HTML списка:
       ,
       • ,
       • CSS свойства, которые могут быть полезны для стилизации
         элемента:
         • свойство в стиле списка , для порядковых показов
         • CSS счётчики, для более сложных вложенных списков
         • свойство line-height, для замены убранного свойства compact
         • Свойство маржи, для контроля отступа в списке
       .

       No related posts.