Среда, 21 Ноября 2012 13:49

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

Written by 
Оцени эту запись
(4 Голоса)

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

 

Для реализации задуманного мы используем интересный прием - обернем текст элементов списка в дополнительный элемент span. Тогда мы сможем задать списку цвет текста такой, какой хотим видеть цветом маркеров, а нашему span'у зададим нужный нам цвет текста. Для выбора подходящего цвета используйте таблицу HTML кодов цветов.

 

<style>

ul.color_markers {

color: green;

}

ul.color_markers li {

 

list-style-type: square;

}

ul.color_markers li span {

color: #413346; //текущий цвет текста на странице

}

</style>

 

<ul class="color_markers">

<li><span>Текст</span></li>

<li><span>Текст</span></li>

</ul>

 

 

Смотрим результат:

 

  • Текст
  • Текст

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов