SiteIS

HTML и CSS - революция в мире web-дизайна!

- управление отображением множества документов с помощью каскадных таблиц стилей

- Более точный контроль над внешним видом web-документов

- Различные представления для разных носителей информации

- Сложная и проработанная техника дизайна

Подробно о свойстве list-style

За добавление маркера, его расположение и внешний вид в css отвечают свойства:

  • - list-style-image (я не использую это свойство - ниже обьясню, почему);
  • - list-style-type;
  • - list-style-position.

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

Свойство list-style-type

Имеет следующие допустимые значения:

- disc - маркер пункта в списке будет отображаться в виде жирной точки;

ul {
list-style-type:disc;
}
  • Пример использования свойства list-style-type с параметром disc

- circle - маркер пункта в списке будет отображаться в виде круга;

ul {
list-style-type:circle;
}
  • Пример использования свойства list-style-type с параметром circle

- square - маркер пункта в списке будет отображаться в виде черного квадратика;

ul {
list-style-type:square;
}
  • Пример использования свойства list-style-type с параметром square

- decimal - маркер пункта в списке будет отображаться в виде арабских цифр начиная с 1;

ul {
list-style-type:decimal;
}
  • Пример использования свойства list-style-type с параметром decimal - первый пункт списка
  • Пример использования свойства list-style-type с параметром decimal - второй пункт списка

- decimal-leading-zero - маркер пункта в списке будет отображаться в виде арабских цифр начиная с 01, 02... 98,99 (не поддерживается в ИЕ 7);

ul {
list-style-type:decimal-leading-zero;
}
  • Пример использования свойства list-style-type с параметром decimal-leading-zero - первый пункт
  • Пример использования свойства list-style-type с параметром decimal-leading-zero - второй пункт

- lower-roman - маркер пункта в списке будет отображаться в виде прописных букв римского алфавита (i, ii, iii, iv, v);

ul {
list-style-type:lower-roman;
}
  • Пример использования свойства list-style-type с параметром lower-roman - первый пункт
  • Пример использования свойства list-style-type с параметром lower-roman - второй пункт
  • Пример использования свойства list-style-type с параметром lower-roman - третий пункт
  • Пример использования свойства list-style-type с параметром lower-roman - четвертый пункт

- upper-roman - маркер пункта в списке будет отображаться в виде римских цифр (I, II, III, IV, V);

ul {
list-style-type:upper-roman;
}
  • Пример использования свойства list-style-type с параметром upper-roman - первый пункт
  • Пример использования свойства list-style-type с параметром upper-roman - второй пункт
  • Пример использования свойства list-style-type с параметром upper-roman - третий пункт
  • Пример использования свойства list-style-type с параметром upper-roman - четвертый пункт

- lower-greek - маркер пункта в списке будет отображаться в виде прописных букв греческого алфавита (не поддерживается в ИЕ 7);

ul {
list-style-type:lower-greek;
}
  • Пример использования свойства list-style-type с параметром lower-greek
  • Пример использования свойства list-style-type с параметром lower-greek

- lower-latin - маркер пункта в списке будет отображаться в виде прописных букв латинского алфавита (a, b, c) (не поддерживается в ИЕ 7);

ul {
list-style-type:lower-latin;
}
  • Пример использования свойства list-style-type с параметром lower-latin
  • Пример использования свойства list-style-type с параметром lower-latin

- upper-latin - маркер пункта в списке будет отображаться в виде заглавных букв латинского алфавита (A, B, C) (не поддерживается в ИЕ 7);

ul {
list-style-type:upper-latin;
}
  • Пример использования свойства list-style-type с параметром upper-latin
  • Пример использования свойства list-style-type с параметром upper-latin

- none - маркер пункта в списке не будет отображаться.

ul {
list-style-type:none;
}
  • Пример использования свойства list-style-type с параметром none

Свойство наследуется и по умолчанию имеет значение disc.

Свойство list-style-position

Отвечает за расположение маркера в списке. Имеет два допустимых значения:

- inside - маркер будет находиться внутри блока с элементом списка, к которому он относится;

ul {
list-style-position:inside;
}
  • Пример использования свойства list-style-position с параметром inside - маркер расположен внутри блока с элементом списка, к которому он относится.

- outside - маркер будет находиться снаружи блока с элементом списка, к которому он относится.

ul {
list-style-position:outside;
}
  • Пример использования свойства list-style-position с параметром outside - маркер расположен снаружи блока с элементом списка, к которому он относится.

Свойство list-style-image

Устанавливает в качестве маркера изображение, которое будет использоваться для маркировки пунктов списка:

ul {
list-style-image:url('/images/ball.gif');
}
  • Пример использования свойства list-style-image - маркер списка выводится в виде картинки.

Из-за возникающих сложностей с позиционированием изображения используется не часто. Лично я предпочитаю использовать свойство background-image, если требуется маркер-картинка.

Свойство list-style

Как уже упоминалось ранее в этой статье, это свойство является универсальным и позволяет установить одно, два, или три значения для маркировки пунктов списка.

Следующая запись отобразит маркер в виде черной жирной точки снаружи блока с элементом списка:

ul {
list-style:disc outside;
}
  • Пример использования свойства list-style с параметрами disc и outside - маркер расположен снаружи блока с элементом списка, к которому он относится.

Запись такого вида отобразит маркер в виде окружности внутри блока с элементом списка:

ul {
list-style:circle inside;
}
  • Пример использования свойства list-style с параметрами circle и inside - маркер расположен внутри блока с элементом списка, к которому он относится.

Автор: Super User