Ol list style: list-style-type | htmlbook.ru

Leave a Comment / Разное / By /

Работа с маркерами списков ol на CSS

Маркеры списка ul также меняются с помощью свойства list-style-type. Давайте посмотрим, какие значения оно может принимать для списка ol.

Значение lower-roman

Значение lower-roman делает вместо обычных цифр римские:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>ol { list-style-type: lower-roman; }

:

Значение upper-roman

Значение upper-roman делает заглавные римские цифры:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

ol { list-style-type: upper-roman; }

:

Значение lower-alpha

Значение lower-alpha делает нумерацию маленькими латинскими буквами:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>ol { list-style-type: lower-alpha; }

:

Значение upper-alpha

Значение upper-alpha делает нумерацию большими латинскими буквами:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

ol { list-style-type: upper-alpha; }

:

Значение lower-greek

Значение lower-greek делает нумерацию маленькими греческими буквами:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>ol { list-style-type: lower-greek; }

:

Значение decimal-leading-zero

Значение decimal-leading-zero делает нумерацию в виде чисел, но нулем впереди для цифр меньше десяти:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

ol { list-style-type: decimal-leading-zero; }

:

Практические задачи

HTML/Элемент ol

Синтаксис

(X)HTML

<ol>
  . ..
  <li> ... </li>
  ...
</ol>

Описание

Элемент ol (от англ. «ordered list» ‒ «упорядоченный список») создаёт нумерованный (упорядоченный) список. Элементы данного списка могут быть упорядочены с помощью букв алфавита или цифр (a,b,c,d…; 1,2,3,4…).

Примечание

  • Пункты списка создаются с помощью элементов li.
  • Для создания маркированного (не упорядоченного) списка используется элемент ul.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.Раздел
HTML
2. 0Ordered List: OLПеревод
3.2Ordered (i.e. numbered) Lists
4.0110.2 Unordered lists (UL), ordered lists (OL), and list items (LI)
DTD: Transitional Strict Frameset
5.04.4.5 The ol element
5.14.4.5. The ol element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Атрибуты

compact
Сокращает отступы и расстояния между строками.
reversed
Устанавливает нумерацию списка от большего к меньшему (по убыванию).
start
Указывает начальное значение в нумерации списка.
type
Устанавливает тип маркера списка (1, I, i, A, a).
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент ol</title>
<style type=»text/css»>ol { margin-left: 10px;}</style>
</head>
<body>
<h2>Пример использования элемента «ol»</h2>
<p>Самые распространённые <u>глобальные параметры / атрибуты</u> (в алфавитном порядке):</p>
<ol>
<li>class</li>
<li>id</li>
<li>style</li>
<li>title</li>
</ol>
</body>
</html>

Элемент ol

Свойство стиля списка CSS

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Установите несколько различных стилей списка:

