Как придать разный вид номеру и элементу списка?

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

Пример такого списка можно посмотреть здесь

Чтобы добиться нужного эффекта, нам нужно придать элементу списка <ol> шрифт Georgia, а абзацу <p> внутри этого элемента придать шрифт Arial.

1. Перейдем к HTML части:

Создайте список. Элементы списка должны быть внутри абзацев, как показано на примере ниже.

<ol>

    

<li>

<p>Первая линия</p>

</li>



<li>

<p>Вторая линия</p>

</li>



<li>

<p>Третья линия</p>

</li>



</ol>

На данном этапе список будет выглядеть так:

2. Поработаем над стилем для тэга <ol>

ol {

    font: italic 1em Georgia, Times, serif;

    color: #999999;

    }

Теперь список будет выглядеть так:

3. Теперь поработаем над стилем абзаца p, который находится внутри элемента ol

ol p {

    font: normal .8em Arial, Helvetica, sans-serif;

    color: #000000;

    }

Итоговый результат:

Вот такая интересная и в тоже время простая CSS техника для работы со списками.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.webdesignerwall.com
Перевел: Евгений Попов
Урок создан: 14 Мая 2008
Просмотров: 23677
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^