Как изменить цвет Ul; LI (точки)
Но столкнулся с проблемой что теперь оно для всего приняло такой цвет а нужно поменять цвет в одном разделе на другой но при этом оставив этот же самый цвет. Что с этим можно сделать?
Отслеживать
задан 10 сен 2022 в 21:03
monkeykong monkeykong
5 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Можно, но для этого придётся использовать свой «маркер»:
ul < list-style: none; /* Удалить маркеры по умолчанию */ >ul li::before < content: "\2022"; /* Добавляем content: \2022, он же символ точки (маркера) */ display: inline-block; width: 1em; color: red; /* меняем цвет */ font-weight: bold; margin-left: -1em; >Вариант с псевдоэлементом ::marker
ul li::marker
P.s. ЯблокоФоны вам этого не простят.
Отслеживать
ответ дан 10 сен 2022 в 21:33
23.9k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
Спасибо, а можно это как-то реализовать с помощью классов?
11 сен 2022 в 12:51
11 сен 2022 в 17:02
- javascript
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.26.3951
Как изменить цвет текста в списке?
Используйте стилевое свойство color для задания цвета текста и background для указания цвета фона, добавляя их к селектору UL или OL , как показано в примере 1.
Пример 1. Цвет фона в списке
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Выделение цветом текста списка
При таком раскладе маркеры оказываются вынесенными за пределы цветной фоновой области. Поэтому для изменения вида фона следует использовать тег , внутрь которого и добавить список. Все необходимые цвета при этом указываются для селектора DIV (пример 2).
Пример2. Цвет фона в списке
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере к списку добавляется оранжевый цвет фона и устанавливается тёмно-синий цвет текста, как показано на рис. 2.
Рис. 2. Выделение цветом всей области списка
Расстояние от края цветового прямоугольника до текста регулируется свойствами margin и padding , добавляемые к селектору UL .
HTML по теме
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как изменить цвет маркеров в списке?
Существует два популярных способа изменения цвета маркеров, чтобы они отличались от цвета текста.
Использование
При этом цвет маркеров определяется стилевым свойством 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
- Значки в Bootstrap 5
- Игра с картинками
- Использование в вёрстке
- Наследование в CSS
- Не только текст
- Подробнее о позиционировании
- Псевдоэлемент ::before
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Работа с кавычками
- Работа с типографикой
- Спойлер
- Что это такое?
- Элементы и
Как изменить маркер списка
Цвет маркера списка можно изменить несколькими способами:
- Использовать тег span ;
- Использовать псевдоэлемент ::before или ::after ;
- Использовать псевдоэлемент ::marker .
- Изображение для маркера списка.
Как изменить цвет маркера списка с помощью CSS
1. Используя тег span :
li < color:#f16092; >li span
2. Используя псевдоэлемент ::before :
li < color:#214133; list-style-type: none; >li::before
- Snow
- Rain
- Fog
- list-style-type: none; — отменяем стандартный маркер,
- content: » «; — указываем символ маркера, который хотим вывести перед элементом списка.
3. Маркер списка при помощи псевдоэлемента ::marker .
li::marker
Картинка для маркера списка
Чтобы заменить маркеры списка на изображения воспользуемся свойством list-style-image.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
- JavaScript: Работа с Массивами
- Наличие Динамически Добавленного Элемента
- Стилизация Input File
- Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
- Стилизация Скролла
- События Формы