html.okpython.net
HTML и CSS для начинающих

CSS :: Списки

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

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Оформление списков</title>

	<style>
	
		ul{
		width: 500px;
		margin: 2em;
		padding: 0px;
		background-color: #009900;		
		}
	
		.list_2	{
		list-style-position: inside;
		list-style-type: decimal;
		}
		
		.list_3{
		list-style-position: outside;
		list-style-image: url("circle_orange.png");
		}
		
		.list_4{
		list-style-position: inside;
		list-style-type: square;
		}
		
		.list_5{
		list-style: decimal inside;
		}		
		
		.list_6{
		list-style: outside url("circle_orange.png");
		}			
		
	</style>
	
</head>
<body>

	<ul>
	
		<li>
			Все значения по умолчанию.<br><br>
		</li>
	
		<li class="list_2">
			list-style-position: inside;<br>
			list-style-type: decimal;<br><br>
		</li>
		
		<li class="list_3">
			list-style-position: outside;<br>
			list-style-image: url("circle_orange.png");<br><br>
		</li>
		
		<li class="list_4">
			list-style-position: inside;<br>
			list-style-type: square;<br><br>
		</li>
		
		<li class="list_5">
			list-style: decimal inside;<br><br>
		</li>
		
		<li class="list_6">
			list-style: outside url("circle_orange.png");
		</li>
		
	</ul>
	
</body>
</html>

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

Тип маркера задается при помощи наследуемого свойства 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 указывает браузеру на размещение маркеров вместе с содержимым пунктов списка (см. пример №1).

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

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

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

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

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

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

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

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

Быстрый переход к другим страницам

▲
▼