Содержание

seodon.ru | CSS справочник — list-style-type

Опубликовано: 18.08.2010 Последняя правка: 08.12.2015

Свойство CSS list-style-type используется для указания внешнего вида маркера или типа нумерации в упорядоченных (нумерованных) и неупорядоченных (маркированных) списках.

Вместо list-style-type можно использовать универсальное свойство list-style.

Тип свойства

Назначение: списки.

Применяется: к тегам <OL>, <UL>,<LI> и элементам с display: list-item.

Наследуется: да.

Значения

Значением свойства list-style-type является одно из ключевых слов, задающее внешний вид маркера или тип нумерации.

Значения для маркированного списка
discМаркер в виде кружка
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
circleМаркер в виде окружности
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
squareМаркер в виде квадрата
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
Значения для нумерованного списка
decimalНумерация обычными арабскими числами
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
decimal-leading-zeroНумерация арабскими числами с начальными нулями
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
upper-romanРимские числа написанные заглавной латиницей
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
lower-romanРимские числа написанные строчной латиницей
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
upper-latinЗаглавные латинские буквы
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
lower-latinСтрочные латинские буквы
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
upper-alphaЗаглавные латинские буквы (аналогично upper-latin)
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
lower-alphaСтрочные латинские буквы (аналогично lower-latin)
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
armenianТрадиционная армянская нумерация
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
georgianТрадиционная грузинская нумерация
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
lower-greekНумерация греческими строчными буквами
  • Ниф-Ниф
  • Нуф-Нуф
  • Наф-Наф
  • none — Убирает маркеры или нумерацию у списка.
  • inherit — наследует значение list-style-type от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: decimal для нумерованных списков, disc для маркированных.

Синтаксис

list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

Пример CSS: использование list-style-type

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство list-style-type</title>
  <style type="text/css">
   ol {
    list-style-type: lower-alpha; /* нумерация строчной латиницей */
   }
  </style>
 </head>
 <body>
  <ol>
   <li>Ниф-Ниф</li>
   <li>Нуф-Нуф</li>
   <li>Наф-Наф</li>
  </ol>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS list-style-type.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit, а также значения: decimal-leading-zero, upper-latin, lower-latin, armenian, georgian и lower-greek.

Списки Tailwind CSS — Flowbite

Используйте компонент списка для отображения неупорядоченного или упорядоченного списка элементов на основе нескольких стилей, макетов и вариантов, созданных с помощью Tailwind CSS и Flowbite.

веб-страница.

Ненумерованный список #

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

Изменить на GitHub Включить полноэкранный режим

Переключить вид планшета

Переключить мобильное представление

Переключить темный режим

Загрузка…

  • HTML
Скопировать в буфер обмена

Требования к паролю:

  • Минимум 10 символов (и до 100 символов)
  • Хотя бы один символ нижнего регистра
  • Включение хотя бы одного специального символа, например, ! @ # ?
  
Требования к паролю:
 
<ул>
    
  • 
        Минимум 10 символов (и до 100 символов)
    
    • 
    
  • 
        Хотя бы один символ нижнего регистра
    
    • 
    
  • 
        Включение хотя бы одного специального символа, например, ! @ # ?
    
    •

    Значки #

    Этот пример можно использовать для применения пользовательских значков вместо маркеров по умолчанию для элементов списка.

    Изменить на GitHub Включить полноэкранный режим

    Переключить вид планшета

    Переключить мобильное представление

    Переключить темный режим

    Загрузка…

    • HTML
    Скопировать в буфер обмена

    Требования к паролю:

    • Не менее 10 символов
    • Хотя бы один символ нижнего регистра
    • Хотя бы один специальный символ, например, ! @ # ?
      
    Требования к паролю:
     
<ул>
    
  • 
         293a1 1 0 0 1 1,414 1,414Z"/>
         
        Не менее 10 символов
    
    • 
    
  • 
        
     
    
         
        Хотя бы один символ нижнего регистра
    
    • 
    
  • 
        
        Хотя бы один специальный символ, например, ! @ # ?
    
    •

    Вложенный #

    Используйте этот пример для вложения другого списка элементов в элемент родительского списка.

    Изменить на GitHub Включить полноэкранный режим

    Переключить вид планшета

    Переключить мобильное представление

    Переключить темный режим

    Загрузка. ..

    • HTML
    Скопировать в буфер обмена

    • Элемент списка один
      1. Вам может показаться, что вы действительно «организованы» o
      2. Вложенная навигация в пользовательском интерфейсе тоже плохая идея, делайте все как можно более плоским.
      3. Вложение множества папок в исходный код также бесполезно.
    • Второй элемент списка
      • Я не уверен, что мы будем стилизовать более двух уровней в глубину.
      • Два уже слишком много, три гарантированно будет плохой идеей.
      • Если вы гнездитесь на четыре уровня глубже, вам место в тюрьме.
    • Третий элемент списка
      • Опять же, пожалуйста, не вставляйте списки, если хотите
      • Никто не хочет на это смотреть.
      • Я расстроен, что нам даже приходится возиться со стилем.
     <ул>
    
  • 
        Элемент списка один
        <ол>
            
  • Вам может показаться, что вы действительно "организованы" o
    • 
            
  • Вложенная навигация в пользовательском интерфейсе тоже плохая идея, делайте ее как можно более плоской.
    • 
            
  • Вложение множества папок в исходный код также бесполезно.
    • 
        
    
    
  • 
        Второй элемент списка
        <ул>
     
    
            
  • Я не уверен, что мы будем заморачиваться со стилями более двух уровней глубины.
    • 
            
  • Два — это уже слишком, три — это точно плохая идея.
    • 
            
  • Если вы вкладываете четыре уровня в глубину, вам место в тюрьме.
    • 
        
    
    
  • 
        Третий элемент списка
        <ул>
            
  • Пожалуйста, не встраивайте списки, если хотите.
    • 
            
  • Никто не хочет на это смотреть. 
    • 
            
  • Я расстроен тем, что нам даже приходится возиться со стилем.
    •

    без оформления #

    Используйте класс list-none , чтобы отключить маркеры или числа в стиле списка.

    Изменить на GitHub Включить полноэкранный режим

    Переключить вид планшета

    Переключить мобильное представление

    Переключить темный режим

    Загрузка…

    • HTML
    Скопировать в буфер обмена

    Требования к паролю:

    • Минимум 10 символов (и до 100 символов)
    • Хотя бы один символ нижнего регистра
    • Включение хотя бы одного специального символа, например, ! @ # ?
      
    Требования к паролю:
     
<ул>
    
  • 
        Минимум 10 символов (и до 100 символов)
    
    • 
    
  • 
        Хотя бы один символ нижнего регистра
    
    • 
    
  • 
        Включение хотя бы одного специального символа, например, ! @ # ?
    
    •

    Заказной список #

    Используйте тег

      для создания упорядоченного списка элементов с номерами.

      Изменить на GitHub Включить полноэкранный режим

      Переключить вид планшета

      Переключить мобильное представление

      Переключить темный режим

      Загрузка…

      • HTML
      Скопировать в буфер обмена

      Лучшие студенты:

      1. Бонни Грин с 70 очками
      2. Хесе Леос с 63 очками
      3. Лесли Ливингстон с 57 очками
        
      Лучшие ученики:
       
<ол>
    
    1. 
        Бонни Грин с 70 баллами
    
      2. 
    
    2. 
        Хезе Леос с 63 баллами
    
      3. 
    
    3. 
        Лесли Ливингстон с 57 баллами
    
      4.

      Вложенный #

      Этот пример можно использовать для вложения нескольких списков друг в друга.

      Изменить на GitHub Включить полноэкранный режим

      Переключить вид планшета

      Переключить мобильное представление

      Переключить темный режим

      Загрузка…

      • HTML
      Скопировать в буфер обмена

      1. Элемент списка один
        • Вам может показаться, что вы действительно «организованы» o
        • Вложенная навигация в пользовательском интерфейсе тоже плохая идея, делайте все как можно более плоским.
        • Вложение множества папок в исходный код также бесполезно.
      2. Второй элемент списка
        • Я не уверен, что мы будем стилизовать более двух уровней в глубину.
        • Два уже слишком много, три гарантированно будет плохой идеей.
        • Если вы гнездитесь на четыре уровня глубже, вам место в тюрьме.
      3. Третий элемент списка
        • Опять же, пожалуйста, не вставляйте списки, если хотите
        • Никто не хочет на это смотреть.
        • Я расстроен, что нам даже приходится возиться со стилем.
       <ол>
   
    4. 
      Элемент списка один
      <ул>
         
    5. Вам может показаться, что вы действительно "организованы" o
      6. 
         
    6. Вложенная навигация в пользовательском интерфейсе тоже плохая идея, делайте ее как можно более плоской.
      7. 
         
    7. Вложение множества папок в исходный код также бесполезно.
      8. 
      
   
   
    8. 
      Второй элемент списка
      <ул>
         
    9. Я не уверен, что мы будем заморачиваться со стилями более двух уровней глубины.
      10. 
         
    10. Два — это уже слишком, три — это точно плохая идея.
      11. 
         
    11. Если вы вкладываете четыре уровня в глубину, вам место в тюрьме. 
      12. 
      
   
   
    12. 
      Третий элемент списка
      <ул>
         
    13. Пожалуйста, не встраивайте списки, если хотите.
      14. 
         
    14. Никто не хочет на это смотреть.
      15. 
         
    15. Я расстроен тем, что нам даже приходится возиться со стилем.
      16.

      Список описаний #

      Создайте список описаний с помощью тега

      и задайте термин и имя в следующем примере.

      Изменить на GitHub Включить полноэкранный режим

      Переключить вид планшета

      Переключить мобильное представление

      Переключить темный режим

      Загрузка…

      • HTML
      Скопировать в буфер обмена

      Адрес электронной почты
      вашеимя@flowbite. com

      Домашний адрес
      92 Miles Drive, Ньюарк, Нью-Джерси 07103, Калифорния, США

      Номер телефона
      +00 123 456 789 / +12 345 678
       <дл>
    <дел>
        
      Адрес электронной почты
      
        
      вашеимя@flowbite.com
    <дел>
    Домашний адрес
    <дд>92 Miles Drive, Ньюарк, Нью-Джерси 07103, Калифорния, США