Листы стилей позволяют управлять отображением списков: задавать гарнитуру, размер
и цвет шрифта, выбирать вид маркеров (кружок, квадратик, рисунок и т.д.).
Мы рассмотрим свойства, предназначенные для форматирования маркеров списков:
list-style-type, list-style-image, list-style-position. Сокращенная
форма записи этих трех свойств имеет вид list-style.
✓ list-style-type - задает маркеры для упорядоченных (нумерованных) и неупорядоченных (маркированных) списков. Набор допустимых значений свойства list-style-type включает 22 значения, многие из которых пока еще не поддерживаются распространенными браузерами. Поэтому остановимся только на часто используемых значениях:
square - маркер в виде квадратика □;
circle - кружок О;
disc - затемненный кружок • (значение по умолчанию);
decimal - десятичные числа, начиная с 1;
lower-roman - строчные римские цифры, например, i , ii , iii ;
upper-roman - прописные римские цифры, например, I , II, III;
lower-latin или lower-alpha - строчные латинские буквы, например, a , b , с);
upper-latin или upper-alpha - прописные латинские буквы, например, А, В, С;
попе - маркер не отображается;
✓ list-style-image - задает маркер в виде картинки (изображения). Например, правило UL {list- style -image: ur 1 ("mymarker.gif") } устанавливает для маркеров изображение, которое хранится в файле mymarker. gif;
✓ list-style-position - устанавливает позицию маркера в строке списка. Значение этого свойства обычно задает дополнительный отступ перед каждой строкой списка. Вы можете применять два значения: outside (маркер отображается за пределами области строки списка) или inside (маркер находится внутри области списка). По умолчанию принимается значение outside.
Дадим некоторые пояснения относительно использования первого из перечисленных свойств - list-style-type. Это свойство можно применять ко всему списку сразу в составе элементов OL или UL) или к отдельным строкам (в теге <LI>). Например, список с нумерацией строк с помощью строчных римских цифр задается тегом
<OL stylе ="list-style - type :lower - roman">
или CSS - правилом
UL {list-style: lower-roman}
Для выделения отображения отдельной строки списка можно воспользоваться встроенным стилем. Например, тег
< LI style = " list - style - type : circle " >
задает отдельную строку, маркированную кружком о.
Приведем пример использования стилевых свойств при оформлении маркированного :лиска
<HTML>
<HEAD>
< ТIТLЕ > Стили cписка </TITLE>
< STYLE type="text/сss" >
UL {list-style-position : inside;
list-style-image:url ( "Newz.gif" );
color: red;
font-size: 20px;
font-family: Arial Black}
</ STYLE>
</HEAD>
<BODY>
<Н2>Пример оформления списка с помощью стилей</Н2><НК><ВК>
< UL >
<LI >Архив </LI>
<LI>Pacсылка</LI>
<LI>Пописаться</LI>
</UL>
</BODY>
</HTML>