Главное преимущество автоматического создания списков перед ручным
состоит в том, что не приходится перенумеровывать пункты списка при
добавлении в него новых элементов. Особенно это важно, когда необходимо
добавить некоторый пункт в начало списка, - в случае ручного создания
придется вручную перенумеровывать большинство его пунктов. Это
трудоемкий процесс, особенно если пунктов в списке много, отнимающий
немало времени. При автоматическом создании списков ручной перенумерации
не требуется, она выполняется в автоматическом режиме при добавлении
новых пунктов.
В HTML есть два вида списков, поддерживающих автоматическую нумерацию: нумерованные и маркированные. Среди их параметров есть атрибут type, который позволяет задать тип нумерации. В CSS управление списками предоставляет создателям страниц более широкие возможности.
Свойство list-style-type
С помощью такого свойства задается вид маркера элемента списка.
Значения задаются при помощи ключевых слов, обозначающих вид маркера,
или значения попе, которое говорит о том, что маркер не используется.
Для определения видов маркеров маркированных списков используются ключевые слова:
- disk - в виде закрашенного круга;
- circle - в виде незакрашенного круга;
- square - в виде закрашенного квадрата.
Эти значения аналогичны значениям атрибута type для списков в HTML. Конкретное представление маркеров будет зависеть от браузера.
Для нумерованных списков перечень ключевых слов, задающих тип маркеров в CSS,
более широк, чем в HTML. Пожалуй, даже слишком широк. Применение
большей части значений вы вряд ли найдете. Кроме того, не все браузеры
их поддерживают в полном объеме. Тем не менее, укажем все допустимые
значения и браузеры, поддерживающие их. Доступны следующие значения для
видов маркеров.
- decimal - десятичные числа, начиная с 1.
- decimal-leading-zero - десятичные числа с ведущими
нулями (например, 01, 02, 03, ..., 98, 99). Это значение не
поддерживается браузером Internet Explorer, в котором нумерация всегда
ведется без ведущих нулей.
- lower-roman - римские цифры, представленные строчными буквами латинского алфавита (i, ii, iii, iv, v и т.д.).
- upper-roman - римские цифры, представленные приписными буквами латинского алфавита (I, II, III, IV, V и т.д.).
- hebrew - традиционная еврейская нумерация. Поддерживается только браузером Mozilla.
- georgian - традиционная грузинская нумерация.
Поддерживается браузерами Mozilla и Opera. Правда, выглядит эта
нумерация в них по-разному, я даже не берусь судить, какой из браузеров
делает это правильно.
- armenian - традиционная армянская нумерация. Также поддерживается только браузерами Mozilla и Opera. Нумерация выглядит одинаково.
- cjk-ideographic - простые идеографические числа. Поддерживается только браузером Mozilla.
- lower-latin или lower-alpha - строчные буквы в
коде ASCII (a, b, с, ..., z). Оба значения поддерживаются браузерами
Mozilla и Opera. Internet Explorer поддерживает только значение lower-alpha. В целях однозначности отображения во всех браузерах лучше пользоваться именно им.
- lower-greek - классические строчные буквы греческого
алфавита: альфа, бета, гамма и т.д. (б, в, г, д,...). Поддерживается
браузерами Mozilla и Opera.
В случае с нумерацией буквами какого-либо алфавита, после того как буквы
в алфавите заканчиваются, начинается двойная нумерация (аа, ab,
ас,...). В таблице для сравнения приведены способы создания нумерованных
списков при помощи CSS и только на HTML.
Создание нумерованных списков в HTML и CSS
|
HTML |
CSS
|
<OL TYPE="a">
<LI>Первый пункт списка</LI>
<LI>>Второй пункт списка</LI>
<LI>Третий пункт списка</LI>
<LI>>Четвертый пункт списка</LI>
</OL>
|
0L { list-style-type: lower-greek; }
|
Источник: http://css Списки |