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

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

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

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

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

Замечания

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

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

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

Примеры

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

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

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

    letter-spacing line-height list-style margin max-height max-width min-height min-width outline overflow padding position right text-align text-decoration text-indent text-transform top vertical-align white-space width word-spacing z-index
  • Справочник HTML Уроки HTML Видеокурсы по созданию сайта

    • С войство LIST-STYLE

    Свойство Значения Пр* Нc*
    list-style [ list-style-image; list-style-position; list-style-type ], inherit * +
    list-style-type disk , circle, square, decimal, decimal-leading-zero, lowel-roman, upper-roman, lowel-latin, upper-latin, armenian, georgian, none, inherit * +
    list-style-position inside, outside , inherit * +
    list-style-image URL, none , inherit * +

    Свойство List-style — сокращённая форма записи свойств, которые задают все стили маркеров для элементов списка. Эти свойства применяются, как к нумерованным, так и маркированным спискам — их нужно рассматривать по отдельности. Сокращённая форма записи может не включать какое-либо отдельное свойство, но порядок их записи должен соблюдаться: тип маркера — его позиция — путь к изображению.

    Область применения *: элементы списков и любые другие, для которых значением свойства Display является list-item .

    List-style-type

    Свойство устанавливает тип маркера для каждого элемента списка. Типы маркеров различаются для маркированных и нумерованных списков.

    Значения:

    disk — маркер-точка.
    circle — маркер-кружок.
    square — маркер-квадратик.
    decimal — арабские числа: 1, 2, 3 ….
    decimal-leading-zero — арабские числа, начиная с нуля: 01, 02, 03 … 09.
    lowel-roman — римская нумерация в нижнем регистре.
    upper-roman — римская нумерация в верхнем регистре.
    lowel-latin — строчные латинские буквы: a, b, c ….
    upper-latin — заглавные латинские буквы: A, B, C ….
    armenian — армянская нумерация.
    georgian — грузинская нумерация.
    none — отмена.
    inherit

    В примере используется два разных значения свойства 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 :

    Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
    Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
    Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да

    Краткая информация

    Описание

    Атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра list-style-type , list-style-position и list-style-image отдельно.

    Синтаксис

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

    Аргументы

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





    list-style



    • 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

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

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

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

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

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

      Краткая информация

      Синтаксис

      list-style-image: none | url(<адрес>)

      Обозначения

      Описание Пример
      <тип> Указывает тип значения. <размер>
      A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
      A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
      A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
      Группирует значения. [ crop || cross ]
      * Повторять ноль или больше раз. [,<время>]*
      + Повторять один или больше раз. <число>+
      ? Указанный тип, слово или группа не является обязательным. inset?
      {A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
      # Повторять один или больше раз через запятую. <время>#

      Значения

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

      Пример

      list-style-image

      • Легко проверить, что аффинное преобразование монотонно.
      • Доказательство решительно стабилизирует отрицательный криволинейный интеграл, явно демонстрируя всю чушь вышесказанного.
      • Степенной ряд, в первом приближении, расточительно искажает многомерный лист Мёбиуса, откуда следует доказываемое равенство.

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

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

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

      Объект .style.listStyleImage

      Спецификация

      Каждая спецификация проходит несколько стадий одобрения.

      • Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
      • Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
      • Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
      • Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
      • Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
      • Draft (Черновик спецификации ) - первая черновая версия стандарта.

      Браузеры

      Браузеры

      В таблице браузеров применяются следующие обозначения.