[ новости /+++ | форум | теги | ]

Каталог документации / Раздел "Web мастеру, CGI, Perl, PHP, Apache" / Оглавление документа

12 Генерируемое содержимое, автоматическая нумерация и списки

В некоторых случаях у авторов может возникнуть необходимость в том, чтобы агенты пользователей отображали на экране содержимое, которое не принадлежит дереву документа. Одним из хорошо известных примеров такой ситуации является нумерованный список, когда разработчик не желает вводить числа явным образом, а предпочитает, чтобы агент пользователя генерировал их автоматически. Подобным образом у разработчика может возникнуть желание, чтобы пользовательский агент вставлял слово "Рисунок" перед названием рисунка или строку "Глава 7" перед заголовком седьмой главы. В частности, агенты пользователей должны уметь вставлять эти строки для звуковых или эктипографических элементов.

В CSS2 содержимое может генерироваться несколькими способами:

• С использованием свойства 'content' в сочетании с псевдоэлементами :before и :after.
• С использованием звуковых свойств 'cue-before', 'cue-after' (см. раздел о звуковых таблицах стилей). Если в сочетании с ними используется свойство 'content', то отображение осуществляется в следующей последовательности: :before, 'cue-before', ('pause-before'), содержимое элемента, ('pause-after'), 'cue-after' и :after.
• С использованием элементов, свойство 'display' которых принимает значение 'list-item'.

Ниже описываются способы генерации, использующие свойство 'content'.

12.1 Псевдоэлементы :before и :after

С помощью псевдоэлементов :before и :after разработчики задают стиль и местоположение генерируемого содержимого. Как следует из названия, псевдоэлементы :before и :after определяют его местоположение перед и после содержимого элемента, принадлежащего дереву документа соответственно. В сочетании с этими псевдоэлементами свойство 'content' определяет содержимое вставляемого объекта.

P.note:before { content: "Примечание: " }

Объекты форматирования (например, блоки), порождаемые элементом, заключают в себе генерируемое содержимое. Так, например, если в представленном выше примере изменить таблицу стилей следующим образом:

P.note:before { content: "Примечание: " }
P.note        { border: solid green }

то в результате весь абзац, включая его начальную строку, будет заключен в сплошную зеленую рамку.

В дереве документа существует элемент, с которым псевдоэлементы :before и :after определенным образом связаны и все наследуемые свойства которого они наследуют.

Q:before {
  content: open-quote;
  color: red
}

В объявлении псевдоэлементов :before или :after ненаследуемые свойства принимают свои начальные значения.

BODY:after {
    content: "Конец";
    display: block;
    margin-top: 2em;
    text-align: center;
}

Агенты пользователей должны игнорировать следующие свойства с псевдоэлементами :before и :after: 'position', 'float', свойства списков и свойства таблиц.

Псевдоэлементы :before и :after регулируют использование значений свойства 'display' следующим образом:

• Если областью действия селектора является элемент уровня блока, то допустимыми значениями являются 'none', 'inline', 'block' и 'marker'. Если свойству 'display' было присвоено другое значение, то псевдоэлемент будет действовать так, как если бы им было значение 'block'.
• Если областью действия селектора является элемент строкового уровня, то допустимыми значениями являются 'none' и 'inline'. Если свойству 'display' было присвоено другое значение, то псевдоэлемент будет действовать так, как если бы им было значение 'inline'.

12.2 Свойство 'content'

Это свойство используется вместе с псевдоэлементами :before и :after для генерации содержимого в документе. Принимаемые им значения имеют следующий смысл:

<строка>

Текстовое содержимое (см. раздел о строках).

<uri>

Значением является URI, обозначающий внешний ресурс. Если поддерживаемые агентом пользователя типы устройств не позволяют ему представлять этот ресурс, это значение следует игнорировать. Примечание. В CSS2 не предусмотрен механизм изменения размера встраиваемого объекта или предоставления текстового описания, как это позволяют делать атрибуты "alt" или "longdesc" при работе с изображениями в HTML. Возможно, что в CSS следующих уровней ситуация изменится.

<счетчик>