ul. a {тип стиля списка: круг;}
ul.b {тип стиля списка: квадрат;}
ol.c {список- style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

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

Другие примеры «Попробуйте сами» ниже.

Определение и использование

list-style-type указывает тип маркера элемента списка в списке.

Показать демо ❯

Значение по умолчанию: диск
Унаследовано: да
Анимация: нет. Читать о анимированном
Версия: CSS1
Синтаксис JavaScript: объект .style.listStyleType=»квадрат» Попробуй

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Собственность
тип-список 1,0 4,0 1,0 1,0 3,5

Примечание.

Edge 18 и Opera 12 и более ранние версии не поддерживают значения: cjk-идеографические, иврит, хирагана, хирагана-ироха, катакана и катакана-ироха.

Синтаксис CSS

тип-стиля-списка: значение ;

Значения свойств

.
...
Значение Описание Демо
диск Значение по умолчанию. Маркер закрашенный круг Демо ❯
армянский Маркер имеет традиционную армянскую нумерацию Демо ❯
круг Маркер круг Демо ❯
cjk-ideographic Маркер простой идеографический номер Демо ❯
десятичный Маркер номер Демонстрация ❯
десятичный-начальный-ноль Маркер представляет собой число с ведущими нулями (01, 02, 03 и т. д.) Демо ❯
грузинский Маркер с традиционной грузинской нумерацией Демо ❯
иврит Маркер имеет традиционную еврейскую нумерацию Демо ❯
хирагана Маркер с традиционной нумерацией хираганы Демо ❯
хирагана-ироха Традиционный маркер Hiragana iroha с номером Демо ❯
катакана Маркер традиционная катакана с номером Демонстрация ❯
катакана-ироха Маркер традиционная катакана ироха с номером Демонстрация ❯
нижний альфа-канал Маркер низший альфа (а, б, в, г, д и т.д.) Демо ❯
нижний греческий Маркер нижнегреческий Демо ❯
нижняя латиница Маркер нижний латинский (a,b,c,d,e и т.д.) Демо ❯
нижний латинский Маркер строчный (i, ii, iii, iv, v и т.д.) Демо ❯
нет Маркер не отображается Демо ❯
квадрат Маркер квадратный Демо ❯
верхний альфа-канал Маркер имеет верхний альфа-канал (A, B, C, D, E и т. д.) Демо ❯
верхний греческий Маркер верхнегреческий Демо ❯
верхняя латиница Маркер верхне-латинский (A, B, C, D, E и т.д.) Демонстрация ❯
заглавная буква Маркер заглавный (I, II, III, IV, V и др.) Демо ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о наследовать

Другие примеры

Пример

Этот пример демонстрирует все различные маркеры элементов списка:

ul.a {тип-стиля-списка: круг;}
ul.b {тип-стиля-списка: диск;}
ul.c {тип-стиля-списка: квадрат;}

ol.d {стиль-списка -type: армянский;}
ol. e {тип-стиля-списка: cjk-идеографический;}
ol.f {тип-стиля-списка: десятичный;}
ol.g {тип-стиля-списка: десятичный-начальный -zero;}
ol.h {тип стиля списка: грузинский;}
ol.i {тип-стиля-списка: иврит;}
ol.j {тип-стиля-списка: хирагана;}
ol.k {тип-стиля-списка: хирагана-ироха;}
ol.l {список -тип-стиля: катакана;}
ol.m {тип-стиля-списка: катакана-ироха;}
ol.n {тип-стиля-списка: нижняя альфа;}
ol.o {тип-стиля-списка : нижний греческий;}
ol.p {тип стиля списка: нижний латинский;}
ol.q {тип стиля списка: нижний римский;}
ol.r {тип стиля списка: верхний -альфа;}
ol.s {тип-стиля-списка: верхний-греческий;}
ol.t {тип-стиля-списка: верхний-латинский;}
ol.u {тип-стиля-списка: верхний роман;}
ol.v {тип-стиля-списка: нет;}
ol.w {тип-стиля-списка: наследовать;}

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

Пример

Как добавить цвета маркеров для

    или
      , удалив маркеры по умолчанию и добавив объект HTML, который выглядит как маркеры (•):

      ul {
        стиль списка: нет; /* Удалить маркеры списка */
        padding: 0;
        поля: 0;
      }

      li {
        padding-left: 16px;
      }

      li::before {
        content: «•»; /* Вставьте содержимое, похожее на маркеры */
        padding-right: 8px;
        цвет: синий; /* Или цвет, который вы предпочитаете */
      }

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

      Связанные страницы

      Учебник CSS: CSS List

      Ссылка CSS: свойство list-style

      Ссылка HTML DOM: свойство listStyleType

      Предыдущая ❮ Полное руководство по CSS Далее ❯


      html — В чем разница при использовании с list-style-type: disk; и

      спросил

      Изменено 1 год, 3 месяца назад

      Просмотрено 433 раза

      Публикация образца фрагмента. Визуально

        и
          будут выглядеть одинаково. Тогда зачем нам
            отдельно?

             <голова>
    Изменение типа нумерации в неупорядоченном списке HTML с помощью CSS
    <стиль>
        пр {
            тип-стиля-списка: диск;
        }
    

<тело>
    <ол>
        
          • Пристегните ремень безопасности
            • 
        
          • Запускает двигатель автомобиля
            • 
        
          • Оглянитесь и идите
            •
        <ч/> <ул>
      • Пристегните ремень безопасности
      • Запускает двигатель автомобиля
      • Оглянитесь и идите
      • HTML
      • CSS
      • HTML-списки

      0

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

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

      Да, мы можем изменить визуальное представление упорядоченного списка с помощью CSS, как вы заметили. Мы можем сделать то же самое с ul и заставить его показывать десятичные дроби. ul { стиль списка: десятичный; }

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

      Вспомогательные технологии включают непоследовательную поддержку различных вариантов использования атрибута type, используемого для обозначения нумерации и стилей маркеров, поэтому в целях доступности. Некоторые вспомогательные технологии позволяют пользователям переходить от списка к списку или от элемента к элементу. Таблицы стилей можно использовать для изменения представления списков при сохранении их целостности.

       ол { стиль списка: диск; }
ul {стиль списка: десятичный; } 
       <ол>
        
    1. Пристегните ремень безопасности
      2. 
        
    2. Запускает двигатель автомобиля
      3. 
        
    3. Оглянитесь и идите
      4.
    <ч/> <ул>
  • Пристегните ремень безопасности
  • Запускает двигатель автомобиля
  • Оглянитесь и идите

Хороший вопрос. Да, если мы добавим list-style-type: disk; оба будут выглядеть одинаково. Но некоторые новички этого не знают. Таким образом, они будут использовать UL в этом месте.

На самом деле вы можете использовать list-style-type: для добавления в него различных видов.

 ul.circle {тип стиля списка: круг;}
ul.square {тип стиля списка: квадрат;}
ol.roman {тип стиля списка: верхний роман;}
ol.alpha {тип стиля списка: нижняя альфа;} 
 
    
  
  • Кофе
    • 
  
  • Чай
    • 
  
  • Кока-кола
    • 


<ул>
  
  • Кофе
    • 
  
  • Чай
    • 
  
  • Кока-кола
    • 

<ол>
  
  • Кофе
    • 
  
  • Чай
    • 
  
  • Кока-кола
    • 

<ол>
  
  • Кофе
    • 
  
  • Чай
    • 
  
  • Кока-кола
    •

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *