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

Описание

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

Синтаксис

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 .

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

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

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

Замечания

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

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

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

Примеры

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

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

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

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

Вообще списки среди блочных элементов стоят особняком. Это связано с тем, что они включают в себя маркеры и нумерацию, которые расставляет сам браузер.

Свойство List style — оформление списка на html странице

В языке CSS существует три свойства начинающихся с list-style, которые отвечают за оформление маркированных и нумерованных списков. Плюс еще есть сборное правило list-style, позволяющее сократить количество кода.

Все эти свойства допустимо использовать как для html элементов li, так и для элементов ul и ol. Единственное отличие, если правила прописать для конкретного значения списка li, то оно только для него и применится. А если эти же css правила прописать для контейнеров ul или ul, то они применятся для всех элементов li заключенных в этих контейнерах.

Начнем с атрибута list-style-type , который задает вид маркеров или нумерации у пунктов списка:

list-style-type: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|armenian|georgian|none|inherit

Как видно, свойство list-style-type имеет много доступных значений, которые могут задавать как вид маркера, так и различные виды нумерации.

• disc - маркер в виде черного кружка (значение по умолчанию для маркированных списков).
• circle - маркер в виде не закрашенного кружка.
• square - маркер в виде квадратика. Он может быть светлым или темным, в зависимости от браузера.
• decimal - нумерация арабскими цифрами (значение по умолчанию для нумерованных списков).
• decimal-leading-zero - нумерация арабскими цифрами от 01 до 99 с начальным нулем.
• lower-roman - нумерация маленькими римскими цифрами.
• upper-roman - нумерация большими римскими цифрами.
• lower-greek - нумерация маленькими греческими буквами.
• lower-alpha и lower-latin - нумерация маленькими латинскими буквами.
• upper-alpha и upper-latin - нумерация большими латинскими буквами.
• armenian - нумерация традиционными армянскими цифрами.
• georgian - нумерация традиционными грузинскими цифрами.
• none - маркерация и нумерация осуществляться вообще не будет.

Так примерно будут выглядеть элементы списка в браузере с различными значениями list-style-type:

При использовании CSS стилей не важно какой элемент (OL или UL) используется для создания списка. OL и UL отличаются только поведением по умолчанию и с помощью свойства list-style-type вы можете легко превратить один вид списка в другой.

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

list-style-image: none|<интернет-адрес файла изображения>|inherit

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

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

Пример списка с картинкой в качестве маркера:



• первый пункт списка;


• второй пункт списка;


• третий пункт списка.



А вот как это выглядит:

• первый пункт списка;
• второй пункт списка;
• третий пункт списка.

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

И последнее свойство CSS из серии list-style — list-style-position, которое позволяет указать местоположение маркера или нумерации в пункте списка. В качестве значения может быть два варианта:


list-style-position: inside|outside

В случае значения inside маркер или нумерация помещается как бы внутри списка, а в случае outside за пределами элементов li. По умолчанию используется значение outside и маркер выносится за пределы.

Пример списка с различными значениями list-style-position:

• в первом пункте все по умолчанию;
• во втором пункте list-style-position установлен в inside. В этом случае, обратите внимание, вторая строка размещается на одном уровне с маркером;
• в этом пункте list-style-position равен outside.

Сборное CSS правило list-style

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

Разделять значения в сборном правиле list-style следует пробелами:

list-style: list-style-type list-style-image list-style-position;

Реальное CSS правило для оформления списков может выглядеть примерно вот так:

list-style: circle url (//сайт/images/marker.png) outside;

Таким образом свойство list-style позволяет значительно сократить объем кода, ведь вместо трех правил достаточно задать лишь одно.

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

list-style: none;

Тоже самое можно сделать используя свойство list-style-type:

list-style-type: none;

На этом рассказ об оформлении html списков при помощи каскадных таблиц стилей я закончу. Чтобы узнать о других CSS свойствах вы можете почитать статьи из раздела « » и не забудьте подписаться на обновления блога . До новых встреч!

Материал из Справочник 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 .

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 :