list-style-image в CSS


Содержание

list-style-image

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE до 7.0 (включ.) не поддерживает значение inherit + + + +

Пример

Как задать маркер в виде изображение для списка:

Описание и использование

Свойство list-style-image заменяет маркер списка изображением.

Примечание: Всегда дополнительно определяйте свойство list-style-type. Это свойство будет использоваться, если по какой-либо причине изображение не доступно.

CSS-свойство List

Двумя наиболее распространенными типами HTML-списков являются упорядоченный и неупорядоченный. Для их стилизации списков мы будем использовать свойство list-style CSS .

Ниже приведен пример неупорядоченного списка. В нем видно, что по умолчанию у списков используется выравнивание по левому краю:

list-style-type

Чтобы задать стиль маркера для пунктов списка, можно использовать свойство list-style-type .

Стандартное значение этого свойства – disc , но можно использовать и другие значения: circle , square , none . Кроме этого можно использовать такие значения, как upper-alpha , lower-alpha , upper-roman , lower-roman , decimal и т. д.

В приведенном ниже примере свойство list-style-type имеет значение square :

Если вам вообще не нужны маркеры, то CSS list style type необходимо присвоить значение none :

Поля и отступы

Чтобы добавить в список отступы, можно использовать свойство margin .

В приведенном ниже примере использования CSS ul li list style мы прибавляем поля по 30px над и под списком:

В следующем примере мы полностью исключаем поля:

В примере CSS ul list style мы убираем отступы:

Здесь мы задаем списку фиксированную ширину:

List-style-position

Это свойство отвечает за то, как текст внутри list style CSS будет переходить на следующую строку. Стандартное значение outside означает, что при переносе строки текст также получит выравнивание по левому краю. Если выставлено значение inside , то строка будет перенесена под маркер списка.

В примере, приведенном ниже, представлен список, в котором свойство list-style-position выставлено на outside ( значение по умолчанию ):

В следующем примере показано, что будет, если свойство list-style-position будет иметь значение inside . Таким образом, текст на новой строке будет начинаться прямо под маркером:

List-style-image

Свойство list-style-image позволяет использовать собственную пиктограмму в качестве маркера.

В примере CSS ul list style мы используем изображение звезды вместо маркера списка:

Сокращение list-style

Можно использовать сокращенное свойство list-style для назначения тех же стилей. В приведенном ниже примере мы задаем тип, расположение и изображение маркера списка:

Список inline

По умолчанию, все пункты списка перечисляются с новой строки, то есть, вертикально. Если нужно выводить список горизонтально или строчно ( inline ), нужно присвоить элементам списка display inline .

В приведенном ниже примере представлен строчный список:

Стилизация упорядоченного списка

Теперь пришло время задать стиль для CSS ol list style . По умолчанию, list-style-type для упорядоченного списка установлен при помощи десятичного числа:

Чтобы изменить тип, можно поменять значение на upper-alpha , lower-alpha , upper-roman , lower-roman .

Ниже приведен пример, где list-style-type имеет значение upper-alpha :

В следующем примере list-style-type имеет значение lower-roman :


Данная публикация представляет собой перевод статьи « CSS List » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS свойство list-style-image

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

Внимание: Дополнительно всегда определяйте свойство list-style-type. Значение этого свойства будет использоваться, если изображение по какой-либо причине будет недоступно.

CSS синтаксис

Возможные значения

Значение Описание
none Значение по умолчанию. Изображение не используется. Вместо этого для того, чтобы определить какой маркер списка генерировать, используется значение свойства list-style-type.
url(URL) Путь к изображению, которое будет использоваться в качестве маркера элементов списка.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем изображение для маркеров элементов списка

List style ( type, image, position) — Css правила для настройки внешнего вида списков в Html коде

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня будет очередная статья в копилку CSS справочника. Речь в ней пойдет об оформлении нумерованных и маркированных списков в Html с помощью правил таблиц каскадных стилей. Здесь все очень просто, но тем не менее я решил посвятить этой теме отдельный пост.

Чуть раньше мы уже успели узнать как задается фон через background, как оформляется текст с помощью text-decoration, vertical-align, align и indent и как можно работать со шрифтами с помощью Font (Weight, Family, Size, Style). Ну, а еще чуть раньше мы во всех подробностях рассмотрели всевозможные селекторы CSS и их различные комбинации для указания именно того элемента Html кода, для которого нужно будет применить определенные свойства стилевого оформления.

