Списки CSS

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

Свойство list-style-type

Свойство list-style-type устанавливает вид маркера. Вот таблица допустимых значений для этого свойства:

Свойство list-style-type
Значение Пример
disc
  • Пункт списка
circle
  • Пункт списка
square
  • Пункт списка
decimal
  • Пункт списка
decimal-leading-zero
  • Пункт списка
lower-roman
  • Пункт списка
upper-roman
  • Пункт списка
lower-alpha
  • Пункт списка
upper-alpha
  • Пункт списка
georgian
  • Пункт списка
  • Пункт списка
  • Пункт списка
cjk-ideographic
  • Пункт списка
  • Пункт списка
  • Пункт списка
none
  • Пункт списка

В таблице я указал два весьма необычных свойства: georgian и cjk-ideographic. Эти свойства используются регионально. Есть ещё несколько похожих любопытных значений этого свойства, например armenian или hiragana, но все их перечислять нет смысла.

Теперь пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Свойство list-style-type.</title>
<style>
	/* Меняем маркер списка */
    ol{
        list-style-type: square;
    }
</style>
</head>
<body>

<ol>
	<li>Первый пункт.</li>
	<li>Второй пункт.</li>
	<li>Третий пункт.</li>
</ol>

</body>
</html>

Обратите внимание, мы превратили нумерованный список <ol> в маркированный.

Свойство list-style-type
Рисунок 1. Свойство list-style-type.

Обязательно обратите внимание на значение none, это значение убирает маркеры вообще. Это свойство часто используется для форматирования списков при помощи CSS.

Свойство list-style-type достаточно простое, как и остальные свойства по работе со списками.

Свойство list-style-image

Свойство list-style-image устанавливает символом маркера графический файл.

<!DOCTYPE html>
<html>
<head>
	<title>Свойство list-style-image.</title>
<style>
	/* Меняем маркер списка на картинку */
    ul{
        list-style-image: url("http://komotoz.ru/_images/bullet_li.gif");
    }
</style>
</head>
<body>

<ul>
	<li>Первый пункт.</li>
	<li>Второй пункт.</li>
	<li>Третий пункт.</li>
</ul>

</body>
</html>

Вот результат работы этого кода:

Свойство list-style-image
Рисунок 2. Свойство list-style-image.

Мы видим, что теперь маркеры списка отмечены графическим файлом http://komotoz.ru/_images/bullet_li.gif.

Свойство list-style-position

Перед тем, как приступить к изучению этого свойства, более детально изучим модель форматирования элемента <ul>.

<!DOCTYPE html>
<html>
<head>
	<title>Форматируем список.</title>
<style>
	/* Форматируем список */
    ul{
        border: 1px solid black;
	}
    li{
        border: 1px solid red;
        padding: 3px;
        margin: 5px auto;
    }
</style>
</head>
<body>

<ul>
	<li>Первый пункт.</li>
	<li>Второй пункт.</li>
	<li>Третий пункт.</li>
</ul>

</body>
</html>

Вот что мы видим:

Форматируем блок <ul>
Рисунок 3. Форматируем блок <ul>.

Тут важно обратить внимание на то, что маркеры списка выходят за границу блока элемента <li>, обрамлённого красной границей. Это может привести к неожиданным результатам, вот например обнулим внутренние отступы <ul>.

<!DOCTYPE html>
<html>
<head>
	<title>Форматируем список.</title>
<style>
    ul{
        border: 1px solid black;
       	/* Обнулим внутренние отступы */
       	padding: 0;
       	/* Отцентрируем по горизонтали */
       	margin: 10px auto;
       	/* Уменьшим ширину со 100% до 300px */
       	width: 300px;
	}
    li{
        border: 1px solid red;
        padding: 3px;
        margin: 5px auto;
    }
</style>
</head>
<body>

<ul>
	<li>Первый пункт.</li>
	<li>Второй пункт.</li>
	<li>Третий пункт.</li>
</ul>

</body>
</html>

Вот что мы получим:

Форматируем блок <ul>
Рисунок 4. Форматируем блок <ul>.

Теперь маркеры списка вышли за пределы контейнера <ul>. Таким образом маркеры могут выйти и за пределы контейнера статьи, к которой принадлежит список, что нарушит внешний вид сайта.

Лучше бы поместить их внутрь контейнера <li>. Это бы решило данную проблему. Вот для этого и существует свойство list-style-position.

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

Свойство list-style-position
Значение Действие
list-style-position: inside Маркер внутри блока <li>.
list-style-position: outside Маркер снаружи блока <li> (по умолчанию).

По умолчания используется значение outside.

Применим это свойство к нашему примеру и поместим маркеры в блок <li>, установив этому свойству значение inside.

<!DOCTYPE html>
<html>
<head>
	<title>Свойство list-style-position.</title>
<style>
    ul{
        border: 1px solid black;
       	padding: 0;
       	/* Управляем положением маркера */
       	list-style-position: inside;
	}
    li{
        border: 1px solid red;
        padding: 3px;
        margin: 5px auto;
    }
</style>
</head>
<body>

<ul>
	<li>Первый пункт.</li>
	<li>Второй пункт.</li>
	<li>Третий пункт.</li>
</ul>

</body>
</html>

Вот что мы получили:

Свойство list-style-position.
Рисунок 5. Свойство list-style-position.

Теперь маркеры списка вложены в блок <li>.

Свойство list-style

Свойство list-style является сокращённой формой, позволяющей использовать значения всех трёх предыдущих свойств.

Пример: сделаем картинку маркером и поместим маркер внутрь блока пункта списка.

<!DOCTYPE html>
<html>
<head>
	<title>Свойство list-style.</title>
<style>
ul{
	border: 1px solid black;
	padding: 0;
	/* Управляем списоком */
	list-style: inside url("/images/bullet_li.gif");
}
li{
	border: 1px solid red;
	padding: 3px;
	margin: 5px auto;
}
</style>
</head>
<body>

<ul>
	<li>Первый пункт.</li>
	<li>Второй пункт.</li>
	<li>Третий пункт.</li>
</ul>

</body>
</html>

Вот результат:

Свойство list-style.
Рисунок 6. Свойство list-style.

Мы в одном свойстве list-style указали два значения: положение маркера и путь графичекого файла маркера.

Свойство list-style используют чаще всего, даже для задания одного значения. Оно короткое, его легко написать.