Перейти к содержанию

Списки

Структурно список состоит из элемента-контейнера списка, заполненного элементами списка. В этом модуле вы узнаете, как стилизовать все части списка.

CSS подкаст

030: Списки

Представьте, что у вас есть набор товаров, которые вы планируете купить во время следующего похода за продуктами. Одним из распространенных способов визуального представления этого является список, но как добавить стиль в список продуктов?

1
2
3
4
5
6
<ul>
    <li>oat milk</li>
    <li>rhubarb</li>
    <li>cereal</li>
    <li>pie crust</li>
</ul>

Создание списка

Предыдущий список начинался с семантического элемента <ul>, дочерними элементами которого являются элементы списка продуктов (элементы <li>). Если проанализировать каждый элемент <li>, то можно увидеть, что все они имеют display: list-item, поэтому браузер по умолчанию отображает ::marker.

1
2
3
li {
    display: list-item;
}

Существуют еще два типа списков.

Упорядоченные списки могут быть созданы с помощью <ol>, в этом случае элемент списка будет отображать число в качестве ::marker.

1
2
3
4
5
6
<ol>
    <li>oat milk</li>
    <li>rhubarb</li>
    <li>cereal</li>
    <li>pie crust</li>
</ol>

А списки описаний создаются с помощью <dl>, однако в этом типе списка не используется элемент списка <li>.

1
2
3
4
5
6
<dl>
    <dt>oat milk</dt>
    <dd>- non dairy trendy drink</dd>
    <dt>cereal</dt>
    <dd>- breakfast food</dd>
</dl>

Стили списков

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

Существует три свойства стиля списка, которые можно использовать для оформления примера: list-style-position, list-style-image и list-style-type.

list-style-position

list-style-position позволяет переместить точку маркера либо inside, либо outside содержимого элемента списка. По умолчанию outside означает, что точка не включается в содержимое элемента списка, в то время как inside перемещает первый элемент среди содержимого элемента списка.

Список с маркерами outside и inside ::marker, который показывает, что outside (значение по умолчанию) не находится в элементе списка и находится внутри блока содержимого элемента списка.

list-style-image

list-style-image позволяет заменять маркеры списка изображениями. Это позволяет задать изображение, например, url или none, чтобы сделать ваши маркеры изображением, даже svg или gif. Можно также использовать любой медиатип или даже URI данных.

Давайте рассмотрим, как можно добавить изображение каждого из наших продуктов в качестве list-style-image:

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

list-style-type

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

Сокращенное свойство list-style

Теперь, когда у нас есть все эти индивидуальные свойства, мы можем использовать сокращение list-style, чтобы задать все стили списка в одной строке:

1
2
list-style: < 'list-style-type' > || < 'list-style-position'
    > || < 'list-style-image' >;

list-style позволяет объявлять комбинации из одного, двух или трех свойств list-style в любом порядке. Если заданы list-style-type и list-style-image, то list-style-type будет использоваться в качестве запасного варианта, если изображение недоступно.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

Это наиболее часто используемое свойство стилей списка, рассматриваемых в данном разделе. Часто используется list-style: none для скрытия стилей по умолчанию. Стили по умолчанию приходят из браузера, и часто можно увидеть сброшенные таблицы стилей, удаляющие такие стили списка, как padding и margin. Можно также использовать это сокращение для установки стилей, например list-style: square inside;.

До сих пор в примерах рассматривалась стилизация всего списка и его элементов, но как насчет более детального подхода?

Псевдоэлемент ::marker

Маркерный элемент list-item — это пуля, дефис или римская цифра, которые помогают обозначить каждый элемент списка.

Список с тремя элементами, в котором видно, что каждая из пуль является псевдоэлементом ::marker

Если просмотреть список в DevTools, то можно увидеть элемент ::marker для каждого из элементов списка, несмотря на то, что в HTML он не объявлен. При дальнейшем рассмотрении элемента ::marker можно увидеть его стилизацию по умолчанию в браузере.

1
2
3
4
5
6
7
8
::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

При объявлении списка каждому элементу присваивается маркер, несмотря на то, что в HTML нет ни буллитов, ни римских цифр. Это псевдоэлемент, поскольку браузер генерирует его за вас и предоставляет ограниченный API для его стилизации. Подробнее об анатомии CSS-маркеров. ::marker в настоящее время имеет ограниченную поддержку в Safari.

Блок маркера

В модели CSS-макета маркеры элементов списка представлены блоком маркера, связанным с каждым элементом списка. Блок маркера — это контейнер, в котором обычно содержится пуля или номер.

Для стилизации блока маркеров можно использовать селектор ::marker. Это позволяет выбрать только маркер, а не стилизовать весь список.

Примечание

Элементы ::marker предшествуют любым псевдоэлементам, которые вы могли вставить с помощью CSS ::before.

Стили маркера

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

Существует довольно много разрешенных CSS ::marker свойств:

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

В упорядоченных списках пули по умолчанию являются цифрами. Значение содержимого ::marker является вариантом использования counters для создания пользовательской нумерации.

Тип отображения

Все наши свойства list-style и ::marker знают, как стилизовать элементы <li>, поскольку по умолчанию они имеют значение list-item. Вы также можете превратить в элемент списка то, что не является <li>.

Для этого нужно добавить свойство display: list-item. Один из примеров использования свойства display: list-item — если вы хотите, чтобы в заголовке был висячий маркер, который можно изменить на что-то другое с помощью ::marker. В следующем примере показан заголовок, использующий display: list-item для стилизации, и список, использующий корректную разметку списка ниже.

Хотя с помощью display можно превратить что угодно в элемент списка, не следует использовать это вместо корректной разметки списка, если содержимое, которое вы стилизуете, действительно является списком. Изменение внешнего вида элемента на элемент списка не меняет того, как сервисы доступности читают и распознают этот элемент, поэтому он не будет читаться как элемент списка устройствами чтения с экрана или переключателями. Всегда используйте семантическую разметку и создавайте списки с помощью <li>, когда это возможно.

Ресурсы

Источник — Lists

Комментарии