Связь и интернет Архив Программирование
   
Сделать стартовойСделать закладку            
   ПОИСК  
   
Главная / CSS / Не для новичков /
8  Perl
8  PHP
8  JavaScript
8  HTML
8  DHTML
8  XML
8  CSS
8  C / C++
8  Pascal и Delphi
8  Турбо Ассемблер
8  MySQL
8  CASE-технологии
8  Алгоритмы
8  Python
8  Обратная связь
8  Гостевая книга
Новости о мире


Генерация содержимого, нумерация и списки - Программирование от RIN.RU
Генерация содержимого, нумерация и списки



Списки


Введение в списки


Элементы списков создаются присваиванием значения 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  В тему

Введение в таблицы стилей

Селекторы, псевдоклассы и псевдоэлементы

Значения свойств, каскадность и наследование

Границы, заполнители и рамки

Позиционирование элементов

Визуализация элементов

Цвет и фон

Шрифты

Текст

Таблицы

Страничные устройства вывода

Звуковые таблицы стилей

 
  
  
    Copyright ©  RIN 2003 - 2004      * Обратная связь