УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

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Указывает тип маркера пункта списка




« Назад Далее »



© 2011 - 2022 Уроки CSS