Счетчики могут задаваться с помощью двух различных функций 'counter()' или 'counters()'. Первая имеет два формата: 'counter(имя)' и 'counter(имя, стиль)'. Генерируемый текст является значением счетчика в структуре форматирования. Он форматируется в заданном стиле (по умолчанию используется стиль 'decimal'). Вторая функция также имеет два формата: 'counter(имя, строка)' и 'counter(имя, строка, стиль)'. Генерируемый текст представляет собой значения всех счетчиков с таким именем в структуре форматирования, разделенные заданной строкой. Счетчики отображаются в указанном стиле (по умолчанию используется стиль 'decimal'). Дополнительную информацию можно получить в разделе, посвященном автоматической нумерации и счетчикам.

open-quote и close-quote

Эти значения заменяются соответствующей строкой из свойства 'quotes'.

no-open-quote и no-close-quote

Ничего не вставляет (вставляет пустую строку), но увеличивает (уменьшает) уровень вложенности кавычек.

attr(X)

Эта функция возвращает строку, которая является значением атрибута X предметной области селектора. Процессор CSS не обрабатывает эту строку. Если предметная область селектора не имеет атрибута X, возвращается пустая строка. Зависимость имен атрибутов от регистра определяется языком документа. Примечание. В CSS2 невозможно обращаться к значениям атрибутов других элементов селектора.

Свойство 'display' управляет тем, что содержимое помещается либо в блоке структурного или строкового уровня, либо в блоке, порожденном маркером.

В случае аппаратно-зависимого содержимого свойства 'content' его объявление следует помещать в правило @media. Например, текст, состоящий только из букв, может использоваться для любой группы устройств, изображения - только для группы визуальных и растровых устройств, а звуковые файлы - только для группы звуковых устройств.

@media aural {
   BLOCKQUOTE:after { content: url("beautiful-music.wav") }
   }

IMG:before { content: attr(alt) }

Разработчики могут вставлять в генерируемое содержимое переходы на новую строку с помощью последовательности "\A" в одной из строк после свойства 'content'. Это приводит к принудительному разрыву строки, аналогичному тому, который порождается элементом BR в языке HTML. Дополнительную информацию о последовательности "\A" можно получить в разделах "Строки" и "Символы и регистр".

H1:before {
    display: block;
    text-align: center;
    content: "chapter\A hoofdstuk\A chapitre"
}

Генерируемое содержимое не изменяет дерева документа. В частности, оно не поступает обратно в языковой процессор документа (например, для повторного синтаксического анализа).

12.3 Взаимодействие псевдоэлементов :before и :after с элементами 'compact' и 'run-in'

Вполне возможно возникновение следующих ситуаций:

1. Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'inline': псевдоэлемент принимается во внимание при вычислении размера блока, порожденного элементом (для 'compact'), и отображается внутри того же структурного блока, что и элемент.
2. Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'inline': применяются правила предыдущего пункта.
3. Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'block': псевдоэлемент форматируется как блок, расположенный над элементом, и не принимается во внимание при вычислении размера этого элемента (для 'compact').
4. Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'block': как элемент, так и его псевдоэлемент :after форматируются как блоки структурного уровня. Элемент не форматируется как строковый блок в своем собственном псевдоэлементе :after.
5. Элемент, следующий за элементом 'run-in' или 'compact', имеет псевдоэлемент :before типа 'block': решение о том, как следует форматировать элемент 'run-in'/'compact', принимается, исходя из типа структурного блока, порожденного псевдоэлементом :before.
6. Элемент, следующий за элементом 'run-in' или 'compact', имеет псевдоэлемент :before типа 'inline': решение о том, как следует форматировать элемент 'run-in'/'compact', зависит от значения свойства 'display' элемента, к которому прикреплен псевдоэлемент :before.

H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }

<H3>У кентавров</H3>
<P>есть копыта
<P>есть хвост

У кентавров: ... есть копыта
... есть хвост

12.4 Кавычки

В CSS2 авторы могут определять, каким образом агенты пользователей будут отображать кавычки в зависимости от стиля и контекста. Свойство 'quotes' задает пару кавычек для каждого уровня вложенности цитат. Свойство 'content' предоставляет доступ к этим кавычкам и вставляет их до и после цитаты.

12.4.1 Определение кавычек с помощью свойства 'quotes'

Это свойство задает кавычки для любого числа вложенных цитат. Значения данного свойства имеют следующий смысл:

none

Значения 'open-quote' и 'close-quote' свойства 'content' не создают кавычек.

