Опубликован: 14.08.2003 | Доступ: свободный | Студентов: 14542 / 6671 | Оценка: 3.91 / 3.85 | Длительность: 04:12:00
Лекция 4:

Текст и списки

< Лекция 3 || Лекция 4: 123 || Лекция 5 >

Списки

При отображении списков CSS позволяет управлять формой и изображением "пулек" (bullets) списка. "Пулька" (bullet) — это символ, стоящий перед элементом списка. Например, в неупорядоченном списке ( unsorted list ) перед элементом списка ставится "жирная" точка:

  • Первый элемент списка
  • Второй элемент списка
  • Третий элемент списка

CSS позволяют управлять формой "пулек" и заменять "пульки" картинками.

Любопытно, что управление отображением элементов списка отнесено к набору свойств, в который входит атрибут display. У этого атрибута может быть только одно значение — none. Если элемент в своем описании имеет атрибут display, и этот атрибут равен none, то он не отображается браузером вообще:

<UL STYLE="display:none;">
<LI>Первый элемент списка
<LI>Второй элемент списка
<LI>Третий элемент списка
</UL>

Если посмотреть HTML-код данного документа, то за примером описания списка следует код, который браузер не отобразил.

Атрибут display управляет отображением документа на дисплее компьютера, но не распространяется на другие среды отображения документа. Например, при печати скрытый список должен быть отображен.

Однако, на самом деле он не отображается и при печати.

Форма "пулек"

Форма "пульки" в виде "жирной" точки несколько непривычна. Обычно в машинописных документах используют черту. С другой стороны, в рекламных материалах часто в качестве "пульки" применяют квадрат или другой символ типографского набора, а также графическую картинку.

CSS позволяет управлять формой "пульки" через атрибут list-style-type: (открыть)

<UL STYLE="list-style-type:square;">
<LI>В виде "пульки" используем квадрат
</UL>
<UL STYLE="list-style-type:disc;">
<LI>В виде "пульки" используем диск
</UL> <UL STYLE="list-style-type:circle;">
<LI>В виде "пульки" используем круг
</UL>

Рис. 4.13.

До сих пор мы обсуждали только неупорядоченные списки   ( UL ), но управлять отображением "пулек" можно и в упорядоченных списках   ( OL ): (открыть)

<OL STYLE="list-style-type:lower-roman;
color:black;">
<LI>...
...
</OL> 
<OL STYLE="list-style-type:upper-alpha;
color:black;">
<LI>...
...
</OL> 
<OL STYLE="list-style-type:lower-alpha;
color:black;">
<LI>...
...
</OL>

Рис. 4.14.

CSS позволяют вообще отказаться от "пулек". Для этого нужно указать значение атрибута list-style-type равным none.

"Пульки"-картинки

Если стандартные формы "пулек" автора страницы не устраивают, он может использовать нестандартные. Для этого ему придется "пульку" нарисовать самому и в виде графического файла разместить на Web-узле. У такой "пульки" есть URL, который используется в CSS для обращения к ней.

<UL STYLE="list-style-image:url('bimage.gif');"
> <LI>Элемент списка расположен за чертой 
</UL>

Картинка может быть и более замысловатой. Это уже зависит от фантазии автора документа. Например, можно создать картинку-стрелочку: (открыть)

<UL STYLE="list-style-image:url('barrow.gif');"
> <LI>Элемент списка расположен за стрелкой 
</UL>

Рис. 4.15.

Здесь надо признаться в маленьком обмане. Если вы пользователь Internet Explorer, то все, что здесь написано — верно. Фрагмент кода, представленный перед примером, является его точной копией. Однако перед пользователями Netscape Navigator придется извиниться: Netscape Navigator этот атрибут не поддерживает. В тексте страницы присутствует JavaScript-код, который имитирует применение атрибута list-style-image в случае просмотра страницы браузером от Netscape.

< Лекция 3 || Лекция 4: 123 || Лекция 5 >
Павел Стрекалов
Павел Стрекалов
МИЭТ, 2006