Генерируемое содержимое и списки

94. Стиль маркеров или нумерации списков определяется при помощи свойства каскадный таблиц стилей list-style-type, которое может принимать следующие значения:

  • disc - диск
  • circle – окружность
  • square - квадрат
  • decimal – десятичная нумерация списков
  • decimal-leading-zero – десятичная нумерация с ведущими нулями
  • lower-roman – нумерация римскими строчными литерами
  • upper-roman – нумерация при помощи римских строчных литер
  • сjk-ideographic - нумерация с помощью идеограмм,
  • none – нет маркеров и нумерации
Пример использования: ol {list-style: decimal-leading-zero }

95. В качестве маркеров, можно использовать изображение, которое определено свойством list-style-image. В качестве входного параметра используется URL к изображению, предназначенному быть маркером.

Пример использования: ul {list-style-image: url("bullet3.gif")}

96. Расстояние между маркером и текстом задается свойством marker-offset. Свойство может принимать следующие значения:

  • auto – значение по умолчанию, устанавливается браузером
  • любое значение длины, определяемое стандартом CSS
Пример использования:

h1 {marker-offset: 12px}

97. Задать положение маркера внутри элемента позволяет свойство list-style-position, которое принимает значение – inside.

Пример использования: ul {llist-style-position: inside}

98. Задать положение маркера вне элемента позволяет свойство list-style-position, которое принимает значение – outside.

Пример использования: ul {llist-style-position: outside }

Пример использования: ul {llist-style-position: inside}

99. Установить сразу все параметры стиля списка позволяет свойство list-style. В том случае, когда одно из определяющих значений пропущено, это значение берется по умолчанию.

В качестве значений, свойства, выступают:

  • 1 значение - list-style-type - вид маркера.
  • 2 значение - list-style-position - положение маркера.
  • 3 значение - list-style-image - изображение для маркера.
Пример использования: ul {list-style: circle inside url("bullet4,gif")}