Style ol list: Стилизация списков — Изучение веб-разработки

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

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

html — В чем разница в использовании с типом стиля списка: диск; и

спросил

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

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

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

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

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

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

0

Семантически ul — это неупорядоченный список, а

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

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

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

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

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

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

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

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

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

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

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

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

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

    По умолчанию

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

              В заключение, когда вы решаете стилизовать их, на самом деле не имеет значения, какой тег вы выберете.

              1

              css — Как заставить OL переопределить стиль списка, который был назначен для соблюдения свойства типа

              спросил

              Изменено 5 лет, 2 месяца назад

              Просмотрено 2к раз

              Ситуация такова, что одна из таблиц стилей, поставляемых с темой, имеет этот ол { стиль списка: десятичный; } .

              Однако для этой конкретной страницы я хочу использовать стиль, определенный свойством type элемента ol .

              Например,

               
                
  
              1. сначала
                2. 
  
              2. Второй
                3.

              или

               
                
  
              1. сначала
                2. 
  
              2. Второй
                3.

              Я пробовал ol {list-style: initial} и ol {list-style: inherit} , но не повезло.

              Может ли кто-нибудь дать мне способ сбросить примененный стиль с помощью CSS?

              • css
              • css-селекторы

              7

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

              list-style-type: initial Тоже не работает, используется для сброса в браузер, а не в значение по умолчанию для темы.

              Так что вам придется написать свой собственный, более конкретный CSS.

              В этом случае вы можете использовать селекторы атрибутов.

              Тогда результат будет примерно таким:

              HTML 

               
                
   
              1. сначала
                2. 
   
              2. Второй
                3. 
 
              
 
                
   
              1. сначала
                2. 
   
              2. Второй
                3.

              CSS 

               /* Стиль, определенный темой */
пр {
  стиль списка: десятичный;
}
/* Список, определенный вашей страницей */
ол [тип = 'а'] {
  тип стиля списка: нижняя альфа;
}
ол [тип = 'я'] {
  тип стиля списка: нижний роман;
}

              Вы можете поиграть с этим кодом в codepen (codepen.io/Xopoc/pen/yPQBEM)

              Атрибут type устарел в HTML4 и повторно введен в HTML5 [1]. Его действительно не следует использовать, кроме как в юридических документах. В идеале вы должны переопределить это в CSS. Однако вы можете переопределить атрибут type для упорядоченного списка, поместив разные типы для каждого li [2]:

               
                
  
              1. первый
                2. 
  
              2. Второй
                3.

              Что касается вашего примера, вот скрипт, демонстрирующий работу этой техники:

              https://jsfiddle.

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

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