SE@RCHER
SE@RCHER
Библиотека JAVASCRIPT
03www.ru
Библиотека JAVASCRIPT
03www.ru
Библиотека JAVASCRIPT
03www.ru
Золотая библиотека JAVASCRIPT
1997
примеры библиотеки javascriptПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
примеры библиотеки javascriptПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS
примеры библиотеки javascriptПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS

CSS 2.1: Сгенерированное содержимое, автоматическая нумерация и списки

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

В CSS 2.1 содержимое может генерироваться двумя способами:

  • С использованием свойства 'content' в сочетании с псевдоэлементами :before и :after.
  • С использованием элементов, свойство 'display' которых принимает значение 'list-item'.

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

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

Пример(ы):

Например, следующее правило вставляет строку "Примечание: " перед содержимым каждого элемента P, значение атрибута "class" которого равно "note":

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

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

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

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

Псевдоэлементы :before и :after наследуют все наследуемые свойства от элемента в дереве документа, к которому они прикреплены.

Пример(ы):

Например, следующие правила вставляют открывающие кавычки перед каждым элементом Q. Цвет кавычек будет красным, но шрифт будет таким же, как и шрифт остальной части элемента Q:

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

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

Пример(ы):

Т.к., например, начальное значение свойства 'display' равно 'inline', то кавычки в предыдущем примере вставляются как строковый блок (т.е. в той же строке, на которой находится исходное текстовое содержимое элемента). В следующем примере свойству 'display' явным образом присваивается значение 'block', так что вставляемый текст становится блоком:

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

Псевдоэлементы :before и :after взаимодействуют с другими блоками, например, с блоками run-in, как если бы они были реальными элементами, вставленными только внутрь связанных с ними элементов.

Пример(ы):

Например, следующий фрагмент документа и таблица стилей:

<h2> Заголовок </h2>               h2 { display: run-in; }
<p> Текст </p>                   p:before { display: block; content: 'Некоторый'; }

...будет представлен точно так же, как и следующий фрагмент документа и таблица стилей:

<h2> Заголовок </h2>            h2 { display: run-in; }
<p><span>Некоторый</span> Текст </p>  span { display: block }

Подобно этому, следующий фрагмент документа и таблица стилей:

<h2> Заголовочная </h2>     h2 { display: run-in; }
                      h2:after { display: block; content: 'Часть'; }
<p> Текст </p>

...будет представлен точно так же, как и следующий фрагмент документа и таблица стилей:

<h2> Заголовочная <span>Часть</span></h2>   h2 { display: block; }
                                      span { display: block; }
<p> Текст </p>

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

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

'content'
Значение:  normal | none | [ <строка> | <uri> | <счетчик> | attr(<идентификатор>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Начальное значение:  normal
Область применения:  псевдоэлементы :before и :after
Наследование:  нет
Процентное задание значений:  Н/Д
Устройства:  все
Вычисляемое значение:  В элементах,всегда вычисляется как 'normal'. В псевдоэлементах :before и :after, если определено значение 'normal', то вычисляется как 'none'. В противном случае, для значений URI – абсолютный URI; для значений attr() – результирующая строка; для остальных ключевых слов – как определено.

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

none
Псевдоэлемент не генерируется.
normal
Вычисляется как 'none' для псевдоэлементов :before и :after.
<строка>
Текстовое содержимое (см. раздел о строках).
<uri>
Значением является URI, обозначающий внешний ресурс (например, рисунок). Если агент пользователя не в состоянии отобразить ресурс, то он должен или оставить его, как будто он не был определен или отобразить какое-нибудь указание о том, что ресурс не может быть отображен.
<счетчик>
Счетчики могут задаваться с помощью двух различных функций: 'counter()' или 'counters()'. Первая имеет два формата: 'counter(имя)' или 'counter(имя, стиль)'. Генерируемый текст является значением самого внутреннего счетчика заданного имени в области применения в этом псевдоэлементе; он форматируется в заданном стиле (по-умолчанию используется стиль 'decimal'). Вторая функция также имеет два формата: 'counters(имя, строка)' или 'counters(имя, строка, стиль)'. Генерируемый текст представляет собой значения всех счетчиков с заданным именем в области применения в этом псевдоэлементе, от самого внешнего до самого внутреннего, разделенные заданной строкой. Счетчики отображаются в указанном стиле (по-умолчанию используется стиль 'decimal'). Дополнительную информацию можно получить в разделе, посвященном автоматической нумерации и счетчикам.
open-quote и close-quote
Эти значения заменяются соответствующей строкой из свойства 'quotes'.
no-open-quote и no-close-quote
Содержимое не представляется, но увеличивает (уменьшает) уровень вложенности кавычек.
attr(X)
Эта функция возвращает строку, которая является значением атрибута X предметной области селектора. Процессор CSS не анализирует эту строку. Если предметная область селектора не имеет атрибута X, то возвращается пустая строка. Зависимость имен атрибутов от регистра определяется языком документа.
Примечание. В CSS 2.1 нет возможности обращаться к значениям атрибутов других элементов, отличным от предметной области селектора.

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

Пример(ы):

Следующее правило приводит к генерированию строки "Глава: " перед каждым элементом H1:

H1:before { 
  content: "Глава: ";
  display: inline;
}

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

Пример(ы):

h1:before {
    display: block;
    text-align: center;
    white-space: pre;
    content: "chapter\A hoofdstuk\A chapitre"
}

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

12.3 Кавычки

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

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

'quotes'
Значение:  [<строка> <строка>]+ | none | inherit
Начальное значение:  зависит от агента пользователя
Область применения:  все элементы
Наследование:  да
Процентное задание значений:  Н/Д
Устройства:  визуальные
Вычисляемое значение:  как определено

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

none
Значения 'open-quote' и 'close-quote' свойства 'content' не создают кавычек.
[<строка>  <строка>]+
Значения '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:

<HTML lang="en">
  <HEAD>
  <TITLE>Кавычки</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Помести меня в кавычки!</Q>
  </BODY>
</HTML>

позволит агенту пользователя выполнить:

"Помести меня в кавычки!"

в то время, как данный фрагмент 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.

Примечание.Несмотря на то, что кавычки, определяемые свойством 'quotes' в предыдущем примере, имеются на клавиатурах компьютеров, для высокого качества текста могут потребоваться другие символы кодировки ISO 10646. В следующей таблице представлены некоторые символы кавычек из набора ISO 10646:

СимволПриблизительный видКод ISO 10646 (шестнадцатеричный)Описание
""0022КАВЫЧКА [двойная кавычка в ASCII]
''0027АПОСТРОФ [одинарная кавычка в ASCII]
<2039ЛЕВАЯ ОДИНАРНАЯ УГЛОВАЯ КАВЫЧКА
>203AПРАВАЯ ОДИНАРНАЯ УГЛОВАЯ КАВЫЧКА
«00ABЛЕВАЯ ДВОЙНАЯ УГЛОВАЯ КАВЫЧКА
»00BBПРАВАЯ ДВОЙНАЯ УГЛОВАЯ КАВЫЧКА
`2018ЛЕВАЯ ОДИНАРНАЯ КАВЫЧКА [single high-6]
'2019ПРАВАЯ ОДИНАРНАЯ КАВЫЧКА [single high-9]
``201CЛЕВАЯ ДВОЙНАЯ КАВЫЧКА [double high-6]
''201DПРАВАЯ ДВОЙНАЯ КАВЫЧКА [double high-9]
,,201EДВОЙНАЯ НИЖНЯЯ 9-ОБРАЗНАЯ КАВЫЧКА [double low-9]

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

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

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

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

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

Пример(ы):

Следующая таблица стилей помещает открывающие кавычки в каждом абзаце в BLOCKQUOTE и вставляет в конце одну закрывающую кавычку:

blockquote p:before     { content: open-quote }
blockquote p:after      { content: no-close-quote }
blockquote p.last:after { content: close-quote }

Последнее выполняется в заключительном абзаце, отмеченном классом "last".

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

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

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

'counter-reset'
Значение:  [ <идентификатор> <целое>? ]+ | none | inherit
Начальное значение:  none
Область применения:  все элементы
Наследование:  нет
Процентное задание значений:  Н/Д
Устройства:  все
Вычисляемое значение:  как определено
'counter-increment'
Значение:  [ <идентификатор> <целое>? ]+ | none | inherit
Начальное значение:  none
Область применения:  все элементы
Наследование:  нет
Процентное задание значений:  Н/Д
Устройства:  все
Вычисляемое значение:  как определено

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

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

Пример(ы):

В этом примере представлен способ нумерации глав и разделов с использованием элементов "Глава 1", "1.1", "1.2", и т.д.

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

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

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

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

Пример(ы):

Следующий пример сбросит счетчик 'section' в 0:

H1 { counter-reset: section 2 section }

Следующий пример увеличит счетчик 'section' на 3:

H1 { counter-increment: chapter chapter 2 }

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

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

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

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

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

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

Пример(ы):

Таким образом, для нумерации вложенных элементов списка достаточно использовать следующий пример. Результат аналогичен тому, когда 'display:list-item' и 'list-style: inside' задаются в элементе LI:

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

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

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

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

Если n-ое вхождение счетчика "item" обозначить как item[n], а начало и конец области действия обозначить как "(" и ")", то в следующем фрагменте HTML-документа будут использоваться заданные счетчики. (Предполагается, что при этом используется таблица стилей, заданная в приведенном выше примере).

<OL>                    <!-- {item[0]=0        -->
  <LI>item</LI>         <!--  item[0]++ (=1)   -->
  <LI>item              <!--  item[0]++ (=2)   -->
    <OL>                <!--  {item[1]=0       -->
      <LI>item</LI>     <!--   item[1]++ (=1)  -->
      <LI>item</LI>     <!--   item[1]++ (=2)  -->
      <LI>item          <!--   item[1]++ (=3)  -->
        <OL>            <!--   {item[2]=0      -->
          <LI>item</LI> <!--    item[2]++ (=1) -->
        </OL>           <!--                   -->
        <OL>            <!--   }{item[2]=0     -->
          <LI>item</LI> <!--    item[2]++ (=1) -->
        </OL>           <!--                   -->
      </LI>             <!--   }               -->
      <LI>item</LI>     <!--   item[1]++ (=4)  -->
    </OL>               <!--                   -->
  </LI>                 <!--  }                -->
  <LI>item</LI>         <!--  item[0]++ (=3)   -->
  <LI>item</LI>         <!--  item[0]++ (=4)   -->
</OL>                   <!--                   -->
<OL>                    <!-- }{item[0]=0       -->
  <LI>item</LI>         <!--  item[0]++ (=1)   -->
  <LI>item</LI>         <!--  item[0]++ (=2)   -->
</OL>                   <!--                   -->

Пример(ы):

Другой пример, показывающий как область действия работает при использовании счетчиков в элементах, которые не вложены друг в друга, приведен ниже. Он отображает то, как правила стиля заданные выше для номеров главы и раздела будут применяться для маркировки заданного.

                     <!-- счетчик "chapter"|счетчик "section" -->
<body>               <!-- {chapter=0       |                        -->
  <h1>About CSS</h1> <!--  chapter++ (=1)  | {section=0       -->
  <h2>CSS 2</h2>     <!--                      |  section++ (=1)  -->
  <h2>CSS 2.1</h2>   <!--                      |  section++ (=2)  -->
  <h1>Style</h1>     <!--  chapter++ (=2)  |}{ section=0      -->
</body>              <!--                      | }                      -->

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

Пример(ы):

Следующая таблица стилей нумерует вложенные элементы списка с использованием символов "1", "1.1", "1.1.1", и т. д.

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

12.4.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.4.3 Счетчики в элементах со свойством 'display: none'

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

Пример(ы):

Например, в следующей таблице стиля элементы H2, класс которых равен "secret", не увеличивают значение счетчика 'count2'.

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

У псевдоэлементы, которые не генерируются, также не может быть увеличен или сброшен счетчик.

Пример(ы):

Например, следующие правила не увеличивают счетчик 'heading':

h1::before {
    content: normal;
    counter-increment: heading;
}

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

12.5 Списки

CSS 2.1 предусматривает базовое визуальное форматирование списков. Элемент со свойством 'display: list-item' генерирует главный блок для содержимого элемента и необязательно блок маркера как визуальную индикацию того, что элемент является элементом списка.

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

Свойства фона применяются только к главному блоку; блок маркера со значением 'outside' является прозрачным.

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

'list-style-type'
Значение:  disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
Начальное значение:  disc
Область применения:  элементы со свойством 'display: list-item'
Наследование:  да
Процентное задание значений:  Н/Д
Устройства:  визуальные
Вычисляемое значение:  как определено

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

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

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

decimal
Десятичные числа, начиная с 1.
decimal-leading-zero
Десятичные числа, дополненные начальными нулями (e.g., 01, 02, 03, ..., 98, 99).
lower-roman
Римские числа строчными буквами (i, ii, iii, iv, v, и т.д.).
upper-roman
Римские числа заглавными буквами (I, II, III, IV, V, и т.д.).
georgian
Традиционная грузинская нумерация (an, ban, gan, ..., he, tan, in, in-an, ...).
armenian
Традиционная армянская нумерация.

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

lower-latin или lower-alpha
Строчные ascii-буквы (a, b, c, ... z).
upper-latin или upper-alpha
Заглавные ascii-буквы (A, B, C, ... Z).
lower-greek
Классические греческие строчные буквы альфа, бета, гамма, ... (?, ?, ?, ...)

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

Например, в результате выполнения следующего кода HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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-image'
Значение:  <uri> | none | inherit
Начальное значение:  none
Область применения:  элементы со свойством 'display: list-item'
Наследование:  да
Процентное задание значений:  Н/Д
Устройства:  визуальные
Вычисляемое значение:  абсолютный URI или 'none'

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

Пример(ы):

В следующем примере перед каждым элементом списка в качестве маркера используется графический объект "ellipse.png".

ul { list-style-image: url("http://png.com/ellipse.png") }
'list-style-position'
Значение:  inside | outside | inherit
Начальное значение:  outside
Область применения:  элементы со свойством 'display: list-item'
Наследование:  да
Процентное задание значений:  Н/Д
Устройства:  визуальные
Вычисляемое значение:  как определено

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

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

Например:

<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-position'> || <'list-style-image'> ] | inherit
Начальное значение:  см. каждое свойство в отдельности
Область применения:  элементы со свойством 'display: list-item'
Наследование:  да
Процентное задание значений:  Н/Д
Устройства:  визуальные
Вычисляемое значение:  см. каждое свойство в отдельности

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

Пример(ы):

ul { list-style: upper-roman inside }  /* любой элемент "ul" */
ul > li > ul { list-style: circle outside } /* любой дочерний элемент "ul" 
                                             дочернего элемента "li"  
                                             элемента "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>Уровень 1
      <UL>
         <LI>Уровень 2
      </UL>
    </OL>
  </BODY>
</HTML>

Желаемым представлением было бы если элементы списка уровня 1 были с маркерами 'lower-alpha', а уровня 2 – с маркерами '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. Именно этот способ рекомендуется использовать для определения информации о стиле списка.

Пример(ы):

Значение URI может комбинироваться с любым другим значением, как это сделано в следующем примере:

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

Если не удается получить доступ к графическому объекту, то вместо него здесь будет использоваться маркер 'disc'.

Если для свойства 'list-style' устанавливается значение 'none', то свойствам 'list-style-type' и 'list-style-image' также присваивается значение 'none':

ul { list-style: none }

В результате маркер элемента списка не отображается.