создание и продвижение сайта (вбиваю в ТОП-10, как гвозди)Настройка и сопровождение платной рекламы яндекс.директ

CSS2. Спецификация. Рекомендации W3C. 1998

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

предыдущий следующий содержание свойства индекс

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

Содержание

  • 12.1 Псевдоэлементы :before и :after
  • 12.2 Свойство 'content'
  • 12.3 Взаимодействие:before и:after с элементами 'compact' и 'run-in'
  • 12.4 Знаки кавычек
  • 12.4.1 Спецификация кавычек свойством 'quotes'
  • 12.4.2 Вставка кавычек с применением свойства 'content'
  • 12.5 Автоматические счётчики и нумерация
  • 12.5.1 Вложение счётчиков и область видимости
  • 12.5.2 Стили счётчиков
  • 12.5.3 Счётчики в элементах с 'display:none'
  • 12.6 Маркировка и списки
  • 12.6.1 Маркировка: свойство 'marker-offset'
  • 12.6.2 Списки: свойства 'list-style-type', 'list-style-image', 'list-style-position' и 'list-style'

    В некоторых случаях бывает необходимо, чтобы пользовательские агенты (ПА) отображали содержимое не из дерева документа. Известный пример - нумерованный список: автор не хочет, чтобы нумерация выводилась явным образом, он или она хотят, чтобы ПА генерировал нумерацию автоматически. Также автор может пожелать, чтобы ПА вставлял слово "Figure" перед заглавием или фигурой или "Chapter 7" в начале 7 главы. В особенности для аудио и брайль-носителей, ПА должны иметь возможность вставить эти строки.

    В CSS2 содержимое может генерироваться с помощью различных механизмов:

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

    Ниже описаны механизмы, ассоциированные со свойством 'content'.

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

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

    Пример:

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

    P.note:before{content:"Note: "}

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

    P.note:before{content:"Note: "}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:">e End";display:block;margin-top:2em;text-align:center}

    Обратите внимание, что пользователи аудио-ПА услышат слова ">e End" после вывода оставшейся части содержимого BODY.

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

    'position', 'float', свойства списков и таблиц.

    Псевдоэлементы:before и:after допускают значения свойства 'display':

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

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

  • Если субъект селектора является инлайн-элементом, допустимыми значениями будут 'none' и 'inline'.

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

    Примечание. Другие значения могут быть допущены в будущих уровнях CSS.

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

    'content'

    Значение:[<string>|<uri>|<counter>|attr(X)|open-quote|close-quote |no-open-quote|no-close-quote]+|inherit
    Начальное:пустая строка
    Применяется:к псевдоэлементам:before и:after
    Наследуется:нет
    Процентное:N/A
    Носитель:все

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

    Значения имеют следующий смысл:

    <string> Содержимое текста (см.раздел строки).

    ><uri> Значением является URI, обозначающий внешний ресурс. Если ПА не может поддержать данный ресурс (в связи с типами носителя), он может игнорировать данный ресурс. Примечание.CSS2 не предлагает механизмов для изменения размеров внедрённого объекта или для предоставления его текстуального описания, подобных атрибутам "alt" или "longdesc" для изображений HTML. Это может быть изменено в будущих уровнях CSS.

  • ><counter> Счётчики/Counters могут быть специфицированы 2 различными функциями: 'counter()' или 'counters()'. 1-я имеет 2 формы: 'counter(name)' или 'counter(name, style)'. Генерируемый текст является значением именованного счётчика от этой точки в структуре форматирования; он форматируется в указанном стиле (по умолчанию - 'decimal'). 2-я функция имеет также 2 формы: 'counters(name, string)' или 'counters(name, string, style)'. Генерируемый текст является значениями всех счётчиков с данным именем от этой точки в структуре форматирования, разделёнными специфицированной строкой. Счётчики выводятся в указанном стиле (по умолчанию - 'decimal'). См. раздел автоматические счётчики и нумерация.

    open-quote и close-quote Эти значения замещаются подходящей строкой свойства 'quotes'.

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

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

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

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

    Примеры(ы):

    Следующее правило вызывает проигрывание звукового файла в конце отрезка с кавычками (см.дополнительные механизмы в разделе "звуковые таблицы стилей"):

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

    Примеры(ы):

    Следующее правило вставляет текст атрибута "alt" HTML перед изображением. Если изображение не выводится, пользователь увидит текст "alt".

    IMG:before{content: attr(alt)}
    

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

    Примеры(ы):

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

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

    Примечание. В будущих уровнях CSS свойство 'content' сможет принимать дополнительные значения, позволяя варьировать стиль участков генерируемого содержимого, но в CSS2 всё содержимое псевдоэлементов:before или:after имеет 1 стиль.

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

    Могут быть следующие ситуации:

  • Элемент 'run-in' или 'compact' имеет псевдоэлемент:before типа 'inline': псевдоэлементы учитываются, если размер бокса элемента вычислен (для 'compact') и выведен внутри того же бокса блока, что и элемент.
  • Элемент 'run-in' или 'compact' имеет псевдоэлемент:after типа 'inline':

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

  • Элемент 'run-in' или 'compact' имеет псевдоэлемент:before типа 'block': псевдоэлемент форматируется как блок поверх элемента и не участвует в вычислении размера элемента (для 'compact').
  • Элемент 'run-in' или 'compact' имеет псевдоэлемент:after типа 'block':

    и элемент, и его псевдоэлемент:after форматируются как боксы блока. Элемент не форматируется как инлайн-бокс в своём собственном псевдоэлементе:after.

  • Элемент, следующий за элементом 'run-in' или 'compact', имеет:before типа 'block': решение о том, как форматировать элемент 'run-in'/'compact', принимается с учётом результирующего бокса блока из псевдоэлемента:before.
  • Элемент, следующий за элементом 'run-in' или 'compact', имеет:before типа 'inline': решение о том, как форматировать элемент 'run-in'/'compact', зависит от значения 'display' элемента, к которому присоединён:before.

    Пример:

    Это заголовок 'run-in' с псевдоэлементом:after, после которого идёт параграф с псевдоэлементом:before. В этом пример все псевдоэлементы являются инлайн (по умолчанию). Когда таблица стилей:

    H3{display:run-in} H3:after{content: ": "} p:before{content: "… "}
    

    применяется к такому документу-источнику:

    <h3>Centaurs</h3>
    <P>have hoofs
    <P>have a tail
    

    визуальное форматирование будет таким:

    Centaurs:… have hoofs
    … have a tail
    

    12.4 Знаки кавычек

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

    12.4.1 Спецификация кавычек свойством 'quotes'

    'quotes'

    Значение:[<string> <string>]+|none|inherit
    Начальное:зависит от ПА
    Применяется:ко всем элементам
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный

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

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

    [<string> <string>]+ Значения для 'open-quote' и 'close-quote' свойства 'content' берутся из данного списка пар знаков кавычек (закрывающих и открывающих). 1-я (самая левая) пара представляет самый внешний уровень закавычивания, 2-я пара - 1-йуровень внедрения и т.д.

    ПА обязан применять подходящие пары знаков кавычек в соответствии с уровнем внедрения.

    Пример:

    Применение следующей таблицы стилей:

    /*Специфицируются пары кавычек 2 уровней для 2 языков*/
    Q:lang(en){quotes: '"' '"' "'" "'"}
    Q:lang(no){quotes: "«" "»" "<>"}
    /*Вставляются кавычки до и после содержимого элемента Q*/
    Q:before{content: open-quote}
    Q:after{content: close-quote}
    

    к данному фрагменту HTML:

    <HTML lang="en>
    <p>Quotes
    <P><Q>Quote me!</Q>
    

    позволит ПАгенту выдать:

    "Quote me!"
    

    а данный фрагмент HTML:

    <HTML lang="no>
    <p>Quotes
    <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q>blir deklamert.</Q>
    

    выдаст:

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

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

    В следующей информативной таблице приведён список некоторых символов кавычек ISO 10646:

    Ориентировочное представление

    код ISO 10646 (hex)

    Описание

    "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ДВОЙНАЯ КАВЫЧКА LOW-9 [double low-9]

    12.4.2 Вставка кавычек с применением свойства 'content'

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

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

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

    Некоторые стили печати требуют, чтобы знак открывающей кавычки повторялся перед каждым параграфом блока кавычек, охватывающего несколько параграфов, но только последний параграф оканчивался знаком закрывающей кавычки. В 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', которое ничего не вставляет, а увеличивает глубину закавычивания на единицу.

    Примечание. Если язык закавычивания отличается от языка окружающего текста, то лучше использовать знаки кавычек языка окружающего текста, а не языка закавычивания.

    Пример:

    Французский внутри английского: >e device of >e order of >e garter is “Honi soit qui mal y pense.” Английский внутри французского:Il disait: « Il faut mettre l'action en ‹fast forward ›.»

    Таблица стилей типа следующей установит свойство 'quotes' таким образом, что 'open-quote' и 'close-quote' будут корректно работать во всех элементах. Это правила для документов, содержащих только английский, французский или оба этих языка. 1 правило понадобится для каждого дополнительного языка. Обратите внимание на использование комбинатора-потомка (>") для установки кавычек в элементы на базе языка окружающего текста:

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

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

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

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

    Автоматическая нумерация в CSS2 контролируется 2 свойствами, 'counter-increment' и 'counter-reset'. Счётчики, определённые в этих свойствах, используются с функциями counter() и counters() свойства 'content'.

    'counter-reset'

    Значение:[<identifier> <integer>?]+|none|inherit
    Начальное:none
    Применяется:ко всем элементам
    Наследуется:нет
    Процентное:N/A
    Носитель:все

    'counter-increment'

    Значение:[<identifier> <integer>?]+|none|inherit
    Начальное:none
    Применяется:ко всем элементам
    Наследуется:нет
    Процентное:N/A
    Носитель:все

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

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

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

    Пример:

    Здесь показан способ нумерации глав и разделов: "Chapter 1", "1.1", "1.2" и т.д.:

    H1:before{content: "Chapter " 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, где элементы могут вкладываться внутри себя на произвольную глубину, и может оказаться невозможным определить уникально именованный счётчик для каждого уровня.

    Пример:

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

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

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

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

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

    <OL><!--(set item[0] to 0-->
    <LI>item<!--increment item[0](= 1)-->
    <LI>item<!--increment item[0](= 2)-->
    <OL><!--(set item[1] to 0-->
    <LI>item<!--increment item[1](= 1)-->
    <LI>item<!--increment item[1](= 2)-->
    <LI>item<!--increment item[1](= 3)-->
    <OL><!--(set item[2] to 0-->
    <LI>item<!--increment item[2](= 1)-->
    </OL><!--)-->
    <OL><!--(set item[3] to 0-->
    <LI><!--increment item[3](= 1)-->
    </OL><!--)-->
    <LI>item<!--increment item[1](= 4)-->
    </OL><!--)-->
    <LI>item<!--increment item[0](= 3)-->
    <LI>item<!--increment item[0](= 4)-->
    </OL><!--)-->
    <OL><!--(reset item[4] to 0-->
    <LI>item<!--increment item[4](= 1)-->
    <LI>item<!--increment item[4](= 2)-->
    </OL><!--)-->
    

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

    Пример:

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

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

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

    По умолчанию счётчики форматируются десятичными числами, а все стили, доступные для свойства 'list-style-type', доступны также для счётчиков.

    Обозначение будет такое:

    counter(name)

    для таблицы стилей по умолчанию, или:

    counter(name, '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" не увеличивают 'count2'.

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

    В то же время, элементы с 'visibility', установленной в 'hidden', увеличивают счётчики.

    12.6 Маркировка и списки

    Большинство элементов уровня блока в CSS генерируют 1 основной бокс блока.

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

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

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

    Эта программа HTML и таблица стилей:

    <p>Создание списка с маркёрами
    <STYLE>
    LI:before{display:marker;
    content:counter(mycounter,lower-roman)".";
    counter-increment:mycounter}
    </STYLE>
    <LI>Это 1-йэлемент списка.
    <LI>Это 2-й элемент списка.
    <LI>Это 3-й элемент списка.
    </OL>
    

    должны дать на выходе примерно следующее:

    i. Это 1-йэлемент списка.
    ii. Это 2-й элемент списка.
    iii. Это 3-й элемент списка.
    

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

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

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

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

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

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

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

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

    Свойство 'marker-offset' специфицирует смещение по горизонтали между боксом маркёра и ассоциированным основным боксом. Расстояние измеряется между их ближайшими краями рамок.

    Примечание. Если маркёр всплывает вправо от поплавка в содержимом, отформатированном слева направо, то основной бокс будет всплывать вниз от правой стороны поплавка, но боксы маркёра будут появляться слева от поплавка. Поскольку левый край рамки основного бокса расположен слева от поплавка (см.описание поплавков), а бокс маркёра расположен вне края рамки основного бокса, маркёр расположится также слева от поплавка. Аналогичным будет и поведение при форматировании справа налево, когда маркёр всплывёт слева от поплавка.

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

    В следующем примере содержимое центрируется в боксе маркёра фиксированной ширины.

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

    <p>Выравнивание содержимого в боксе маркёра
    <STYLE>lI:before{display:marker;content:"("counter(counter)")";counter-increment:counter;width:6em;text-align:center}
    </STYLE>
    <LI>Это 1-йэлемент списка.
    <LI>Это 2-й элемент списка.
    <LI>Это 3-й элемент списка.
    </OL>
    

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

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

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

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

    <p>Маркёры до и после элементов списка
    <STYLE>
    @media screen,print{lI:before{display:marker;content:url(smiley.gif);lI:after{display:marker;content:url(sad.gif)}}
    </STYLE>
    <LI>1-йэлемент списка появляется 1-м
    <LI>2-й элемент списка появляется 2-м
    </UL>
    

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

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

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

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

    <p>Маркёры для создания нумерованных примечаний 4
    <STYLE>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>
    <P>Это 1-йпараграф данного документа.
    <P>Это очень короткий документ.
    <P>Это конец.
    

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

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

    'marker-offset'

    Значение:><leng>>|auto|inherit
    Начальное:auto
    Применяется:к элементам с 'display:marker'
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный

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

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

    Эта программа HTML и таблица стилей:

    <p>Пример маркёров 5
    <STYLE>p{margin-left:8em}/*Создаёт пространство для счётчиков*/lI:before{display:marker;marker-offset:3em;content:counter(mycounter,lower-roman)".";counter-increment:mycounter}
    </STYLE>
    <P>Это большой предшествующий параграф…
    <OL>
    <LI>Это 1-йэлемент списка.
    <LI>Это 2-й элемент списка.
    <LI>Это 3-й элемент списка.
    </OL>
    <P>Это большой последующий параграф…
    

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

    Это большой предшествующий параграф…
    i. Это 1-йэлемент списка.
    ii. Это 2-й элемент списка.
    iii. Это 3-й элемент списка. Это большой последующий параграф…
    

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

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

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

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

    'list-style-type'

    Значение:disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|hebrew|armenian|georgian|cjk-ideographic|hiragana|katakana|hiragana-iroha|katakana-iroha|none|inherit
    Начальное:disc
    Применяется:к элементам с 'display:list-item'
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный

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

    Глифы специфицируются с помощью disc, circle и square. Их точное представление зависит от ПА.

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

    decimal Десятеричных чисел, начинающихся с 1.

    decimal-leading-zero 10-ных чисел, дополненных начальными нулями (например, 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'.

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

    Алфавитные системы специфицируются с помощью:

    lower-latin или lower-alphaБукв ascii нижнего регистра (a, b, c,… z).

    upper-latin или upper-alphaБукв ascii верхнего регистра (A, B, C,… Z).

    lower-greek Классических греческих букв нижнего регистра альфа, бета, гамма,… (α, β, γ,…)

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

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

    <p>Нумерация латинскими буквами нижнего регистра
    <STYLE>OL{list-style-type: lower-roman}
    </STYLE>
    <OL>
    <LI>Это 1-йэлемент списка.
    <LI>Это 2-й элемент списка.
    <LI>Это 3-й элемент списка.
    </OL>
    

    может дать на выходе:

    i Это 1-йэлемент списка.
    ii Это 2-й элемент списка.
    iii Это 3-й элемент списка.
    

    Обратите внимание, что выравнивание маркёров списка (здесь - по правому краю) зависит от ПА.

    Примечание. Следующие версии CSS могут предоставить более совершенные механизмы международных стилей нумерации.

    'list-style-image'

    Значение:<uri>|none|inherit
    Начальное:none
    Применяется:к элементам с 'display:list-item'
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный

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

    Пример:

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

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

    'list-style-position'

    Значение:inside|outside|inherit
    Начальное:outside
    Применяется:к элементам с 'display:list-item'
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный

    Это свойство специфицирует позицию бокса маркёра в основном боксе блока.

    Значения имеют следующий смысл:

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

    inside Бокс маркёра это 1-йинлайн-бокс в боксе основного блока, после которого всплывает содержимое элемента.

    Например:

    <p>Сравнение позиций inside/outside
    <STYLE>UL{list-style:outside}UL.compact{list-style:inside}
    </STYLE>
    <LI>first list item comes first
    <LI>second list item comes second
    </UL>
    <UL class=compact>
    <LI>first list item comes first
    <LI>second list item comes second
    </UL>
    

    Этот пример отображается так:

    [D]

    В тексте справа-налево маркёры должны выводиться с правой стороны бокса.

    'list-style'

    Значение:[<'list-style-type'>||<'list-style-position'>||<'list-style-image'>]|inherit
    Начальное:не определено для сокращённых свойств
    Применяется:к элементам с 'display:list-item'
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный

    Свойство 'list-style' - это сокращённое обозначение для установки 3 свойств: 'list-style-type', 'list-style-image' и 'list-style-position' в 1 месте в таблице стилей.

    Пример:

    UL{list-style:upper-roman inside}/*Какой-либо UL*/UL >UL{list-style:circle outside}/*UL - потомок UL*/

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

    OL.alpha LI{list-style:lower-alpha}/*LI-потомок OL*/OL.alpha>LI{list-style:lower-alpha}/*LI-наследник OL*/

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

    <p>ПРЕДУПРЕЖДЕНИЕ: Непредсказуемый результат из-за каскадирования
    <STYLE>OL.alpha LI{list-style:lower-alpha}UL LI{list-style:disc}</STYLE>
    <OL class=alpha>
    <LI>level 1
    <LI>level 2
    </UL>
    </OL>
    

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

    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(//png.com/ellipse.png)disc}
    

    В данном примере 'disc' будет использоваться, если изображение недоступно.

    Значение 'none' свойства 'list-style' устанавливает 'list-style-type' и 'list-style-image' в 'none':

    UL{list-style:none}

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

    предыдущий следующий содержание свойства индекс

    Отвечу на любые вопросы. С уважением, Дмитрий Владимирович.

  • Ваше письмо×
    Free Web Hosting