[<строка>  <string>]+

Значения 'open-quote' и 'close-quote' свойства 'content' извлекаются из списка пар (открывающих и закрывающих) кавычек. Первая (крайняя слева) пара представляет самый внешний уровень вложенности, вторая пара - первый уровень вложенности и т.д. Агент пользователя должен применять необходимую пару кавычек в соответствии с уровнем вложенности.

/* Определение пар кавычек для двух уровней в двух языках */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: """ """ "<" ">" }

/* Вставка кавычек до и после содержимого элемента Q */
Q:before { content: open-quote }
Q:after  { content: close-quote }

<HTML lang="en">
  <HEAD>
  <TITLE>Кавычки</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Выделить кавычками!</Q>
  </BODY>
</HTML>

"Выделить кавычками!"

<HTML lang="no">
  <HEAD>
  <TITLE>Кавычки</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
  </BODY>
</HTML>

"Trøndere gråter når <Vinsjan på kaia> blir deklamert."

12.4.2 Вставка кавычек с помощью свойства 'content'

Кавычки вставляются в соответствующие места документа с помощью значений 'open-quote' и 'close-quote', принимаемых свойством 'content'. Каждое вхождение 'open-quote' или 'close-quote' в зависимости от глубины вложения заменяется одной из строк, принадлежащей значению свойства 'quotes'.

'Open-quote' указывает на первую из двух кавычек, а 'close-quote' - на вторую. Тип используемых кавычек зависит от уровня их вложенности, определяемого как разность числа вхождений 'open-quote', предшествующих текущему вхождению во всем сгенерированном тексте, и числа вхождений 'close-quote'. Если глубина вложенности равна 0, то используется первая пара кавычек; если глубина вложенности равна 1, то используется вторая пара кавычек и т. д. Если глубина вложенности превышает число пар, то осуществляется повторное использование последней пары.

Обратите внимание, что глубина вложенности цитат не зависит от вложенности исходного документа или структуры форматирования.

Некоторые типографские стили требуют, чтобы открывающие кавычки повторялись перед каждым абзацем цитаты, состоящей из нескольких абзацев, и чтобы только после последнего абзаца ставилась закрывающая кавычка. В CSS это может быть достигнуто путем вставки "фантомных" закрывающих кавычек. Ключевое слово 'no-close-quote' уменьшает уровень вложенности, но не приводит к вставке кавычек.

BLOCKQUOTE P:before     { content: open-quote }
BLOCKQUOTE P:after      { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }

Для симметрии существует также ключевое слово 'no-open-quote', которое увеличивает глубину вложения на единицу и также не приводит к вставке кавычек.

[LANG|=fr] > *  { quotes: """ """ "\2039" "\203A" }
[LANG|=en] > *  { quotes: "\201C" "\201D" "\2018" "\2019" }

[LANG|=fr] > * { quotes: """ """ "‹" "›" }
[LANG|=en] > * { quotes: "“" "”" "‘" "’" }

12.5 Автоматическая нумерация и счетчики

Управление автоматической нумерацией в CSS2 осуществляется двумя свойствами: 'counter-increment' и 'counter-reset'. Определяемые этими свойствами счетчики используются функциями counter() и counters() свойства 'content'.

Свойство 'counter-increment' допускает использование одного или нескольких имен счетчиков (идентификаторов), после каждого из которых может быть указано целое число. Оно определяет величину, на которую увеличивается содержимое счетчика при каждом новом вхождении элемента. По умолчанию приращение равно 1. Допускается использование отрицательных целых чисел.

Свойство 'counter-reset' также содержит список из одного или нескольких имен счетчиков, после каждого из которых может быть указано целое число. Оно задает значение, которое присваивается счетчику при каждом новом вхождении элемента. По умолчанию оно равно 0.

Если свойство 'counter-increment' относится к счетчику, который не принадлежит области действия (см. ниже) ни одного свойства 'counter-reset', то предполагается, что он обнуляется корневым элементом.

H1:before {
    content: "Глава " counter(chapter) ". ";
    counter-increment: chapter;  /* Добавление 1 к главе */
    counter-reset: section;      /* Установка значения 0 для раздела */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

Если элемент увеличивает/сбрасывает счетчик, а также использует его (в свойстве 'content' своего псевдоэлемента :before или :after), то этот счетчик используется после увеличения/сброса.

Если элемент и сбрасывает, и увеличивает счетчик, то содержимое счетчика сначала сбрасывается, а затем увеличивается.

Свойство 'counter-reset' поддерживает правила каскада. Таким образом, по правилам каскада в следующей таблице стилей:

H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

сбрасывается только счетчик 'imagenum'. Чтобы выполнить сброс обоих счетчиков, их необходимо задать вместе:

H1 { counter-reset: section -1 imagenum 99 }

12.5.1 Вложенные счетчики и область действия

Счетчики являются "самовложенными" в том смысле, что при повторном использовании счетчика в дочернем элементе автоматически создается новый образ этого счетчика. Это оказывается важным в ситуациях, аналогичных спискам в языке HTML, где элементы могут быть вложены сами в себя на произвольную глубину. Было бы невозможно определить для каждого уровня счетчик с уникальным именем.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

Самовложенность основывается на следующем принципе. Каждый элемент, у которого определено свойство 'counter-reset' для счетчика X, создает новый счетчик X, областью действия которого являются этот элемент и предшествующие ему сестринские элементы, а также все их потомки.

В приведенном выше примере элемент OL создает счетчик, на который будут ссылаться все его дочерние элементы.

<OL>               <!-- (обнуление item[0]          -->
  <LI>item         <!--  увеличение item[0] (= 1)   -->
  <LI>item         <!--  увеличение item[0] (= 2)   -->
    <OL>           <!--  (обнуление item[1]         -->
      <LI>item     <!--   увеличение item[1] (= 1)  -->
      <LI>item     <!--   увеличение item[1] (= 2)  -->
      <LI>item     <!--   увеличение item[1] (= 3)  -->
        <OL>       <!--   (обнуление item[2]        -->
          <LI>item <!--    увеличение item[2] (= 1) -->
        </OL>      <!--   )                         -->
        <OL>       <!--   (обнуление item[3]        -->
          <LI>     <!--    увеличение item[3] (= 1) -->
        </OL>      <!--   )                         -->
      <LI>item     <!--   увеличение item[1] (= 4)  -->
    </OL>          <!--  )                          -->
  <LI>item         <!--  увеличение item[0] (= 3)   -->
  <LI>item         <!--  увеличение item[0] (= 4)   -->
</OL>              <!-- )                           -->
<OL>               <!-- (сброс item[4] в 0          -->
  <LI>item         <!--  увеличение item[4] (= 1)   -->
  <LI>item         <!--  увеличение item[4] (= 2)   -->
</OL>              <!-- )                           -->

Функция 'counters()' генерирует последовательность разделенных заданной строкой значений всех счетчиков, имена которых совпадают.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }

12.5.2 Стили счетчиков

По умолчанию содержимое счетчиков отображается в десятичном формате, но наряду с ним счетчикам доступны все другие стили отображения, используемые в свойстве 'list-style-type'. Для стиля, используемого по умолчанию, применяется следующая запись:

counter(имя)

В общем случае используется следующая запись:

counter(имя, 'list-style-type')

Допускается применение всех стилей, включая 'disc', 'circle', 'square' и 'none'.

H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) }

12.5.3 Счетчики в элементах со свойством 'display: none'

Неотображаемый элемент (для свойства 'display' которого установлено значение 'none') не может увеличивать или уменьшать значение счетчика.

H2.secret {counter-increment: count2; display: none}

С другой стороны, элементы, свойство 'visibility' которых принимает значение 'hidden', увеличивают значения счетчиков.

12.6 Маркеры и списки

Большинство элементов уровня блока в CSS генерируют один главный структурный блок. В этом разделе обсуждаются два способа, используемые в CSS для того чтобы позволить элементу генерировать два блока: один главный структурный блок (для содержимого элемента) и один отдельный блок для маркера (используемый для элементов оформления, таких как маркеры позиции, изображения или числа). Блок маркера может находиться внутри или вне главного блока. В отличие от содержимого :before и :after блок маркера не влияет на расположение главного блока, независимо от схемы позиционирования последнего.

Наиболее общим из этих двух способов является нововведение, используемое в CSS2 и названное маркером. Более ограниченный в своих возможностях способ использует свойства списков, заимствованные из CSS1. Эти свойства предоставляют разработчикам возможность получения быстрых результатов для многих распространенных сценариев упорядоченного и неупорядоченного отображения списков. Однако маркеры позволяют разработчикам точно управлять их позицией и содержимым. Маркеры могут использоваться вместе со счетчиками для создания новых стилей списков, для нумерации заметок на полях и множества других вещей.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Создание списка с помощью маркеров</TITLE>
     <STYLE type="text/css">
	  LI:before { 
	      display: marker;
	      content: counter(mycounter, lower-roman) ".";
	      counter-increment: mycounter;
	  }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> Это первый элемент.
      <LI> Это второй элемент.
      <LI> Это третий элемент.
    </OL>
  </BODY>
</HTML>

   i. Это первый элемент.
  ii. Это второй элемент.
 iii. Это третий элемент.

С помощью селекторов потомков и селекторов дочерних элементов можно задавать различные типы маркеров в зависимости от глубины вложенности списков.

12.6.1 Маркеры: свойство 'marker-offset'

Маркеры создаются путем присвоения свойству 'display', фигурирующему в псевдоэлементе :before или :after, значения 'marker'. Если содержимое псевдоэлемента :before или :after, относящееся к типу 'block' или 'inline', является частью главного блока, генерируемого элементом, то содержимое типа 'marker' форматируется в отдельный блок маркера, находящийся вне главного блока. Блоки маркеров форматируются в виде отдельной строки (т.е. в виде одного линейного блока), в силу чего они утрачивают гибкость в сравнении с перемещаемыми объектами. Блок маркера создается только тогда, когда свойство 'content' псевдоэлемента в действительности генерирует некоторое содержимое.

Блоки маркера имеют границы и отступы, но не имеют полей.

В псевдоэлементе :before вертикальное выравнивание базовой линии текста, содержащегося в блоке маркера, осуществляется относительно базовой линии текста первой строки содержимого главного блока. Если главный блок не содержит текста, то осуществляется выравнивание верхних сегментов внешних краевых линий блока маркера и главного блока. В псевдоэлементе :after вертикальное выравнивание базовой линии текста, содержащегося в блоке маркера, осуществляется относительно базовой линии текста последней строки содержимого главного блока. Если главный блок не содержит текста, то осуществляется выравнивание нижних сегментов внешних краевых линий блока маркера и главного блока.

Высота блока маркера задается свойством 'line-height'. Блок маркера, связанный с псевдоэлементом :before (:after), принимается во внимание при вычислении высоты первого (последнего) линейного блока, содержащегося в главном блоке. Таким образом, маркеры выравниваются по первой или последней строке содержимого элемента, даже если блоки маркеров располагаются в отдельных линейных боках. Если в главном блоке нет ни первого, ни последнего линейного блока, то блок маркера сам создает свой линейный блок.

Вертикальное выравнивание блока маркера внутри его линейного блока определяется свойством 'vertical-align'.

Если для свойства 'width' устанавливается значение 'auto', то ширина содержимого блока маркера равна ширине содержимого. В противном случае она равна значению свойства 'width'. Если значение свойства 'width' не превосходит значения ширины содержимого, то образ действий при переполнении определяется свойством 'overflow'. Блоки маркеров могут располагаться поверх главных блоков. Если значение свойства 'width' превосходит значение ширины содержимого, то горизонтальное выравнивание содержимого блока маркера определяется свойством 'text-align'.

Свойство 'marker-offset' задает величину горизонтального интервала между блоком маркера и связанным с ним главным блоком. Расстояние измеряется между их ближайшими краями границ. Примечание. Если маркер помещается справа от перемещаемого объекта в тексте, который выводится слева направо, то главный блок будет выводиться вдоль правой стороны перемещаемого элемента, в то время как блок маркера будет отображен слева от него. Т.к. край левой границы главного блока находится слева от перемещаемого объекта (см. описание перемещаемых объектов), а блоки маркеров находятся за пределами краевой линии границы главного блока, то этот маркер также будет находиться слева от перемещаемого элемента. То же происходит и когда маркер помещается слева от перемещаемого элемента в тексте, который выводится справа налево.

Если для свойства 'display' содержимого элемента с 'display: list-item' устанавливается значение 'marker', то блок маркера, генерируемый для псевдоэлемента ':before', заменяет обычный маркер элемента списка.

