Все для создания и продвижения сайтов

Верстка, программирование, SEO

Маркеры списка в CSS

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

Рассмотрим все основные маркеры.

Простые маркеры

Для этого просто созданим простой маркерованный список через теги <ul> и <li>

  • Пункт 1
  • Пункт 2
  • Пункт 3

В результате получим стандартные списки

  • Пункт 1
  • Пункт 2
  • Пункт 3

Маркер - картинка

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

	ul li{
	    list-style: none; 
	    background: url(assets/img/marker1.png) no-repeat left 50%; 
	    padding-left: 25px;
	}

И мы увидим, что вместо простых маркеров у нас используется картинка.

  • Пункт 1
  • Пункт 2
  • Пункт 3

Убрать маркеры списка через css

Чтобы полностью отключить маркеры у списков, добавьте к ним стиль css

	ul li{list-style: none}

И в результате мы не увидим маркеры

  • Пункт 1
  • Пункт 2
  • Пункт 3

Стандартные маркеры в css

Ниже показана таблица в которые вы можете увидить все маркеры, которые задать через язык CSS, а именно через стиль list-style

Возможные варианты списков
Код Пример
<li style="list-style: disc"> Маркер "сплошной кружок":
  • Пункт 1
  • Пункт 2
  • Пункт 3
<li style="list-style: circle"> Маркер "окружность":
  • Пункт 1
  • Пункт 2
  • Пункт 3
<li style="list-style: square"> Маркер "сплошной квадрат":
  • Пункт 1
  • Пункт 2
  • Пункт 3
<li style="list-style: decimal">

Маркер арабскими цифрами

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
<li style="list-style: lower-roman">

Маркер со строчными римскими цифрами:

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
<li style="list-style: upper-roman">

Маркер с заглавными римскими цифрами:

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
<li style="list-style: lower-alpha">

Маркер со строчными буквами латинского алфавита:

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
<li style="list-style: upper-alpha">

Мареер с заглавными буквами латинского алфавита:

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.