Лекционный и практический материал по теме Списки с помощью CSS

С помощью CSS вы можете изменить: ·       маркеры пунктов упорядоченного списка ·       маркеры пунктов неупорядоченного списка ·       вставить изображение в качестве маркера   Список В HTML существуют два типа списков: ·       неупорядоченный список — пункты списка маркируются буллетами (графическая фигура, кружок или квадрат) ·       упорядоченный список — пункты списка маркируются буквами или цифрами   Различные маркеры списков Тип маркера списка можно изменить с помощью свойства list-style-type: Пример ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;} Значения свойства list-style-type различаются для упорядоченных и неупорядоченных списков. Маркеры неупорядоченных списков Значение Описание none Нет маркеров disc Значение по умолчанию. Маркер в виде закрашенного кружка circle Маркер в виде незакрашенной окружности square Маркер в виде квадрата Маркеры упорядоченных списков Значение Описание armenian Традиционная армянская нумерация decimal Числовая нумерация decimal-leading-zero Числовая нумерация с нулем перед цифрой (01, 02, 03) georgian Традиционная грузинская нумерация (an, ban, gan) lower-alpha Строчные латинские буквы (a, b, c, d, e) lower-greek Строчные греческие буквы (alpha, beta, gamma) lower-latin Строчные латинские буквы (a, b, c, d, e) lower-roman Римские цифры в нижнем регистре (i, ii, iii, iv) upper-alpha Заглавные латинские буквы (A, B, C, D, E)  upper-latin Заглавные латинские буквы (A, B, C, D, E) upper-roman Римские цифры в верхнем регистре (I, II, III, IV, V) Заметка: ни одна версия Internet Explorer (включая IE8) не поддерживает следующие значения свойства list-style-type: "decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian" и "georgian".   Использование изображения в качестве маркера Для того, чтобы отображать в качестве маркера ваше изображение, используйте свойство list-style-image: Пример ul { list-style-image: url('sqpurple.gif'); }   Этот пример сгенерирует различный результат в разных браузерах. В IE и Opera маркер будет отображаться чуть выше, чем в Firefox, Chrome и Safari.