Как удалить, заменить или оформить маркеры списка с помощью CSS

Содержание

Как создать список без маркеров
Как заменить маркеры списка на изображения
Как создать горизонтальные списки
Как оформить списки
Пример со всеми видами маркеров

Как создать список без маркеров

Иногда может понадобиться удалить маркеры/стили упорядоченных (<ol>) и неупорядоченных (<ul>) списков. Удаление маркеров списка не представляет трудности. Для этого можно использовать CSS свойство list-style или list-style-type.

Код будет иметь следующий вид:

ul {
list-style-type: none;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul {
      list-style: none;
      }
      ol {
      list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Неупорядоченный список</h2>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
    <h2>Упорядоченный список</h2>
    <ol>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ol>
  </body>
</html>

Попробуйте сами!

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

Здесь у нас будет класс с названием "nolist" для упорядоченных списков. При необходимости он также может быть использован в будущем.

Можете также установить класс к любому элементу списка (<li>), не меняя остальные маркеры.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .nolist {
      list-style: none ;
      }
    </style>
  </head>
  <body>
    <h2>Неупорядоченный список</h2>
    <ul>
      <li>Элемент списка 1</li>
      <li class="nolist">Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
    <h2>Упорядоченный список</strong></h2>
    <ol class="nolist">
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ol>
  </body>
</html>

Попробуйте сами!

Как заменить маркеры списка на изображения

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

Есть два способа установления изображений для элементов списка:

Используйте list-style-image, чтобы заменить HTML маркеры на графические изображения. В большинстве современных браузеров применение этих изображений несовместимо. А также нет полного контроля над положением маркеров.

HTML маркеры могут быть заменены на изображения с помощью "list-style-image". Но применение изображений не всегда совместимо с браузером.

Нет полного контроля над тем, как будут отображаться маркеры перед элементами списка.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul {
      list-style-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png");
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
  </body>
</html>

Попробуйте сами!

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

Создайте простой неупорядоченный список
Удалите маркеры с помощью list-style-type: none none
Удалите поля и отступы

Стандартные списки HTML имеют отступ в определенной величине. Она отличается для каждого браузера. Для этого некоторые браузеры (Mozilla, Safari) используют отступ, а другие (Internet Explorer, Opera) - поля.

Для того, чтобы удалить левый отступ из всех браузеров, установите и padding и margin в "0" для элемента <ul>, как в данном примере:

ul {
padding: 0;
margin: 0;
}

Добавьте отступ сами

В случае, если левый отступ обязателен, рекомендуется использовать margin-left. Так как сейчас padding установлено в "0", могут быть указаны точные измерения для левого поля, и это будет совместимо со всеми браузерами.

margin-left: 1em;

Добавьте фоновое изображение

Используйте CSS свойство background-image, чтобы добавить фоновое изображение для элемента <li>. Таким образом, фоновое изображение будет повторяться для фона каждого элемента списка, что не будет красиво смотреться.

Задайте no-repeat

Чтобы фоновое изображение не повторялось в фоне элементов списка, задайте "no-repeat" для свойства background-repeat. Здесь установлено только одно изображение для каждого элемента, но требуется изменить положение.

li { 
background-image: url(star.png); 
background-repeat: no-repeat;
}

Измените положение фонового изображения

Используйте CSS свойство background-position для установления такого положения фонового изображения, чтобы оно соответствовало тексту.

Сейчас изображения выстроены в линию по горизонтали вместе с контентом. Но контент расположен наверху изображений.

background-position: 1px;

Переместите контент

Чтобы отдалить контент от фонового изображения, примените padding-left к элементу <li>. В данном случае используется "20px". Как и в случае вертикального выравнивания, отступ списка будет определен размером изображения.

padding-left: 20px;

А сейчас увидим каким будет полный пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      }
      li {
      background-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png");
      background-repeat: no-repeat;
      background-position: 1px;
      padding-left: 20px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Зеленый</li>
      <li>Синий</li>
      <li>Желтый</li>
      <li>Красный</li>
    </ul>
  </body>
</html>

Попробуйте сами!

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

Как создать горизонтальные списки

Создание горизонтальных списков не так уж трудно. Это отличный способ сделать так, чтобы списки действовали как кнопки или навигационное меню. Есть много методов, которые можно использовать для создания горизонтального списка. Главное установить display: inline указанный для элемента <li>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #container ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      text-align: center;
      }
      #container ul li { 
      display: inline; 
      }
      #container ul li a {
      text-decoration: none;
      padding: 5px 20px;
      color: #fff;
      background-color: #1c87c9;
      }
      #container ul li a:hover
      {
      color: #fff;
      background-color: #369;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </body>
</html>

Попробуйте сами!

Как оформить списки

Добавьте стиль к спискам с помощью свойств color и background-color:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      ol {
      background: #1c87c9;
      padding: 20px;
      color: cyan;
      }
      ul {
      background: #8ebf42;
      padding: 20px;
      }
      ol li {
      background: #666;
      padding: 5px;
      margin-left: 35px;
      }
      ul li {
      background: #eee;
      margin: 5px;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Кофе</li>
      <li>Чай</li>
      <li>Молоко</li>
    </ol>
    <ul>
      <li>Кофе</li>
      <li>Чай</li>
      <li>Молоко</li>
    </ul>
  </body>
</html>

Попробуйте сами!

Создайте список с полной шириной границ, используя CSS свойства border и border-bottom:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul {
      border: 1px solid #ddd;
      background-color: #eee;
      list-style-type: none;
      padding: 0;
      }
      ul li {
      padding: 8px 10px;
      border-bottom: 1px solid #ddd;
      }
      ul li:last-child {
      border-bottom: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Кофе</li>
      <li>Чай</li>
      <li>Молоко</li>
    </ul>
  </body>
</html>

Попробуйте сами!

Добавьте границу к элементам вашего списка, используя CSS свойство border-left:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul {
      border-left: 5px solid #8ebf42;
      background-color: #eee;
      list-style-type: none;
      padding: 10px 20px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <ul>
        <li>Кофе</li>
        <li>Чай</li>
        <li>Молоко</li>
      </ul>
    </div>
  </body>
</html>

Попробуйте сами!

Чтобы иметь разные маркеры в одном списке, необходимо применить класс к к каждому элементу списка и отдельно для каждого указать list-style.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .disc {
      list-style: disc;
      }
      .square {
      list-style: square;
      }
      .armenian {
      list-style: armenian;
      }
      .lower-greek {
      list-style: lower-greek;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="disc">Круглый маркер</li>
      <li class="square">Квадратный маркер</li>
      <li class="armenian">Армянский маркер</li>
      <li class="lower-greek">Греческий маркер</li>
    </ul>
  </body>
</html>

Попробуйте сами!

Пример со всеми видами маркеров

В этом примере увидите разные виды упорядоченных (<ol>) и неупорядоченных (<ul>) списков:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul.a {list-style-type: circle;}
      ul.b {list-style-type: square;}
      ol.c {list-style-type: upper-roman;}
      ol.d {list-style-type: lower-alpha;}
      ol.e {list-style-type: armenian;}
      ol.f {list-style-type: decimal;}
      ol.g {list-style-type: cjk-ideographic;}
      ol.h {list-style-type: decimal-leading-zero;}
      ol.i {list-style-type: georgian;}
      ol.j {list-style-type: hebrew;}
      ol.k {list-style-type: hiragana;}
      ol.l {list-style-type: hiragana-iroha;}
      ol.m {list-style-type: katakana;}
      ol.n {list-style-type: katakana-iroha;}
      ol.o {list-style-type: lower-greek;}
      ol.p {list-style-type: lower-latin;}
      ol.q {list-style-type: lower-roman;}
      ol.r {list-style-type: none;}
      ol.s {list-style-type: upper-alpha;}
      ol.t {list-style-type: upper-latin;}
    </style>
  </head>
  <body>
    <h2>Примеры неупорядоченных списков </h2>
    <h3>Circle</h3>
    <ul class="a">
      <li>Нью-Йорк</li>
      <li>Лас-Вегас</li>
      <li>Вашингтон</li>
    </ul>
    <h3>Square</h3>
    <ul class="b">
      <li>Сан-Франциско</li>
      <li>Лос-Анджелес</li>
      <li>Майами</li>
    </ul>
    <h2>Примеры упорядоченных списков:</h2>
    <h3>Upper-roman</h3>
    <ol class="c">
      <li>Барселона</li>
      <li>Мадрид</li>
      <li>Лондон</li>
    </ol>
    <h3>Lower-alpha</h3>
    <ol class="d">
      <li>Дубай</li>
      <li>Абу-Даби</li>
      <li>Катар</li>
    </ol>
    <h3>Armenian</h3>
    <ol class="e">
      <li>Ереван</li>
      <li>Париж</li>
      <li>Рим</li>
    </ol>
    <h3>Decimal</h3>
    <ol class="f">
      <li>Сидней</li>
      <li>Гонк Конг</li>
      <li>Москва</li>
    </ol>
    <h3>Cjk-ideographic</h3>
    <ol class="g">
      <li>Киев</li>
      <li>Санкт-Петербург</li>
      <li>Тула</li>
    </ol>
    <h3>Decimal-leading-zero</h3>
    <ol class="h">
      <li>Бангкок</li>
      <li>Гюмри</li>
      <li>Валенсия</li>
    </ol>
    <h3>Georgian</h3>
    <ol class="i">
      <li>Мадрид</li>
      <li>Барселона</li>
      <li>Прага</li>
    </ol>
    <h3>Hebrew</h3>
    <ol class="j">
      <li>Иерусалим</li>
      <li>Торонто</li>
      <li>Прага</li>
    </ol>
    <h3>Hiragana</h3>
    <ol class="k">
      <li>Каир</li>
      <li>Токио</li>
      <li>Афины</li>
    </ol>
    <h3>Hiragana-iroha</h3>
    <ol class="l">
      <li>Тегеран</li>
      <li>Тебриз</li>
      <li>Тель-Авив</li>
    </ol>
    <h3>Katakana</h3>
    <ol class="m">
      <li>Мюнхен</li>
      <li>Берлин</li>
      <li>Бавария</li>
    </ol>
    <h3>Katakana-iroha</h3>
    <ol class="n">
      <li>Брюссель</li>
      <li>Стамбул</li>
      <li>Сидней</li>
    </ol>
    <h3>Lower-greek</h3>
    <ol class="o">
      <li>Севилья</li>
      <li>Гранада</li>
      <li>Венеция</li>
    </ol>
    <h3>Lower-latin</h3>
    <ol class="p">
      <li>Будапешт</li>
      <li>Виенна</li>
      <li>Амстердам</li>
    </ol>
    <h3>Lower-roman</h3>
    <ol class="q">
      <li>Буэнос-Айрес</li>
      <li>Рио-де-Жанейро</li>
      <li>Сан-Паоло</li>
    </ol>
    <h3>None</h3>
    <ol class="r">
      <li>Вильнюс</li>
      <li>Таллинн</li>
      <li>Рига</li>
    </ol>
    <h3>Upper-alpha</h3>
    <ol class="s">
      <li>Монреаль</li>
      <li>Мельбурн</li>
      <li>Эдинбург</li>
    </ol>
    <h3>Upper-latin</h3>
    <ol class="t">
      <li>Дублин</li>
      <li>Мексика</li>
      <li>Флоренция</li>
    </ol>
  </body>
</html>

Попробуйте сами!