Правила CSS для настройки внешнего вида списка на html странице. Свойство list style (type, image, position)
Здравствуйте, уважаемые читатели блога сайт. Сегодня будет очередная статья о свойствах каскадных таблиц стилей. В ней речь пойдет об оформлении с помощью правил 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 свойствах вы можете почитать статьи из раздела « » и не забудьте подписаться на обновления блога . До новых встреч!
Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера списка.
Краткая информация
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Любые комбинации трёх значений определяющих стиль маркеров, они разделяются между собой пробелом. Комбинации значений должны следовать в указанном порядке: вначале идёт тип маркера, затем положение и картинка. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.
Пример
- Многомерный полином
- Нормальный абсолютно сходящийся ряд
- Интеграл от функции
- Коллинеарный экстремум функции
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства list-style
Объектная модель
Объект .style.listStyle
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
Материал из Справочник 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 (пустой кружок).
- Справочник HTML Уроки HTML Видеокурсы по созданию сайта
В третьем примере показано, что свойство 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С войство 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 :
Материал из Справочник Web-языков
Используемые значения
sLocation Строка , которая может определять и принимать одно из следующих значений:Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является none . Атрибут Каскадных таблиц стилей (CSS) наследуется.
Замечания
Свойство listStyleImage применяется ко всем элементам, для которых заданы margin и display: list-item .
Когда изображение доступно, оно заменяет изображение маркера, установленное в listStyleType .
Чтобы показывалось изображение маркера списка, для свойства margin должно быть установлено значение минимум 30 pt .
Примеры
Следующие примеры иллюстрируют применение свойства listStyleImage и атрибута list-style-image для задания изображения маркера списка.
В первом примере используется селектор ul и атрибут list-style-image .
Во втором примере используется свойство listStyleImage для смены стиля маркера, когда происходит событие onmouseover .
