Списки Введение в списки Элементы списков создаются присваиванием значения list-item свойству display. Как и в более общем случае маркеров, они отображаются в виде двух прямоугольников: главного прямоугольника для содержимого элемента и необязательного прямоугольника маркера списка. Свойства списков позволяют задать тип этого маркера и его положение относительно главного прямоугольника. Отметим, что при отображении списков фон элемента распространяется только на главный прямоугольник; прямоугольник маркера всегда прозрачен. Тип маркера списка: свойство list-style-type Синтаксис: list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha |lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit Начально: disc Применимо: к элементам типа display: list-item Наследуемо: да Проценты: не используются Устройства: визуальные Поддержка : Поддерживаются только disc, circle, square, none, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha (4.0+) Поддерживаются только disc, circle, square, none, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha (4.0+) Свойство list-style-type задает тип маркера списка. Оно может принимать следующие значения: disc Черный кружок (зависит от обозревателя) circle Светлый кружок (зависит от обозревателя) square Черный квадратик (зависит от обозревателя) decimal Десятичные числа (1, 2, 3, :) decimal-leading-zero Десятичные числа с ведущим нулем (01, 02, 03, : 98, 99) lower-roman Строчные римские числа (i, ii, iii, iv, v, :) upper-roman Прописные римские числа (I, II, III, IV, V, :) lower-greek Строчные греческие буквы (α, β, γ, :, ω) lower-alpha Строчные латинские буквы (a, b, c, :, z) lower-latin Строчные латинские буквы (a, b, c, :, z) upper-alpha Прописные латинские буквы (A, B, C, :, Z) upper-latin Прописные латинские буквы (A, B, C, :, Z) hebrew Традиционная ивритская нумерация armenian Традиционная армянская нумерация georgian Традиционная грузинская нумерация (an, ban, gan, :, he, tan, in, in-an, :) cjk-ideographic Дальневосточная идеографическая нумерация hiragana Японская нумерация азбукой хирагана (a, i, u, e, o, ka, ki, :) katakana Японская нумерация азбукой катакана (A, I, U, E, O, KA, KI, :) hiragana-iroha Японская нумерация хирагана-ироха (i, ro, ha, ni, ho, he, to, :) katakana-iroha Японская нумерация катакана-ироха (I, RO, HA, NI, HO, HE, TO, :) Спецификация CSS не определяет, какие символы должны использоваться в качестве маркеров списка, когда заданный алфавит будет исчерпан. Например, 27-й элемент списка типа lower-alpha не определен. Поэтому алфавитные типы маркеров должны использоваться только для коротких списков заранее известного размера. Если обозреватель не поддерживает заданный тип маркера, то он должен заменяться на decimal. Это свойство применяется к списку только тогда, когда значением свойства list-style-image является none или указанный в нем графический образ не может быть загружен. Следующий пример нумерует элементы нумерованного списка строчными римскими числительными: OL { list-style-type: lower-roman } Графический маркер списка: свойство list-style-image Синтаксис: list-style-image: <uri> | none | inherit Начально: none Применимо: к элементам типа display: list-item Наследуемо: да Проценты: не используются Устройства: визуальные Поддержка : Соответствует стандарту (4.0+) Не поддерживается Свойство list-style-image задает графический маркер списка указанием на URI соответствующего графического образа. Если оно равно none, то тип маркера списка задается свойством list-style-type. Следующий пример помещает в начало каждого элемента маркированного списка графический образ "ellipse.gif": UL { list-style-image: url("http://mylibrary.com/ellipse.gif") } Позиция маркера списка: свойство list-style-position Синтаксис: list-style-position: inside | outside | inherit Начально: outside Применимо: к элементам типа display: list-item Наследуемо: да Проценты: не используются Устройства: визуальные Поддержка : Соответствует стандарту (4.0+) Не поддерживается Свойство list-style-position задает положение маркера списка относительно элемента списка. Оно может принимать следующие значения: inside Прямоугольник маркера становится первым текстовым блоком главного прямоугольника. outside Прямоугольник маркера размещается вне главного прямоугольника. Например, следующий фрагмент HTML-документа Первый элемент списка расположен таким вот образом. Второй элемент списка располагается так же. будет отображаться так (Netscape Navigator 4.x отображает этот пример неверно!): Первый элемент списка расположен таким вот образом. Второй элемент списка располагается так же. Задание свойств списка: свойство list-style Синтаксис: list-style: [ <list-style-type> || <list-style-image> || <list-style-position> ] | inherit Начально: не определено для сокращений Применимо: к элементам типа display: list-item Наследуемо: да Проценты: не используются Устройства: визуальные Поддержка : Соответствует стандарту (4.0+) Не поддерживается Свойство list-style является сокращением для свойств list-style-type, list-style-image и list-style-position. Оно позволяет задать все свойства списка одновременно. С его помощью стиль маркированного списка из предыдущего примера мог бы быть задан так: <UL style="list-style: square inside; width: 40%"> <<<  Назад  1  2  3   8  Комментарии к статье  8 8  Обсудить в чате

8  В тему Введение в таблицы стилей Селекторы, псевдоклассы и псевдоэлементы Значения свойств, каскадность и наследование Границы, заполнители и рамки Позиционирование элементов Визуализация элементов Цвет и фон Шрифты Текст Таблицы Страничные устройства вывода Звуковые таблицы стилей