Оформление внешнего вида списков в CSS
http://belarusweb.net
Основы создания сайтов

Оформление внешнего вида списков

Тип маркера списка и
css-свойство list-style-type

В процессе изучения HTML мы научились создавать списки, но оформление внешнего вида оставили за CSS, который позволяет выбрать нужный тип и расположение маркеров, а также использовать в качестве маркеров изображения (см. пример 2.10).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Оформление списков</title>
	<style>
		.list_1	{
		list-style-type: decimal;
		list-style-position: outside;
		}
		.list_2{
		list-style-type: none;
		}
		.list_3{
		list-style-type: square;
		list-style-position: inside;
		}
	</style>
</head>
<body>
	<ul>
		<li class="list_1">
			Маркер размещаем вне списка.<br>
			Стандартный маркер.<br><br>
		</li>
		<li class="list_2">
			Второй пункт списка.<br>
			Не используем маркер вообще.<br><br>
		</li>
		<li class="list_3">
			Маркер размещаем внутри списка.<br>
			Стандартный маркер другого типа.
		</li>
	</ul>
</body>
</html>

Пример 2.10. Примеры оформления маркеров списка

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

  • disc – маркер в виде диска; значение используется браузером по умолчанию для маркированных списков;
  • circle – маркер в виде круга;
  • square – маркер в виде квадрата;
  • decimal – арабские цифры, т.е. 1, 2, 3 и т.д.; значение используется браузером по умолчанию для нумерованных списков;
  • decimal-leading-zero – те же арабские цифры, только с нулем впереди для всех цифр, которые меньше десяти, т.е. 01, 02,...09, 10, 11 и т.д.;
  • lower-roman – римские цифры в нижнем регистре, т.е. i, ii, iii, iv и т.д.;
  • upper-roman – римские цифры в верхнем регистре, т.е. I, II, III, IV и т.д.;
  • lower-greek – строчные греческие буквы, т.е. α, β, γ и т.д.;
  • lower-latin или lower-alpha – строчные латинские буквы, т.е. a, b, c и т.д.;
  • upper-latin или upper-alpha – прописные латинские буквы, т.е. A, B, C и т.д.;
  • armenian – армянские цифры;
  • georgian – грузинские цифры;
  • none – отменяет маркеры вообще, т.е. список идет без маркеров.

Расположение маркеров списка и
css-свойство list-style-position

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

Использование изображений в качестве маркеров списка.
css-свойство list-style-image

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

  • url – относительный или абсолютный путь к файлу изображения, указываемый в скобках с использованием одиночных или двойных кавычек или без них, например, {list-style-image: url("http://www.belarusweb.net")};
  • none – используется по умолчанию и указывает браузеру, что следует применять стандартный маркер вместо изображения.

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

Универсальное css-свойство list-style

Можно задать значения всех трех свойств одновременно посредством наследуемого универсального свойства list-style. Опять же, значения должны разделяться пробелом, но могут идти в любом порядке или отсутствовать, тогда браузер заменит их значениями по умолчанию (см. пример 2.10).

Все свойства, перечисленные в данном пункте, применяются к элементам, у которых {display: list-item}, в частности, к элементам 'ul', 'ol', 'li', 'dl', 'dd', 'dt'.

Различные варианты оформления списков можно посмотреть на соответствующей странице нашего учебного сайта №1.