Авторское право © WWW : Балбесов нет: Компьютерная графика
Перепубликация материалов,возможна только с устного или письменного разрешения Администрации сайта !
Название статьи , Опубликовано Статьи » Уроки » Веб-дизайн » Модернизируйте ваши упорядоченные списки
07 мая 2009 00:23

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

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

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

Обзор

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

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

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



    
  
  1. 
    
    This is line one
    
  
    2. 
  
  2. 
    
    Here is line two
    
  
    3. 
  
  3. 
    
    And last line
    
  
    4.

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

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. Перевод: Портал для дизайнеров «Балбесов НЕТ»

URL / WWW
http://balbesof.net/article/a-121.html