list-style

Суммирующее свойство, позволяющее одной строкой присвоить значения всем трём нижеуказанным свойствам. Либо нескольким из них. Значения этих свойств просто перечисляются через пробел, порядок следования не важен. Синтаксис свойства:
list-style: list-style-type || list-style-position || list-style-image

Пример:
<ul style="list-style:square inside">
<li>элемент 1
<li>элемент 2<br>2-ая строка элемента 2
</ul>
  • элемент 1
  • элемент 2
    2-ая строка элемента 2







а) list-style-image

Позволяет использовать в качестве маркера какой-либо рисунок, адрес которого указывается в скобках после слова url (т.е. list-style-image: url(адрес); ). Относительные адреса указываются относительно расположения таблицы стилей, а не HTML-документа. Также можно присвоить значение none (по умолчанию).

Пример:
<ul style="list-style-image: url(smallpic.gif)">
<li>элемент 1
<li>элемент 2
</ul>
  • элемент 1
  • элемент 2
б) list-style-position

Определяет расположение маркера. Возможные значения:
outside маркер выступает перед текстовым блоком элемента списка (по умолчанию)
(outside - англ. наружный, внешний)
  • пример длинного текста, относя­щегося к элементу 1
  • пример длинного текста, относя­щегося к элементу 2
inside маркер втягивается в текст, преобразуется в его первые символы
(inside - англ. внутренний)
  • пример длинного текста, относя­щегося к элементу 1
  • пример длинного текста, относя­щегося к элементу 2

При создании примеров использовался следующий код:
<ol style="list-style-position:outside">
<li>пример ... 1
<li>пример ... 2
</ol>
<ol style="list-style-position:inside">
<li>пример ... 1
<li>пример ... 2
</ol>
в) list-style-type

Определяет тип маркера в списке или его отдельном элементе. При этом не имеет значения, является список нумерованным или маркированным. Возможные значения:
Пример:
<ol style="list-style-type:lower-alpha">
<li>элемент 1
<li>элемент 2
<li style="list-style-type:disc">элемент 3
</ol>
  1. элемент 1
  2. элемент 2
  3. элемент 3

(disc - англ. круг, диск
circle - англ. круг, окружность
square - англ. квадрат
decimal - англ. десятичный
lower - англ. нижний, низший
upper - англ. верхний, высший
roman - англ. римский
none - англ. никакой)
Hosted by uCoz