Оформление списков: List-style. Краткая форма задания стилей списка

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

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

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

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

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

Пример:

Атрибут ID

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

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




  • 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

Описание

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

Синтаксис

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

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

list-style-image

  • 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 .

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

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

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

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

Замечания

Свойство listStyleImage применяется ко всем элементам, для которых заданы margin и display: list-item .

Когда изображение доступно, оно заменяет изображение маркера, установленное в listStyleType .

Чтобы показывалось изображение маркера списка, для свойства margin должно быть установлено значение минимум 30 pt .

Примеры

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

В первом примере используется селектор ul и атрибут list-style-image .

Во втором примере используется свойство listStyleImage для смены стиля маркера, когда происходит событие onmouseover .

    Устройства