Правила CSS для настройки внешнего вида списка на html странице. Свойство list style (type, image, position)

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

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

Это свойство читается/записывается для всех объектов. Значением по умолчанию является 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 .

• ...
• ...

• ...
• ...

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

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

Описание

Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для подробного ознакомления смотрите информацию о каждом свойстве , и отдельно.

Синтаксис

list-style: list-style-type || list-style-position || list-style-image | inherit

Значения

Любые комбинации трех значений определяющих стиль маркеров, они разделяются между собой пробелом. Комбинации значений должны следовать в указанном порядке: вначале идет тип маркера, затем положение и картинка. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.

Inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

• Lorem ipsum dolor sit amet
• Consectetuer adipiscing elit
• Sed diem nonummy nibh euismod
• Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства list-style

Объектная модель

document.getElementById("elementID ").style.listStyle

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Внешний лист стилей позволяет сконцентрировать информацию о форматировании сайта в одном файле. Для того, чтобы сослаться на внешний лист стилей css надо в теле после заголовка прописать следующую строчку

Атрибут href указывает путь к файлу внешнего листа стилей. Данную строку надо прописывать в тексте всех Вэб-страниц, где надо использовать внешний лист стилей.

Таким образом, изменения, вносимые в файл style.css, сразу отображаются на всех страницах, ссылающихся на этот файл.

Частное определение стилей

Если надо применить какой-либо стиль частным образом, по отношению к отдельному экземпляру дескриптора, то для этого надо воспользоваться атрибутом STYLE. Такой прием позволяет воспользоваться всеми преимуществами, предоставляемыми стилями, избегая обязанности создавать листы стилей. Частное использование стилей можно пользовать даже в том случае, если страница уже содержит внутренний или ссылку на внешний лист стилей, т.к. частный стиль имеет наивысший приоритет.

Пример:

Атрибут ID

Если надо применить стиль к отдельному элементу Вэб-страницы, то надо воспользоваться атрибутом ID.

Для этого надо нужному тэгу элемента страницы назначить идентификатор. После этого можно определить во внутреннем или внешнем листе стилей свойства данного элемента. Заданные признаки форматирования будут установлены только для элемента, отмеченного указанным идентификатором.

В примере используется два разных значения свойства List-style-type :

List-style-position

Свойство определяет расположение маркера элемента. Либо маркер находится внутри элемента, либо за его пределами.

Значения:

inside — маркер располагается внутри элемента списка.
outside — маркер вынесен за пределы текстового блока.
inherit — наследование от родительского элемента.

В примере наглядно видна разница между значениями inside и outside свойства List-style-position :

List-style-image

Свойство задает путь к картинке, которая будет служить маркером элемента нумерованного или маркированного списка. Расположением картинки-маркера можно управлять при помощи свойства List-style-position .

Значения:

URL — путь к графическому файлу.
none — отменяет картинку-маркер, например, для родительского элемента.
inherit — наследование от родительского элемента.

Ul {list-style-image: url(papka/find.png); list-style-position:inside;}

В примере мы использовали в качестве маркера картинку небольшого размера, что наглядно демонстрирует возможности свойства List-style-image :

Описание

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

Синтаксис

list-style-image: none | url("путь к файлу") | inherit

Значения

none Отменяет изображение в качестве маркера для родительского элемента. url Относительный или абсолютный путь к графическому файлу. Значение можно указывать в одинарных, двойных кавычках или без них. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

• Lorem ipsum dolor sit amet
• Consectetuer adipiscing elit
• Sed diem nonummy nibh euismod
• Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства list-style-image

Объектная модель

document.getElementById("elementID ").style.listStyleImage

Браузеры

В разных браузерах расстояние между изображением и текстом может различаться.

В Internet Explorer до версии 7.0 включительно не отображаются маркеры, если для списка добавлено свойство float . Также в этом браузере не поддерживается значение inherit .