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

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

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

Чтобы добиться нужного эффекта, нам нужно придать элементу списка <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
Просмотров: 23563
Правила перепечатки


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

^ Наверх ^