Списки в CSS
С помощью языка CSS над списками можно выполнять множество действий. CSS можно использовать для изменения стиля отображаемых чисел или маркеров, их замены на изображение. А при объединении списков и ссылок получаются отличные средства навигации.
Содержание:
Свойство LIST-STYLE-TYPE
Это свойство задает маркер элемента списка. Значениями маркированных списков являются ключевые слова (аналогичны значению атрибута TYPE):
- disk — маркер в виде закрашенного круга;
- circle — маркер в виде незакрашенного круга;
- square — маркер в виде закрашенного квадрата;
- none — маркер не используется.
Для нумерованных списков значениями являются так же ключевые слова:
- decimal — десятичные числа с еденицы (1);
- decimal-leading-zero — десятичные числа с ведущими нолями (01; 02; 03…), не поддерживается IE;
- 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, c, d… (lower-alpha только для IE);
- lower-greek — строчные буквы греческого алфавита (только для Mozilla и Opera).
Смотрим пример написания правила:
ol {list-style-type:lower-alpha}
Получился список пронумерованный строчными буквами кода ASCII:
Свойство LIST-STYLE-IMAGE
При помощи этого свойства вместо стандартного маркера можно вставить свое изображение (только с помощью CSS). Тут фантазии нет предела для начинающего web-мастера. Правило пишется так:
ul {list-style-image:url (адрес изображения)}
Свойство LIST-STYLE-POSITION
С помощью этого свойства задается положение маркера, значения задаются сключевыми словами:
- outside — за пределами основного блока элемента списка;
- inside — внутри основного блока.
Правило для outside:
ul {list-style-position:outside}
Получаем:
- Первый пункт списка. Блок маркера находится за пределами основного блока элемента списка если задано знчение outside.
- Второй пункт.
- Третий пункт списка.
Правило для inside:
ul {list-style-position:inside}
Получаем:
- Первый пункт списка. Блок маркера находится внутри основного блока элемента списка если задано знчение inside.
- Второй пункт.
- Третий пункт списка.
Свойство LIST-STYLE
Это стенографическое свойство, которое позволяет записать значения в сокращенной форме. Смотрим пример:
ul {
list-style-image:url (адрес изображения);
list-style-position:outside
}
Пишем это же в сокращенном виде:
ul {list-style: url (адрес изображения) outside}
На этом со списками закончим и перейдем обширной теме «блоки в CSS»