Сейчас мы рассмотрим свойства CSS , которые отвечают за внешний вид списка. Их немного, так что урок будет полезным и быстрым.


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

Свойство LIST-STYLE-TYPE

Этот стиль позволяет определить вид маркера элемента списка. Сюда можно отнести цифры, буквы, квадратики, кружочки и прочее. Давайте рассмотрим основные значения свойства.

  • disk - маркер в виде закрашенного круга;
  • circle – маркер в виде незакрашенного круга;
  • square – маркер в виде закрашенного квадрата;
  • decimal – обычные десятичные числа , например 1,2,3,4,5 и т. д. ;
  • upper-roman – большие римские цифры, типа I, II, III, IV, V и т.д. ;
  • lower-roman – маленькие римские цифры типа i, ii, iii, iv, v и т.д.
  • upper-alpha – большие буквы A, B, C, D, E и так далее;
  • lower-alpha – малые буквы типа a,b,c,d,e и т.д.;
  • none – маркер списка отсутсвует;

Давайте переделаем упорядоченный список в неупорядоченный, т.е. элементу OL( упорядоченый список) напишем square, а элементу UL(неупорядоченный) тип upper-roman;

ol {list-style-type:square;}
ul {list-style-type: upper-roman;}

Вот и готовый результат. Можете убедиться, посмотрев html код примера.

Свойство LIST-STYLE-POSITION

Данное свойство определяет само положение маркера, рассмотрим значнеия:

  • outside – за пределами основного блока элемента списка;
  • inside – внутри основного блока списка.

Если мы мысленно обведем прямоугольником нужный блок, то увидим следующее:

Только все это уже не актуально и устарело, так что в новых браузерах может попросту не работать.

Свойство LIST-STYLE-IMAGE

Как по мне, так это самое интересное свойство в списках. Допускает поставить вместо маркера любое изображение. В значении нужно указать ключевое слово url, а затем в круглых скобках путь к выбранному изображению. В устаревших версиях браузера может работать некоректно.

ul {list-style-image: url(galka.gif);}

Не забудьте, что url(galka.gif) означает, что изображение galka.gif лежит в той же папке, где и css -файл. Если же изображение в другом месте, то и путь нужно указать другой!

Сокращенная форма LIST-STYLE

Все эти свойства так же можно записать компактно. Существует следующий сокращенный вариант list -style;

Такой вариант из трех строк:

ul {
list-style-type:square;
list-style-position: inside;
list-style-image: url(galka.gif);
}

Рациональнее заменить таким:

ul {list-style:square inside url(galka.gif) }

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

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

Со списками завершили.