Модернизируйте ваши упорядоченные списки

По умолчанию большинство браузеров отображают упорядоченные списки таким же стилем шрифта, как и основной текст. Вот небольшой урок CSS, который научит вас, как можно использовать элементы упорядоченного списка ol и параграф p для создания стильного нумерованного списка.

Просмотреть примеры

Загрузить файл HTML

Обзор

Фактически, все, что нам нужно будет сделать - это стилизовать элемент ol под шрифт Georgia, а затем сбросить элемент p, заложенный в ol, на шрифт Arial.

1. Исходный код HTML

Сделайте упорядоченный список. Не забудьте поместить ваш текст в тег <p>

<ol>  <li>    <p>This is line one</p>  </li>  <li>    <p>Here is line two</p>  </li>  <li>    <p>And last line</p>  </li></ol>

Вот как отображается упорядоченный список по умолчанию:

2. Элемент ol

Стилизуйте элемент ol:

ol {  font: italic 1em Georgia, Times, serif;  color: #999999;}

Список станет вот таким:

3. Элемент ol p

Теперь стилизуйте элемент ol p:

ol p {  font: normal .8em Arial, Helvetica, sans-serif;  color: #000000;}

Ваш список должен выглядеть вот так:

Посмотрите мой демо файл, чтобы увидеть еще примеры.