В этой статье мы расскажем, как с помощью 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
Данное свойство позволяет вместо маркера использовать картинку.
ul {list-style-image: url(img/marker.gif);}
LIST-STYLE
Позволяет объединить все вышеперечисленные свойства в одно, что позволит увеличить скорость загрузки сайта.
ul {
list-style-type:square;
list-style-position: inside;
list-style-image: url(img/marker.gif);}
Пример с сокращением:
ul {list-style:square inside url(img/marker.gif) }
В обоих случаях отображение списков будет абсолютно одинаковым.
- Основы CSS
- Что такое CSS
- Как подключить таблицу CSS к документу HTML
- Синтаксис CSS
- Фон и цвет в CSS
- Шрифты в CSS
- Текст в CSS
- Списки в CSS
- Ссылки в CSS
- Типы селекторов в CSS
- Блоковая модель в CSS
- Рамки в CSS
- Поля и отступы в CSS
- Высота и ширина в CSS
- Позиционирование блоков
- Плавающие блоки
- Слои в CSS
- Заключение, правильное написание, образцы.