|
CSS Урок 9 Списки
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-type для неупорядоченных списков, и некоторые - для упорядоченных.
Изображение в качестве Маркера Пункта СпискаЧтобы указать изображение в качестве маркера пункта списка, используйте свойство list-style-image:
Примерul
{
list-style-image:url('sqpurple.gif');
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Пример выше не отображается одинаково вовсех браузерах. IE и Opera будут отображать маркер-изображение чуть выше, чем Firefox, Chrome, и Safari.
Если вы хотите, чтобы изображение-маркер размещался одинаково во всех браузерах, кросс-браузерное решение объяснено ниже.
Кросс-браузерное РешениеСледующий пример отрисовывает изображение-маркер одинаково во всех браузерах:
Примерul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
Объяснение примера:
- Для ul:
- Установка list-style-type в none - чтобы удалить маркер пункта списка
- Установка свойств padding и margin в 0px (для кросс-браузерной совместимости)
- Для li:
- Установка адреса URL для изображения, и значения no-repeat (чтобы изображение выводилось только один раз)
- Позиционирование изображения в желаемом месте
(влево на 0px и вниз на
5px)
- Установка левого отступа для текста в списке
Список - Стенографическое (Сокращенное) свойствоТакже можно указать все свойства списка в одном - одиночном свойстве.
Оно называется стенографическим (или сокращенным) свойством.
Стенографическое свойство для списков - это свойство list-style:
Примерul
{
list-style:square url("sqpurple.gif");
}
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает |
При использовании стенографического свойства порядок значений таков:
- list-style-type
- list-style-position (объяснение смотрите ниже - в таблице свойств CSS)
- list-style-image
Не важно, если одно из значений выше пропущено, главное чтобы все остальные значения шли по указанному порядку.
 |
Еще примеры |
Всевозможные маркеры пунктов списка
Этот пример демонстрирует всевозможные маркеры пунктов списка в CSS.
Все CSS Свойства Списка| Свойство | Описание |
|---|
| list-style | Устанавливает все свойства списка в одном объявлении |
| list-style-image | Устанавливает изображение в качестве маркера пункта списка |
| list-style-position | Указывает, должны ли маркеры пункта списка появляться внутри или снаружи содержания |
| list-style-type | Указывает тип маркера пункта списка |
|