<!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>

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

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

<!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>

                  Это первый абзац 
                  в данном документе.

  Примечание 1:   Это очень короткий 
                  документ.
           
                  Конец.

Это свойство задает расстояние между ближайшими краями границ блока маркера и связанного с ним главного блока. Это расстояние может либо задаваться пользователем (<длина>), либо назначаться агентом ('auto') пользователя. Значения длины могут быть отрицательными, но это зависит от реализации.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
    <HEAD>
      <TITLE>Пример маркера 5</TITLE>
      <STYLE type="text/css">
           P { margin-left: 8em } /* Создает пространство для счетчиков */
           LI:before { 
               display: marker;
               marker-offset: 3em;
               content: counter(mycounter, lower-roman) ".";
               counter-increment: mycounter;
           }   
      </STYLE>
   </HEAD>
   <BODY>
     <P> Это предыдущий абзац ...
     <OL>
       <LI> Это первый элемент.
       <LI> Это второй элемент.
       <LI> Это третий элемент.
     </OL>
     <P> Это следующий абзац ...
   </BODY>
 </HTML>

        Это предыдущий 
        абзац ...
      
   i.   Это первый элемент.
  ii.   Это второй элемент.
 iii.   Это третий элемент.

        Это следующий 
        абзац ...

12.6.2 Списки: свойства 'list-style-type', 'list-style-image', 'list-style-position' и 'list-style'

Свойства списков позволяют осуществлять визуальное форматирование списков. Как и в случае наиболее общих маркеров, элемент со свойством 'display: list-item' порождает главный блок для своего содержимого и необязательный блок для маркера. Использование других свойств списков позволяет разработчикам определять тип (графический объект, глиф или число) и позицию маркера относительно главного блока (за его пределами или внутри него перед содержимым). Их использование уже не позволяет разработчикам осуществлять более тонкую настройку стиля (цвета, шрифтов, выравнивания и т.д.) и местоположения маркера относительно главного блока.

Кроме того, если маркер M (заданный с помощью 'display: marker') используется с элементом списка, созданным с помощью свойств списка, то M заменяет стандартный маркер элемента списка.

Вместе со свойствами списка свойства фона применяются только к главному блоку. 'Внешний' блок маркера является прозрачным. Маркеры предоставляют больше возможностей для управления стилем отображения блоков маркеров.

Это свойство задает вид маркера элемента списка, если для свойства 'list-style-image' устанавливается значение 'none' или изображение, на которое указывает URI, недоступно. Значение 'none' говорит о том, что маркер не используется. В противном случае можно использовать три типа маркеров: глифы, нумерованные и алфавитные. Примечание. Нумерованные списки улучшают доступность документа, упрощая просмотр списков.

Глифы определяются с помощью значений disk, circle и square. Конкретное их представление зависит от агента пользователя.

Системы нумерации определяются с помощью:

decimal

Десятичных чисел, начиная с 1.

decimal-leading-zero

Десятичных чисел, вначале дополненных нулями (например, 01, 02, 03, ..., 98, 99).

lower-roman

Римских цифр, представленных строчными буквами (i, ii, iii, iv, v и т.д.).

upper-roman

Римских цифр, представленных прописными буквами (I, II, III, IV, V и т.д.).

hebrew

Традиционной еврейской нумерации.

georgian

Традиционной грузинской нумерации (an, ban, gan, ..., he, tan, in, in-an, ...).

armenian

Традиционной армянской нумерации.

cjk-ideographic

Простых идеографических чисел.

hiragana

a, i, u, e, o, ka, ki, ...

katakana

A, I, U, E, O, KA, KI, ...

hiragana-iroha

i, ro, ha, ni, ho, he, to, ...

katakana-iroha

I, RO, HA, NI, HO, HE, TO, ...

Агент пользователя, который не смог определить систему нумерации, должен использовать систему 'decimal'.

Алфавитные системы задаются с помощью:

lower-latin или lower-alpha

Строчных букв в коде ascii (a, b, c, ... z).

upper-latin или upper-alpha

Заглавных букв в коде ascii (A, B, C, ... Z).

lower-greek

Классических строчных греческих букв: альфа, бета гамма, ... (έ, ή, ί, ...)

