Списки
При отображении списков CSS позволяет управлять формой и изображением «пулек»(bullets) списка. «Пулька»(bullet) — это символ перед элементом списка. Например, в неупорядоченном списке (unordered 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:disk;»>
<li>В виде пульки используем диск
</ul>
- В виде пульки используем диск
<ul style=»list-style-type:circle;»>
<li>В виде пульки используем круг
</ul>
- В виде пульки используем круг
До сих пор мы обсуждали только неупорядоченные списки (UL), но управлять отображением «пулек» можно и в упорядоченных списках (OL):
<ol style=»list-style-type:lower-roman;color:darkred;»>
<li>…
…
</ol>
- «пульки» строчные римские буквы
- «пульки» строчные римские буквы
- «пульки» строчные римские буквы
- «пульки» строчные римские буквы
<ol style=»list-style-type:upper-alpha;color:darkred;»>
<li>…
…
</ol>
- «пульки» заглавные буквы
- «пульки» заглавные буквы
- «пульки» заглавные буквы
- «пульки» заглавные буквы
<ol style=»list-style-type:lower-alpha;color:darkred;»>
<li>…
…
</ol>
- «пульки» строчные буквы
- «пульки» строчные буквы
- «пульки» строчные буквы
- «пульки» строчные буквы
CSS позволяют вообще отказаться от «пулек». Для этого нужно указать значение атрибута list-style-type равным none.
«Пульки»-картинки
Если стандартные формы «пулек» не устраивают автора страницы, то он может использовать нестандартные. Для этого ему придется «пульку» нарисовать самому и в виде графического файла разместить на Web-узле. У такой «пульки» есть URL, который используется в CSS для обращения к ней.
<ul style=»list-style-image:url(../images/css12/bimage.gif);»>
<li>Элемент списка расположен за чертой
</ul>
Элемент списка расположен за чертой
Картинка может быть и более замысловатой. Это уже зависит от фантазии автора документа. Например, можно создать картинку-стрелочку:
<ul style=»list-style-image:url(../images/css12/barrow.gif);»>
<li>Элемент списка расположен за стрелкой
</ul>
Элемент списка расположен за стрелкой
Здесь следует признаться в маленьком обмане. Если вы пользователь IE, то все, что здесь написано — это правда. Фрагмент кода, представленный перед примером, является его точной копией. Перед пользователями же NN придется извиниться. NN не поддерживает этого атрибута. В тексте страницы присутствует JavaScript-код, который имитирует применение атрибута list-style-image в случае просмотра сраницы браузером от Netscape.
Спонсоры статьи: