Графические маркеры для списка

Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.

Заливаем наш художественный маркер на сервер и запоминаем путь. Пусть это будет images/pulka.jpg

Для формирования нашей картинки вместо дефолтного маркера в файле стилей добавим свойство list-style-image:

 ul { list-style-type: circle;
 list-style-image: url(images/pulka.jpg);
	}
 

Получим такой вид списка вместо стандартного:

В данном примере мы указали стиль типа кружок list-style-type: circle; - это для тех пользователей, у которых браузер не показывает изображения.

Обратите внимание на размер картинки пульки – он не должен быть слишком большим, обычно 10-25 пикселей.

В некоторых случаях графическое изображение добавляется через background.

Пример кода:

 background:url(images/pulka.jpg) no-repeat; 

Полный код ul li для вставки пользовательской картинки в качестве маркера:

  ul li{border-top:1px solid #c8c8c8; list-style-type:none; padding:10px 0px 0px 12px; background:#fff url(images/pulka.jpg)  no-repeat} 

Свойства списков css:

border-top – линия вокруг рамки (толщина, цвет, стиль – solid);

list-style-type – внешний вид., тип маркера.

Padding – отступы от содержимого сверху, снизу, справа, слева.

Background – фон в списке.

Не обязательно использовать их все.

Код для большого изображения в качестве маркера списка. Как убрать маркеры списка css.

          ul {
	  margin-left:10px;
	  padding-left:0px;
	  list-style:none;
	}
	li {
	  padding:0.5em 0 0.5em 54px;
	  font: 1.3em/1.6 Verdana, Arial, sans-serif;
	  background:url(maxpulka.png) no-repeat;
	}

Для того, чтобы в листе стилей css убрать точки в списке, используем list-style:none;.

В этом примере в качестве маркера используется большая картинка, к примеру 50 на 50 пикселей. Принцип такой: удаляем дефолтный маркер (list-style:none;), готовим место для большого изображения при помощи задания отступов, вставляем свой маркер (background:url(maxpulka.png) no-repeat;).

Если вас заинтересовали уроки css, то потренируйтесь с  расширенным вариантом курса от Евгения Попова.

Полный курс «Css практика»

]]>]]>

Знание CSS необходимо каждому вебмастеру, потому что это универсальный способ сделать качественный дизайн без перегрузки кода страницы. 

Для тех, кто хочет очень быстро научиться трюкам css стилей, ]]>рекомендую]]> расширенный курс "CSS практика" Евгения Попова.

На эту тему вы можете прочитать следующие обучающие статьи:

Отступ списка css.

Как поменять css цвет маркера списка, чтобы его цвет был отличным от цвета текста.

Вложенные списки. Как в css сделать горизонтальный список. Изменение стиля нумерованных списков.

Скачать красивые маркеры для списков сайта.