List style — оформление списков в Html коде

Итак, в языке стилевой разметки существует три отдельных правила начинающихся с list-style, которые служат для настройки внешнего вида списков (нумерованных или маркированных) в коде веб документов. Кроме этого существует сборное Css правило list-style, которое позволяет несколько сократить количество кода. Но обо всем по порядку.

То, что мы сейчас будем с вами рассматривать, допустимо использовать как для Html элементов LI, так и для элементов Ul и Ol (маркированный и нумерованный списки, соответственно). В чем будет разница применения list-style для этих тегов?

Если прописать его только для конкретного элемента списка LI, то, соответственно, оно только для него и применится (либо вообще для всех элементов LI). А если аналогичное правило прописать для контейнеров Ul или Ol, то оно применится для всех тегов LI заключенных в этих контейнерах. Т.е. оно перейдет к элементу LI по наследству (читайте более подробно про наследование в CSS).

Собственно, узнать, наследуется ли свойство или нет, можно на сайте валидатора (читайте про валидатор W3C по приведенной ссылке) в разделе посвященном спецификации таблиц каскадных стилей. В столбце «Inherited» напротив наследуемых правил будет стоять «Yes»:

Давайте начнем с list-style-type, которое позволяет задать тип маркирации для отдельных элементов Html списка. Для этого правила допустимы следующие значения:

  1. None — маркирация осуществляться вообще не будет (list-style-type:none; применено для этого пункта и поэтому у него нет маркера)
  2. Disc — закрашенный кружок (для этой строки как раз применено list-style-type:disc;)
  3. Circle — окружность в качестве маркера
  4. Square — квадратик в качестве маркера
  5. Decimal — арабские цифры (list-style-type:decimal;)
  6. lower-alpha — латинские буквы в нижнем регистре
  7. upper-alpha — латинские буквы в верхнем регистре
  8. lower-roman — римские цифры в нижнем регистре
  9. upper-roman — римские цифры в верхнем регистре

Как вы думаете, с помощью каких элементов Ul или Ol был создан расположенный чуть выше список? Вопрос на засыпку. Оказывается, что в современной верстке это уже не важно, хотя в данном конкретном случае я использовал Ol, но изменив его на Ul — внешний вид останется прежним, ибо он задается для каждого элемента своим значением CSS правила list style type.

По сути Ul и Ol отличаются только поведением по умолчанию (Ul — маркирует, а Ol — нумерует). Но если вы захотите, то сможете легко превратить один вид списка в другой с помощью list-style-type. Шрифт для маркирования цифрами или буквами используется точно такой же, какой был вами определен для содержимого тегов LI. Например, поменяв цвет шрифта для списка мы поменяем и цвет маркеров:

  1. Поменяли цвет текста (list-style-type:lower-roman;color:red) и поменялся цвет маркера

Давайте перейдем с следующему CSS свойству — list-style-position. С помощью него можно задать позицию (размещение) области с маркером. Для него предусмотрено всего два варианта значений:

Т.е. по сути в list-style-position мы указываем, где нужно размещать область с маркерам — за пределами элемента LI (outside) или внутри него (inside). По умолчанию область с маркером выносится за пределы, т.е. используется значение outside.

Давайте посмотрим это на примере. В первом элементе списка я специально пропишу list-style-position:inside и мы посмотрим, что из этого выйдет:

  1. Здесь все по умолчанию
  2. Вот так будет выглядеть размещение области маркера с ins >

Далее у нас на очереди List-style-image — позволяет задать картинку, которая будет использоваться в качестве маркера. Это правило по умолчанию имеет значение None (т.е. никакой картинки в качестве маркера не используется), но вы можете прописать функционал Url (), указав в нем путь до изображения, которое в последствие будет выполнять роль маркера в этом списке:

Выглядеть это может так:

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

Как вы помните, в статье про тег изображения Img я говорил, что картинки относятся к строчным элементам (собственно, для браузера эта та же самая буква, но иногда очень большого размера).

Вот картинка и встает на место маркера (буквы или цифры). При этом высота строки с элементом списка будет увеличена, если вы вставите в качестве маркера большую картинку (как это произошло во втором элементе приведенного чуть выше примера).

В функционале для list style image можно указывать как абсолютные так и относительные ссылки на изображения. Если картинка не подгрузится, то будет использоваться маркер или нумерация по умолчанию, либо то, что прописано в list-style-type для этого элемента списка.

Чтобы записать все три описанных выше CSS правила в одно единое, можно будет использовать List-style, которое является сборным для оформления списков. Порядок указания значений в нем не имеет никакого значения. Те значения, которые вы не зададите в List-style, в явном виде будут интерпретированы браузером со значениями принятыми по умолчанию.

Где посмотреть значения по умолчанию? Да все там же — в спецификации CSS валидатора W3C в столбце «Initial value» напротив интересующих вас свойств:

Значения для отдельных свойств в сборном правиле List-style разделяются пробелами. Места расположения, как уже упоминал, не важны:

На практике это может выглядеть, например, так:


Можно использовать значения в любом порядке и любом количестве (начиная от одного). Кстати говоря, с помощью списков чаще всего формируются на сайтах меню и свойство List-style при этом используется для того, чтобы убрать маркеры из списков меню, которые там совершенно не нужны:

CSS list-style-image size

I’m trying to set custom SVG icons with CSS on a

    ‘s list items. Example:

The problem is that the the images are too large, and stretch the height of the lines. I don’t want to change the image size, because the point of using SVG is to scale with the resolution. Is there a way to set the size of the image using CSS without some sort of background-image hack?

EDIT: Here’s a preview (large image deliberately chosen for illustration and drama): http://jsfiddle.net/tWQ65/4/
And my current background-image workaround, using CSS3’s background-size : http://jsfiddle.net/kP375/1/

9 Answers 9

You might would like to try img tag instead of setting ‘list-style-image’ property. Setting width and height using css will actually crop the image. But if you use img tag, the image will be re-sized to value of width and height.

CSS list-style-image выравнивание по-вертикали

Часто бывает так, что нужно сделать стиль ненумерованного списка не подходит под дизайн страницы, и тогда используется list-style-image, который позволяет сделать так, чтобы вместо точки/диска/квадратика выводилась произвольная картинка. Но частенько, эта картинка позиционируется не правильно, особенно, если она чуть больше, чем размер обычной точки для списка. Картинка сползает по-вертикали, из-за чего все манипуляции выглядять не очень разумными. Поэтому в этой статье рассмотрим как сделать на CSS list-style-image выравнивание по-вертикали.

Первое решение, которое не работает

Первое, что приходит на ум в сиутации с не правильным выравниванием иконки по-вертикали, это попробовать изменить line-height у li (элемента списка), так, чтобы сдвинуть иконку списка относительно базовой линии текста элемента списка.

Но, как показала практика, этот подход не срабатывает.

Поэтому предлагаем вашему вниманию, действительно рабочий способ, который легко применить, даже после завершения верстки сайта, то есть не нужно будет вырезать новые картинки, что-то выдумывать и прыгать с бубном. Достаточно будет даже сделать примитивную подмену старого кода на новый по всем местам, где используется list-style-image, с помощью того же Sublime Text, например. Но мы сегодня не об этом, а о выравнивании.

CSS list-style-image выравнивание по-вертикали

Самый действенный способ сделать на CSS list-style-image выравнивание по-вертикали – это изменить к нему подход.

Вместо того, чтобы изпользовать list-style-image, напрочь скрываем все иконки, точки или квадратики. Просто берем и скрываем с помощью list-style: none.

А где же иконка? Очень просто, относительно каждого элемента списка создаём псевдо-элемент :before, у которого задаём content, background-image, width и height. Всё. Его даже позиционировать не надо, элемент :before по-умолчанию является частью строки родителя, и будет хорошо позиционирован в большинстве случаев относительно текста элемента списка.

Теперь немного кода, чтобы проиллюстрировать

Как понимаете, если иконка размером 16х16, то вместо точки в списке будет выводится эта иконка без проблем (если она больше/меньше – измените width и height, они должны соответствовать размерам иконки). Также в зависимости от ситуации и дизайна, можно задавать другие свойства :before, например правый отступ margin-right, чтобы сделать отступ от иконки списка до текста элемента списка.

list-style-image

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

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

CSS (ЦСС) CSS (ЦСС)1
Значение по умолчанию none
Наследуется Да
Применяется К тегам , ,
,

    и

      , а также ко всем элементам, у которых указано свойство стиля display: list-item
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/generate.ШТМЛ#propdef-list-style-image

Описание

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

Синтаксис

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

Аргументы

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

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

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

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

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

[window.]document.getElementBy >elementID «).style.listStyleImage

Примечание

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

list-style-image


Свойство CSS list-style-image используется для подключения изображения, которое будет служить маркером для списка. Если по какой-то причине браузер не сможет найти указанное изображение — он использует вид маркера заданный в list-style-type.

Вместо list-style-image можно использовать универсальное свойство list-style.

Тип свойства

Применяется: к тегам , , и элементам с display: list-item .

Значения

Значением свойства list-style-image является указание вида маркера одним из следующих способов.

  • url(‘адрес файла’) — конструкция url(), где в скобках указывается полный или относительный адрес изображения для маркера. Сам адрес можно брать в двойные (» «) или одинарные (‘ ‘) кавычки.
  • none — отменяет использование изображения в качестве маркера.
  • inherit — наследует значение list-style-image от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: none.

Синтаксис

Пример CSS: использование list-style-image

Результат. Использование свойства CSS list-style-image.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit .

CSS list-style-image выравнивание по-вертикали

Часто бывает так, что нужно сделать стиль ненумерованного списка не подходит под дизайн страницы, и тогда используется list-style-image, который позволяет сделать так, чтобы вместо точки/диска/квадратика выводилась произвольная картинка. Но частенько, эта картинка позиционируется не правильно, особенно, если она чуть больше, чем размер обычной точки для списка. Картинка сползает по-вертикали, из-за чего все манипуляции выглядять не очень разумными. Поэтому в этой статье рассмотрим как сделать на CSS list-style-image выравнивание по-вертикали.

Первое решение, которое не работает

Первое, что приходит на ум в сиутации с не правильным выравниванием иконки по-вертикали, это попробовать изменить line-height у li (элемента списка), так, чтобы сдвинуть иконку списка относительно базовой линии текста элемента списка.

Но, как показала практика, этот подход не срабатывает.

Поэтому предлагаем вашему вниманию, действительно рабочий способ, который легко применить, даже после завершения верстки сайта, то есть не нужно будет вырезать новые картинки, что-то выдумывать и прыгать с бубном. Достаточно будет даже сделать примитивную подмену старого кода на новый по всем местам, где используется list-style-image, с помощью того же Sublime Text, например. Но мы сегодня не об этом, а о выравнивании.

CSS list-style-image выравнивание по-вертикали

Самый действенный способ сделать на CSS list-style-image выравнивание по-вертикали – это изменить к нему подход.

Вместо того, чтобы изпользовать list-style-image, напрочь скрываем все иконки, точки или квадратики. Просто берем и скрываем с помощью list-style: none.

А где же иконка? Очень просто, относительно каждого элемента списка создаём псевдо-элемент :before, у которого задаём content, background-image, width и height. Всё. Его даже позиционировать не надо, элемент :before по-умолчанию является частью строки родителя, и будет хорошо позиционирован в большинстве случаев относительно текста элемента списка.

Теперь немного кода, чтобы проиллюстрировать

Как понимаете, если иконка размером 16х16, то вместо точки в списке будет выводится эта иконка без проблем (если она больше/меньше – измените width и height, они должны соответствовать размерам иконки). Также в зависимости от ситуации и дизайна, можно задавать другие свойства :before, например правый отступ margin-right, чтобы сделать отступ от иконки списка до текста элемента списка.

CSS list-style-image Property

пример

Укажите изображение в качестве маркера элемента списка в списке:

Определение и использование

Свойство список-стиль-образ заменяет список-маркер элемента с изображением.

Note: Всегда указывайте свойство список стиле типа в дополнение. Это свойство используется, если изображение по какой-то причине недоступен.

Значение по умолчанию: none
Наследование: yes
Animatable: no. Read about animatable
Версия: CSS1
Синтаксис JavaScript: object .style.listStyleImage=»url(‘smiley.gif’)» Try it

Поддержка браузеров

Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.

Илон Маск рекомендует:  Что такое код mb_strwidth
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL