Списки в CSS

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

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 - маркер списка отсутствует;

LIST-STYLE-POSITION

С помощью этого свойства можно определять положение маркера, их может быть всего два:
• inside - внутри основного блока списка.

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

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

LIST-STYLE-IMAGE

Данное свойство позволяет вместо маркера использовать картинку.

LIST-STYLE

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

В обоих случаях отображение списков будет абсолютно одинаковым.