ВЕБУЧЕБНИКИ

УРОК 8 - СПИСКИ

CSS свойства списка позволяют вам:

• устанавливать различные маркеры пунктов списка для упорядоченных списков;

• устанавливать различные маркеры пунктов списка для неупорядоченных списков;

• устанавливать изображение в качестве маркера пункта списка.

В HTML существует два типа списков:

• неупорядоченные списки - пункты списка помечаются маркерами;

• упорядоченные списки - пункты списка помечаются числами или буквами.

С помощью CSS списки могут быть оформлены лучшим образом, и изображения могут использоваться в качестве маркеров для пунктов списка.

Различные маркеры пунктов списка

Тип маркера для пункта списка указывается с помощью свойства list-style-type:

Пример:

ul.a {list-style-type:circle;}

ul.b {list-style-type:square;}

ol.c {list-style-type:upper-roman;}

ol.d {list-style-type:lower-alpha;}

нажмите чтобы увидеть результат

Изображение в качестве маркера пункта списка

Чтобы указать изображение в качестве маркера пункта списка, используйте свойство list-style-image:

Пример:

ul

{

list-style-image: url('imeges/01.gif');

}

нажмите чтобы увидеть результат

Пример выше не отображается одинаково вовсех браузерах. IE и Opera будут отображать маркер-изображение чуть выше, чем Firefox, Chrome, и Safari.

Если вы хотите, чтобы изображение-маркер размещался одинаково во всех браузерах, кросс-браузерное решение объяснено ниже.

Кросс-браузерное решение

Следующий пример отрисовывает изображение-маркер одинаково во всех браузерах:

Пример:

ul

{

list-style-type:none;

padding:0px;

margin:0px;

}

li

{

background-image: url('imeges/01.gif');

background-repeat:no-repeat;

background-position:5px 1px;

padding-left:29px;

}

нажмите чтобы увидеть результат

Объяснение примера:

Для ul:

• установка list-style-type в none - чтобы удалить маркер пункта списка;

• Установка свойств padding и margin в 0px (для кросс-браузерной совместимости).

Для li:

• установка адреса URL для изображения, и значения no-repeat (чтобы изображение выводилось только один раз);

• позиционирование изображения в желаемом месте (влево на 0px и вниз на 5px);

• установка левого отступа для текста в списке.

Список - стенографическое (сокращенное) свойство

Также можно указать все свойства списка в одном - одиночном свойстве. Оно называется стенографическим (или сокращенным) свойством.

Стенографическое свойство для списков - это свойство list-style:

Пример:

ul

{

list-style:square url("imeges/01.gif");

}

При использовании стенографического свойства порядок значений таков:

• list-style-type

• list-style-position

• list-style-image

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