Правильная нумерация во вложенных нумерованных списках html с помощью css

Содержание:

Списки определений (описаний)
- Пример: Список определений
Расположение маркера относительно элемента списка
Создание маркированного списка в автоматическом режиме
Многоуровневый маркированный список HTML
Как создать маркированный список?
Нумерованный список
Как сделать списки в Ворде
Урок 8Списки HTML
Как создать списки в Word 2007, 2010, 2013: маркированный, нумерованный, многоуровневый
Создание собственных маркеров

Списки определений (описаний)

Списки определений очень удобны для создания, например, вашего личного словаря терминов. У каждого пункта списка определений есть две части: термин и его определение.
Вы помещаете весь список в элемент <dl> (от англ. Definition List – список определений). Он включает в себя теги <dt> (от англ. Definition Term – определяемое слово, термин) и <dd> (от англ. Definition Description – описание определяемого термина).
Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии, словари, справочники и т.д.

Общая структура списка описаний имеет следующий вид:

В следующем примере показано одно из возможных использований списка определений:

Пример: Список определений

Результат
HTML-код
Попробуй сам »

Всемирная паутина: — от англ. World Wide Web (WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету.
Интернет: — совокупность сетей, применяющих единый протокол обмена для передачи информации.
Сайт: — набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.

По-умолчанию, текст термина прижимается к левому краю окна браузера, а описание термина располагается ниже и сдвигается вправо.

	Элемент <dl> содержит только элементы <dt> и <dd>. Вы не мо жете поместить блочные элементы (например, абзацы) внутрь термина <dt>, но определения <dd> могут содержать любой элемент потокового контента.

Расположение маркера относительно элемента списка

С помощью CSS свойства list-style-position вы можете определить расположение маркера, либо цифры относительно элемента списка. Для того, чтобы расположить маркер (цифру) внутри элемента списка вместе с содержимым, то необходимо использовать значение inside, а для того, чтобы расположить за границей элемента списка необходимо использовать значение outside.

Давайте для наглядности рассмотрим пример, в котором помимимо свойства list-style-position используем еще одно новое свойство, которое позволит нам установить границы элемента.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства list-style-position</title>
<style> 
li {
border : 1px solid orange; /* устанавливаем сплошную границу размером 1px оранжевого цвета для всех элементов списка*/
}
.test {
list-style-position : outside; /* указываем, что маркер располагается слева от текста за границей элемента списка */
background-color : khaki; /* устанавливаем цвет заднего фона */
}
.test2 {
list-style-position : inside; /* указываем, что маркер располагается слева от текста внутри элемента вместе с содержимым */
background-color : khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<ul class = "test">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
		<ol class = "test2">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ol>
	</body>
</html>

В данном примере для маркированного списка (HTML элемент <ul>) мы расположили маркер внутри элемента списка вместе с содержимым, использовав свойство list-style-position со значение outside, а для нумерованного списка (HTML элемент <ol>) разместили цифру слева от текста внутри элемента вместе с содержимым (свойство list-style-position со значение inside).

Универсальное свойство border, которое позволяет установить границу для всех элементов списка, мы использовали для лучшего понимания работы свойства list-style-position. Работа с границами элементов в скором времени будет подробно рассмотрена в учебнике в статье «Границы элемента в CSS».

Результат нашего примера:

Рис. 71 Пример использования свойства list-style-position (расположение маркера / цифры в списках).

Создание маркированного списка в автоматическом режиме

Автоматическая функция маркирования упрощает задачу писателю, экономит время на выполнение лишних действий.

Настройка включения/выключения автоматической функции:

Нажмите кнопку «Файл» и выберите параметры. В версии Word 2007 года вместо «Файл» находится кнопка «Office».
Нажимаем на кнопку «Файл» или «Office», переходим в «Параметры Word»
Во вкладке «Правописание» нажмите на «Параметры автозамены».
Во вкладке «Правописание» нажимаем на «Параметры автозамены»
Найдите раздел «Применять при вводе» и выберите стили маркированных списков.
Находим раздел «Применять при вводе», ставим галочки на нужные параметры, нажимаем «ОК»
Подтвердите действие нажатием «ОК».

Для начала автоматического списка:

Установите курсор на месте будущего списка.
Ставим курсор в начале строки
Поставьте пробел или звездочку.
Ставим пробел или звездочку
Нажмите пробел.

Единоразовая отмена функции возможна при нажатии выпадающей панели «Параметры автозамены».

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

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

<ul>
 <li>Элемент верхнего уровня</li>
 <ul>
  <li>Подчиненный элемент 1</li>
  <li>Подчиненный элемент 2</li>
 </ul>
 <li> Элемент верхнего уровня</li>
</ul>

Что дает нам:

• Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 • Элемент верхнего уровня

Вы можете использовать комбинацию тегов <ul> и <ol>. Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка.

1. Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 2. Элемент верхнего уровня

Используйте нумерованные списки HTML на своих страницах.

Как создать маркированный список?

Инструменты списков обычно находятся на общей панели инструментов в программе.

Начало работы с маркерами:

Убедитесь, что курсор находится в начале строки.
Ставим курсор в начале строки
Нажмите кнопку «Маркеры».
Нажимаем на кнопку «Маркеры»
Чтобы продолжить перечисление, введите нужные данные в первом пункте и нажмите «Enter». Программа по умолчанию проставит следующий элемент списка.
Вводим текст, нажимаем «Enter»

Программа по умолчанию проставит следующий элемент списка

Внешний вид маркеров можно менять в зависимости от стиля текста:

Нажмите стрелку рядом с кнопкой «Маркеры».
Нажимаем стрелку рядом с кнопкой «Маркеры»
Выберите нужный символ из библиотеки.
В разделе «Библиотека маркеров» выбираем нужный вид маркера, щелкаем по нему
Если среди символов нет нужного, создайте свой стиль маркеров. Для этого ниже библиотеки нажмите кнопку «Определить новый маркер».
Если маркеры из библиотеки не понравились, нажимаем на кнопку «Определить новый маркер»
Нажмите кнопку «Символ» или «Рисунок» и выберите элемент из выпавшего списка.
Нажимаем кнопки «Символ» или «Рисунок», выбираем нужный маркер, нажимаем «ОК»

Для отмены функции список с последующим сохранением текста выделите всю информацию списка и зажмите кнопку «Маркеры» сортировка удалится, а информация останется.

Выделяем всю информацию списка и зажимаем кнопку «Маркеры»

После нажатия кнопки «Маркеры» останется только текст

Чтобы удалить список вместе с содержимым, выделите текст в списке и зажмите кнопку «Delete», после чего нажмите кнопку «Маркеры».

Выделяем текст, нажимаем кнопку «Delete»

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

Поставьте курсор в начале строчки.
Устанавливаем курсор вначале строчки
В разделе «Главная» нажмите на стрелку рядом с маркерами.
В разделе «Главная» нажимаем на стрелку рядом с маркерами
Найдите нужный стиль и начните работу.
Выбираем нужный маркер, щелкаем на него

Вводим текст, после каждой строчки нажимаем «Enter»

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

Выделите все пункты списка.
Выделяем все пункты списка
На панели инструментов выберите «Абзац».
На панели инструментов в разделе «Абзац» щелкаем на стрелочку с дополнительным меню
Во вкладке «Отступы и интервалы» всплывшего окна выберите значение интервалов из стандартных или введите необходимые параметры.
Во вкладке «Отступы и интервалы» выставляем свои параметры или оставляем по умолчанию, нажимаем «ОК»

Снимаем флажок с пункта «Не добавлять интервал между абзацами одного стиля», нажимаем «ОК»

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

Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега <ol> (сокращенное от английского ordered list — упорядоченный список). Каждый элемент списка начинается с тега <li> (элемент списка).

Давайте рассмотрим примеры использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <ol></title>
	</head>
	<body>
		<ol> 
			<li>Первый пункт</li&gt
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</оl>
	</body>
</html>

Выглядеть на странице это будет соответственно так:

Первый пункт.
Второй пункт.
Третий пункт.

Если вы хотите, чтобы список начинался с определённого номера (не с 1), то необходимо указать атрибут start для тега <ol>.

<ol start = "101">  <!--список начнётся с номера 101-->

Выглядеть на странице это будет соответственно так:

Первый пункт.
Второй пункт.
Третий пункт.

Ещё один интересный атрибут — type, который позволит Вам задать буквенную нумерацию («A» – большие, «a» – строчные), либо нумерацию из римских цифр («I» – в верхнем регистре, «i» – в нижнем регистре).

Рассмотрим пример в котором представлены все возможные значения атрибута type (отличные от значения по умолчанию):

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута type HTML тега <оl></title>
	</head>
	<body>
		<ol type = "A"> <!--указываем, что список формируется в алфавитном порядке заглавными буквами --> 
			<li>Первый пункт</li&gt
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</оl>
		<ol type = "a"> <!--указываем, что список формируется в алфавитном порядке строчными буквами --> 
			<li>Первый пункт</li&gt
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</оl>
		<ol type = "I"> <!--указываем, что список формируется римскими цифрами в верхнем регистре --> 
			<li>Первый пункт</li&gt
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</оl>
		<ol type = "i"> <!--указываем, что список формируется римскими цифрами в нижнем регистре --> 
			<li>Первый пункт</li&gt
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</оl>
	</body>
</html>

Результат нашего примера:

Рис. 14 Виды нумерованных списков.

Еще один нюанс: при использовании атрибута start с буквами (type = «A» и type = «a»), число, указанное в значении атрибута является порядковым номером буквы в алфавите. Например, start = «4», будет соответствовать букве «D» и список начнётся именно с неё. При использовании значения start = «27» счетчик обнуляется, при этом список становится двухзначным («27» = «AA», «28» = «AB», «29» = «AC»…). Значения должны быть целочисленными, допускается использование отрицательных значений.

Обращаю Ваше внимание, что допускается формировать нумерованные (упорядоченные) списки, вложенные в другие нумерованные списки (внутри элемента списка ):

<!DOCTYPE html>
<html>
	<head>
		<title>Пример нумерованного списка, вложенного в другой нумерованный список</title>
	</head>
	<body>
		<ol> 
			<li>Первый пункт
				<ol>  <!--открываем новый нумерованный список внутри элемента списка--> 
					<li>Первый пункт</li&gt
					<li>Второй пункт</li>
					<li>Третий пункт</li>
				</оl>
			</li&gt
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</оl>
	</body>
</html>

Выглядеть на странице это будет соответственно так:

Первый пункт.
1. Первый пункт.
2. Второй пункт.
3. Третий пункт.
Второй пункт.
Третий пункт.

Но и это еще не все, атрибут reversed элемента позволяет задать, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge.

Выглядеть на странице это будет соответственно так:

Первый пункт.
Второй пункт.
Третий пункт.

Как сделать списки в Ворде

Итак, как сделать списки в Ворде? Чтобы их успешно создать, будем придерживаться простой инструкции:

пишете текст в Ворде;
далее, наводите курсор компьютерной мыши перед любым словом в тексте;
нажимаете на раздел «Главная» и выбираете виды списков левой кнопки мыши чуть ниже раздела «Рецензирование». Или через меню правой кнопки мыши;
после этого появятся нужные Вам списки, которые можно установить.

Эту инструкцию в создании списков, мы будем использовать на практике.

Как сделать маркированный список в Ворде

В первую очередь создадим маркированный список. Открываете документ Word с текстом. Далее, нажимаете один раз перед текстом левой кнопкой мыши. Например, в начале предложения. И выбираете правой кнопкой мыши «Маркированный список» (Скрин 1).

На панели управления Ворд он отображается первым из других списков. После его нажатия Вы увидите в тексте точки перед словами (Скрин 2).

Это и будет маркированный список.

Как изменить текст в список

Текст можно изменить в список без использования списков Word. Если у Вас слова написаны в документе сплошным текстом, их можно разделить. Для этого нажимаете один раз мышкой перед словом, которого нужно опустить (Скрин 3).

Далее, жмёте кнопку «Enter» на клавиатуре, чтобы слово опустилось вниз и превратилось в список. Также Вы можете вручную проставить цифры в начале слова или английские буквы.

Как поменять стиль маркированного списка (внешний вид)

Маркированный список можно изменить на другой вид. Чтобы это сделать, нужно выделить текст с маркированным списком. Далее, нажмите на него вверху панели управления списков и выберите подходящий вид списка (Скрин 4).

Там есть разные виды маркированного списка:

Список в виде галочки.
Круг.
Квадрат.
Множество квадратов.
Стрелка.

И другие доступные варианты. Если нажать на кнопку «Определить новый маркированный список», в другом окне можно установить параметры списка и загрузить свою картинку с компьютера. Нажимаете на раздел «Рисунок» и загружаете новый вид списка.

Как сделать нумерованный список в Ворде

Приступим к созданию нумерованного списка в тексте. Снова выделяете место в тексте, где нужно установить нумерованный список. Далее, нажимаете вверху текстового редактора Word на нумерованный список (Скрин 5).

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

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

Разберём порядок работы с нумерованным списком. Когда Вы его установили, у Вас появится одна цифра в списке. Чтобы проставить все, необходимо нажать поочерёдно перед каждым словом левой кнопкой мыши и нажимать по нумерованному списку. После этого, все слова будут пронумерованы цифрами от 1 до 5 и больше.

После каждой фразы в тексте, можно нажимать кнопку «Enter», чтобы появилась цифра на следующей строке. И после неё написать какое-либо слово, предложение – цифра появится автоматически.

Как изменить номер в списке Ворд

Изменить номер в списке Ворд довольно просто. Выделяете нумерованный список. Далее, его открываете (Скрин 6).

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

Изменить уровень списка.
Определить новый формат номера.
Задать начальное значение.

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

Как сделать многоуровневый список в Ворде, варианты

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

Выделяем в документе заранее заготовленный текст. Далее, нажимаем на раздел «Многоуровневый список» и устанавливаем необходимый список (Скрин 7).

Создать многоуровневый список можно вручную. Устанавливаем курсор мыши в самом начале предложения и нажимаем клавишу на клавиатуре – «TAB» и стрелку вправо. После их нажатия, слова будут разделены на разные уровни. Вместе с тем, многоуровневый список будет выглядеть по-другому.

Чтобы вернуть текст или список в исходное состояние, выделите текст левой кнопкой мыши. И нажмите несколько раз горячие клавиши – «CTRL+Z». Все изменения со списком исчезнут и Вы можете заново начать с ним работу.

Как сделать списки в Ворде по алфавиту

В Ворде создаются списки по алфавиту. Они помогут сортировать списки по возрастанию и убыванию. Опять выделяем список в документе. Далее, нажимаем на функцию – «Сортировка» Параметры — «Абзац» и «Текст» оставляем без изменений (Скрин 8).

Затем, выбираете другие значения — «По возрастанию» или «По убыванию». После чего, нажимаем «ОК». Тогда Ваш список будет отсортирован по алфавиту.

Урок 8Списки HTML

Содержание урока

Списки HTML

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

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

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

Сохраняем внесенные изменения в Notepad и открываем файл в браузере:

По умолчанию нумерация списка всегда начинается с 1. Если Вам необходимо, чтобы нумерация начиналась, например, с 5, то для тега <ol> нужно задать атрибут start и дать ему значение 5.

* С этого момента, когда мне будет нужно продемонстрировать Вам запись html кода — на рисунке будет изображен не весь код со структурой страницы, а только рассматриваемая нами часть кода. Я считаю, что сейчас Вы уже должны понимать, что теги, входящие в структуру html страницы — это обязательная составляющая. Если Вы забыли — смотрите урок 4.

По умолчанию элементы списка нумеруются при помощи цифр, однако стиль нумерации можно изменить используя для тега <ol> атрибут type, которому можно задавать значения 1, A, a, I, i.

1 - 1, 2, 3, 4... (задается по умолчанию)
A - A, B, C, D... 
a - a, b, c, d... 
I - I, II, III, IV... 
i - i, ii, iii, iv...

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

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

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

Маркированный список открывается с помощью тега <ul> и закрывается соответственно тегом </ul>. Каждая отдельная позиция (элемент) списка находится внутри тега <li>, так же, как и в случае с нумерованным списком.

По умолчанию элементы списка всегда маркируются черным кружком, стиль маркировки можно изменить используя для тега <ul> атрибут type, которому можно задавать значения disc, circle, square.

disc — ● (задается по умолчанию)

circle — ○

square — ■

Теперь давайте создадим список используя для маркировки черные квадратики (square).

Многоуровневый список html.

Многоуровневый список html — это список, который содержит в себе еще один или несколько списков. Многоуровневый список может состоять как из нумерованных, так и из маркированных списков. Чтобы его создать нужно один обычный список «вложить» в другой обычный.

Каждый отдельный элемент списка находиться между тегами

. Для создания многоуровневого списка нужно между этими тегами, помимо текста вставить еще один списокБез наглядного примера в этом сложно разобраться, так что все внимание на рисунок:

Мы сделали многоуровневый список из сочетания нумерованного и маркированного списка. Как видите в основе лежит нумерованный список, открывающийся тегом <ol> и закрывающийся тегом </ol>. Первый элемент нашего нумерованного списка открывается тегом <li>, затем, как обычно, идет текст, а далее вместо того чтобы закрыть элемент списка тегом </li>, мы вставляем еще один полноценный маркированный список. И только после этого мы закрываем элемент списка тегом </li>. Затем уже идут следующие элементы нашего основного нумерованного списка.

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

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

Список определений открывается тегом <dl> и закрывается тегом </dl>. Каждый отдельный термин заключается между <dt> и </dt>. Далее пишется определение к термину, оно находится между тегами <dd> и </dd>.

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

Сохраняем изменения и смотрим результат в браузере:

* Вот мы и рассмотрели все варианты списков html. Из своего опыта могу сказать, что многоуровневые списки используются не часто, списки определений еще реже. Самое главное, что Вы должны из этого урока усвоить — это принцип составления списков. Настоятельно советую попрактиковаться с многоуровневыми списками.

Следующая страница Списки HTML.mp4

Как создать списки в Word 2007, 2010, 2013: маркированный, нумерованный, многоуровневый

Для создания списка в Word необходимо на вкладке «Главная» в группе «Абзац» нажать на одну из кнопок, соответствующей виду списка: маркированному, нумерованному, многоуровневому.

Как создать маркированный список в Word?

Для создания маркированного списка нажмите кнопку «Маркеры» — в тексте появится маркер, либо установленный по умолчанию (черный круг), либо последний из использованных вами. Для выбора типа маркере необходимо нажать на стрелку рядом с кнопкой «Маркеры». В открывшемся окне нужно выбрать интересующий вас тип маркера. Также, при необходимости, вы можете определить новый маркер, нажав на соответствующую кнопку.

Новый маркер может быть задан на основе символа одного из шрифтов, либо на основе рисунка.

Наиболее оригинальные маркеры могут быть заданы на основе рисунка. Нажмите кнопку «Рисунок», затем выберите в списке понравившийся вариант и нажмите «ОК» в этой и следующей форме.

Как создать нумерованный список в Word?

Для создания нумерованного списка нажмите кнопку «Нумерация» — в тексте появится элемент нумерации, либо установленный по умолчанию (число), либо последний из использованных вами. Для выбора типа нумерации необходимо нажать на стрелку рядом с кнопкой «Нумерация». В открывшемся окне нужно выбрать интересующий вас тип нумерации. Также, при необходимости, вы можете определить новый формат номера, нажав на соответствующую кнопку.

Новый маркер может быть задан на основе чисел, букв или слов. В поле «Формат номера» вы можете адаптировать формат номера под свои нужды — заменить точку на тире или убрать ее.

Как создать многоуровневый список в Word?

Для создания многоуровневого списка нажмите кнопку «Многоуровневый список» — откроется список основных вариантов построения многоуровневой нумерации. Вы можете выбрать один из них, или определить новый многоуровневый список, нажав на соответствующую кнопку.

В открывшейся форме создания нового многоуровневого списка вы можете последовательно пройти интересующие вас уровни и задать необходимые вам параметры — вы сможете увидеть весь набор параметров, нажав на кнопку «Больше» в левом нижнем углу. В частности, вы можете связать уровень списка со стилем заголовка (это удобно, если вы делаете структуру разделов документа и собираетесь затем автоматически собрать оглавление), или другой стиль.

Как работать с многоуровневым списком?

Когда вы добавите многоуровневый список в документ, вы сможете понижать и повышать уровень элемента списка с помощью кнопок «Увеличить отступ» (если вам нужно сместить элемент списка на уровень вниз) и «Уменьшить отступ» (если вам нужно сместить элемент списка на уровень вверх).

Источник

Создание собственных маркеров

Рано или поздно перед Вами встанет необходимость создать маркеры списка со своим дизайном, благодаря CSS свойству list-style-image мы это желание сможем реализовать в Вашем проекте.

Синтаксис свойства следующий:

ol {
list-style-image : url('images/primer.png'); /* указываем относительный путь к изображению */
}
ul {
list-style-image : url('http://basicweb.ru/images/mini5.png'); /* указываем абсолютный путь к изображению */
}

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

Если вы планируете оформить собственные маркеры, то вам придется использовать программу для редактирования графики, либо воспользоваться уже готовыми наборами

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования CSS свойства list-style-image</title>
.test {
list-style-image : url('http://basicweb.ru/images/mini5.png'); /* указываем абсолютный путь к изображению, которое будет использовано в качестве маркера */
}
</style>
</head>
	<body>
		<ul class = "test">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
	</body>
</html>

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

Результат нашего примера:

Рис. 72 Пример использования CSS свойства list-style-image (использование изображения в качестве маркера).