WEB-дизайн
Использование списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов. С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка, добавить изображение для маркера, а также изменить местоположение маркера. Высоту блока маркера можно задать свойством line-height .
Тип маркера списка list-style-type
Свойство list-style-type изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков.
Значения:
- none — Отменяет маркеры для списка.
- disc — Значение по умолчанию. Маркер в виде закрашенного круга.
- circle — Маркер в виде незакрашенного круга.
- decimal — Арабские числа (1, 2, 3, 4. ).
- decimal-leading-zero — Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03. ).
- upper-alpha , upper-latin — Заглавные латинские буквы (A, B, C, . ).
- lower-alpha , lower-latin — Строчные латинские буквы (a, b, c, . ).
- upper-roman — Римские числа в верхнем регистре (I, II, III, IV, V, . ).
- lower-roman — Римские числа в нижнем регистре (i, ii, iii, iv, v, . ).
- 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-greek — Строчные греческие буквы (α, β, γ, δ, . ).
- georgian — Традиционная грузинская нумерация.
- armenian — Традиционная армянская нумерация.
Пример:
Результат:
- Word
- Excel
- Power Point
- Access
Изображения для элементов списка list-style-image
Свойство list-style-image предоставляет возможность использовать рисунок в качестве маркера элемента списка.
Списки — Основы верстки контента
Списки являются одной из основных форм представления контента на странице. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В HTML представлены три вида списков:
- Маркированные;
- Нумерованные;
- Списки определений.
В предложении выше виды списков были сгруппированы с помощью маркированного списка. Он имеет небольшой отступ слева и обозначается маркером у каждого отдельного пункта. Каждый вид списка имеет такие черты, что позволяет быстро определить их на странице.
Помимо этого все списки имеют контейнеры — теги, внутри которых располагается информация. Эти контейнеры помогают странице определить, в каком месте начинается список и где он заканчивается.
В своем представлении каждый элемент списка является блочным элементом. Это означает, что он будет занимать всю доступную ему ширину и каждый новый элемент будет начинаться с новой строки.
Маркированные списки
Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.
Как и другие списки, создание маркированного списка начинается с указания контейнера. В роли контейнера выступает тег <ul></ul> — сокращение от Unordered List. Каждый элемент вкладывается внутрь этого контейнера и вкладывается в тег <li></li> — сокращение от List Item. Так браузер отделяет списки друг от друга.
Представим список из начала урока в виде HTML разметки. Для этого указывается контейнер и три тега <li></li> . Внутри каждого из этих тегов помещается один пункт списка.
Списки в HTML возможно вкладывать друг в друга. Это позволяет глубже структурировать информацию. Для создания вложенного списка новый контейнер вкладывается внутрь тега <li></li> . Как вы увидите, списки можно комбинировать. Маркированные вкладывать внутрь нумерованных. Нумерованные внутрь маркированных. В общем виде вложенность может быть описана так:
У вложенного списка изменился маркер. Это позволяет даже при отсутствии отступов отделить вложенные списки от основного уровня. CSS позволяет управлять маркерами и настраивать их внешний вид. В конце урока будет изучено свойство, которое позволяет стилизовать маркеры и даже использовать свои изображения для этого.
Нумерованные списки
Структура нумерованных списков повторяет маркированные списки. Семантическое отличие нумерованных списков заключается в последовательности. Такие списки идут строго по порядку и обозначают последовательность какой-либо информации.
Нумерованный список использует контейнер <ol></ol> , в качестве пунктов списков используется тег <li></li> . Тег <ol> — сокращение от Ordered List. Примером такого списка может служить список дел на день.
Нумерованные списки возможно вкладывать друг в друга. Внутри нумерованных списков могут лежать маркированные.
Списки определений
С точки зрения HTML списки определений являются самыми сложными для верстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида «термин — определение». Такие списки удобны при составлении словарей или глоссариев.
В качестве контейнера для списков определений используется тег <dl></dl> от английского Definition List, внутри которого не привычная схема <li></li> , а система из двух тегов:
- <dt></dt> — термин. От английского Definition Term;
- <dd></dd> — определение От английского Definition Description.
Каждая новая пара повторяет схему из двух тегов. Список из нескольких терминов размечается следующим образом:
Стилизация списков
Основным способом стилизации списков является изменение маркера, который появляется в левой части пункта списка. В маркированных и нумерованных списках его можно изменить с помощью свойства list-style-type . Оно принимает множество различных значений. Все их вы можете увидеть с помощью веб-инспекторов. Для создания маркера в виде квадрата используется значение square .
Свойство list-style-type позволяет скрыть маркер списка. Это частая практика при создании меню через списки, где нет необходимости в выделении пунктов маркерами. Для скрытия маркера используется значение none .
Изменять маркер можно одним из двух способов:
- Установка свойства на контейнер. В этом случае все элементы списка получат тот маркер, который был указан в свойстве.
- Установка свойства на элемент списка. Маркер изменится только у одного пункта списка, другие получат маркер по умолчанию.
В качестве примера установим квадратный маркер для маркированного списка, а у второго элемента удалим маркер.
Картинка в качестве маркера списка
Помимо встроенных в браузер значений маркеров списка, CSS дает возможность устанавливать пользовательские маркеры в виде картинок. Это позволяет сделать уникальную стилизацию списков для проекта, как для всего, так и для отдельных списков.
Чтобы установить маркер в виде своего изображения, используется свойство list-style-image , значением которого является ссылка на изображение. Оно указывается внутри url() , например:
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
list-style-type
The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.
Try it
The color of the marker will be the same as the computed color of the element it applies to.
Only a few elements ( <li> and <summary> ) have a default value of display: list-item . However, the list-style-type property may be applied to any element whose display value is set to list-item . Moreover, because this property is inherited, it can be set on a parent element (commonly <ol> or <ul> ) to make it apply to all list items.
Syntax
The list-style-type property may be defined as any one of:
- a <custom-ident> value,
- a symbols() value,
- a <string> value, or
- the keyword none .
- Some types require a suitable font installed to display as expected.
- The cjk-ideographic is identical to trad-chinese-informal ; it exists for legacy reasons.
Values
An identifier matching the value of a @counter-style or one of the predefined styles:
Defines an anonymous style of the list.
The specified string will be used as the item’s marker.
No item marker is shown.
A filled circle (default value).
A hollow circle.
A filled square.
Decimal numbers, beginning with 1.
Han decimal numbers.
Decimal numbers, padded by initial zeros.
Lowercase roman numerals.
Uppercase roman numerals.
Lowercase classical Greek.
Lowercase ASCII letters.
Uppercase ASCII letters.
Traditional Armenian numbering.
Han «Earthly Branch» ordinals.
Han «Heavenly Stem» ordinals.
Identical to trad-chinese-informal .
Traditional Georgian numbering.
Traditional Hebrew numbering.
Dictionary-order hiragana lettering.
Japanese formal numbering to be used in legal or financial documents. The kanjis are designed so that they can’t be modified to look like another correct one.
Japanese informal numbering.
Dictionary-order katakana lettering.
Korean hangul numbering.
Formal Korean Han numbering.
Korean hanja numbering.
Lowercase Armenian numbering.
Myanmar (Burmese) numbering.
Simplified Chinese formal numbering.
Simplified Chinese informal numbering.
Traditional Chinese formal numbering.
Traditional Chinese informal numbering.
Traditional uppercase Armenian numbering.
Symbol indicating that a disclosure widget such as <details> is opened.
Symbol indicating that a disclosure widget, like <details> is closed.
Non-standard extensions
A few more predefined types are provided by Mozilla (Firefox), Blink (Chrome and Opera) and WebKit (Safari) to support list types in other languages. See the compatibility table to check which browsers support which extension.
- -moz-ethiopic-halehame
- -moz-ethiopic-halehame-am
- ethiopic-halehame-ti-er , -moz-ethiopic-halehame-ti-er
- ethiopic-halehame-ti-et , -moz-ethiopic-halehame-ti-et
- hangul , -moz-hangul
- hangul-consonant , -moz-hangul-consonant
- urdu , -moz-urdu
Accessibility concerns
Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a list-style-type value of none . To learn more about this and potential workarounds, see list-style .
Change the color of a bullet in a html list?
All I want is to be able to change the color of a bullet in a list to a light gray. It defaults to black, and I can’t figure out how to change it.
I know I could just use an image; I’d rather not do that if I can help it.
17 Answers 17
The bullet gets its color from the text. So if you want to have a different color bullet than text in your list you’ll have to add some markup.
Wrap the list text in a span:
Then modify your style rules slightly:
I managed this without adding markup, but instead using li:before. This obviously has all the limitations of :before (no old IE support), but it seems to work with IE8, Firefox and Chrome after some very limited testing. It’s working in our controller environment, wondering if anyone could check this. The bullet style is also limited by what’s in unicode.
This was impossible in 2008, but it’s becoming possible soon (hopefully)!
According to The W3C CSS3 specification, you can have full control over any number, glyph, or other symbol generated before a list item with the ::marker pseudo-element. To apply this to the most voted answer’s solution:
Note, though, that as of July 2016, this solution is only a part of the W3C Working Draft and does not work in any major browsers, yet.
If you want this feature, do these:
the big problem with this method is the extra markup. (the span tag)
Hello maybe this answer is late but is the correct one to achieve this.
Ok the fact is that you must specify an internal tag to make the LIst text be on the usual black (or what ever you want to get it). But is also true that you can REDEFINE any TAGS and internal tags with CSS. So the best way to do this use a SHORTER tag for the redefinition