CSS свойство list-style

❮ Назад Вперед ❯

Свойство list-style - это сокращенное свойство для одновременного установления свойств list-style-image, list-style-position, list-style-type.

Можно установить все свойства в следующем порядке: 1- list-style-type, 2- list-style-position, 3- list-style-image.

Свойствоlist-style может быть установлено для элемента списка или списка элементов (<ul> или <ol>), а этот стиль располагается каскадом и применяется к элементам из этого списка.

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

Значение по умолчанию	disc outside none
Применяется	К элементам списка.
Наследуется	Да
Анимируемое	Нет
Версия	CSS1
DOM синтаксис	object.style.listStyle = "none";

Синтаксис

list-style: list-style-type list-style-position list-style-image | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .example1{
      list-style: circle;
      }
      .example2{
      list-style: square inside;
      }
    </style>
  </head>
  <body>
    Список 1
    <ul class="example1">
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
    Список  2
    <ul class="example2">
      <li>Элемент списка A</li>
      <li>Элемент списка B</li>
      <li>Элемент списка C</li>
    </ul>
  </body>
</html>

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

Пример, где указан тип списка

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul:nth-of-type(1) {
      list-style: lower-greek;
      }
      ul:nth-of-type(2) {
      list-style: lower-latin;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства list-style</h2>
    <ul>
      <li>Элемент</li>
      <li>Элемент</li>
      <li>Элемент</li>
    </ul>
    <ul>
      <li>Элемент</li>
      <li>Элемент</li>
      <li>Элемент</li>
    </ul>
  </body>
</html>

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

Пример , где указано положение списка:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .inside { 
      list-style: inside; 
      }
      .outside { 
      list-style: outside; 
      }
      li { 
      border: 1px solid #ccc; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства list-style</h2>
    <h3>List-style имеет положение "inside":</h3>
    <ul class="inside">
      <li>Шоколад</li>
      <li>Конфеты</li>
      <li>Леденцы</li>
    </ul>
    <h3>List-style имеет положение "outside":</h3>
    <ul class="outside">
      <li>Холодные напитки</li>
      <li>Горячие напитки</li>
      <li>Мороженое</li>
    </ul>
  </body>
</html>

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

Пример, где установлено изображение для оформления списка:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul {
      list-style: url('/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png');
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства list-style</h2>
    <ul>
      <li>Шоколад</li>
      <li>Конфеты</li>
      <li>Леденцы</li>
    </ul>
  </body>
</html>

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

Значения

Значение	Описание
list-style-type	Устанавливает стиль маркера элементов списка. Узнайте больше: CSS свойство list-style-type
list-style-position	Устанавливает положение маркера элементов списка. Узнайте больше: CSS свойство list-style-position.
list-style-image	Устанавливает изображение вместо маркера элементов списка. Узнайте больше: CSS свойство list-style-image
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.