Работа со списками в CSS
List-style-type
Данное свойство позволяет задать вид маркера элементов списка. Может иметь несколько значений:
- disc - маркер в виде закрашенного круга;
- circle - маркер в виде незакрашенной окружности;
- square - чёрный квадрат в качестве маркера;
- decimal - маркеры в виде десятичных чисел (1, 2, 3,...,n);
- upper-roman - каждый маркер - большая римская цифра (I, II, III,...,N);
- lower-roman - каждый маркер - маленькая римская цифра (i, ii, iii,...,n);
- upper-alpha - маркеры задаются большими латинскими буквами (A, B, C,...,Z);
- lower-alpha - маркеры задаются при помощи малых латинских букв (a, b, c,...,z);
- none - маркер списка отсутствует.
Все эти маркеры можно применять как к нумерованным, так и к маркированным спискам. Рассмотрим пример. Зададим таблицу стилей для нумерованного и маркированного списка следующего содержания:
ol {
list-style-type:disc;
}
ul {
list-style-type:upper-roman;
}
Теперь подключим эту таблицу к html-документу, содержание которого написано ниже:
Нумерованный список:
- Первый элемент списка;
- Второй элемент списка;
- Третий элемент списка.
Маркированный (ненумерованный список):
- Первый элемент списка;
- Второй элемент списка;
- Третий элемент списка.
Получилось следующее. Теперь каждый элемент нумерованного списка маркирован чёрным кружком, а ненумерованного - большой римской цифрой.
List-stile-position
Свойство list-style-position определяет будет ли маркер находится внутри списка или снаружи. Может иметь 2 значения:
- inside - маркер находится внутри блока элемента списка;
- outside - маркер находится снаружи блока элемента списка.
Рассмотрим 2 блока списков, первый - inside, второй - outside:
- Первый элемент;
- Второй элемент;
- Третий элемент.
- Первый элемент;
- Второй элемент;
- Третий элемент.
List-style-image
Это свойство позволяет вместо маркера поставить любое изображение. В качестве значения указывается слово url, затем в круглых скобках путь к изображению. К списку, расположенному ниже подключим рисунок, при помощи внутренней таблицы стилей.
- Первый элемент;
- Второй элемент;
- Третий элемент.
Вот, кстати, и html-код с подключенной таблицей стилей, списка, размещённого выше:
- Первый элемент;
- Второй элемент;
- Третий элемент.
Сокращённая форма записи свойства list-style.
Стиль списка вида:
ul {
list-style-position:inside;
list-style-image:url(galka.gif);
}
Можно представить как:
ul {
list-style:inside url(galka.gif);
}
Что задавать первым, позицию или рисунок - неважно! На этом всё.
2012 год.