Списки в CSS

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

Содержание:

Это свойство задает маркер элемента списка. Значениями маркированных списков являются ключевые слова (аналогичны значению атрибута TYPE):

  • disk — маркер в виде закрашенного круга;
  • circle — маркер в виде незакрашенного круга;
  • square — маркер в виде закрашенного квадрата;
  • none — маркер не используется.

Для нумерованных списков значениями являются так же ключевые слова:

  • decimal — десятичные числа с еденицы (1);
  • decimal-leading-zero — десятичные числа с ведущими нолями (01; 02; 03…), не поддерживается IE;
  • lower-roman — строчные буквы латиницы в виде римских цифр (i, ii, iii, iv, v… );
  • upper-roman — заглавные буквы латиницы в виде римских цифр (I, II, III, IV, V… );
  • hebrew — традиционная еврейская нумерация (только для Mozilla);
  • georgian — традиционная грузинская нумерация (только для Mozilla и Opera);
  • armenian — традиционная армянская нумерация (только для Mozilla и Opera);
  • cjk-ideographic — простые идеографические числа (только для Mozilla);
  • lower-latin или lower-alpha — строчные буквы в коде ASCII — a, b, c, d… (lower-alpha только для IE);
  • lower-greek — строчные буквы греческого алфавита (только для Mozilla и Opera).

Смотрим пример написания правила:

ol {list-style-type:lower-alpha}

Получился список пронумерованный строчными буквами кода ASCII:

При помощи этого свойства вместо стандартного маркера можно вставить свое изображение (только с помощью CSS). Тут фантазии нет предела для начинающего web-мастера. Правило пишется так:

ul {list-style-image:url (адрес изображения)}

С помощью этого свойства задается положение маркера, значения задаются сключевыми словами:

  • outside — за пределами основного блока элемента списка;
  • inside — внутри основного блока.

Правило для outside:

ul {list-style-position:outside}

Получаем:

  • Первый пункт списка. Блок маркера находится за пределами основного блока элемента списка если задано знчение outside.
  • Второй пункт.
  • Третий пункт списка.

Правило для inside:

ul {list-style-position:inside}

Получаем:

  • Первый пункт списка. Блок маркера находится внутри основного блока элемента списка если задано знчение inside.
  • Второй пункт.
  • Третий пункт списка.

Это стенографическое свойство, которое позволяет записать значения в сокращенной форме. Смотрим пример:

ul {
list-style-image:url (адрес изображения);
list-style-position:outside
}

Пишем это же в сокращенном виде:

ul {list-style: url (адрес изображения) outside}

На этом со списками закончим и перейдем обширной теме «блоки в CSS»

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *