Шаг 20.
Основы CSS.
Отображение списков (окончание)

    На этом шаге мы рассмотрим остальные свойства, используемые для отображения списков.

    Свойство list-style-image определяет графическое изображение, которое будет использоваться в качестве маркера списка, если оно доступно. Значениями этого свойства могут быть либо none (не задается никакое изображение для маркера), либо полный или относительный адрес графического файла, задаваемый с помощью функции URL():

    OL {list-style-image: url(redball.gif);}

    Изменим таблицу CSS в примере из предыдущего шага, добавив в нее свойство list-style-image с нижеприведенным значением, сохраним изменения и просмотрим HTML-документ в браузере.

<HTML>
<HEAD>
<TITLE>Задание маркеров списка</TITLE>
<STYLE TYPE="text/css">
<!--
OL { 
    list-style-type: lower-roman;
    list-style-image: url(redball.gif);
}
-->
</STYLE>
</HEAD>
<BODY>
<OL>Список 1
<LI> Первый пункт
<LI> Второй пункт
<LI> Третий пункт
</OL>
<OL STYLE="list-style-type: none;">Список 2
<LI> Первый пункт
<LI> Второй пункт
<LI> Третий пункт
</OL>
</BODY>
</HTML>
Текст этого документа вместе с графическим файлом можно взять здесь.

    Результат просмотра измененного HTML-документа приведен на рисунке 1.


Рис.1. Результат просмотра измененного HTML-документа в браузере

    Приведенный рисунок позволяет сделать следующие выводы.

  1. Несмотря на то, что основное назначение тэга <OL> - задание нумерованного списка, его можно использовать также для создания маркированного списка.
  2. Задание графического изображения, которое будет использоваться в качестве маркера списка, отменяет действие свойства list-style-type. Для удаления маркеров во втором списке достаточно задать в параметре STYLE list-style-image: none;.

    Свойство list-style-position определяет положение маркера в списке:

<HTML>
<HEAD>
<TITLE>Расположение маркеров</TITLE>
</HEAD>
<BODY>
<UL STYLE=" list-style-position: inside"> Список 1
<LI> Первый элемент списка. Маркер в составе абзаца.
<LI> Второй элемент списка. Маркер в составе абзаца.
</UL>
<UL STYLE=" list-style-position: outside"> Список 2
<LI> Первый элемент списка. Маркер впереди абзаца.
<LI> Второй элемент списка. Маркер впереди абзаца.
</UL>
</BODY>
</HTML>
Текст этого документа можно взять здесь.

    Результат просмотра этого документа в браузере изображен на рисунке 2.


Рис.2. Списки с разным расположением маркеров

    Как и для большинства свойств каскадных таблиц стилей, так и для этих свойств определено свойство, в котором можно одновременно определить значения всех свойств отображения списка. Значением свойства list-style является список значений свойств list-style-type, list-style-image и list-style-position:

    UL {list-style: circle url(list.gif) inside;}

    В заключение отметим, что на первый взгляд может показаться излишним задавать значение circle, так как задано графическое изображение для маркера списка. Однако это не так. Значение circle будет использовано в том случае, если по каким-то причинам указанный файл не будет найден, или просмотр HTML-документа будет осуществляться при отключенной графике.

    Со следующего шага мы начнем знакомиться с блоками.




Предыдущий шаг Содержание Следующий шаг