В этой спецификации не определено поведение алфавитных систем, когда в процессе нумерации исчерпываются все символы алфавита. Например, после 26 элементов списков представление 'lower-latin' не определено. Поэтому для больших списков рекомендуется использовать числа.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Нумерация с использованием строчных римских цифр</TITLE>
     <STYLE type="text/css">
          OL { list-style-type: lower-roman }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> Это первый элемент.
      <LI> Это второй элемент.
      <LI> Это третий элемент.
    </OL>
  </BODY>
</HTML>

  i Это первый элемент.
 ii Это второй элемент.
iii Это третий элемент.

Это свойство определяет графический объект, используемый в качестве маркера элемента списка. Если графический объект доступен, то он заменяет маркер, устанавливаемый свойством 'list-style-type'.

UL { list-style-image: url("http://png.com/ellipse.png") }

Это свойство определяет положение блока маркера в главном структурном блоке. Его значения имеют следующий смысл:

outside

Блок маркера находится за пределами главного структурного блока. Примечание. В CSS1 точное местоположение блока маркера не уточнялось, поэтому из соображений совместимости в CSS2 оно сохранило ту же степень неопределенности. Для более точного управления положением блоков маркеров желательно использовать маркеры.

inside

Блок маркера находится в первом строковом блоке главного структурного блока, следом за которым выводится содержимое элемента.

<HTML>
  <HEAD>
    <TITLE>Сравнение внутреннего/внешнего расположения</TITLE>
    <STYLE type="text/css">
      UL         { list-style: outside }
      UL.compact { list-style: inside }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>первый элемент списка располагается первым 
      <LI>второй элемент списка располагается вторым 
    </UL>

    <UL class="compact">
      <LI>первый элемент списка располагается первым 
      <LI>второй элемент списка располагается вторым 
    </UL>
  </BODY>
</HTML>

В тексте, вывод которого осуществляется справа налево, маркеры располагались бы справа от блока.

Свойство 'list-style' является сокращенной формой задания трех свойств 'list-style-type', 'list-style-image' и 'list-style-position' в одном месте таблицы стилей.

UL { list-style: upper-roman inside }  /* Любой элемент UL */
UL > UL { list-style: circle outside } /* Любой дочерний элемент UL элемента UL */

Хотя разработчики и могут задать информацию 'list-style' о стиле списка непосредственно в элементах списка (например, в элементе LI языка HTML), тем не менее, следует пользоваться таким способом с определенной осторожностью. Следующие два правила выглядят похожими, хотя первое определяет селектор потомков, а второе (более специфичное) - селектор дочерних элементов.

OL.alpha LI   { list-style: lower-alpha } /* Любой потомок LI элемента OL */
OL.alpha > LI { list-style: lower-alpha } /* Любой дочерний элемент LI элемента OL */

Разработчики, использующие только селекторы потомков, могут не достичь ожидаемых результатов. Рассмотрим следующие правила:

<HTML>
  <HEAD>
    <TITLE>ПРЕДУПРЕЖДЕНИЕ: Непредвиденные результаты,
    полученные вследствие применения каскада</TITLE>
    <STYLE type="text/css">
      OL.alpha LI  { list-style: lower-alpha }
      UL LI        { list-style: disc }
    </STYLE>
  </HEAD>
  <BODY>
    <OL class="alpha">
      <LI>первый уровень
      <UL>
         <LI>второй уровень
      </UL>
    </OL>
  </BODY>
</HTML>

Отображение элементов списка первого и второго уровней, помеченных маркерами типа 'lower-alpha' и 'disc' соответственно будет осуществлено надлежащим образом. Однако каскад приведет к тому, что первое правило стиля (включающее специфичную информацию о классе) будет перекрывать второе. Следующие правила позволят решить эту проблему с помощью селектора дочерних элементов:

OL.alpha > LI  { list-style: lower-alpha }
UL LI   { list-style: disc }

Другим способом решения может стать задание информации 'list-style' о стиле списка исключительно в элементах списка:

OL.alpha  { list-style: lower-alpha }
UL        { list-style: disc }

Благодаря наследованию значения свойства 'list-style' элементов OL и UL будут передаваться соответствующим свойствам элементов LI. Именно этот способ рекомендуется использовать для определения информации о стиле списка.

UL { list-style: url("http://png.com/ellipse.png") disc }

UL { list-style: none }

Партнёры:

Хостинг: