::marker
Псевдоэлемент ::marker применяет стили к маркеру элемента списка, которые обычно содержит значок или номер. Работает с любым элементом или псевдоэлементом, к которого установлен display: list-item , например, у такого как или .
::marker color: blue; font-size: 1.2em; >
Разрешённые свойства
Только некоторые CSS-свойства могут быть использованы с ::marker в качестве селектора:
- Все свойства шрифтов
- white-space
- color (en-US)
- text-combine-upright (en-US), unicode-bidi (en-US) и direction
- Свойство content
- Все animation и transition (en-US) свойства
Примечание: The specification states that additional CSS properties may be supported in future.
2.9. CSS-списки
CSS-списки — набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.
С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка, добавить изображение для маркера, а также изменить местоположение маркера. Высоту блока маркера можно задать свойством line-height .
Оформление списков с помощью CSS-стилей
- Содержание:
- 1. Тип маркера списка list-style-type
- 2. Изображения для элементов списка list-style-image
- 3. Местоположение маркера списка list-style-position
- 4. Краткая форма задания стилей списка list-style
- 5. Примеры красивого оформления списков
1. Тип маркера списка list-style-type
Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков .
| list-style-type | |
|---|---|
| Значения: | |
| disc | Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок. |
| armenian | Традиционная армянская нумерация. |
| circle | В качестве маркера выступает незакрашенный кружок. |
| cjk-ideographic | Идеографическая нумерация. |
| decimal | 1, 2, 3, 4, 5, … |
| decimal-leading-zero | 01, 02, 03, 04, 05, … |
| georgian | Традиционная грузинская нумерация. |
| hebrew | Традиционная еврейская нумерация. |
| hiragana | Японская нумерация: a, i, u, e, o, … |
| hiragana-iroha | Японская нумерация: i, ro, ha, ni, ho, … |
| katakana | Японская нумерация: A, I, U, E, O, … |
| katakana-iroha | Японская нумерация: I, RO, HA, NI, HO, … |
| lower-alpha | a, b, c, d, e, … |
| lower-greek | Строчные символы греческого алфавита. |
| lower-latin | a, b, c, d, e, … |
| lower-roman | i, ii, iii, iv, v, … |
| none | Маркер отсутствует. |
| square | В качестве маркера выступает закрашенный или незакрашенный квадрат. |
| upper-alpha | A, B, C, D, E, … |
| upper-latin | A, B, C, D, E, … |
| upper-roman | I, II, III, IV, V, … |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: decimal-leading-zero; list-style-type: lower-roman; list-style-type: upper-roman; list-style-type: lower-greek; list-style-type: lower-latin; list-style-type: upper-latin; list-style-type: armenian; list-style-type: georgian; list-style-type: lower-alpha; list-style-type: upper-alpha; list-style-type: none; list-style-type: inherit; list-style-type: initial;
2. Изображения для элементов списка list-style-image
В качестве маркера элементов списка можно использовать изображения и градиентые заливки.
| list-style-image | |
|---|---|
| Значения: | |
| url(url) | Путь к изображению. |
| none | значение по умолчанию, означает отсутствие изображения. Также убирает изображение для элемента из группы элементов с установленным изображением-маркером. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
list-style-image: url("images/romb.png"); list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%); list-style-image: none; list-style-image: inherit; list-style-image: initial;
3. Местоположение маркера списка list-style-position
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка.
| list-style-position | |
|---|---|
| Значения: | |
| outside | Значение по умолчанию. Маркер располагается вне блока с текстом. |
| inside | Маркер списка изображается в одном блоке с текстом. Последующие строки текста будут располагаться под значком маркера, т.е. маркер будет обтекаться текстом. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
list-style-position: inside; list-style-position: outside; list-style-image: inherit; list-style-image: initial;
4. Краткая форма задания стилей списка
Можно объединить все три свойства форматирования списка в одно с помощью list-style . Значения свойств могут быть расположены в произвольном порядке, а часть значений может быть опущена. Если присутствует одно значение, то другие свойства примут значения браузера по умолчанию.
Маркированный список
-
, а каждый пункт списка начинается с тега
, как показано ниже.
В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.
Пример 11.1. Создание маркированного списка
Результат данного примера показан на рис. 11.1.
Рис. 11.1. Вид маркированного списка
Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.
-
. Допустимые значения приведены в табл. 11.1
Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.
Создание списка с квадратными маркерами показано в примере 11.2.
Пример 11.2. Вид маркеров
Результат данного примера показан на рис. 11.2.
Рис. 11.2. Вид списка с квадратными маркерами
HTML по теме
Статьи по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки
Маркированный список
Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?
Как убрать маркеры в маркированном списке?
Для этой цели применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору UL или LI .
Как вместо символа маркера использовать картинку?
Чтобы задать свой рисунок маркера, воспользуйтесь стилевым свойством list-style-image , в качестве значения которого указывается url , а в скобках — путь к желаемому изображению.
Хочу изменить вид маркера на другой символ. Как это сделать?
С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому свойству list-style-type , которое указывается для селектора UL или LI .
Как увеличить расстояние от маркера до текста?
Для изменения расстояния между маркером списка и текстом используйте свойство padding-left для селектора LI .
Как изменить отступ слева от маркеров списка?
Добавьте свойство margin-left к селектору UL или OL , соответственно, для маркированного или нумерованного списка. Браузер Firefox, Safari и Chrome одновременно с отступами добавляет к списку поля (свойство padding ), поэтому для одинакового отображения списка в разных браузерах необходимо обнулить значение padding .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
- Как добавить картинку на веб-страницу?
- Как добавить иконку сайта в адресную строку браузера?
- Как добавить фоновый рисунок на веб-страницу?
- Как сделать обтекание картинки текстом?
- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
- Как разместить элементы списка горизонтально?
- Как убрать подчеркивание у ссылок?
- Как убрать маркеры в маркированном списке?
- Как изменить расстояние между строками текста?
- Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
- Как открыть ссылку в новом окне?