Цвет маркеров, разный цвет для текста и маркеров списка

5 / 5

Автор: Администратор

29.06.2015

Теги: css, html, ul li, list, marker

В этой статье мы расскажем о том, как задать цвет маркерам списка, а так же о том, как задать различный цвет для текста пунктов списка и маркеров.

Изменение цвета маркеров

Для этого нужно задавать цвет для тэга <li>, вместе с ним будет меняться и цвет маркера. Не смотря на очевидность данного вопроса - не все это понимают, так как чаще всего списки используются, как меню и стиль задают внутреннему тэгу <a>.

Пример изменения цвета:

	<ul>
		<li>Радость</li>
		<li>Блаженство</li>
		<li>Наслаждение</li>
	</ul>

	li{
		color:#009900;
	}

Вот как это будет выглядеть:

Радость
Блаженство
Наслаждение

Различный цвет для маркеров и текста списка

В данном случае мы расскажем о способе без использования JS, а только на HTML и CSS.

Суть заключается в том, чтобы оборачивать текст в ещё один тэг, например - <span>, и добавить стиль для него. Вот как это будет выглядеть:

	<ul>
		<li><span>Радость</span></li>
		<li><span>Блаженство</span></li>
		<li><span>Наслаждение</span></li>
	</ul>

	li {
		color:#009900;
	}
	
	li span {
		color:#000000;
	}

В итоге:

Радость
Блаженство
Наслаждение

У этого способа много недостатков, но это всё, что можно сделать посредствам HTML и CSS.

Добавить комментарий

Авторизоваться с помощью:

Поиск по сайту

Топ 10 активных пользователей

Имя пользователя Баллы
gawk
44.20
ZOMRO
30.60
hr@proovelab
15.00
intuit89
8.40
Varvarka
4.00
Akyla58
3.00
AnnaOl
3.00
dimasik_3557
3.00
ErcardSa
3.00
Galinamuh
3.00

Рекламные ссылки

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

Похожие материалы

Языки программирования сайтов Просмотров 15668

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее

Удобное собрание CSS хаков для самых поп... Просмотров 10625

Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее

!important в CSS Просмотров 3958

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее

Как подключать свои шрифты на сайт, или ... Просмотров 6111