Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Списки : list-style

смотрим также

Материал из Справочник Web-языков

Перейти к: навигация, поиск


Содержание

Атрибут list-style | Свойство listStyle

Может одновременно задавать до трех значений: положение маркера, его стиль и изображение.

Синтаксис

HTML { list-style : sStyle }
Скрипты [ sStyle = ] object.style.listStyle

Используемые значения

sStyle
Строка, которая может определять и принимать от одного до трех из следующих значений:
type
Одно из диапазона значений, доступных для свойства listStyleType.
position
Одно из диапазона значений, доступных для свойства listStylePosition.
image
Одно из диапазона значений, доступных для свойства listStyleImage.

Это свойство читается/записывается для всех объектов. Значением по умолчанию является disc outside none. Атрибут Каскадных таблиц стилей (CSS) наследуется.

Замечания

Свойство listStyle - это универсальное составное свойство. Когда установливаются оба значения для типа, а также для изображения, то у значения для изображения есть приоритет (будет показан рисунок, а не один из стандартных маркеров списка), кроме случаев, когда для listStyleImage установлено значение none или ссылка (URL) на изображение установлена неправильно или устарела.

Свойство listStyle также применяется ко всем элементам, для которых установлено значение list-item для свойства display. Чтобы задать показ маркера списка в виде жирных точек, вы обязательно должны подробно описать свойство margin или задать значение inside для свойства listStylePosition в этих элементах.

Значения в свойстве listStyle могут быть описаны в любом порядке. Их необходить разделять пробелом.

Примеры

Следующие примеры иллюстрируют применение свойства listStyle и атрибута list-style для задания стиля списка.

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

<STYLE>
    UL { list-style: outside url(dot.gif) }
    UL.compact { list-style-image:none; list-style: inside circle }
</STYLE> 
</HEAD>
<BODY> 
<UL>
    <LI>...
    <LI>...
</UL>
<UL CLASS=compact>
    <LI>...
    <LI>...
</UL>

Во втором примере используется свойство listStyle. Если заданное для списка изображение будет недоступно, то будет использоваться маркер hollow circle (пустой кружок).

<UL onmouseover="this.style.listStyle='url(dot.gif) circle'">

В третьем примере показано, что свойство listStyle применимо для элементов, у которых свойство display принимает значение list-item.

<SPAN onmouseover="this.style.display='list-item'">Строка текста...</SPAN>

Стандарты

Это свойство описано в Cascading Style Sheets (CSS), Level 1 (CSS1)

Ссылки на источники

http://msdn.microsoft.com/en-us/library/ms530789(VS.85).aspx

https://developer.mozilla.org/en/CSS/list-style

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования