Свойство list-style-type
С помощью этого свойства можно в качестве маркера списка указать
произвольное изображение. Таким образом, это свойство предоставляет
авторам Web-страниц совершенно новые возможности, поскольку теперь
варианты создания маркированных списков ограничиваются только фантазией
создателя страницы.
Допустим, мы имеем некоторое изображение маркера и хотим, чтобы при
создании списка оно использовалось в качестве маркера. Тогда следует
написать такое правило:
|
UL { list-style-image: url{marker.gif); }
|
В HTML нет аналога этого свойства, списки с маркерами произвольного вида можно создать только с помощью CSS.
 Свойство list-style-position
Это свойство позволяет указать положение маркера. Значение свойства задается с помощью следующих ключевых слов:
- outside - за пределами основного блока элемента списка;
- inside - внутри основного блока списка.
Проиллюстрируем сказанное выше примерами. Рассмотрим CSS-правило:
UL { list-style-position: outside }
UL { list-style-position: inside }
|
Впервом случае, если текст элементов списка обвести воображаемым
прямоугольником, то маркер будет находиться за пределами этого
прямоугольника, что и соответствует значению outside.
Во втором случае, если текст элементов списка обвести воображаемым
прямоугольником, то маркер будет находиться в пределах этого
прямоугольника, что и соответствует значению inside.
Аналога свойства list-style-position в HTML не существует, следовательно, управлять положением маркера в этом языке невозможно.
Свойство list-style
Стенографическое свойство, позволяющее в сокращенной форме задать значения свойств list-style-type, list-style-image и list-style-position. Приведем примеры. Правило:
|
UL {
list-style-type: circle;
list-style-image: url(images/marker2.gif);
list-style-position: inside }
можно записать в сокращенном виде:
UL {
list-style: circle url(images/marker2.gif) inside }
|
Краткое описание всех свойств управления характеристиками списков в SCC приведено в таблице:
|
Свойства CSS для управления характеристиками списков
|
| Свойство |
Описание |
Пример |
| list-style-type |
Определяет внешний вид маркера либо нумератора
disc | circle | square | decimal | decimal-leading-zero lower-roman |
upper-roman lower-greek | lower-alpha lower-latin | upper-alpha
upper-latin
|
UL {list-style-type: square;}
OL {list-style-type: lower-roman;} |
| list-style-image |
Определяет URL для изображения маркера |
UL {list-style-image: url(bullet3.gif) ; } |
| list-style-position |
Определяет положение маркеров внутри или снаружи основного структурного блока
inside | outside
|
LI {list-style-position: outside} |
| list-style |
Стенографическое свойство, позволяющее одновременно задать значения всех предыдущих свойств. |
UL {list-style: square url(bullet3.gif) outside;} |
|