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

По умолчанию большинство браузеров отображают упорядоченные списки таким же стилем шрифта, как и основной текст. Вот небольшой урок 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;
}

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

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

---

Источник статьи: www.webdesignerwall.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»

---

Оцените, пожалуйста, эту статью:

Опубликовано: 07 мая 2009 | Просмотров: 9753 | Страница для печати

Читать комментарии [15] на форуме.

Оставить комментарий

Ваше имя:
Проверка на человечность: Если Вы человек, то Вам не составит труда набрать буковки и циферки в поле под картинкой, которая ниже.

Идёт отправка комментария ...