list-style

Шорткат list-style позволяет одновременно задать значение для следующих свойств:

• list-style-type;
• list-style-position;
• list-style-image.

Код ниже задаёт всем элементам списка стиль маркера upper-alpha и делает маркер частью содержимого элемента списка.

        
          
          li {    list-style: upper-alpha inside;}
          li {
    list-style: upper-alpha inside;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Значения свойства можно задавать в любом порядке и в любом количестве от 1 до 3.

Установим значение none для изображения и типа маркера:

        
          
          ul {  list-style: none;}
          ul {
  list-style: none;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Зададим значение disc для типа маркера и inside для позиции:

        
          
          ul {  list-style: disc inside;}
          ul {
  list-style: disc inside;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Зададим значение decimal для типа, укажем путь до картинки и расположим маркер снаружи пункта списка:

        
          
          ul {  list-style: decimal url('marker.png') outside;}
          ul {
  list-style: decimal url('marker.png') outside;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Браузер сам найдёт подходящие значения для нужных свойств.

Использовать значение none в сокращении стоит аккуратно, потому что это значение можно указать как для list-style-image так и для list-style-type.

Например, код ниже установит значение none для list-style-image, а для list-style-type значение disc:

        
          
          ul {  list-style: none disc;}
          ul {
  list-style: none disc;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

А здесь установит значение url(doka.png) для list-style-image, а для list-style-type значение none:

        
          
          ul {  list-style: none url(doka.png);}
          ul {
  list-style: none url(doka.png);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если установить просто значение none свойству list-style, то значение none применится только к list-style-image и list-style-type, но не к свойству list-style-position, потому что у него нет значения none.

Код ниже устанавливает значение none для свойств list-style-image и list-style-type:

        
          
          ul {  list-style: none;}
          ul {
  list-style: none;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

А такой код не сработает. У свойства list-style-position нет значения none:

        
          
          ul {  list-style: none disc url(doka.png);}
          ul {
  list-style: none disc url(doka.png);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Как и с любым шорткатом, со свойством list-style нужно обращаться осторожно. Если потребуется переопределить всего одно из заданных значений, то нужно будет переписать и все остальные.

💡 Если в рамках шортката не задано значение для какого-то из свойств и в коде ниже оно не прописано, то свойству устанавливается значение по умолчанию.

💡 Записанные выше отдельные свойства переопределяются заданным ниже свойством list-style.