Опубликован: 19.03.2007 | Уровень: для всех | Доступ: платный
Лекция 6:

Использование специальных стилей

Оформление упорядоченных списков

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

<ol>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ol>
Листинг 6.9. Код упорядоченного списка
1. Элемент списка 1
2. Элемент списка 2
3. Элемент списка 3
Листинг 6.10. Упорядоченный список

В таблице стилей можно задавать тип символов нумерации, которые будут стоять перед элементами списка. Для этого применяется свойство list-style-type со значениями, показанными в таблице 6.2. По умолчанию используется значение decimal.

Таблица 6.2. Типы символов нумерации упорядоченных списков
Свойство Значение
list-style-type
decimal
upper-alpha
lower-alpha
upper-roman
lower-roman
none

Задание числовых символов

Следующий упорядоченный список нумеруется большими римскими цифрами ( upper-roman ). Вывод браузер показан в листинге 6.12.

<style type="text/css">
  ol {list-style-type:upper-roman}
</style>

<ol>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ol>
Листинг 6.11. Код упорядоченного списка с большими римскими цифрами
I. Элемент списка 1
II. Элемент списка 2
III. Элемент списка 3
Листинг 6.12. Упорядоченный список с римскими цифрами

Вложенные упорядоченные списки

Упорядоченные списки могут вкладываться друг в друга, при этом каждый список может иметь свою собственную схему нумерации. В следующем примере внешний список нумеруется большими римскими цифрами, а вложенный - римскими цифрами нижнего регистра. Символы нумерации присваиваются определенному списку с помощью селекторов ID.

<style type="text/css">
  ol#List1 {list-style-type:upper-roman}
  ol#List2 {list-style-type:lower-roman}
</style>

<ol id="List1">
  <li>Элемент списка 1</li>
  <li>Элемент списка 2
      <ol id="List2">
        <li>Элемент списка 2a</li>
        <li>Элемент списка 2b</li>
      </ol>
  </li>
  <li>Элемент списка 3</li>
</ol>
Листинг 6.13. Код вложенных упорядоченных списков
I. Элемент списка 1
 II. Элемент списка 2 
	 i. Элемент списка 2a
	ii. Элемент списка 2b
III. Элемент списка 3
Листинг 6.14. Вложенные упорядоченные списки с нумерацией римскими цифрами
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!

Наталья Алмаева
Наталья Алмаева
Россия
Светлана Казьмина
Светлана Казьмина
Россия, Волгодонск