Спецификация CSS2

         

Маркировка: свойство 'marker-offset' - часть 2


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Выравнивание содержимого в боксе маркёра</TITLE> <STYLE type="text/css"> LI:before { display: marker; content: "(" counter(counter) ")"; counter-increment: counter; width: 6em; text-align: center; } </STYLE> </HEAD> <BODY> <OL> <LI> Это первый элемент списка. <LI> Это второй элемент списка. <LI> Это третий элемент списка. </OL> </BODY> </HTML>

должен дать примерно такой вывод:

(1) Это первый элемент списка. (2) Это второй элемент списка. (3) Это третий элемент списка.

В следующем примере создаются маркёры до и после элементов списка.

Этот документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Маркёры до и после элементов списка</TITLE> <STYLE type="text/css"> @media screen, print { LI:before { display: marker; content: url("smiley.gif"); LI:after { display: marker; content: url("sad.gif"); } } </STYLE> </HEAD> <BODY> <UL> <LI>первый элемент списка появляется первым <LI>второй элемент списка появляется вторым </UL> </BODY> </HTML>

должен дать примерно такой вывод (здесь используется рисунок ascii вместо изображения gif улыбки):

:-) первый элемент списка появляется первым :-( :-) второй элемент списка появляется вторым :-(

В следующем примере маркёры используются для нумерации примечаний (параграфов).

Данный документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Маркёры для создания нумерованных примечаний 4</TITLE> <STYLE type="text/css"> P { margin-left: 12 em; } @media screen, print { P.Note:before { display: marker; content: url("note.gif") "Примечание " counter(note-counter) ":"; counter-increment: note-counter; text-align: left; width: 10em; } } </STYLE> </HEAD> <BODY> <P>Это первый параграф данного документа.</P> <P CLASS="Note">Это очень короткий документ.</P> <P>Это конец.</P> </BODY> </HTML>




Содержание  Назад  Вперед