Перевод статьи «A complete guide about lists in HTML and CSS».
Что такое списки
Список это способ представления набора данных или информации. Таким образом этот набор данных становится более понятным, чем при любой другой форме изложения. Например, список покупок выглядит куда понятнее, если имеет вид именно списка, а не простого абзаца, где наименования идут просто через запятую.
Списки в HTML
Если вы хотите представлять на своих веб-страницах какие-то данные, являющиеся наборами чего-либо, список является прекрасным вариантом оформления. Благодаря спискам пользователи легче воспринимают информацию.
Виды списков
В HTML списки бывают трех видов:
- Упорядоченные списки.
- Неупорядоченные списки.
- Списки определений.
Что такое упорядоченный список?
Упорядоченный список это набор элементов, представленных в определенном порядке. Форма упорядоченного списка лучше всего подходит для представления наборов данных, где порядок элементов имеет значение.
Примерами могут послужить кулинарные рецепты, где действия следует выполнять в определенном порядке, или списки инструкций простой программы.
Подобные списки делают упорядоченными, потому что без нужной последовательности изложения эта информация теряет свой смысл. Упорядоченные списки также называют нумерованными.
Для создания упорядоченных списков используется тег <ol> (ordered list – «упорядоченный список»), а для каждого из его элементов – тег <li> (list – «список»).
HTML-код:
[html]<ol>
<li>Налейте воду в кастрюлю.</li>
<li>Добавьте сахар, чайные листья и специи.</li>
<li>Доведите до кипения и подержите на медленном огне около минуты.</li>
<li>Добавьте молоко.</li>
<li>Доведите до кипения и подержите на медленном огне 3-5 минут.</li>
<li>Процедите чай и перелейте его в чайник.</li>
</ol>
[/html]
Результат:
- Налейте воду в кастрюлю.
- Добавьте сахар, чайные листья и специи.
- Доведите до кипения и подержите на медленном огне около минуты.
- Добавьте молоко.
- Доведите до кипения и подержите на медленном огне 3-5 минут.
- Процедите чай и перелейте его в чайник.
Значения по умолчанию:
По умолчанию пункты списка обозначаются арабскими цифрами.
Это можно изменить, используя разные значения 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.
Надеемся, статья вам понравилась. Если знаете о списках еще что-то интересное, добавляйте в комментарии!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]