Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?
Задать цвет маркеров в списке не изменяя цвет текста.
Решение
Пример 1. Использование вложенных тегов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан ниже (рис. 1).
Рис. 1. Маркеры, отличающиеся по цвету от основного текста
Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять тег . Поэтому разберём хитрый способ, полностью основанный на работе CSS.
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 7.0+ | 3.1+ | 1.0+ | 1.0+ | 1.0+ |
Смысл в следующем — убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content . Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае LI . Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2. Здесь в качестве маркеров используется символ параграфа ¶.
Пример 2. Использование псевдоэлемента :before
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Маркеры, созданные с помощью стилей
Как изменить цвет маркеров в списке?
Существует два популярных способа изменения цвета маркеров, чтобы они отличались от цвета текста.
Использование
При этом цвет маркеров определяется стилевым свойством color для селектора li , а цвет текста — для селектора span (пример 1).
Пример 1. Использование вложенных тегов
Результат данного примера показан ниже (рис. 1).
Рис. 1. Маркеры, отличающиеся по цвету от основного текста
Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять .
Использование ::before
Пример 2. Использование псевдоэлемента ::before
Результат данного примера показан на рис. 2.
Рис. 2. Маркеры, созданные с помощью стилей
См. также
- color
- content
- currentColor
- list-style-type
- quotes
- relative и absolute
- text-fill-color
- Аккордеон меню
- Анимация ссылок при наведении
- Атрибут link
- Атрибуты ссылок
- Добавление тени
- Единицы цвета в CSS
- Знакомство с HTML
- Использование в вёрстке
- Наследование в CSS
- Не только текст
- Подробнее о позиционировании
- Псевдоэлемент ::before
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Работа с типографикой
- Спойлер
- Элементы и
Как сделать цветной маркер в html
В HTML предусмотрена возможность добавления на веб-страницы списков трех типов: маркированных, нумерованных и состоящих из определений. Давайте подробно разберемся с каждым из них. Благодаря использованию стилей, стандартные маркеры маркированных списков (имеющие вид одноцветных круглых точек) могут быть заменены квадратами, окружностями или произвольными рисунками. Нумерованные списки предполагают использование различных вариаций маркеров из заглавных или прописных букв и цифр, а также возможность разрыва списка с продолжением счета. Ну и под конец познакомимся со списком, состоящим из определений.
Типы списков
Один из способов организации текстовой информации на веб-странице заключается в создании списков. Помимо очевидной пользы — представления информации на странице в виде перечня отдельных элементов, списки предоставляют в распоряжение веб-дизайнеров еще одно преимущество — возможность визуального разделения однородных текстовых блоков, что делает их более удобными для восприятия. HTML поддерживает списки трех разных типов, для каждого из которых предусмотрены свои собственные теги:
• маркированный (ненумерованный) список
• нумерованный (с помощью цифр или букв) список
• список из определений
Используйте нумерованные списки для перечисления пунктов, которые
должны следовать друг за другом в строго определенном порядке, и маркированный, если порядок пунктов не имеет принципиального
значения. Списки третьего типа применяются для перечисления
каких-либо терминов и их определений.
-
) применяется тег обозначения пунктов списка (
). Хотя в приведенном далее коде HTML каждый пункт списка представлен небольшой текстовой строкой, ограничений на размер этих пунктов не существует.
- первый пункт списка
- второй пункт списка
- третий пункт списка
Ниже показаны примеры отображения маркированных и нумерованных списков в окне веб-браузера. Если какой-то пункт списка оказывается больше одной текстовой строки, все последующие строки данного пункта выравниваются по первой.
Перед каждым пунктом маркированного списка в качестве маркера HTML автоматически добавляет большую одноцветную точку круглой формы, однако в вашем распоряжении есть и три других варианта. Используя теги стилевых таблиц, точку можно заменить квадратом, пустой окружностью или рисунком.
-
). В случае его применения HTML автоматически нумерует пункты создаваемого списка цифрами или буквами.
- первый пункт списка
- второй пункт списка
- третий пункт списка
-
и
, отдельные пункты списка добавляются с помощью тега
. Как и в случае с маркированными списками, в HTML предусмотрено автоматическое форматирование пунктов нумерованных списков. По умолчанию в HTML пункты нумерованного списка отмечаются обычными арабскими цифрами (1, 2, 3 и т.д.). Более того, при добавлении новых пунктов или удалении уже имеющихся нумерация всего списка выполняется автоматически.
Оформление нумерованных списков выполняется с помощью стилевых таблиц. Помимо стандартных арабских чисел, в вашем распоряжении есть четыре других стиля, предусмотренных для форматирования нумерованного списка. Это заглавные буквы, строчные буквы, заглавные римские числа и строчные римские числа.
На примере представленного ниже HTML кода показано, как использовать стили для получения различных нумерованных списков. Используется стилевое свойство list-style-type и его значения lower-alpha — строчные буквы, lower-roman — римские строчные цифры, upper-alpha — заглавные буквы, upper-roman — римские заглавные цифры.
- первый пункт списка
- второй пункт списка
- третий пункт списка
В некоторых случаях возникает необходимость в том, чтобы нумерация списка начиналась с числа, отличного от единицы. Например, перечень инструкций может прерываться для отображения дополнительных материалов (таких, как таблицы или текстовые блоки), после чего список должен продолжаться далее без прерывания нумерации.
Чтобы сделать это в HTML, завершите первый список, вставьте необходимые материалы, а затем начните новый список и воспользуйтесь его атрибутом value для указания числа, с которого должна начинаться нумерация. Атрибуту value, фиксирующему число, с которого начинается нумерация списка, необходимо присваивать значение, выраженное в обычных арабских цифрах, даже если нумерация самого списка ведется с использованием римских цифр.
Список из определений
В HTML предусмотрена возможность создания списков еще одного типа, добавляемых тегом . Каждый пункт такого списка состоит из термина (задаваемого тегом ) и его определения (тег ).
Список из определений Термин 1 Определение Термина 1 Термин 2 Определение Термина 2 Термин 3 Определение Термина 3 По материалам книги Дидре Хейз «Освой самостоятельно HTML«.
Как сделать цветной маркер в html
ol, ul list-style: none; >
Кофе в зернах для ресторанов по материалам swcoffee.ru. С этого начинается формирование списка с уникальными маркерами и значками. Ниже представлены наиболее распространенные способы представления уникальных и одинаковых для всех браузеров значков элементов списка.
Маркеры через картинки
Наиболее распространенный и простой способ указать для списка маркер — это воспользоваться бекграундной картинкой (свойство background). Метод основывается на указании в таблице стилей фонового рисунка для элементов списка, а также внутренний отступ (свойство padding), который зарезервирует место для нового маркера. Ниже представлен пример кода: CSS
ul list-style: none; > li background: url(путь-к-картинке) no-repeat; padding-left:20px; >
Этот способ радует своей уникальностью, так как позволяет установить абсолютно любой маркер в виде картинки. Ниже показано, как наш код будет выглядеть в браузере: кракен сайт. Главная положительная сторона этого метода заключается в 100%-ной кроссбраузерности, но, не смотря на это, есть маленький недостаток. Использование картинки — это дополнительное обращение к серверу.
Маркеры с помощью before
Существует вариант, когда можно обойтись без картинки, если дизайнерские условия позволяют это. Такое очень часто допускается при оформлении основного контента, когда список маркируется простейшими элементами, типа квадратик (•) или стрелочка (→). Таким образом, мы подошли к тому, что в качестве маркера может выступать какой-либо подходящий спецсимвол. Далее возникает вопрос, каким образом спецсимволы вставлять в элементы списка. Естественно не в ручную, иначе это был бы очень затянутый и нудный процесс, плюс ко всему еще и трудоемкий. Выйти из этой ситуации нам поможет псевдоэлемент before, применение которого привязывается к определенному селектору, что позволяет автоматизировать наш процесс присвоения маркеров из спецсимволов. Такое решение подходит к большинству браузеров, с учетом того, что для IE , будет прописан expression. Ниже представлен пример кода, который формирует маркированный список с коротким тире: CSS
li //z-index: expression(runtimeStyle.zIndex = 1, this.innerHTML = "–" + this.innerHTML) /*хак для IE*/ > li:before content: "\2013"; >
На практике получим такую картину: Напоминаю о том, что в реальных условиях хаки подключаются условными комментариями. При использовании этого метода главное знать кодировку необходимого значка. Также стоит отметить, что для expression спецсимволы прописываются числовой комбинацией или мнемоническим кодом. Что касается свойства content, то в этом случае вначале ставится слеш, а потом идет запись шестнадцатеричного кода.
Использование insertAdjacentHTML
Вышеупомянутый способ не всегда корректно отрабатывает в легендарном IE (не смотря на хак). Точнее, «костыли» для этого браузера не до конца доработанные. Более действенным является метод, основанный на insertAdjacentHTML, ниже представлен код этого метода: CSS
li //z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML('afterBegin', '–')); >
Маркеры, нарисованные CSS-свойствами
Некоторые квадратные маркеры можно нарисовать с использованием некоторых CSS-свойств. К примеру, квадрат с цветной заливкой рисуется через свойство background-color, а квадратик в виде рамки — border (кстати говоря, квадрат с заливкой можно нарисовать и таким способом). Пример записи в CSS-файле:
li //z-index: expression(runtimeStyle.zIndex = 1, this.innerHTML = " " + this.innerHTML) /* хак для ие6 и 7 */ > li:before, .listMarkerBackColor background-color:#539127; width:7px; height:7px; content:""; float:left; margin:6px 6px 0 0; overflow:hidden; > html .listMarkerBackColor margin-right:1px; /* исправляем маленткий косяк в IE6 */ >
Таким образом рисованный CSS-свойствами маркер будет выглядеть на практике:
Использование before и first-child в комплексе
Такой метод частенько применяется при оформлении хлебных крошек на сайте. Кто не знает о чем речь, смотрим на пример ниже В таком случае каждая ссылка отделяется друг от друга спецсимволом, но перед первым элементом никакого спецсимвола быть не должно. В этом нам поможет псевдокласс first-child, который обращается только к первому элементу списка. В кодовом виде это должно выглядеть так HTML
ul> li>a href="#"> Главная a>li> li>a href="#"> Блог a>li> li>a href="#"> CSS a>li> li>Валидный код при использовании target="_blank"li> ul>
li:before content: "\2192"; > li:first-child:before content:""; >
Стоит также отметить, что такой прием используют не только для хлебных крошек, но и для обычных маркированных списков, в зависимости от дизайнерского задания.
В каких браузерах работает?
| 6.0+ | 4.0+ | 9.5+ | 3.0+ | 3.0+ | — | — |
Выводы
Подводя итог, можно отметить тот факт, что применение псевдоэлемента before является оправданным и рациональным в основном контенте, так как там не выдвигают особых требований к оформлению списков. Это в свою очередь позволит уменьшить нагрузку на сервер, в сравнении с вариантом, когда используют картинку. А если еще отметить тот факт, что в основном контенте может быть очень много маркированных списков, то разница может стать существеннее. Но картинки значительно выигрывают в плане дизайнерских решений маркера.