Свойства списков

Листы стилей позволяют управлять отображением списков: задавать гарнитуру, размер

и цвет шрифта, выбирать вид маркеров (кружок, квадратик, рисунок и т.д.).

Мы рассмотрим свойства, предназначенные для форматирования маркеров списков:

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>