Форматирование списков

Типы списков

Каскадные таблицы стилей предоставляют множество различных способов маркировки нумерованных и ненумерованных списков, начиная с набора геометрических фигур (маркированный список) и заканчивая различными системами счисления (нумерованный список). Все эти варианты можно выбрать, используя свойство list-style-type.

Маркированный список (ненумерованный):

• list-style-type: square; - маркеры в виде залитых квадратов;
• list-style-type: disc; - маркеры в виде залитых кругов;
• list-style-type: circle; - маркеры в виде не залитых кругов.

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

• list-style-type: decimal; - нумерация арабскими цифрами (1,2,3…);
• list-style-type: decimal-leading-zero; - нумерация арабскими цифрами с начальным нулём (01,02,03…);
• list-style-type: upper-alpha; - нумерация заглавными латинскими буквами (A,B,C…);
• list-style-type: lower-alpha; - нумерация арабскими цифрами (a,b,c…);
• list-style-type: upper-roman; - нумерация заглавными римскими цифрами (I,II,III…);
• list-style-type: lower-roman; - нумерация римскими цифрами (i,ii,iii…);

Числа можно заменить буквами греческого алфавита — α, β, γ, воспользовавшись значением lower-greek. Существует множество других схем нумерации.

Свойство можно прописывать для элементов ol, ul, li а также классов.

ul{list-style-type: square;}

ol{list-style-type: upper-greek;}

.circle {list-style-type: circle;}.

Положение маркеров и нумерации

По умолчанию маркеры и цифры идут слева от списка, но применив свойство list-style-position можно это изменить.

• list-style-position: outside; - маркеры располагаются

вне текстовых блоков;

• list-style-position: inside; - маркеры располагаются

внутри текстовых блоков.

Графические маркеры

Графические маркеры – это маркеры, созданные в каком-либо графическом редакторе. Свойство list-style-image позволяет определить путь к графическому символу.

Например, если вы создали изображение под названием “arrow.gif” и поместили его в папку “images”, то свойство запишется как: list-style-image: url(images/arrow.gif).

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