CSS-свойство List

Двумя наиболее распространенными типами HTML-списков являются упорядоченный и неупорядоченный. Для их стилизации списков мы будем использовать свойство list-style CSS.

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

ф1

list-style-type

Чтобы задать стиль маркера для пунктов списка, можно использовать свойство list-style-type.

Стандартное значение этого свойства – disc, но можно использовать и другие значения: circle, square, none. Кроме этого можно использовать такие значения, как upper-alpha, lower-alpha, upper-roman, lower-roman, decimal и т. д.

В приведенном ниже примере свойство list-style-type имеет значение square:

ul {
	list-style-type : square;
}
ф2

Если вам вообще не нужны маркеры, то CSS list style type необходимо присвоить значение none:

ul {
	list-style-type : none;
}
ф3

Поля и отступы

Чтобы добавить в список отступы, можно использовать свойство margin.

В приведенном ниже примере использования CSS ul li list style мы прибавляем поля по 30px над и под списком:

ul {
	list-style-type : square;
	margin-top : 30px;
	margin-bottom : 30px;
}
ф4

В следующем примере мы полностью исключаем поля:

ul {
	list-style-type : square;
	margin : 0;
}
ф5

В примере CSS ul list style мы убираем отступы:

ul {
	list-style-type : square;
	margin : 0;
	padding : 0;
}
ф6

Здесь мы задаем списку фиксированную ширину:

ul {
	list-style-type : square;
	width : 200px;
}
ф7

List-style-position

Это свойство отвечает за то, как текст внутри list style CSS будет переходить на следующую строку. Стандартное значение outside означает, что при переносе строки текст также получит выравнивание по левому краю. Если выставлено значение inside, то строка будет перенесена под маркер списка.

В примере, приведенном ниже, представлен список, в котором свойство list-style-position выставлено на outside (значение по умолчанию):

ul {
	list-style-type : square;
	list-style-position : outside;
	width : 200px;
}

В следующем примере показано, что будет, если свойство list-style-position будет иметь значение inside. Таким образом, текст на новой строке будет начинаться прямо под маркером:

ul {
	list-style-type : square;
	list-style-position : inside;
	width : 200px;
}
ф8

List-style-image

Свойство list-style-image позволяет использовать собственную пиктограмму в качестве маркера.

В примере CSS ul list style мы используем изображение звезды вместо маркера списка:

ul {
	list-style-image: url(star.png);
}
ф9

Сокращение list-style

Можно использовать сокращенное свойство list-style для назначения тех же стилей. В приведенном ниже примере мы задаем тип, расположение и изображение маркера списка:

ul {
	list-style: square outside url(star.png);
}
ф10

Список inline

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

В приведенном ниже примере представлен строчный список:

li {
	display: inline;
}
ф11

Стилизация упорядоченного списка

Теперь пришло время задать стиль для CSS ol list style. По умолчанию, list-style-type для упорядоченного списка установлен при помощи десятичного числа:

ф12

Чтобы изменить тип, можно поменять значение на upper-alpha, lower-alpha, upper-roman, lower-roman.

Ниже приведен пример, где list-style-type имеет значение upper-alpha:

ol {
	list-style-type : upper-alpha;
}
ф13

В следующем примере list-style-type имеет значение lower-roman:

ol {
	list-style-type : lower-roman;
}
ф14

Перевод статьи “CSS List” был подготовлен дружной командой проекта Сайтостроение от А до Я.