Списки в 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 не будет опубликован. Обязательные поля помечены *