О спецификации CSS2

1 О спецификации CSS2

Содержание

  • 1.1 Ознакомление со спецификацией
  • 1.2 Структура спецификации
  • 1.3 Условные обозначения
    • 1.3.1 Элементы и атрибуты языка документа
    • 1.3.2 Определение свойств в CSS
      • Значения, принимаемые свойством
      • Начальное значение
      • Область применения
      • Наследование свойств
      • Процентное представление значения
      • Устройства, связанные со свойством
    • 1.3.3 Свойства стенографического типа
    • 1.3.4 Примеры и комментарии
    • 1.3.5 Изображения и длинные описания
  • 1.4 Благодарности
  • 1.5 Информация об авторском праве

1.1 Ознакомление со спецификацией

Данная спецификация предназначена для двух типов читателей: для тех, кто внедряет, и для тех, кто разрабатывает CSS. Предполагается, что первые найдут здесь описание средств, с помощью которых они смогут создавать эффективные, внешне привлекательные и легкочитаемые документы, не вдаваясь в подробности реализации CSS. В свою очередь, разработчики должны найти здесь все необходимое им для создания конформных пользовательских агентов. Спецификация начинается с общих представлений о CSS и по мере приближения к концу становится все более узконаправленной, в ней появляется все больше технических подробностей. Как в электронной, так и в печатной версиях спецификации для быстрого доступа к информации имеются общее содержание, более подробное содержание в начале каждого раздела, и предметный указатель.

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

1.2 Структура спецификации

Спецификация разбита на следующие разделы:

Раздел 2. Введение в CSS2
Во введении приведен краткий учебник по CSS2 и изложены основные принципы этого языка.
Разделы 3 - 20. Справочное руководство по CSS2.
Основную часть справочного руководства составляет справочник по CSS2. В нем определяется содержимое таблиц CSS2 (синтаксис, свойства и их значения) и способы их интерпретации, позволяющие агентам пользователей находиться в соответствии со спецификацией CSS2, т.е. быть конформными.
Приложения.
В приложениях приведены пример таблицы стилей для HTML 4.0, изменения по сравнению с CSS1 , замечания о применении и работе, грамматика CSS2, список нормативных и справочных ссылок, а также три предметных указателя: указатель свойств, указатель дескрипторов и общий указатель.

1.3 Условные обозначения

1.3.1 Элементы и атрибуты языка документа

  • В CSS имена свойств, дескрипторов и псевдоклассов с двух сторон ограничиваются одинарными кавычками.
  • В CSS значения с двух сторон ограничиваются одинарными кавычками.
  • Имена элементов языка документа пишутся прописными буквами.
  • Имена атрибутов языка документа пишутся строчными буквами и с двух сторон ограничиваются двойными кавычками.

1.3.2 Определение свойств в CSS

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

'имя свойства'
Значение: допустимые значения и синтаксис
Начальное значение: значение, принимаемое свойством по умолчанию
Область применения: элементы, к которым применяется данное свойство
Наследование: является ли свойство наследуемым
Проценты: способ интерпретации значения свойства, заданного в процентах
Устройства: к каким группам устройств применяется это свойство

Значение

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

  1. ключевого слова (например, auto, disc и т.д.)
  2. основных типов данных, заключенных в угловые скобки "<" и ">" (например, <длина>, <проценты> и т.д.). В электронной версии документа с каждым основным типом данных связана гиперссылка на его определение.
  3. одноименного типа данных, имеющего тот же диапазон значений, что и рассматриваемое свойство (например, <'border-width'> <'background-attachment'> и т.д.). В данном случае именем типа является имя свойства (вместе с кавычками), заключенное между угловыми скобками "<" и ">" (например, <'border-width'>). В электронной версии документа с каждым таким типом данных связана гиперссылка на определение соответствующего свойства.
  4. типа данных, имя которого не совпадает с именем свойства. В этом случае имя типа представляется между угловыми скобками "<" и ">" (например, <border-width>). Обратите внимание на различие между <border-width> и <'border-width'>; последнее определяется посредством предыдущего. Определение типа данных находится рядом с его первым упоминанием в спецификации. В электронной версии документа с каждым таким типом данных связана гиперссылка на определение соответствующего значения.

Другие слова в данных способах задания значений являются ключевыми словами, которые должны отображаться без каких либо дополнительных символов, в том числе и без кавычек (например, red). Слеш "/" и запятая "," должны также отображаться так, как указаны, без дополнительных символов.

Набор принимаемых свойством значений задается одним из следующих способов:

  • несколько следующих друг за другом значений. Это означает, что все они должны присутствовать в значении в указанном порядке;
  • одинарная черта "|" разделяет альтернативные значения, из которых свойству должно быть присвоено только одно;
  • двойная черта "||Q разделяет альтернативные значения, из которых свойство должно быть присвоено не менее одного в произвольном порядке;
  • квадратные скобки "[ ]" используются для группировки значений.

Следование значений по силе превосходит разделение с помощью двойной черты, которое, в свою очередь, сильнее разделения одинарной чертой. Таким образом, следующие две строки эквиваленты:

    a b   |   c || d e
  [ a b ] | [ c || [ d e ]]

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

  • звездочка "*", говорящая о том, что предшествующие ей тип, слово или группа слов встречается ноль раз или более;
  • знак плюса "+", говорящий о том, что предшествующие ему тип, слово или группа слов встречается не менее одного раза;
  • знак вопроса "?", говорящий о том, что предшествующие ему тип, слово или группа слов либо присутствует, либо нет;
  • пара цифр в фигурных скобках "{А, B}" , говорящая о том, что предшествующие ей тип, слово или группа слов повторяется не менее А раз и не более B раз.

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

Значение: N | NW | NE
Значение: [ <длина> | thick | thin ]{1,4}
Значение: [<имя семейства> , ]* <имя семейства>
Значение: <uri>? <цвет> [ / <цвет> ]?
Значение: <uri> || <цвет>

Начальное значение

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

Область применения

В этом поле перечисляются элементы, к которым применяется данное свойство. Считается, что все элементы обладают всеми свойствами, но не для каждого элемента все свойства имеют какой-либо эффект. Например, свойство 'white-space' влияет только на элементы уровня блока.

Наследование

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

Проценты

В этом поле указывается способ интерпретации значения, выраженного в процентах, если оно встречается в значении свойства. Если в этом поле содержится запись "N/A", то для этого свойства значения в процентах недопустимы.

Устройства

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

1.3.3 Свойства стенографического типа

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

Например, свойство 'font' является стенографическим для установки свойств 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' и 'font-family' одновременно.

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

Следующие несколько правил:

H1 {
   font-weight: bold;
   font-size: 12pt;
   line-height: 14pt;
   font-family: Helvetica;
   font-variant: normal;
   font-style: normal;
   font-stretch: normal;
   font-size-adjust: none
}

можно записать намного короче с использованием одного стенографического свойства:

H1 { font: bold 12pt/14pt Helvetica }

В этом примере свойства 'font-variant', 'font-stretch', 'font-size-adjust' и 'font-style' принимают свои начальные значения.

1.3.4 Примеры и комментарии

Все примеры, демонстрирующие недопустимые операции, имеют пометку "ПРИМЕР НЕДОПУСТИМОГО ИСПОЛЬЗОВАНИЯ".

Все примеры, относящиеся к HTML, соответствуют описанию HTML 4.0 strict DTD (определенному в [HTML40]), если только в объявлении типа документа не указано другое.

Все комментарии носят ознакомительный характер.

В исходном HTML-файле используется разметка примеров и комментариев для того, чтобы в спецификации и агентами пользователей CSS1 они обрабатывались особо.

1.3.5 Изображения и длинные описания

Большинство изображений в электронной версии данного документа сопровождаются "длинными описаниями". Ссылка на длинное описание обозначается значком "[D]" справа от изображения.

Изображения и длинные описания носят исключительно информативный характер.

1.4 Благодарности

Данная спецификация разработана рабочей группой W3C по каскадным таблицам стилей и свойствам форматирования. Помимо редакторов спецификации, членами рабочей группы являются: Брэд Чейз (Bitstream), Крис Уилсон (Microsoft), Даниель Глазман (Electricité de France), Дэйв Рэгетт (W3C/HP), Эд Текот (Microsoft), Яред Соренсен (Novell), Лорен Вуд (SoftQuad), Лори Анна Каплан (Microsoft), Майк Векслер (Adobe), Мюррей Мэлони (Grif), Пауэлл Смит (IBM), Роберт Стеван (HP), Стив Байрн (JavaSoft), Стивен Пембертон (CWI), Том Филлабаум (Netscape), Дуглас Рэнд (Silicon Graphics), Роберт Пернетт (Lotus), Двэйн Дикс (SoftQuad) и Шо Кувамото (Macromedia). Спасибо за их постоянную работу.

Большой вклад в работу Группы внесли приглашенные эксперты Джордж Кершер, Глен Риппел (Bitstream), Джефф Вин (HotWired), Маркку Т. Хаккинен (The Productivity Works), Мартин Дюрст (W3C, ранее Цюрихский Университет), Рой Плэтон (RAL), Тодд Фарнер (Verso), Тим Боланд (NIST), Эрик Мейер (Университет Case Western Reserve) и Винсент Квинт (W3C).

Раздел, посвященный шрифтам для Web, в значительной степени определила работа Брэда Чейза (Bitstream), Дэвида Мельцера (типография Microsoft) и Стива Зиллеса (Adobe). Следующие люди также принимали участие в создании раздела о шрифтах: Алекс Бимон (Apple), Ашок Саксена (Adobe), Бен Бауэрмайстер (HP), Дэйв Рэгетт (W3C/HP), Дэвид Опстад (Apple), Дэвид Голдсмит (Apple), Эд Текот (Microsoft), Эрик ван Блокланд (LettError), Франсуа Ерго (Alis), Гавен Николь (Inso), Херберт ван Цейль (Elsevier), Лайем Квин, Миша Вольф (Reuters), Пол Хэберли (SGI) и Фил Карлтон (Netscape).

Раздел об устройствах со страничной организацией главным образом написан Робертом Стеваном (HP) и Стивеном Уотерсом (Microsoft).

Роберт Стеван (HP), Скотт Фурман (Netscape) и Скотт Айзакс (Microsoft) были основными разработчиками позиционирования CSS.

Редактором временного рабочего черновика, описывавшего многие новые функции CSS2, был Майк Векслер (Adobe).

Значительный вклад в Звуковые каскадные таблицы стилей (ACSS) и в концепции звукового представления сделалТ.В. Раман (Adobe), основываясь на своей работе с AsTeR (Audio System For Technical Readings - Звуковая система для технического чтения). Он разрабатывал начальный проект спецификации ACSS, ставший основой этой спецификации. Значения звуковых свойств в примере таблицы стилей HTML 4.0 определены по его совету. Он использует их ежедневно на своем звуковом рабочем столе вместе с Emacspeak и браузером Emacs W3 (автором которого является Уильям Перри, использовавший звуковые расширения в W3).

Тодд Фарнер (Verso) исследовал современные и более ранние версии браузеров для создания примера таблицы стилей, приведенного в приложении.

Спасибо Яну Кэрману, автору html2ps, за помощь в создании PostScript-версии данной спецификации.

Нижеперечисленные люди также внесли значительный вклад в разработку CSS2: Алан Борнинг, Робер Кэлье, Лиз Кастро, Джеймс Кларк, Дэн Коннолли, Донна Конверс, Даниель Дардельер, Эл Гилман, Дэниел Грини, Скотт Айзакс, Гайр Иварсой, Винсент Мале, Ким МЭриотт, Брайан Михаловски, Лу Монтулли, Хенрик Фрюстюк Нильсен, Яуоб Нильсен, Эва фон Пепель, Уильям Перри, Дэвид Зигель, Питер Стаки и Джейсон Уайт.

На создание CSS во многом повлияли обсуждения в списке рассылки www-style@w3.org. Особенно мы хотели бы поблагодарить Бьерна Баклунда, Тодда Фарнера, Ларса Мариуса Гаршолья, Сью Джордан, Яна Хиксона, Сюзан Леш, Эндрю Маршалла, MegaZone, Эрика Майера, Расселла О'Коннора, Дэвида Перрелла, Лайема Квина, Джона Сеймура, Нейла Сен-Лорана, Тэйлора, Брайана Уилсона и Криса Уилсона за участие в работе.

Большая благодарность рабочей группе технической проверки протоколов и форматов доступности Web (WAI PF) за помощь в усовершенствовании Возможностей доступа к CSS2.

Большое спасибо Филиппу л'Эгару, чья проверка гарантировала корректность примеров и грамматики.

Особая благодарность Арно Ле Хорсу, благодаря инженерным способностям которого работает этот документ.

Спецификация внимательно проверена Адамом Костелло.

И, наконец, спасибо Тиму Бернерс-Ли, без которого все это вообще было бы невозможно.

1.5 Информация об авторском праве

Copyright © 1997 World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). Все права защищены.

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

Разрешение на использование, копирование и распространение содержимого данного документа или документа W3C, из которого имеется ссылка на это заявление, в любом виде и с любой целью предоставляется бесплатно и без оплаты авторского гонорара с условием, что во ВСЕХ копиях документа или его отдельных частях будет помещена:

  1. Ссылка на оригинал документа W3C или его URL.
  2. Существующая информация об авторском праве, а в случае ее отсутствия примечание типа: "Copyright © World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). Все права защищены. "
  3. СТАТУС документа W3C, если он существует.

Если позволяет пространство, необходимо включить полный текст данной ИНФОРМАЦИИ. Кроме того, должна быть выказана благодарность владельцам авторских прав на любое программное обеспечение, документы или другие продукты, созданные при использовании данного документа или некоторой его части.

Согласно данной лицензии Вы не имеете права создавать модификации данного документа или документы на его базе.

ДАННЫЙ ДОКУМЕНТ ПРЕДСТАВЛЕН "КАК ЕСТЬ", И ВЛАДЕЛЬЦЫ АВТОРСКИХ ПРАВ НЕ ДАЮТ НИКАКИХ ЯВНЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ ГАРАНТИЙ, ВКЛЮЧАЯ ГАРАНТИИ КОММЕРЧЕСКОЙ ВЫГОДЫ, ЦЕЛЕСООБРАЗНОСТИ, ЗАКОННОСТИ, ПРАВОМЕРНОСТИ ИЛИ НЕНАРУШЕНИЯ ДРУГИХ АВТОРСКИХ ПРАВ, НО НЕ ОГРАНИЧИВАЯСЬ ИМИ. НЕ ГАРАНТИРУЕТСЯ ПРИГОДНОСТЬ ДОКУМЕНТА ДЛЯ СООТВЕТСВИЯ КОНКРЕТНОЙ ЦЕЛИ И ТО, ЧТО ЕГО ИСПОЛЬЗОВАНИЕ НЕ НАРУШИТ АВТОРСКИЕ ПРАВА, ТОРГОВЫЕ МАРКИ, ПАТЕНТЫ И ПРОЧИЕ ПРАВА НЕЗАВИСИМЫХ ПРОИЗВОДИТЕЛЕЙ.

ВЛАДЕЛЬЦЫ АВТОРСКОГО ПРАВА НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ЗА ЛЮБОЙ ПРЯМОЙ, КОСВЕННЫЙ, СПЕЦИАЛЬНЫЙ ИЛИ НЕУМЫШЛЕННЫЙ УЩЕРБ, ПОНЕСЕННЫЙ ВСЛЕДСТВИЕ ИСПОЛЬЗОВАНИЯ ДАННОГО ДОКУМЕНТА ИЛИЕГО СОДЕРЖИМОГО.

Названия и торговые марки владельцев авторского права НЕ могут использоваться при рекламе или тиражировании данного документа и его содержимого без предварительного специального письменного разрешения. Право собственности на данный документ навсегда будет сохранено за владельцами авторского права.


Звуковые таблицы стилей

19 Звуковые таблицы стилей

Содержание

  • 19.1 Основное представление о звуковых таблицах стилей
  • 19.2 Свойства, управляющие громкостью: 'volume'
  • 19.3 Свойства, управляющие воспроизведением речи: 'speak'
  • 19.4 Свойства, управляющие паузой: 'pause-before', 'pause-after' и 'pause'
  • 19.5 Свойства, управляющие вставкой реплик: 'cue-before', 'cue-after' и 'cue'
  • 19.6 Свойства микширования: 'play-during'
  • 19.7 Свойства для создания пространственных эффектов: 'azimuth' и 'elevation'
  • 19.8 Свойства, управляющие параметрами голоса: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress' и 'richness'
  • 19.9 Свойства озвучивания: 'speak- punctuation' и 'speak- numeral'

19.1 Введение в звуковые таблицы стилей

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

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

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

Пример(ы):

H1, H2, H3, H4, H5, H6 {
    voice-family: paul;
    stress: 20;
    richness: 90;
    cue-before: url("ping.au")
}
P.heidi { azimuth: center-left }
P.peter { azimuth: right }
P.goat  { volume: x-soft }

Следуя этим правилам, синтезатор речи будет воспроизводить заголовки (набранные чем-то вроде "звукового шрифта") насыщенным голосом низкой тональности, который называется "paul". Воспроизведению заголовков будет предшествовать воссоздание звукового шаблона, определяемого заданным URL. Если звуковая система поддерживает трехмерное звучание, то абзацы, имеющие класс "heidi", будут слышны спереди слева, а абзацы с классом "peter" - справа от слушателя. Абзацы, имеющие класс "goat", будут воспроизводиться очень тихо.

19.2 Свойства, управляющие громкостью: 'volume'

'volume'
Значение: <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit
Начальное значение: medium
Область применения: все элементы
Наследование: да
Процентное задание значений: относительно наследуемого значения
Ассоциированные устройства: устройства звукового воспроизведения

Громкостью называется средний уровень волнового фронта. Т.е. сильно флектирующий голос, громкость которого равна 50, местами может с легкостью превышать этот уровень. Исходя из удобства прослушивания, все значения могут настраиваться человеком, например, посредством управления физическим уровнем громкости (в результате которого оба значения 0 и 100 увеличиваются пропорционально). В частности, данное свойство позволяет выполнять настройку динамического диапазона.

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

<number>
Любое число в диапазоне от '0' до '100', где '0' обозначает минимальный слышимый уровень громкости, а 100 - максимальный уровень комфортного прослушивания.
<percentage>
Процентное соотношение вычисляется относительно наследуемого значения, а затем ограничивается значениями из диапазона от '0' до '100'.
silent
Полное отсутствие звука. Значение '0' не эквивалентно значению 'silent'.
x-soft
Аналогично значению '0'.
soft
Аналогично значению '25'.
medium
Аналогично значению '50'.
loud
Аналогично значению '75'.
x-loud
Аналогично значению '100'.

Агенты пользователей должны предоставлять слушателю возможность настройки значений, соответствующих '0' и '100'. Ни одна из настроек не является универсальной, так что при выборе подходящих для нее значений принимаются во внимание используемое оборудование (динамики или наушники), окружение (салон автомобиля, домашняя обстановка или библиотека) и персональные настройки. Приведем несколько примеров:

  • В браузерах, используемых в салоне автомобиля, применяются установки, учитывающие наличие множества фоновых шумов. Если значению '100' будет сопоставлен достаточно высокий уровень громкости, то значению '0' будет соответствовать также довольно высокий уровень. Хотя речь достаточно хорошо слышна сквозь шум дороги, тем не менее, весь динамический диапазон в целом будет сужен. В автомобилях с лучшей изоляцией может использоваться более широкий динамический диапазон.
  • Совсем другие речевые браузеры используются в домашних условиях, поздно ночью или в аудитории. Значению '0' сопоставляется заниженный уровень громкости, значению '100' - тоже довольно невысокий уровень. Как и в первом примере, используется низкая крутизна характеристики, а динамический диапазон сужается. Фактический уровень громкости здесь низкий, в то время как в первом примере он был высоким.
  • В тихом изолированном доме устанавливается дорогостоящий домашний hi-fi центр. Значение '0' задает низкий, а значение '100' - высокий уровень громкости, в силу чего используется широкий динамический диапазон.

Во всех случаях может использоваться одна и та же таблица стилей разработчика. При этом только для уровней '0' и '100' необходимо будет установить те значения, которые удовлетворят клиента.

19.3 Свойства, управляющие воспроизведением речи: 'speak'

'speak'
Значение: normal | none | spell-out | inherit
Начальное значение: normal
Область применения: все элементы
Наследование: да
Процентное задание значений: нет
Ассоциированные устройства: устройства звукового воспроизведения

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

none
Запрещает озвучивание, так что элемент не требует времени на свое представление. Следует заметить, однако, что дочерние элементы могут переопределить это значение и воспроизводиться вслух. (Чтобы гарантированно запретить звуковое воспроизведение элемента и его дочерних элементов, необходимо использовать свойство 'display'.)
normal
Для воспроизведения элемента и его дочерних элементов используются правила произношения, определяемые разговорным языком.
spell-out
Слово произносится по буквам (рекомендуется для аббревиатур и сокращений).

Обратите внимание на существующее различие между двумя элементами, свойства 'volume' и 'speak' которых принимают значения 'silent' и 'none' соответственно. Представление первого элемента займет столько же времени, сколько требуется на его воспроизведение, включая все паузы, расположенные до и после него, но только при этом звук генерироваться не будет. Представление второго элемента вовсе не требует времени, т.к. он не представляется (хотя его дочерние элементы могут представляться).

19.4 Свойства, управляющие паузой: 'pause-before', 'pause-after' и 'pause'

'pause-before'
Значение: <time> | <percentage> | inherit
Начальное значение: зависит от агента пользователя
Область применения: все элементы
Наследование: нет
Процентное задание значений: см. нижеследующий текст
Ассоциированные устройства: устройства звукового воспроизведения
'pause-after'
Значение: <time> | <percentage> | inherit
Начальное значение: зависит от агента пользователя
Область применения: все элементы
Наследование: нет
Процентное задание значений: см. нижеследующий текст
Ассоциированные устройства: устройства звукового воспроизведения

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

<time>
Обозначает паузу в абсолютных единицах измерения времени (секундах и миллисекундах).
<percentage>
Указывает на инверсию значения свойства 'speech-rate'. Например, если частота воспроизведения речи равна 120 словам в минуту (т.е. произношение одного слова занимает полсекунды или 500 мс), то значения свойства 'pause-before', равные 100% и 20%, означают, соответственно, паузу в 500 мс и 100 мс.

Пауза вставляется между содержимым элемента и содержимым любого из свойств 'cue-before' или 'cue-after'.

Для создания более устойчивых таблиц стилей при работе с большими изменениями в частоте воспроизведения речи авторам следует использовать относительные единицы измерения.

'pause'
Значение: [ [<time> | <percentage>]{1,2} ] | inherit
Начальное значение: зависит от агента пользователя
Область применения: все элементы
Наследование: нет
Процентное задание значений: см. описания свойств 'pause-before' и 'pause-after'
Устройства: устройства звукового воспроизведения

Свойство 'pause' - это свойство сокращенной записи для определения свойств 'pause-before' и 'pause-after'. Если для него задано два значения, то первое присваивается свойству 'pause-before', а второе - свойству 'pause-after'. Если задано только одно значение, то оно присваивается обоим свойствам.

Пример(ы):

H1 { pause: 20ms } /* pause-before: 20ms; pause-after: 20ms */
H2 { pause: 30ms 40ms } /* pause-before: 30ms; pause-after: 40ms */
H3 { pause-after: 10ms } /* pause-before: ?; pause-after: 10ms */

19.5 Свойства, управляющие вставкой реплик: 'cue-before', 'cue-after' и 'cue'

'cue-before'
Значение: <uri> | none | inherit
Начальное значение: none
Область применения: все элементы
Наследование: нет
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения
'cue-after'
Значение: <uri> | none | inherit
Начальное значение: none
Применяется: все элементы
Наследование: нет
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения

Звуковые пиктограммы - это один из способов выделения семантических элементов. Для определения границ элемента до и/или после него могут воспроизводиться определенные звуки. Значения имеют следующий смысл:

<uri>
Этот URI должен указывать на ресурс звуковой пиктограммы. Если по этому URI находится другая информация, например, изображение, то этот ресурс игнорируется, а свойство обрабатывается как если бы было установлено значение 'none'.
none
Звуковая пиктограмма не определена.

Пример(ы):

A {cue-before: url("bell.aiff"); cue-after: url("dong.wav") }
H1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
'cue'
Значение: [ <'cue-before'> || <'cue-after'> ] | inherit
Начальное значение: не определяется для свойств сокращенной записи
Область применения: все элементы
Наследование: нет
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения

Свойство 'cue' - это свойство сокращенной записи для определения свойств 'cue-before' и 'cue-after'. Если для него задано два значения, то первое присваивается свойству 'cue-before', а второе - свойству 'cue-after'. Если задано только одно значение, то оно присваивается обоим свойствам.

Пример(ы):

Следующие два правила эквивалентны:

H1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
H1 {cue: url("pop.au") }

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

Дополнительную информацию о методах генерации содержимого можно найти в разделе, посвященном псевдоэлементам :before и :after.

19.6 Свойства микширования: 'play-during'

'play-during'
Значение: <uri> mix? repeat? | auto | none | inherit
Начальное значение: auto
Область применения: все элементы
Наследование: нет
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения

Аналогично свойствам 'cue-before' и 'cue-after', данное свойство определяет фон, который будет звучать во время воспроизведения содержимого элемента. Значения имеют следующий смысл:

<uri>
Звуковой файл, находящийся по адресу, указываемому данным <uri>, используется в качестве фонового во время воспроизведения содержимого элемента.
mix
В случае задания этого ключевого слова звуковой файл, наследуемый от свойства 'play-during' родительского элемента, продолжает воспроизводиться, а звуковой файл, расположенный по заданному <uri> микшируется с ним. Если значение 'mix' не задано, то фоновый звук этого элемента заменяет фоновый звук его родительского элемента.
repeat
В случае задания этого ключевого слова звуковой файл будет повторяться на протяжении всего процесса воспроизведения содержимого данного элемента. Это напоминает использование свойства 'background-repeat'. Если продолжительность звукового файла превышает продолжительность элемента, то он обрезается по времени воспроизведения элемента.
auto
Продолжается воспроизведение звукового файла родительского элемента (он не начинается заново, как в случае, когда это свойство является наследуемым).
none
Это ключевое слово означает, что никакие звуковые файлы не воспроизводятся. На время представления текущего элемента воспроизведение звукового файла родительского элемента (если таковой имеется) прерывается и возобновляется, когда по завершении представления текущего элемента.

Пример(ы):

BLOCKQUOTE.sad { play-during: url("violins.aiff") }
BLOCKQUOTE Q   { play-during: url("harp.wav") mix }
SPAN.quiet     { play-during: none }

19.7 Свойства для создания пространственных эффектов: 'azimuth' и 'elevation'

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

'azimuth'
Значение: <angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit
Начальное значение: center
Область применения: все элементы
Наследование: да
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения

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

<angle>
Направление воспроизведения определяется значением угла, находящимся в диапазоне от '-360deg' до '360deg'. Значение '0deg' говорит о воспроизведении звука спереди в центре тон-студии. Значение '90deg' - о воспроизведении звука справа, '180deg' - о воспроизведении звука сзади, '270deg' (или эквивалентное ему и более легкое в использовании значение '-90deg') - о воспроизведении звука слева.
left-side
Аналогично значению '270deg'. При воспроизведении сзади аналогично значению '270deg'.
far-left
Аналогично значению '300deg'. При воспроизведении сзади аналогично значению '240deg'.
left
Аналогично значению '320deg'. При воспроизведении сзади аналогично значению '220deg'.
center-left
Аналогично значению '340deg'. При воспроизведении сзади аналогично значению '200deg'.
center
Аналогично значению '0deg'. При воспроизведении сзади аналогично значению '180deg'.
center-right
Аналогично значению '20deg'. При воспроизведении сзади аналогично значению '160deg'.
right
Аналогично значению '40deg'. При воспроизведении сзади аналогично значению '140deg'.
far-right
Аналогично значению '60deg'. При воспроизведении сзади аналогично значению '120deg'.
right-side
Аналогично значению '90deg'. При воспроизведении сзади аналогично значению '90deg'.
leftwards
Перемещает звук влево относительно текущего направления. Вернее, уменьшает значение угла на 20 градусов. Вычисления осуществляются по модулю, равному 360 градусам. Следует заметить, что более корректная формулировка термина 'leftwards' звучит следующим образом: "повернуть против часовой стрелки". Действительно, значение постоянно уменьшается на 20 градусов, даже если наследуемый азимут уже находится позади слушателя (а в этом случае звук фактически перемещается вправо).
rightwards
Перемещает звук вправо относительно текущего направления. Вернее, увеличивает значение угла на 20 градусов. Информация о вычислениях приведена в предыдущем пункте, посвященном значению 'leftwards'.

Наиболее вероятной областью использования данного свойства является добавление одного и того же сигнала в различные каналы с разной громкостью. При этом для создания эффекта студийной записи также можно использовать сдвиг фаз, цифровую задержку и другие подобные технологии. Конкретные методы, применяемые для создания этого эффекта, и количество используемых динамиков зависят от пользовательского агента. Данное свойство, просто, определяет желаемый конечный результат.

Пример(ы):

H1   { azimuth: 30deg }
TD.a { azimuth: far-right }          /*  60 градусов */
#12  { azimuth: behind far-right }   /* 120 градусов */
P.comment { azimuth: behind }        /* 180 градусов */

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

  • if 90deg < x <= 180deg then x := 180deg - x
  • if 180deg < x <= 270deg then x := 540deg - x
'elevation'
Значение: <angle> | below | level | above | higher | lower | inherit
Начальное значение: level
Область применения: все элементы
Наследование: да
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения

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

<angle>
Задает значение угла, находящееся в диапазоне от '-90deg' до '90deg' и определяющее высоту над уровнем горизонта, на котором находится слушатель. Этот уровень определяется значением '0deg'. Значение '90deg' определяет положение непосредственно над головой, а '-90deg' - под ногами.
below
Аналогично значению '-90deg'.
level
Аналогично значению '0deg'.
above
Аналогично значению '90deg'.
higher
Увеличивает значение текущего угла на 10 градусов.
lower
Уменьшает значение текущего угла на 10 градусов.

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

Пример(ы):

H1   { elevation: above }
TR.a { elevation: 60deg }
TR.b { elevation: 30deg }
TR.c { elevation: level }

19.8 Свойства, управляющие параметрами голоса: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress' и 'richness'

'speech-rate'
Значение: <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit
Начальное значение: medium
Область применения: все элементы
Наследование: да
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения

Это свойство задает частоту воспроизведения слов. Обратите внимание, что допускается использование как абсолютных, так и относительных значений ключевых слов (сравните со свойством 'font-size'). Принимаемые им значения имеют следующий смысл:

<number>
Задает скорость речи, определяя количество слов, произносимых в минуту. Она варьируется в зависимости от языка, но, тем не менее, поддерживается синтезаторами речи в широком диапазоне.
x-slow
Аналогично скорости в 80 слов в минуту
slow
Аналогично скорости в 120 слов в минуту
medium
Аналогично скорости в 180 - 200 слов в минуту
fast
Аналогично скорости в 300 слов в минуту.
x-fast
Аналогично скорости в 500 слов в минуту.
faster
Увеличивает текущее количество слов, произносимых в минуту, на 40.
slower
Уменьшает текущее количество слов, произносимых в минуту, на 40.
'voice-family'
Значение: [[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ] | inherit
Начальное значение: зависит от пользовательского агента
Область применения: все элементы
Наследование: да
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения

Значение представляет собой список названий семейств голосов, разделенных запятыми и упорядоченных по приоритету (сравните со свойством 'font-family'). Значения имеют следующий смысл:

<generic-voice>
Значениями являются семейства голосов. Возможные значения: 'male' (мужской голос), 'female' (женский голос) и 'child' (детский голос).
<specific-voice>
Значениями представляют собой конкретные экземпляры (например, comedian, trinoids, carlos, lani).

Пример(ы):

H1 { voice-family: announcer, male }
P.part.romeo  { voice-family: romeo, male }
P.part.juliet { voice-family: juliet, female }

Название конкретного голоса может и даже должно быть заключено в кавычки, если какие-либо из содержащихся в нем слов не соответствуют правилам синтаксиса идентификаторов. Кроме того, в кавычки рекомендуется заключать названия конкретных голосов, состоящие из нескольких слов. Если кавычки опущены, то все пустое пространство, располагающееся до и после названия голоса, игнорируется, а все последовательности пустого пространства внутри названия преобразуется в один пробел.

'pitch'
Значение: <frequency> | x-low | low | medium | high | x-high | inherit
Начальное значение: medium
Область применения: все элементы
Наследование: да
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения

Задает среднюю высоту (частоту) голоса. Средняя высота голоса определяется семейством голосов. Например, средняя высота стандартного мужского голоса приблизительно равна 120 Гц, а для женского голоса она составляет около 210 Гц.

Принимаемые данным свойством значения имеют следующий смысл:

<frequency>
Задает среднюю высоту голоса в герцах (Гц).
x-low, low, medium, high, x-high
Эти значения не отображаются в абсолютные значения частоты, т.к. они зависят от семейства голосов. Агенты пользователей должны отображать эти значения в соответствующие частоты исходя из используемого семейства голосов и окружения пользователя. При этом значения должны отображаться в соответствующем порядке (т.е. значению 'x-low' должна сопоставляться более низкая частота, чем значению 'low', и т.д.).
'pitch-range'
Значение: <number> | inherit
Начальное значение: 50
Область применения: все элементы
Наследование: да
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения

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

Принимаемые этим свойством значения имеют следующий смысл:

<number>
Величина, заключенная в пределах от '0' от '100'. Диапазон частот, равный '0', определяет монотонный голос. Диапазон частот, равный '50', определяет голос с нормальной интонацией. Диапазоны частот свыше 50 определяют оживленные голоса.
'stress'
Значение: <number> | inherit
Начальное значение: 50
Область применения: все элементы
Наследование: да
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения

Задает высоту "локальных пиков" на фоне основной интонации голоса. Например, в английском языке используется много ударений, так что различным частям предложения могут назначаться первичные, вторичные или третичные ударения. Значение свойства 'stress' контролирует уровень всплесков, имеющих место при реализации этих ударений. Данное свойство используется вместе со свойством 'pitch-range' и позволяет разработчикам использовать звуковые дисплеи высокого качества.

Принимаемые данным свойством значения имеют следующий смысл:

<number>
Величина, заключенная в пределах от '0' и '100'. Смысловая нагрузка значений зависит от языка, на котором произносится текст. Например, для английского языка значение '50' для стандартного мужского голоса (средняя частота равна 122 Гц) с обычной интонацией и выражением будет отличаться от аналогичного значения для итальянского языка.
'richness'
Значение: <number> | inherit
Начальное значение: 50
Применяется: все элементы
Наследование: да
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения

Задает насыщенность, или яркость, голоса. Сильный голос будет хорошо слышен в большом помещении, а тихий, или гладкий, - нет. (Термин "гладкий" относится к форме волнового фронта.)

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

<number>
Величина, заключенная в пределах от '0' до '100'. Чем выше голос, тем он лучше будет слышен. Если задано низкое значение, то будет воспроизводиться тихий, мягкий голос.

19.9 Свойства озвучивания: 'speak-punctuation' и 'speak-numeral'

Еще одно свойство speak-header, используемое для управления озвучиванием, описано в главе "Таблицы".

'speak-punctuation'
Значение: code | none | inherit
Начальное значение: none
Область применения: все элементы
Наследование: да
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения

Данное свойство определяет метод озвучивания знаков пунктуации. Принимаемые им значения имеют следующий смысл:

code
Знаки пунктуации, такие как точка с запятой, скобки и др., будут произноситься явно.
none
Знаки пунктуации не будут произноситься, а вместо этого будут вставляться различные паузы.
'speak-numeral'
Значение: digits | continuous | inherit
Начальное значение: continuous
Область применения: все элементы
Наследование: да
Процентное задание значений: нет
Устройства: устройства звукового воспроизведения

Данное свойство определяет метод озвучивания чисел. Принимаемые им значения имеют следующий смысл:

digits
Число произносится по цифрам. Таким образом, "237" произносится как "два, три, семь".
continuous
Число произносится целиком. Таким образом, "237" произносится как "двести тридцать семь". Произношение слов определяется разговорным языком.


Модель поблочного отображения документа

8 Модель представления документа в виде блоков

Содержание

  • 8.1 Размеры блока
  • 8.2 Примеры полей, отступов и границ
  • 8.3 Свойства полей: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'
    • 8.3.1 Перекрывающиеся поля
  • 8.4 Свойства отступов: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'
  • 8.5 Свойства границы:
    • 8.5.1 Ширина границы: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' и 'border-width'
    • 8.5.2 Цвет границы: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' и 'border-color'
    • 8.5.3 Стиль границы: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' и 'border-style'
    • 8.5.4 Стенографические свойства границы: 'border-top', 'border-bottom', 'border-right', 'border-left' и 'border'

Модель представления документа в виде блоков, используемая в CSS, вводит понятие прямоугольных блоков, которые генерируются для элементов дерева документа и отображаются в документе в соответствии с моделью визуального форматирования. Страничный блок представляет собой частный вид блока, который подробно описывается в разделе об устройствах постраничного вывода.

8.1 Размеры блока

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

Рисунок, иллюстрирующий взаимное расположение полей, границ и отступов [D]

Поля, границы и отступы могут быть разбиты на левые, правые, верхние и нижние сегменты (например, на приведенном рисунке "LM" обозначает левое поле, "RP" - отступ справа, а "TB" - верхнюю границу).

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

Краевая линия информативной области или внутренняя краевая линия
Краевая линия информативной области окружает отображаемое содержимое элемента, порождающего блок.
Краевая линия отступов
Краевая линия отступов окружает ту область блока, которая используется для оформления отступов. Если эта область имеет нулевую ширину, то край отступов совпадает с краем информативной области. Краевая линия отступов определяет границы контейнера.
Краевая линия границы
Краевая линия границы окружает границу блока. Если ширина границы равна нулю, то ее край совпадает с краем отступов.
Краевая линия поля или внешняя краевая линия
Краевая линия поля окружает поле блока. Если ширина поля равна нулю, то ее край совпадает с краем границы.

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

Размеры информативной области блока, т.е. ее ширина и высота, зависят от нескольких факторов: определены ли у элемента, породившего блок, такие свойства, как 'width' и 'height', содержит ли блок текст или другие блоки, является ли блок таблицей и т.д. Ширина и высота блока обсуждаются в разделе о модели визуального форматирования.

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

Стиль оформления фона различных областей блока определяется следующим образом:

  • Информативная область: свойство 'background' элемента, порождающего блок.
  • Область отступов: свойство 'background' элемента, порождающего блок.
  • Область границы: свойства границ элемента, порождающего блок.
  • Область поля: поля всегда прозрачны.

8.2 Примеры полей, отступов и границ

Приводимый далее пример иллюстрирует сосуществование полей, отступов и границ. Следующий HTML-документ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE> Примеры полей, отступов и границ </TITLE>
    <STYLE type="text/css">
      UL {
        background: green;
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* Границы не установлены */
      }
      LI {
        color: black;                /* Текст отображается черным цветом */
        background: gray;            /* Фон информативной области и отступов */
                                     /* оформляется серым цветом */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Правый сегмент отступов */
                                     /* имеет нулевую ширину */
        list-style: none             /* Элементы списка не помечаются глифом */
                                     /* Границы не установлены */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* Устанавливает ширину границ со всех */
                                     /* сторон */
        border-color: black;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI> Первый элемент списка
      <LI class="withborder"> Второй элемент списка имеет большую длину,
      для того чтобы проиллюстрировать процесс переноса.
    </UL>
  </BODY>
</HTML>

порождает дерево документа, в котором, помимо прочего, имеется элемент UL, обладающий двумя дочерними элементами LI.

На первом из следующих рисунков показан результат трансляции приведенного документа. На втором иллюстрируется взаимосвязь между полями, отступами и границами элемента UL и его дочерних элементов LI.

Взаимосвязь между полями, отступами и границами родительского и дочернего элементов [D]

Обратите внимание на следующее:

  • ширина информативной области каждого блока, порожденного элементом LI, вычисляется сверху вниз, в то время как его контейнер определяется элементом UL;
  • высота каждого блока, порожденного элементом LI, определяется высотой информативной области в совокупности со значениями высоты нижних и верхних сегментов поля, границы и отступа. Заметьте, что вертикальные поля этих блоков перекрываются;
  • ширина правого сегмента отступа в блоке, порожденном элементом LI, была установлена равной нулю (свойство 'padding'). Результат виден на второй картинке;
  • поля блока, порожденного элементом LI, прозрачны по определению, поэтому зеленый цвет фона, установленный для отступов и информативной части элемента UL, виден сквозь них;
  • второй элемент LI задает границу в виде пунктирной линии (свойство 'border-style').

8.3 Свойства полей: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'

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

Свойства, описанные в этом разделе, относятся к типу значений <margin-width>, которое может принимать одно из следующих значений:

<длина>
Указывает фиксированную ширину.
<проценты>
Процентное соотношение, вычисляемое относительно ширины контейнера сгенерированного блока. Это правило применимо к свойствам 'margin-top' и 'margin-bottom', за исключением их использования в контексте страницы, для которой процентное соотношение вычисляется относительно высоты страничного блока.
auto
Подробную информацию можно найти в разделе об определении поперечных размеров и полей.

Свойства полей могут принимать отрицательные значения, но в конкретных реализациях могут накладываться различные ограничения.

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
Значение: <margin-width> | наследуемое
Начальное значение: 0
Область применения: все элементы
Наследование: нет
Процентное представление: относительно ширины контейнера
Применяется к: устройствам визуального форматирования

Эти свойства устанавливают значения ширины верхнего, нижнего, правого и левого полей блока.

Пример(ы):

H1 { margin-top: 2em }
'margin'
Значение: <margin-width>{1,4} | наследуемое
Начальное значение: для свойства стенографического типа не определено
Область применения: все элементы
Наследование: нет
Процентное задание: относительно ширины контейнера
Применяется к: устройствам визуального форматирования

Свойство 'margin' является стенографическим и используется в таблицах стилей для одновременной настройки следующих свойств: 'margin-top', 'margin-right', 'margin-bottom' и 'margin-left'.

Если оно принимает только одно значение, то это значение применяется ко всем сегментам. Если оно принимает два значения, то первое применяется к верхнему и нижнему сегментам, а второе - к правому и левому сегментам. Если оно принимает три значения, то первое значение применяется к верхнему, второе - к левому и правому, а третье - к нижнему сегменту. Если оно принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому сегментам, соответственно.

Пример(ы):

BODY { margin: 2em }         /* ширина всех полей равна 2em */
BODY { margin: 1em 2em }     /* ширина верхнего и нижнего сегментов равна */
                             /* 1em, а ширина правого и левого сегментов - 2em */
BODY { margin: 1em 2em 3em } /* ширина верхнего, правого, нижнего и левого */
                             /* сегментов равна 1em, 2em, 3em и 2em, */
                             /* соответственно */

Последнее правило этого примера равнозначно следующему:

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* копирует значение противоположной стороны */
}

8.3.1 Перекрывающиеся поля

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

В CSS2 горизонтальные поля никогда не перекрываются.

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

  • В нормальном потоке вертикальные поля двух или более соседних структурных блоков перекрываются. Ширина получившегося в результате этого поля равна максимальной ширине перекрывающихся полей. При отрицательных значениях ширины полей происходит сравнение их абсолютных значений, из которых затем выбирается максимальное, исходя из максимального положительного значения ширины. Если положительных значений ширины вовсе нет, то выбор максимума из абсолютных значений ширины полей осуществляется, исходя из предположения, что максимальная ширина равна нулю.
  • Вертикальные поля перемещаемого и любого другого блока никогда не перекрываются.
  • Поля абсолютно и относительно позиционируемых блоков никогда не перекрываются.

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

8.4 Свойства отступов: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'

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

Свойства, рассматриваемые в данном разделе, относятся к типу значений <padding-width> , который может принимать одно из следующих значений:

<length>
Указывает фиксированную ширину.
<percentage>
Процентное сотношение, вычисляемое относительно ширины контейнера сгенерированного блока. В частности, можно заметить, что оно вычисляется и для таких свойств, как 'padding-top' и 'padding-bottom'.

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

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Значение: <padding-width> | наследуемое
Начальное значение: 0
Область применения: все элементы
Наследование: нет
Процентное задание: относительно ширины контейнера
Применяется к: устройствам визуального форматирования

Эти свойства устанавливают значение ширины верхнего, правого, нижнего и левого сегментов отступа.

Пример(ы):

BLOCKQUOTE { padding-top: 0.3em }
'padding'
Значение: <padding-width>{1,4} | наследуемое
Начальное значение: не определено для свойств стенографического типа
Область применения: все элементы
Наследуемое: нет
Процентное задание: относительно ширины контейнера
Применяется к: устройствам визуального форматирования

Свойство 'padding' является стенографическим и используется в таблицах стилей для одновременной установки следующих свойств: 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left'.

Если оно принимает только одно значение, это значение применяется ко всем сегментам. Если оно принимает два значения, то первое применяется к верхнему и нижнему сегментам, а второе - к правому и левому сегментам. Если оно принимает три значения, то первое значение применяется к верхнему, второе - к левому и правому, а третье - к нижнему сегменту. Если оно принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому сегментам соответственно.

Цвет или изображение, используемые для оформления фона отступов, задаются с помощью свойства 'background':

Пример(ы):

H1 {
  background: white;
  padding: 1em 2em;
}

В приведенном примере ширина вертикальных ('padding-top' и 'padding-bottom') и горизонтальных ('padding-right' и 'padding-left') сегментов отступов устанавливается равной '1em' и '2em' соответственно. Единица измерения 'em' задается относительно размера шрифта элемента: '1em' равен размеру используемого шрифта.

8.5 Свойства границы

Свойства границы позволяют устанавливать ширину, цвет и стиль области границы блока. Данные свойства применяются ко всем элементам.

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

8.5.1 Ширина границы: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' и 'border-width'

Свойства ширины границы определяют ширину области границы. Свойства, рассматриваемые в данном разделе, относятся к типу значений <border-width>, который может принимать одно из следующих значений:

thin
Тонкая граница.
medium
Граница средней толщины.
thick
Толстая граница.
<длина>
Толщина границы задается явно. Явные значения ширины границы не могут быть отрицательными.

Интерпретация первых трех значений зависит от агента пользователя. Но при этом всегда должно соблюдаться следующее соотношение:

'thin' <='medium' <= 'thick'.

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

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
Значение: <border-width> | наследуемое
Начальное значение: средняя толщина
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Применяется к: устройствам визуального форматирования

Эти свойства определяют значение ширины верхнего, правого, нижнего и левого сегментов границы блока.

'border-width'
Значение: <border-width>{1,4} | наследуемое
Начальное значение: см. характерные свойства
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Применяется к: устройствам визуального форматирования

Это свойство является стенографическим и используется в таблицах стилей для одновременной установки следующих свойств: 'border-top-width', 'border-right-width', 'border-bottom-width' и 'border-left-width'.

Если оно принимает только одно значение, это значение применяется ко всем сегментам. Если оно принимает два значения, то первое применяется к верхнему и нижнему сегментам, а второе - к правому и левому сегментам. Если оно принимает три значения, то первое значение применяется к верхнему, второе - к левому и правому, а третье - к нижнему сегменту. Если оно принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому сегментам соответственно.

Пример(ы):

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

H1 { border-width: thin }                   /* тонкая тонкая */
                                            /* тонкая тонкая */
H1 { border-width: thin thick }             /* тонкая толстая */
                                            /* тонкая толстая */
H1 { border-width: thin thick medium }      /* тонкая толстая */
                                            /* средняя толстая */

8.5.2 Цвет границы: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' и 'border-color'

Свойства цвета границы определяют цвет границы блока.

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
Значение: <цвет> | наследуемое
Начальное значение: значение свойства 'color'
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Применяется к: устройствам визуального форматирования
'border-color'
Значение: <цвет>{1,4} | transparent | наследуемое
Начальное значение: см. индивидульные свойства
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Применяется к: устройствам визуального форматирования

Свойство 'border-color' определяет цвет всех четырех сегментов границы. Значения могут быть следующими:

<цвет>
Значение цвета.
transparent
Граница прозрачна (хотя она может иметь ширину).

У свойства 'border-color' может быть от одного до четырех значений, каждое из которых присваивается различным сегментам границы подобно тому, как это происходит у свойства 'border-width'.

Если цвет границы элемента не указан в свойстве границы, то агентам пользователей необходимо использовать значение свойства 'color' элемента в качестве вычисленного значения для цвета границы.

Пример(ы):

В следующем примере граница представляется сплошной черной линией.

P {
  color: black;
  background: white;
  border: solid;
}

8.5.3 Стиль границы: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' и 'border-style'

Свойства стиля границы определяют стиль линии (сплошная, двойная, пунктирная и т.д.), выступающей в качестве границы блока. Свойства, рассматриваемые в этом разделе, относятся к типу значений <border-style>, который может принимаать одно из следующих значений:

none
Граница отсутствует. В результате вычисленное значение свойства 'border-width' будет равно нулю.
hidden
Подобно значению 'none', за исключением сценария разрешения конфликтов между границами, используемого для элементов таблицы.
dotted
Граница отображается пунктирной линией.
dashed
Граница отображается штрих-пунктирной линией.
solid
Граница отображается сплошной линией.
double
Граница отображается двумя непрерывными линиями. Сумма значений ширины двух линий и расстояния между ними равна значению свойства 'border-width'.
groove
Граница отображается вдавленной линией.
ridge
Противоположно значению 'groove': граница отображается выпуклой линией.
inset
Весь блок выглядит как бы вдавленным.
outset
Противоположно значнию 'inset': весь блок выглядит как бы выпуклым.

Все границы выводятся поверх фоновой заставки блока. Цвет границ для значений 'groove', 'ridge', 'inset' и 'outset' зависит от значения свойства элемента 'color'.

Конформные агенты пользователей, управляющие отображением HTML-документов, могут интерпретировать значения 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как 'solid'.

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
Значение: <border-style> | наследуемое
Начальное значение: none
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Применяется к: устройствам визуального отображения
'border-style'
Значение: <border-style>{1,4} | наследванное
Начальное значение: см. индивидуальные свойства
Область применения: всем элементам
Наследование: нет
Процентное задние: N/A
Применяется к: устройствам визуального форматирования

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

Пример(ы):

#xy34 { border-style: solid dotted }

В приведенном примере горизонтальные сегменты границы будут иметь значение 'solid', а вертикальные - 'dotted'.

Так как начальное значение стиля границы равно 'none', то она не будет видна до тех пор, пока для нее не будет указан некоторый другой стиль.

8.5.4 Стенографические свойства границ: 'border-top', 'border-bottom', 'border-right', 'border-left' и 'border'

'border-top', 'border-right', 'border-bottom', 'border-left'
Значение: [ <'border-top-width'> || <'border-style'> || <цвет> ] | наследованное
Начальное значение: см. индивидуальные свойства
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Применяется к: устройствам визуального форматирования

Данное свойство является стенографическим свойством для настроек ширины, стиля и цвета для верхнего, правого, нижнего и левого сегментов границы блока.

Пример(ы):

H1 { border-bottom: thick solid red }

Приведенное правило установит значение ширины, стиль и цвет нижнего сегмента границы элемента H1. Свойства, значения которых не указаны, принмут свои начальные значения. Так как в следующем правиле цвет границы не указан, ей будет присвоен цвет, заданный свойством 'color':

H1 { border-bottom: thick solid }
'border'
Значение: [ <'border-top-width'> || <'border-style'> || <color> ] | наследованное
Начальное значение: см. индивидуальные свойства
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Применяется к: устройствам визуального форматирования

Свойство 'border' является стенографическим и используется для одновременного определения ширины, цвета и стиля всех четырех сегментов границы блока. В отличие от стенографических свойств 'margin' и 'padding' свойство 'border' не может устанавливать различные значения для отдельных сегментов границы. Чтобы это сделать, необходимо использовать другие свойства границы.

Пример(ы):

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

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

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

Пример(ы):

Рассмотрим следующий пример:

BLOCKQUOTE {
  border-color: red;
  border-left: double;
  color: black
}

В этом примере левый сегмент границы отображается черным цветом, в то время как все остальные сегменты - красным. Это обусловлено действием свойства 'border-left', определяющего ширину, стиль и цвет левого сегмента. Так как свойство 'border-left' не указывает значение цвета, то последнее будет заимствовано из свойства 'color'. Тот факт, что свойство 'color' было описано после свойства 'border-left', в данном случае не имеет особого значения.


Присвоение значений свойствам. Каскады и наследование.

6 Присвоение значений свойствам, каскады и наследование

Содержание

  • 6.1 Заданные, вычисляемые и фактические значения
    • 6.1.1 Заданные значения
    • 6.1.2 Вычисляемые значения
    • 6.1.3 Фактические значения
  • 6.2 Наследование
    • 6.2.1 Значение 'inherit'
  • 6.3 Правило @import
  • 6.4 Каскад
    • 6.4.1 Порядок каскадирования
    • 6.4.2 Правило !important
    • 6.4.3 Вычисление специфичности селектора
    • 6.4.4 Приоритеты оформительских рекомендаций, не принадлежащих CSS

6.1 Заданные, вычисляемые и фактические значения

После того, как пользовательский агент произвел синтаксический анализ документа и создал дерево документа, он должен присвоить каждому свойству каждого элемента этого дерева некоторое значение, применяемое к целевому устройству.

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

6.1.1 Заданные значения

Агенты пользователей в первую очередь присваивают свойству заданное значение, руководствуясь следующей последовательностью действий (перечисленных в порядке убывания приоритета):

  1. Присваивается значение, являющееся результатом каскада.
  2. В противном случае, если свойство является наследуемым, то ему присваивается значение родительского элемента, которое чаще всего является вычисляемым.
  3. В противном случае свойству присваивается начальное значение, которое задается в его определении.

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

6.1.2 Вычисляемые значения

Заданные значения могут быть как абсолютными (задаются относительно другого значения, например, 'red' или '2mm'), так и относительными (задаются относительно другого значения, например, 'auto', '2em' и '12%'). Чтобы получить вычисляемое значение, для абсолютных значений не требуется никаких преобразований.

Что касается относительных значений, то они должны быть преобразованы в вычисляемые значения следующим образом: процентные соотношения должны быть умножены на значение, относительно которого они заданы (для каждого свойства определено свое такое значение); значения с относительными единицами измерения (em, ex, px) должны быть преобразованы в абсолютные путем умножения на величину, равную размеру шрифта или пикселя; значения 'auto' должны быть вычислены по формулам, заданным для каждого свойства; некоторые ключевые слова ('smaller', 'bolder', 'inherit') должны быть заменены в соответствии с их определениями.

Чаще всего элементы наследуют вычисляемые значения. Однако имеется несколько свойств, заданные значения которых могут быть унаследованы (например, численное значение свойства 'line-height'). Если дочерние элементы не наследуют вычисляемое значение, то этот факт отражается в определении свойства.

6.1.3 Фактические значения

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

6.2 Наследование

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

Предположим, что имеется элемент H1, в котором расположен элемент выделения EM:

<H1>Данный заголовок <EM>очень</EM> важен!</H1>

Если для элемента EM не задан цвет, то слово "очень" унаследует цвет родительского элемента. Таким образом, если для H1 определен синий цвет, то и элемент EM будет представлен синим цветом.

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

Пример(ы):

Например, свойство 'color' является наследуемым, поэтому все потомки элемента BODY унаследуют цвет 'black':

BODY { color: black; }

Значения, заданные в процентах, не наследуются, а вычисляемые значения наследуются.

Пример(ы):

Пусть задана следующая таблица стиля:

BODY { font-size: 10pt }
H1 { font-size: 120% }

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

<BODY>
  <H1>Некоторый <EM>крупный</EM> заголовок</H1>
</BODY>

Свойство 'font-size' элемента H1 будет иметь вычисленное значение '12pt' (120% от 10pt, являющегося значением свойства родительского элемента). Так как вычисляемое значение свойства 'font-size' является наследуемым, то элемент EM также будет иметь вычисленное значение '12pt'. Если агент пользователя не может отобразить шрифт размером в 12pt, то фактическим значением свойства 'font-size' для обоих элементов H1 и EM может быть, например, '11pt'.

6.2.1 Значение 'inherit'

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

Пример(ы):

В приведенных ниже примерах свойства 'color' и 'background' заданы внутри элемента BODY. Все другие элементы наследуют значение 'color', а фон будет прозрачным. Если эти правила являются частью пользовательской таблицы стилей, то во всем документе текст будет отображаться черным цветом на белом фоне.

BODY {
  color: black !important;
  background: white !important;
}

* {
  color: inherit !important;
  background: transparent;
}

6.3 Правило @import

Правило '@import' позволяет пользователям импортировать правила стилей из других таблиц стилей. Массив правил @import должен предшествовать всем другим правилам в таблице стилей. После ключевого слова '@import' должен следовать URI таблицы стилей, которую необходимо импортировать. Также допускается использование строки. В этом случае подразумевается, что она заключена в url(...).

Пример(ы):

Следующие строки эквивалентны по значению и представляют два варианта синтаксиса правила '@import' (один с использованием "url()" и один с открытой строкой):

@import "mystyle.css";
@import url("mystyle.css");

Т.к. агенты пользователей могут не загружать ресурсы для неподдерживаемых типов устройств, то разработчики могут задать зависящие от устройств правила @import. В этих условных правилах импортирования после URI задается список типов устройств, разделенных запятыми.

Пример(ы):

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

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

При отсутствии каких-либо типов устройств импорт не зависит ни от каких условий. Если при этом использовать значение 'all' для импортируемых аппаратных средств, то будет достигнут аналогичный эффект.

6.4 Каскад

Таблицы стилей имеют три источника: разработчик, пользователь и агент пользователя.

  • Разработчик. Разработчик создает таблицы стилей для исходного документа в соответствии с договоренностями, принятыми в языке документа. Например, в языке HTML таблицы стилей могут быть интегрированы в документ или подключены извне.
  • Пользователь. Пользователь может задать информацию о стиле конкретного документа. Например, он может создать файл с таблицей стилей, или агент пользователя может предоставить ему интерфейс, позволяющий сгенерировать пользовательскую таблицу стилей (или работать так, как будто она есть).
  • Агент пользователя. Конформные агенты пользователей должны сначала применить таблицу стиля, используемую по умолчанию (или работать так, как будто они это сделали), а затем все остальные таблицы стилей. Таблица стилей, используемая агентом по умолчанию, должна представлять элементы языка документа таким образом, чтобы удовлетворять основным требованиям к их отображению (например, элемент EM языка HTML визуальные агенты отображают курсивом). Информацию о таблице стилей, рекомендуемой для использования по умолчанию в документах на языке HTML 4.0, можно найти в разделе "Пример таблицы стилей для HTML 4.0".

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

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

Каскад CSS назначает каждому правилу стиля определенный приоритет. При выполнении нескольких правил преимущество имеет правило с большим приоритетом.

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

Кроме того, импортируемые таблицы стилей каскадируются, и их приоритет зависит от порядка импортирования. Правила, определенные в заданной таблице стилей, отменяют правила, импортируемые из других таблиц стилей. Импортируемые таблицы стилей сами могут рекурсивно импортировать и отклонять другие таблицы стилей и применять те же самые правила приоритетов.

6.4.1 Порядок каскадирования

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

  1. Найти все объявления, которые в соответствии с типом конечного устройства применяются к рассматриваемой паре элемент/свойство. Объявление применяется, если рассматриваемому элементу сопоставляется связанный с ним селектор.
  2. Первичная сортировка объявлений выполняется по приоритету и источнику: что касается обычных объявлений, то таблицы стилей разработчика имеют приоритет над пользовательскими таблицами стилей, которые, в свою очередь, имеют приоритет над таблицей стилей, используемой по умолчанию. Для объявлений "!important" пользовательские таблицы стилей имеют приоритет над таблицами стилей разработчика, которые, в свою очередь, имеют приоритет над таблицей стилей, используемой по умолчанию. Объявления "!important" имеют приоритет над обычными объявлениями. Импортируемая таблица стилей имеет тот же источник (разработчика), что и таблица стилей, в которую она импортирована.
  3. Вторичная сортировка выполняется по специфичности селектора: более специфичные селекторы имеют приоритет над более общими селекторами. Псевдоэлементы и псевдоклассы считаются обычными элементами и классами, соответственно.
  4. И наконец, сортировка в соответствии с порядком следования: если два правила имеют одинаковые приоритет, источник и специфичность, то будет использоваться правило, описанное последним. Считается, что правила импортируемых таблиц стилей должны располагаться перед правилами таблицы стилей, в которую осуществляется импорт.

Если не принимать во внимание установку "!important" для отдельных объявлений, то данная стратегия предоставляет таблицам стилей разработчика более высокий приоритет, чем таблицам стилей пользователя. Поэтому важно, чтобы агент предоставлял пользователю возможность отключать определенные таблицы стилей, например, с помощью выпадающего меню.

6.4.2 Правила !important

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

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

Примечание. Это является семантическим отличием от CSS1. В CSS1 правила "!important" разработчика имеют преимущество над пользовательскими правилами "!important".

Объявление свойства стенографического типа (например, 'background') как "!important" равнозначно объявлению всех содержащихся в нем свойств как "!important".

Пример(ы):

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

/* Из пользовательской таблицы стилей */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* Из таблицы стилей разработчика */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }

6.4.3 Вычисление специфичности селектора

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

  • подсчитывается число атрибутов ID в данном селекторе (= a);
  • подсчитывается число других атрибутов и псевдоклассов в данном селекторе (= b);
  • подсчитывается число имен элементов в данном селекторе (= c);
  • псевдоэлементы игнорируются.

После конкатенации трех чисел a-b-c (в системе счисления с большим основанием) получается специфичность.

Пример(ы):

Несколько примеров:

*             {}  /* a=0 b=0 c=0 -> специфичность =   0 */
LI            {}  /* a=0 b=0 c=1 -> специфичность =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> специфичность =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> специфичность =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> специфичность =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> специфичность =  13 */
LI.red.level  {}  /* a=0 b=2 c=1 -> специфичность =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> специфичность = 100 */

В HTML значениями атрибута "style" элемента являются правила таблицы стилей. Эти правила не имеют селекторов, но с целью обеспечения правомочности шага 3 алгоритма каскадирования предполагается, что у них имеется селектор ID (специфичность: a=1, b=0, c=0). С целью обеспечения правомочности шага 4, считается, что они располагаются после всех остальных правил.

<HEAD>
<STYLE type="text/css">
  #x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>

В приведенном выше примере цвет элемента P должен быть красным. Несмотря на то, что оба объявления имеют одинаковую специфичность, объявление в атрибуте "style" отменит объявление в элементе STYLE в соответствии с четвертым правилом каскадирования.

6.4.4 Приоритеты оформительских рекомендаций, не принадлежащих CSS

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

Примечание. На этапе преобразования этот метод упростит совместное существование стилистических атрибутов и таблиц стилей.

Примечание. В CSS1 оформительским рекомендациям, не принадлежащим CSS, была присвоена специфичность, равная 1, а не 0. Принятое здесь изменение было сделано из-за того, что был введен универсальный селектор, специфичность которого равна 0.


Приложение B: Отличия от CSS1

Приложение B. Отличия от CSS1

Содержание

  • B.1 Новые функциональные возможности
  • B.2 Обновленное описание
  • B.3 Изменения в семантике CSS1

Это приложение не является нормативным, а носит только информативный характер.

CSS2 базируется на CSS1, так что все таблицы стилей, допустимые в CSS1, допустимы и в CSS2. Различия между спецификацией CSS1 (см. [CSS1]) и настоящей спецификацией разделены на три группы: новые функциональные возможности, обновленные описания функциональных возможностей CSS1 и изменения в CSS1.

B.1 Новые функциональные возможности

В дополнение к тем функциональным возможностям, которые уже существовали в CSS1, в CSS2 введена поддержка:

  • Идеологии типов устройств.
  • Значения 'inherit' для всех свойств.
  • Устройств с постраничной разбивкой.
  • Звуковых таблиц стилей.
  • Функций интернационализации, включая стили нумерации списков, поддержку двунаправленного ввода текста и поддержку кавычек для различных языков.
  • Механизмов многоэтапного выбора шрифтов, включая их синтез, загрузку и интеллектуальное сопоставление. Кроме того, введено понятие системных шрифтов, и добавлено новое свойство 'font-size-adjust'.
  • Таблиц, включая новые значения свойств 'display' и 'vertical- align'.
  • Относительного и абсолютного позиционирования, включая фиксированное позиционирование.
  • Новых типов блоков (наряду со структурными и строковыми): компактных и инициирующих.
  • Возможности осуществления контроля над содержимым в модели визуального форматирования: его переполнением, усечением и видимостью.
  • Возможности определения минимальных и максимальных значений ширины и высоты в модели визуального форматирования.
  • Расширенный механизм селекторов, включая селекторы дочерних и смежных элементов, а также селекторы атрибутов.
  • Генерируемого содержимого, автоматической нумерации и счетчиков, а также маркеров.
  • Эффектов затенения текста, доступных благодаря новому свойству 'text-shadow'.
  • Нескольких новых псевдоклассов, таких как :first-child, :hover, :focus и :lang.
  • Системных цветов и шрифтов.
  • Курсоров.
  • Динамических контуров.

B.2 Обновленные описания

Спецификация CSS1 была краткой и лаконичной. Настоящая спецификация оказывается более объемной и удобной для чтения. Хотя ее дополнительное содержание большей частью посвящено описанию новых функциональных возможностей, оно, тем не менее, существенно расширяет описание функций CSS1. За исключением некоторых случаев, описанных ниже, переписанные описания не имели никаких изменений ни в синтаксисе, ни в семантике.

B.3 Изменения в семантике CSS1

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

  • Была изменена семантика правила "!important". В CSS1 правило "!important" в таблице стилей разработчика имеет более высокий приоритет по сравнению с тем же правилом в пользовательской таблице стилей. В CSS2 все наоборот.
  • В CSS2 значения цветов ограничены цветовой гаммой устройства, а не пространством sRGB, как в CSS1.
  • В CSS1 просто говорилось, что свойство 'margin-right' игнорируется, если обоим свойствам 'margin-left' и 'width' присвоены значения. В CSS2 выбор между тем, какое свойство - 'margin-right' или 'margin-left' - будет игнорироваться, зависит от направления ввода текста.
  • В CSS1 некоторые свойства (например, 'padding') имели значения, задаваемые относительно ширины родительского элемента. Это было ошибкой, т.к. эти значения следовало задавать относительно ширины элемента уровня блока. В связи с этим в настоящей спецификации было введено понятие "контейнер".
  • В CSS2 начальным значением свойства 'display' является 'inline', а не 'block', как в CSS1.
  • В CSS1 свойство 'clear' применялось ко всем элементам, что оказалось ошибкой. В CSS2 данное свойство применяется только к элементам уровня блока.
  • В CSS1 псевдоклассы ':link', ':visited' и ':active' были взаимоисключающими. Теперь в CSS2 псевдокласс ':active' может встречаться вместе с псевдоклассами ':link' или ':visited'.
  • Предложенный коэффициент масштабирования между соседними значениями свойства 'font-size' в таблице размеров шрифтов уменьшен с 1.5 до 1.2.
  • Наследуемым значением свойства 'font-size' теперь является вычисляемое значение, а не фактическое.
  • В CSS1 в описании свойства 'inside' (для 'list-style-position') допускалась ситуация, когда левое поле текста могло изменяться, а позиция маркера нет. В CSS2 это допущение исключено.
  • Обратитесь также к нормативному разделу, посвященному различиям в способах разметки, используемых в CSS1 и CSS2.


Цвета и оформление фона

14 Цвета и фон

Содержание

  • 14.1 Цвета переднего плана: свойство 'color'
  • 14.2 Фон
    • 14.2.1 Свойства фона: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' и 'background'
  • 14.3 Гамма-коррекция

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

Информацию о синтаксисе корректных значений цветов можно найти в разделе о цветах.

14.1 Цвета переднего плана: свойство 'color'

'color'
Значение: <цвет> | наследуемое
Начальное значение: зависит от агента пользователя
Область применения: все элементы
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

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

Пример(ы):

EM { color: red }              /* стандартное название цвета */
EM { color: rgb(255,0,0) }     /* значение системы RGB из диапазона 0-255 */

14.2 Фон

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

Свойства фона не наследуются, но фон родительского блока всегда будет виден, т.к. по умолчанию в качестве начального значения свойства 'background-color' выступает значение 'transparent'.

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

Разработчикам HTML-документов рекомендуется задавать фон для элемента BODY, а не для элемента HTML. Агенты пользователей при оформлении фона должны придерживаться следующей иерархии приоритетов: если значение свойства 'background' элемента HTML отлично от 'transparent', то следует использовать его. В противном случае следует использовать значение свойства 'background' элемента BODY. Если в результате получится значение 'transparent', то отображаемый фон окажется неопределенным.

В соответствии с этими правилами область представления, лежащая в основе следующего HTML-документа, будет иметь "мраморный" фон:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Установка фона области представления</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://style.com/marble.png") }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Я использую мраморный фон.
  </BODY>
</HTML>

14.2.1 Свойства фона: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' и 'background'

'background-color'
Значение: <цвет> | transparent | наследуемое
Начальное значение: transparent
Область применения: все элементы
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования

Это свойство устанавливает цвет фона элемента равным <цвет> или ключевому слову 'transparent', благодаря которому все цвета, лежащие под элементом, становятся видными.

Пример(ы):

H1 { background-color: #F00 }
'background-image'
Значение: <uri> | none | наследуемое
Начальное значение: none
Область применения: все элементы
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования

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

В качестве значения этого свойства может выступать <uri> графического объекта либо значение 'none', если изображение не используется.

Пример(ы):

BODY { background-image: url("marble.gif") }
P { background-image: none }
'background-repeat'
Значение: repeat | repeat-x | repeat-y | no-repeat | наследуемое
Начальное значение: repeat
Область применения: все элементы
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования

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

repeat
Изображение дублируется в вертикальной и горизонтальной плоскостях.
repeat-x
Изображение дублируется только в горизонтальной плоскости.
repeat-y
Изображение дублируется только в вертикальной плоскости.
no-repeat
Изображение не дублируется: отображается только одна копия изображения.

Пример(ы):

BODY {
  background: white url("pendant.gif");
  background-repeat: repeat-y;
  background-position: center;
}

Фоновое изображение центрировано. Повторяется сверху вниз в областях содержимого и отступов [D]

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

'background-attachment'
Значение: scroll | fixed | наследуемое
Начальное значение: scroll
Область применения: все элементы
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования

Если задано фоновое изображение, то данное свойство определяет, будет ли оно фиксироваться относительно окна просмотра (значение 'fixed') или будет перемещаться вместе с документом (значение 'scroll') в процессе его прокрутки.

Даже в случае фиксации изображения оно остается видимым только тогда, когда находится в области, предназначенной для оформления фона или отступов элемента. Поэтому изображение может оставаться невидимым до тех пор, пока его копии не будут расположены мозаикой ('background-repeat: repeat').

Пример(ы):

В следующем примере формируется бесконечная вертикальная полоса, которая остается "приклеенной" к окну просмотра во время прокрутки элемента.

BODY {
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

Агенты пользователей могут интерпретировать значение 'fixed' как 'scroll'. Однако рекомендуется, чтобы значение 'fixed' все же интерпретировалось корректно, по крайней мере, для элементов HTML и BODY, т.к. у авторов не существует возможности предоставления изображения только для тех браузеров, которые поддерживают значение 'fixed'. Дополнительную информацию можно получить в разделе, посвященном конформности.

'background-position'
Значение: [ [<проценты> | <длина> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | наследуемое
Начальное значение: 0% 0%
Область применения: элементы структурного уровня и замещаемые элементы
Наследование: нет
Процентное задание: относительно размеров самого блока
Устройства: визуального форматирования

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

<проценты> <проценты>
Если используется пара значений '0% 0%', то верхний левый угол изображения выравнивается относительно верхнего левого угла краевой линии отступов блока. Если задана пара значений '100% 100%', то нижний правый угол изображения помещается в нижний правый угол краевой линии отступов. Если задана пара значений '14% 84%', то точка, смещенная вдоль изображения на 14% вправо по горизонтали и на 84% вниз по вертикали помещается в точку, смещенную вдоль области, предназначенной для отступов, на 14% вправо по горизонтали и на 84% вниз по вертикали.
<длина> <длина>
Если задана пара '2cm 2cm', то верхний левый угол изображения помещается на 2 см правее и 2 см ниже верхнего левого угла области, предназначенной для отступов.
top left и left top
Аналогично значению '0% 0%'.
top, top center и center top
Аналогично значению '50% 0%'.
right top и top right
Аналогично значению '100% 0%'.
left, left center и center left
Аналогично значению '0% 50%'.
center и center center
Аналогично значению '50% 50%'.
right, right center и center right
Аналогично значению '100% 50%'.
bottom left и left bottom
Аналогично значению '0% 100%'.
bottom, bottom center и center bottom
Аналогично значению '50% 100%'.
bottom right и right bottom
Аналогично значению '100% 100%'.

Если задано только одно значение длины или одно процентное соотношение, то оно определяет позицию только по горизонтали, а позиция по вертикали определяется, исходя из значения 50%. Если задано два значения, то первой указывается позиция по горизонтали. Допускается сочетание значений длины и процентных соотношений (например, '50% 2cm'). Также допускается использование отрицательных значений. Ключевые слова не могут использоваться вместе со значениями длины или процентными соотношениями (все возможные варианты представлены выше).

Пример(ы):

BODY { background: url("banner.jpeg") right top }    /* 100%   0% */
BODY { background: url("banner.jpeg") top center }   /*  50%   0% */
BODY { background: url("banner.jpeg") center }       /*  50%  50% */
BODY { background: url("banner.jpeg") bottom }       /*  50% 100% */

Если фоновое изображение фиксировано в окне просмотра (см. свойство 'background-attachment'), то оно размещается относительно окна просмотра, а не относительно области элемента, предназначенной для отступов. Например,

Пример(ы):

BODY {
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

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

'background'
Значение: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | наследуемое
Начальное значение: не определено для свойств стенографического типа
Область применения: все элементы
Наследование: нет
Процентное задание: допускается в свойстве 'background-position'
Устройства: визуального форматирования

Свойство 'background' является свойством стенографического типа, используемым для определения отдельных свойств фона ('background-color', 'background-image', 'background-repeat', 'background-attachment' и 'background-position') одновременно.

Сначала свойство 'background' устанавливает всем отдельным свойствам фона их начальные значения, а затем явно назначает им те значения, которые были заданы в объявлении.

Пример(ы):

В первом правиле следующего примера было задано значение только для свойства 'background-color', в то время как всем остальным свойствам были присвоены их начальные значения. Во втором правиле явно заданы значения всех отдельных свойств.

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 Гамма-коррекция

Информацию о цветовой гамме можно найти в учебнике под названием "Gamma Tutorial" в спецификации PNG ([PNG10]).

При вычислении гамма-коррекции агенты пользователей, осуществляющие отображение на дисплеях с ЭЛТ, могут предполагать идеальность используемой ЭЛТ и игнорировать все эффекты, имеющие место в текущей цветовой гамме из-за внесенных в нее возмущений. Поэтому на имеющихся в данный момент платформах минимум, что им следует сделать:

ПК с системой MS-Windows
ничего не требуется
Unix с использованием X11
ничего не требуется
Mac с использованием QuickDraw
применить цветовую гамму 1.45 [ICC32] (приложения, осуществляющие автономную синхронизацию цветов, могут просто передать профиль sRGB ICC в модуль синхронизации цветов для выполнения корректной настройки цветовой гаммы)
SGI с использованием X
применить цветовую гамму из /etc/config/system.glGammaVal (по умолчанию используется значение 1.70; приложения, работающие на Irix версии 6.2 и выше, могут просто передать профиль sRGB ICC в систему управления цветовой гаммой)
NeXT с NeXTStep
применить цветовую гамму 2.22

Фраза "применить цветовую гамму" означает, что каждой из трех составляющих R, G и B перед тем, как она будет передана операционной системе, должно быть присвоено значение R'=Rgamma, G'=Ggamma, B'=Bgamma.

Это можно быстро сделать, осуществив однократное построение 256-элементной таблицы поиска в момент инициализации браузера:

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

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


Конформность: требования и рекомендации

3 Конформность: требования и рекомендации

Содержание

  • 3.1 Определения
  • 3.2 Конформность
  • 3.3 Сбои
  • 3.4 Тип содержимого "text/css"

3.1 Определения

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

В этом документе такие ключевые слова как "ДОЛЖЕН", "НЕ ДОЛЖЕН", "ТРЕБУЕТСЯ", "НУЖНО", "НЕ НУЖНО", "СЛЕДУЕТ", "НЕ СЛЕДУЕТ", "РЕКОМЕНДУЕТСЯ", "МОЖЕТ БЫТЬ" и "НЕОБЯЗАТЕЛЬНО" интерпретируются аналогично тому, как это делается с английскими эквивалентами в стандарте RFC 2119 (см. [RFC2119]). Из соображений удобства чтения далее при написании этих слов не будут использоваться заглавные буквы.

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

Таблица стилей
Набор выражений, определяющих представление документа.

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

Корректная таблица стилей
Корректность таблицы стилей зависит от уровня CSS, используемого для ее создания. Так, корректность таблиц стилей, написанных в CSS1, не изменится при переходе к CSS2. Но из-за внесения некоторых изменений в CSS2 появляются различия в семантике написания ряда таблиц в CSS1 и CSS2.

Корректная таблица стилей, созданная с помощью CSS2, должна разрабатываться в соответствии с грамматикой CSS2. Более того, она должна содержать только те правила at, имена свойств и принимаемые ими значения, которые определены в данной спецификации. Недопустимое правило at, имя свойства или его значение являются частным примером некорректности таблицы.

Исходный документ
Документ, к которому относятся одна или несколько таблиц стилей. С использованием определенной системы кодировки данный документ представляется в виде дерева элементов. Каждый элемент представлен своим именем, идентифицирующим его тип; числом его атрибутов (это число не является обязательным) и своим, возможно пустым, содержимым.
Язык документа
Система кодировки, используемая для представления исходного документа (например, HTML или XML).
Элемент
(Терм языка SGML, см. [ISO8879].) Примитивная синтаксическая конструкция языка документа. Большинство правил, используемых в таблицах стилей CSS, используют имена элементов (например, "P", "TABLE" или "OL" для HTML) для определения информации об их представлении.
Заменяемый элемент
Элемент, относительно которого компилятору CSS известна только его внутренняя размерность. В HTML примерами заменяемых элементов могут служить элементы IMG, INPUT, TEXTAREA, SELECT и OBJECT. Например, содержимое элемента IMG часто заменяется изображением, которое задает атрибут "src". В CSS не указывается способ определения внутренних размерностей.
Внутренняя размерность
Ширина и высота, определяемые самим элементом, а не его окружением. В CSS2 предполагается, что все заменяемые элементы и только они имеют внутреннюю размерность.
Атрибут
Значение, связанное с элементом и состоящее из имени и связанного с ним (текстового) значения.
Содержимое
Содержимое, связанное с элементом в исходном документе. Не у всех элементов имеется содержимое. Элементы могут быть пустыми. В качестве содержимого некоторого элемента может выступать текст или множество вложенных элементов, относительно которых исходный элемент называется родительским.
Генерируемое содержимое
Содержимое элемента, которое было связано с ним в результате использования соответствующих таблиц стилей. Генерируемое содержимое заменяемого элемента поступает не из исходного документа. Это может быть дополнительный текст для элемента (например, значение атрибута "alt" в HTML) и элементы, явно или неявно привносимые таблицей стилей, например, маркеры, номера и др.
Дерево документа
Дерево элементов, закодированное в исходном документе. Каждый элемент в этом дереве имеет только один родительский элемент, за исключением корневого элемента, у которого его нет.
Дочерний элемент
Элемент А называется дочерним по отношению к элементу B, если и только если B является родительским элементом элемента А.
Потомок
Элемент А называется потомком элемента B, если выполняется одно из следующих условий:
(1) А является дочерним элементом элемента B;
(2) А является дочерним элементом элемента C, который, в свою очередь, является потомком B.
Предок
Элемент А называется предком элемента B, если и только если B является потомком элемента А.
Сестринский элемент
Элемент А называется сестринским элементом элемента B, если и только если элементы А и B являются дочерними элементами одного и того же элемента. Элемент А является предшествующим сестринским элементом, если в дереве документа он находится перед элементом B. Элемент A является следующим сестринским элементом, если в дереве документа он находится после элемента B.
Предшествующий элемент
Элемент А называется предшествующим элементу B, если и только если (1) А является предком B или (2) А является предшествующим сестринским элементом элемента B.
Cледующий элемент
Элемент А называется следующим за элементом B, если и только если B предшествует элементу А.
Разработчик
Разработчик - это человек, создающий документы и связанные с ними таблицы стилей. Документы и ассоциированные с ними таблицы стилей генерируются средством разработки.
Пользователь
Пользователь - это человек, взаимодействующий с агентом пользователя с целью просмотра, прослушивания или другого использования документа и связанных с ним таблиц стилей. Пользователь может создать персональную таблицу стилей, в которой будут закодированы персональные настройки.
Агент пользователя
Агент пользователя - это произвольная программа, которая интерпретирует документ, написанный на некотором языке структуризации, и применяет связанные с ним таблицы стилей в соответствии с правилами данной спецификации. Агент пользователя может выводить документ на экран, осуществлять его звуковое воспроизведение, выводить на печать, конвертировать в другой формат и т.д.

Ниже приводится пример исходного документа на языке HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <TITLE>Моя домашняя страница</TITLE>
  <BODY>
    <H1> Моя домашняя страница;/H1>
    <P>Добро пожаловать на мою домашнюю страницу! Позвольте рассказать вам
о моих любимых композиторах:
    <UL>
      <LI>Элвис Костелло
      <LI>Иоган Брамс
      <LI>Джорж Брассенс
    </UL>
  </BODY>
</HTML>

В результате получается следующее дерево:

Пример дерева документа [D]

В соответствии с определением языка HTML элементы типа HEAD будут определены во время синтаксического анализа автоматически и станут частью дерева документа, если даже теги <HEAD> отсутствуют в исходном документе. Аналогичным образом программа синтаксического анализа определит, где заканчиваются элементы P и LI, даже если теги </P> и </LI> отсутствуют в исходном документе.

3.2 Конформность

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

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

  1. Он должен поддерживать один или несколько типов устройств, определенных в описании CSS2.
  2. Для каждого типа документа он должен предпринимать попытки загрузки всех таблиц стилей, связанных с исходным документом и соответствующих поддерживаемым им типам устройств. Если ему не удается это сделать (например, по причине сбоев в сети), то он должен отображать документ с помощью доступных ему таблиц.
  3. Он должен осуществлять синтаксический анализ таблицы стилей в соответствии с данной спецификацией. В частности, он должен распознавать все правила at, структурные блоки, объявления и селекторы (см. раздел "Грамматика CSS2" ). Если он обнаруживает некоторое свойство, применяемое к одному из поддерживаемых типов устройств, то он должен проанализировать значение свойства в соответствии с его описанием. Это означает, что агент пользователя должен принимать все допустимые значения и игнорировать объявления с недопустимыми значениями. Агенты пользователей должны игнорировать правила, которые применяются к неподдерживаемым типам устройств.
  4. Всем свойствам всех элементов дерева документа агент пользователя должен присвоить значение в соответствии с определением свойства и правилами каскада и наследования.
  5. Если к исходному документу прилагаются альтернативные таблицы стилей (например, с ключевым словом "alternate" в HTML 4.0 [HTML40]), то агент должен предоставить пользователю возможность выбора одной из этих таблиц стилей и ее применения.

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

  • Агент пользователя, который применяет таблицы стилей, должен удовлетворять требованиям 1 - 3.
  • Средство разработки необходимо только для вывода корректной таблицы стилей.
  • Агент пользователя, который представляет документ с использованием связанной с ним таблицы стилей, должен удовлетворять условиям 1 - 5 и представлять данный документ в соответствии с техническими требованиями, рассматриваемыми далее в этом описании. При необходимости значения могут представляться приблизительно.

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

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

3.3 Сбои

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

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

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

3.4 Тип содержимого "text/css"

Таблицы стилей CSS, представленные в виде отдельных файлов, отправляются через Интернет в виде последовательности байтов, сопровождаемой информацией о кодировке (см. [HTML40], глава 5). Структура передачи, называемая массивом сообщения, определяется в соответствии со стандартами RFC 2045 и RFC 2068 (см. [RFC2045] и [RFC2068]). Массив сообщения с типом содержимого "text/css" представляет собой отдельный документ CSS. Тип содержимого "text/css" зарегистрирован в стандарте RFC 2138 ([RFC2318]).


Каскадные таблицы стилей второго уровня

W3C REC-CSS2-19980512

Каскадные таблицы стилей второго уровня
Спецификация CSS2

Рекомендация W3C от 12 мая 1998 г.
Данная версия:
http://www.w3.org/TR/1998/REC-CSS2-19980512
Последняя версия:
http://www.w3.org/TR/REC-CSS2
Предыдущая версия:
http://www.w3.org/TR/1998/PR-CSS2-19980324
Редакторы:
Bert Bos <bbos@w3.org>
Håkon Wium Lie <howcome@w3.org>
Chris Lilley <chris@w3.org>
Ian Jacobs <ij@w3.org>

Аннотация

В данной спецификации вводится понятие каскадных таблиц стилей второго уровня (CSS2). Фактически CSS2 представляет собой язык описания таблиц стилей, позволяющий разработчикам и пользователям применять стили (например, шрифты, интервалы, звуковые сигналы) в структурированных документах (например, в HTML- и XML-документах). CSS2 позволяет сделать стиль представления документов независимым от их содержания, что существенно упрощает разработку Web-страниц и поддержку сайтов.

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

Статус документа

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

Список рекомендаций, выработанных W3C на данный момент, и других технических документов можно найти по следующему адресу: http://www.w3.org/TR.

Открытая дискуссия, касающаяся характеристик языка CSS, происходит по адресу www-style@w3.org.

Имеющиеся форматы

Спецификацию CSS2 можно получить в следующих форматах:

HTML:
[eng] - http://www.w3.org/TR/REC-CSS2/cover.html
[rus] - http://loc.stack.ru/projects/CSS2/cover.html
текст:
[eng] - http://www.w3.org/TR/REC-CSS2/css2.txt
[eng] - http://loc.stack.ru/projects/CSS2/css2.txt
HTML в файле gzip:
[eng] - http://www.w3.org/TR/REC-CSS2/css2.tgz
[eng] - http://loc.stack.ru/projects/CSS2/css2.tgz
[rus] - http://loc.stack.ru/projects/CSS2/css2ru.tgz
HTML в файле zip:
[eng] - http://www.w3.org/TR/REC-CSS2/css2.zip
[eng] - http://loc.stack.ru/projects/CSS2/css2.zip
[rus] - http://loc.stack.ru/projects/CSS2/css2ru.zip
PostScript в файле gzip:
[eng] - http://www.w3.org/TR/REC-CSS2/css2.ps.gz
[eng] - http://loc.stack.ru/projects/CSS2/css2.ps.gz
PDF:
[eng] - http://www.w3.org/TR/REC-CSS2/css2.pdf
[eng] - http://loc.stack.ru/projects/CSS2/css2.pdf

В случае расхождения между различными версиями спецификации определяющей считается версия, расположенная по адресу http://www.w3.org/TR/1998/REC-CSS2-19980512.

Существующие переводы

Английская версия этого описания является единственной нормативной версией. Информацию о переводах на другие языки можно найти по адресу: http://www.w3.org/Style/css2-updates/translations.html.

Список опечаток

Список ошибок и опечаток, обнаруженных в этой спецификации, находится по адресу: http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html. Об ошибках, обнаруженных в этом документе, сообщайте по адресу: css2-editors@w3.org.

Краткое содержание

  • 1 О спецификации CSS2
  • 2 Введение в CSS2
  • 3 Конформность: требования и рекомендации
  • 4 Синтаксис CSS2 и основные типы данных
  • 5 Селекторы
  • 6 Присвоение значений свойствам, каскады и наследование
  • 7 Типы устройств
  • 8 Модель представления документа в виде блоков
  • 9 Модель визуального форматирования
  • 10 Подробное описание модели визуального форматирования
  • 11 Визуальные эффекты
  • 12 Генерируемое содержимое, автоматическая нумерация и списки
  • 13 Устройства с постраничной разбивкой
  • 14 Цвета и фон
  • 15 Fonts
  • 16 Text
  • 17 Tables
  • 18 User interface
  • 19 Aural style sheets
  • Appendix A. A sample style sheet for HTML 4.0
  • Appendix B. Changes from CSS1
  • Appendix C. Implementation and performance notes for fonts
  • Appendix D. The grammar of CSS2
  • Appendix E. References
  • Appendix F. Property index
  • Appendix G. Descriptor index
  • Appendix H. Index

Полное содержание

  • 1 О спецификации CSS2
    • 1.1 Ознакомление со спецификацией
    • 1.2 Структура спецификации
    • 1.3 Условные обозначения
      • 1.3.1 Элементы и атрибуты языка документа
      • 1.3.2 Определение свойств в CSS
        • Значения, принимаемые свойством
        • Начальное значение
        • Область применения
        • Наследование свойств
        • Процентное представление значения
        • Устройства, связанные со свойством
      • 1.3.3 Свойства стенографического типа
      • 1.3.4 Примеры и комментарии
      • 1.3.5 Изображения и длинные описания
    • 1.4 Благодарности
    • 1.5 Информация об авторском праве
  • 2 Введение в CSS2
    • 2.1 Краткое руководство по CSS2 для HTML-документов
    • 2.2 Краткое руководство по CSS2 для XML-документов
    • 2.3 Модель обработки в CSS2
      • 2.3.1 Область представления
      • 2.3.2 Модель адресации в CSS2
    • 2.4 Принципы разработки таблиц CSS
  • 3 Конформность: требования и рекомендации
    • 3.1 Определения
    • 3.2 Конформность
    • 3.3 Сбои
    • 3.4 Тип содержимого "text/css"
  • 4 Синтаксис CSS2 и основные типы данных
    • 4.1 Синтаксис
      • 4.1.1 Маркирование
      • 4.1.2 Ключевые слова
      • 4.1.3 Символы и регистр
      • 4.1.4 Выражения
      • 4.1.5 Правила at
      • 4.1.6 Блоки
      • 4.1.7 Наборы правил, блоки объявлений и селекторы
      • 4.1.8 Объявления и свойства
      • 4.1.9 Комментарии
    • 4.2 Правила обработки ошибок, возникающих на этапе синтаксического анализа
    • 4.3 Значения
      • 4.3.1 Целые и вещественные числа
      • 4.3.2 Единицы измерения длины
      • 4.3.3 Процентные соотношения
      • 4.3.4 URL + URN = URI
      • 4.3.5 Счетчики
      • 4.3.6 Цвета
      • 4.3.7 Углы
      • 4.3.8 Время
      • 4.3.9 Частота
      • 4.3.10 Строки
    • 4.4 Представление документов, в которых используются CSS
      • 4.4.1 Ссылки на символы, отсутствующие в системе кодировки
  • 5 Селекторы
    • 5.1 Сопоставление шаблонов
    • 5.2 Синтаксис селекторов
      • 5.2.1 Группировка
    • 5.3 Универсальный селектор
    • 5.4 Селекторы типов
    • 5.5 Селекторы потомков
    • 5.6 Селекторы дочерних элементов
    • 5.7 Селекторы сестринских элементов
    • 5.8 Селекторы атрибутов
      • 5.8.1 Соответствие атрибутам и значениям атрибутов
      • 5.8.2 Значения атрибутов, используемые в DTD по умолчанию
      • 5.8.3 Селекторы классов
    • 5.9 ID-селекторы
    • 5.10 Псевдоэлементы и псевдоклассы
    • 5.11 Псевдоклассы
      • 5.11.1 Псевдокласс :first-child
      • 5.11.2 Псевдоклассы ссылок :link и :visited
      • 5.11.3 Динамические псевдоклассы: :hover, :active и :focus
      • 5.11.4 Псевдокласс :lang
    • 5.12 Псевдоэлементы
      • 5.12.1 Псевдоэлемент :first-line
      • 5.12.2 Псевдоэлемент :first-letter
      • 5.12.3 Псевдоэлементы :before и :after
  • 6 Присвоение значений свойствам, каскады и наследование
    • 6.1 Заданные, вычисляемые и фактические значения
      • 6.1.1 Заданные значения
      • 6.1.2 Вычисляемые значения
      • 6.1.3 Фактические значения
    • 6.2 Наследование
      • 6.2.1 Значение 'inherit'
    • 6.3 Правило @import
    • 6.4 Каскад
      • 6.4.1 Порядок каскадирования
      • 6.4.2 Правило !important
      • 6.4.3 Вычисление специфичности селектора
      • 6.4.4 Приоритеты оформительских рекомендаций, не принадлежащих CSS
  • 7 Типы устройств
    • 7.1 Ознакомление с типами устройств
    • 7.2 Построение аппаратно-зависимых таблиц стилей
      • 7.2.1 Правило @media
    • 7.3 Распознаваемые типы устройств
      • 7.3.1 Группы устройств
  • 8 Модель представления документа в виде блоков
    • 8.1 Размеры блока
    • 8.2 Примеры полей, отступов и границ
    • 8.3 Свойства полей: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'
      • 8.3.1 Перекрывающиеся поля
    • 8.4 Свойства отступов: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'
    • 8.5 Свойства границы
      • 8.5.1 Ширина границы: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' и 'border-width'
      • 8.5.2 Цвет границы: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' и 'border-color'
      • 8.5.3 Стиль границы: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' и 'border-style'
      • 8.5.4 Стенографические свойства границы: 'border-top', 'border-bottom', 'border-right', 'border-left' и 'border'
  • 9 Модель визуального форматирования
    • 9.1 Знакомство с моделью визуального форматирования
      • 9.1.1 Область просмотра
      • 9.1.2 Контейнеры
    • 9.2 Управление процессом создания блоков
      • 9.2.1 Элементы уровня блока и структурные блоки
        • Безымянные структурные блоки
      • 9.2.2 Элементы строкового уровня и строковые блоки
        • Безымянные строковые блоки
      • 9.2.3 Компактные блоки
      • 9.2.4 Инициальные блоки
      • 9.2.5 Свойство 'display'
    • 9.3 Схемы позиционирования
      • 9.3.1 Выбор схемы позиционирования: свойство 'position'
      • 9.3.2 Смещение блоков: 'top', 'right', 'bottom', 'left'
    • 9.4 Нормальный поток
      • 9.4.1 Контекст форматирования блоков
      • 9.4.2 Контекст форматирования строк
      • 9.4.3 Относительное позиционирование
    • 9.5 Перемещаемые объекты
      • 9.5.1 Позиционирование перемещаемого объекта: свойство 'float'
      • 9.5.2 Управление потоком после перемещаемого объекта: свойство 'clear'
    • 9.6 Абсолютное позиционирование
      • 9.6.1 Фиксированное позиционирование
    • 9.7 Соотношение свойств 'display', 'position' и 'float'
    • 9.8 Сравнение моделей, описывающих нормальный поток, перемещаемые объекты и абсолютное позиционирование
      • 9.8.1 Нормальный поток
      • 9.8.2 Относительное позиционирование
      • 9.8.3 Перемещение блоков
      • 9.8.4 Абсолютное позиционирование
    • 9.9 Многослойный вывод
      • 9.9.1 Определение позиционного уровня: свойство 'z-index'
    • 9.10 Направление вывода текста: свойства 'direction' и 'unicode-bidi'
  • 10 Подробное описание модели визуального форматирования
    • 10.1 Определение "контейнера"
    • 10.2 Ширина содержимого: свойство 'width'
    • 10.3 Определение значений ширины и полей
      • 10.3.1 Незамещаемые элементы строкового уровня
      • 10.3.2 Замещаемые элементы строкового уровня
      • 10.3.3 Незамещаемые элементы уровня блока в нормальном потоке
      • 10.3.4 Замещаемые элементы уровня блока в нормальном потоке
      • 10.3.5 Незамещаемые перемещаемые элементы
      • 10.3.6 Замещаемые перемещаемые элементы
      • 10.3.7 Незамещаемые абсолютно позиционируемые элементы
      • 10.3.8 Замещаемые абсолютно позиционируемые элементы
    • 10.4 Минимальное и максимальное значения ширины: 'min-width' и 'max-width'
    • 10.5 Высота содержимого: свойство 'height'
    • 10.6 Определение значений высоты и полей
      • 10.6.1 Незамещаемые элементы строкового уровня
      • 10.6.2 Замещаемые элементы строкового уровня, замещаемые элементы уровня блока в нормальном потоке и замещаемые перемещаемые элементы
      • 10.6.3 Незамещаемые элементы уровня блока в нормальном потоке и незамещаемые перемещаемые элементы
      • 10.6.4 Незамещаемые абсолютно позиционируемые элементы
      • 10.6.5 Замещаемые абсолютно позиционируемые элементы
    • 10.7 Минимальное и максимальное значения высоты: 'min-height' и 'max-height'
    • 10.8 Определение высоты строки: свойства 'line-height' и 'vertical-align'
      • 10.8.1 Интерлиньяж и половинный интерлиньяж
  • 11 Визуальные эффекты
    • 11.1 Переполнение и усечение
      • 11.1.1 Переполнение: свойство 'overflow'
      • 11.1.2 Усечение: свойство 'clip'
    • 11.2 Видимость: свойство 'visibility'
  • 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'
  • 13 Устройства с постраничной разбивкой
    • 13.1 Ознакомление с системами постраничного представления документа
    • 13.2 Страничные блоки: правило @page
      • 13.2.1 Поля страницы
      • 13.2.2 Размер страницы: свойство 'size'
        • Отображение страничных блоков, не вмещающихся на листе
        • Позиционирование страничного блока на листе
      • 13.2.3 Метки обрезки: свойство 'marks'
      • 13.2.4 Левые, правые и первая страницы
      • 13.2.5 Содержимое за пределами страничного блока
    • 13.3 Разрывы страниц
      • 13.3.1 Разрывы до и после элементов: 'page-break-before', 'page-break-after', 'page-break-inside'
      • 13.3.2 Использование именованных страниц: 'page'
      • 13.3.3 Разрывы внутри элементов: 'orphans', 'widows'
      • 13.3.4 Допустимые разрывы страниц
      • 13.3.5 Принудительные разрывы страниц
      • 13.3.6 Наилучшие разрывы страниц
    • 13.4 Каскад в контексте описания страницы
  • 14 Цвета и фон
    • 14.1 Цвета переднего плана: свойства 'color'
    • 14.2 Фон
      • 14.2.1 Свойства фона: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' и 'background'
    • 14.3 Гамма-коррекция
  • 15 Fonts
    • 15.1 Introduction
    • 15.2 Font specification
      • 15.2.1 Font specification properties
      • 15.2.2 Font family: the 'font-family' property
      • 15.2.3 Font styling: the 'font-style', 'font-variant', 'font-weight' and 'font-stretch' properties
      • 15.2.4 Font size: the 'font-size' and 'font-size-adjust' properties
      • 15.2.5 Shorthand font property: the 'font' property
      • 15.2.6 Generic font families
        • serif
        • sans-serif
        • cursive
        • fantasy
        • monospace
    • 15.3 Font selection
      • 15.3.1 Font Descriptions and @font-face
      • 15.3.2 Descriptors for Selecting a Font: 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' and 'font-size'
      • 15.3.3 Descriptors for Font Data Qualification: 'unicode-range'
      • 15.3.4 Descriptor for Numeric Values: 'units-per-em'
      • 15.3.5 Descriptor for Referencing: 'src'
      • 15.3.6 Descriptors for Matching: 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent', and 'descent'
      • 15.3.7 Descriptors for Synthesis: 'widths', 'bbox' and 'definition-src'
      • 15.3.8 Descriptors for Alignment: 'baseline', 'centerline', 'mathline', and 'topline'
      • 15.3.9 Examples
    • 15.4 Font Characteristics
      • 15.4.1 Introducing Font Characteristics
      • 15.4.2 Full font name
      • 15.4.3 Coordinate units on the em square
      • 15.4.4 Central Baseline
      • 15.4.5 Font Encoding
      • 15.4.6 Font family name
      • 15.4.7 Glyph widths
      • 15.4.8 Horizontal stem width
      • 15.4.9 Height of uppercase glyphs
      • 15.4.10 Height of lowercase glyphs
      • 15.4.11 Lower Baseline
      • 15.4.12 Mathematical Baseline
      • 15.4.13 Maximal bounding box
      • 15.4.14 Maximum unaccented height
      • 15.4.15 Maximum unaccented depth
      • 15.4.16 Panose-1 number
      • 15.4.17 Range of ISO 10646 characters
      • 15.4.18 Top Baseline
      • 15.4.19 Vertical stem width
      • 15.4.20 Vertical stroke angle
    • 15.5 Font matching algorithm
      • 15.5.1 Mapping font weight values to font names
      • 15.5.2 Examples of font matching
  • 16 Text
    • 16.1 Indentation: the 'text-indent' property
    • 16.2 Alignment: the 'text-align' property
    • 16.3 Decoration
      • 16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property
      • 16.3.2 Text shadows: the 'text-shadow' property
    • 16.4 Letter and word spacing: the 'letter-spacing' and 'word-spacing' properties
    • 16.5 Capitalization: the 'text-transform' property
    • 16.6 Whitespace: the 'white-space' property
  • 17 Tables
    • 17.1 Introduction to tables
    • 17.2 The CSS table model
      • 17.2.1 Anonymous table objects
    • 17.3 Column selectors
    • 17.4 Tables in the visual formatting model
      • 17.4.1 Caption position and alignment
    • 17.5 Visual layout of table contents
      • 17.5.1 Table layers and transparency
      • 17.5.2 Table width algorithms: the 'table-layout' property
        • Fixed table layout
        • Automatic table layout
      • 17.5.3 Table height algorithms
      • 17.5.4 Horizontal alignment in a column
      • 17.5.5 Dynamic row and column effects
    • 17.6 Borders
      • 17.6.1 The separated borders model
        • Borders around empty cells: the 'empty-cells' property
      • 17.6.2 The collapsing border model
        • Border conflict resolution
      • 17.6.3 Border styles
    • 17.7 Audio rendering of tables
      • 17.7.1 Speaking headers: the 'speak-header' property
  • 18 User interface
    • 18.1 Cursors: the 'cursor' property
    • 18.2 User preferences for colors
    • 18.3 User preferences for fonts
    • 18.4 Dynamic outlines: the 'outline' property
      • 18.4.1 Outlines and the focus
    • 18.5 Magnification
  • 19 Aural style sheets
    • 19.1 Introduction to aural style sheets
    • 19.2 Volume properties: 'volume'
    • 19.3 Speaking properties: 'speak'
    • 19.4 Pause properties: 'pause-before', 'pause-after', and 'pause'
    • 19.5 Cue properties: 'cue-before', 'cue-after', and 'cue'
    • 19.6 Mixing properties: 'play-during'
    • 19.7 Spatial properties: 'azimuth' and 'elevation'
    • 19.8 Voice characteristic properties: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and 'richness'
    • 19.9 Speech properties: 'speak-punctuation' and 'speak-numeral'
  • Appendix A. A sample style sheet for HTML 4.0
  • Appendix B. Changes from CSS1
    • B.1 New functionality
    • B.2 Updated descriptions
    • B.3 Semantic changes from CSS1
  • Appendix C. Implementation and performance notes for fonts
    • C.1 Glossary of font terms
    • C.2 Font retrieval
    • C.3 Meaning of the Panose Digits
    • C.4 Deducing Unicode Ranges for TrueType
    • C.5 Automatic descriptor generation
  • Appendix D. The grammar of CSS2
    • D.1 Grammar
    • D.2 Lexical scanner
    • D.3 Comparison of tokenization in CSS2 and CSS1
  • Appendix E. References
    • E.1 Normative references
    • E.2 Informative references
  • Appendix F. Property index
  • Appendix G. Descriptor index
  • Appendix H. Index

Copyright © 1998 W3C (MIT, INRIA, Keio ), все права защищены.


Descriptor index

Appendix G. Descriptor index

Name | Values | Initial value
'ascent' | <number> | undefined
'baseline' | <number> | 0
'bbox' | <number>, <number>, <number>, <number> | undefined
'cap-height' | <number> | undefined
'centerline' | <number> | undefined
'definition-src' | <uri> | undefined
'descent' | <number> | undefined
'font-family' | [ <family-name> | <generic-family> ] [, [<family-name> | <generic-family> ]]* | depends on user agent
'font-size' | all | <length> [, <length>]* | all
'font-stretch' | all | [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded] ]* | normal
'font-style' | all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]* | all
'font-variant' | [normal | small-caps] [,[normal | small-caps]]* | normal
'font-weight' | all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]* | all
'mathline' | <number> | undefined
'panose-1' | [<integer>]{10} | 0 0 0 0 0 0 0 0 0 0
'slope' | <number> | 0
'src' | [ <uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri> [format(<string> [, <string>]*)] | <font-face-name> ]* | undefined
'stemh' | <number> | undefined
'stemv' | <number> | undefined
'topline' | <number> | undefined
'unicode-range' | <urange> [, <urange>]* | U+0-7FFFFFFF
'units-per-em' | <number> | undefined
'widths' | [<urange> ]? [<number> ]+ [,[<urange> ]? <number> ]+] | undefined
'x-height' | <number> | undefined


Шрифты

15 Шрифты

Содержание

  • 15.1 Введение
  • 15.2 Задание шрифтов
    • 15.2.1 Свойства, используемые для задания шрифтов
    • 15.2.2 Гарнитура шрифта: свойство 'font-family'
    • 15.2.3 Стиль шрифта: свойства 'font-style', 'font-variant', 'font-weight' и 'font-stretch'
    • 15.2.4 Размер шрифта: свойства 'font-size' и 'font-size-adjust'
    • 15.2.5 Свойство 'font' стенографического типа
    • 15.2.6 Общедоступные гарнитуры шрифтов:
      • антиква (serif)
      • гротески (sans-serif)
      • курсивы (cursive)
      • аллегорические шрифты (fantasy)
      • моноширные шрифты (monospace)
  • 15.3 Выбор шрифта
    • 15.3.1 Описания шрифтов и правило @font-face
    • 15.3.2 Дескрипторы, используемые для выбора шрифта: 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' и 'font-size'
    • 15.3.3 Дескрипторы, используемые для оценки данных о шрифте: 'unicode-range'
    • 15.3.4 Дескриптор единиц измерения: 'units-per-em'
    • 15.3.5 Дескриптор, используемый для обращений: 'src'
    • 15.3.6 Дескрипторы, используемые для сопоставления: 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent' и 'descent'
    • 15.3.7 Дескрипторы, используемые для синтеза: 'widths', 'bbox' и 'definition-src'
    • 15.3.8 Дескрипторы, используемые для выравнивания: 'baseline', 'centerline', 'mathline' и 'topline'
    • 15.3.9 Примеры
  • 15.4 Параметры шрифтов
    • 15.4.1 Основное представление о параметрах шрифтов
    • 15.4.2 Полное имя шрифта
    • 15.4.3 Разбиение кегельного квадрата
    • 15.4.4 Центральная базовая линия
    • 15.4.5 Кодировка шрифта
    • 15.4.6 Имя гарнитуры шрифта
    • 15.4.7 Ширина глифов
    • 15.4.8 Ширина горизонтального штамба
    • 15.4.9 Высота глифов заглавных букв
    • 15.4.10 Высота глифов строчных букв
    • 15.4.11 Нижняя базовая линия
    • 15.4.12 Математическая базовая линия
    • 15.4.13 Максимальный ограничивающий блок
    • 15.4.14 Максимальная высота не акцентированных букв
    • 15.4.15 Максимальная глубина не акцентированных букв
    • 15.4.16 Число Panose-1
    • 15.4.17 Набор символов, принадлежащих стандарту ISO 10646
    • 15.4.18 Верхняя базовая линия
    • 15.4.19 Ширина вертикального штамба
    • 15.4.20 Угол наклона вертикального штриха
  • 15.5 Алгоритм сопоставления шрифтов
    • 15.5.1 Отображение градаций насыщенности шрифтов на их имена
    • 15.5.2 Примеры сопоставления шрифтов

15.1 Введение

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

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

  • Существует ли для этого символа шрифт, который был задан явно или унаследован?
  • Имеется ли этот шрифт у агента?
  • Если да, то каким глифам сопоставляется символ или последовательность символов?
  • Если нет, то что необходимо сделать? Нужно ли использовать другой шрифт? Можно ли синтезировать необходимый шрифт? Можно ли загрузить его из глобальной сети?

Как в CSS1, так и в CSS2 разработчики задают характеристики шрифта, используя совокупность его свойств.

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

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

  • у разработчиков таблиц стилей для описания шрифтов, которые они хотели бы использовать;
  • у агентов пользователей при выборе шрифта, если указанный разработчиком шрифт недоступен.

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

В CSS2, как и в CSS1, модель шрифтов основывается на предположении о том, что в распоряжении агента пользователя имеется "база данных шрифтов". В CSS1 осуществлялось обращение к этой базе, но никогда не конкретизировалось ее содержимое. В CSS2, напротив, формируется представление о содержимом базы данных, и разработчикам таблиц стилей разрешается с ним взаимодействовать. Если необходимо отобразить символ с использованием определенного шрифта, то агент пользователя в первую очередь ищет в этой базе данных "наиболее подходящий" шрифт (используя алгоритм сопоставления шрифтов). Как только он находит его, то сразу извлекает данные этого шрифта с локального диска или из сети, а затем отображает требуемый символ с использованием глифов, содержащихся в найденном шрифте.

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

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

15.2 Задание шрифтов

В CSS на первом этапе функционирования механизмов управления шрифтами решается вопрос о принципах, используемых разработчиками таблиц стилей для определения совокупности шрифтов, которые будут использоваться агентом пользователя. На первый взгляд наиболее очевидным способом идентификации шрифта кажется использование его имени, представляющего собой строку, разбитую на несколько отдельных частей, например, "BT Swiss 721 Heavy Italic".

К сожалению, не существует хорошо разработанной и общедоступной системы классификации шрифтов по именам и, более того, термины, используемые для одной гарнитуры шрифтов, могут не подойти для другой. Например, термин 'курсив' ('italic') обычно используется для обозначения наклонного текста, который также может обозначаться англоязычными терминами Oblique, Slanted, Incline, Cursive или Kursiv. Аналогично имя шрифта может содержать термины, описывающие его вес. Основная цель, преследуемая при этом, заключается в различении шрифтов одной гарнитуры по яркости их написания. До сих пор термины, обозначающие вес шрифтов, не нашли общепринятого значения, и их использование варьируется в очень широком диапазоне. Например, шрифт, который, по Вашему предположению, должен быть жирным, может оказаться нормальным (Regular, Roman, Book или Medium), полужирным (Semi-Bold или Demi-Bold), жирным (Bold) или сверхжирным (Black) в зависимости от того, насколько темным был задан "нормальный" тип начертания шрифта в процессе его разработки.

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

По этой причине в CSS используется другая модель. Шрифты запрашиваются не только по своему имени, но и по совокупности заданных для них свойств. Значения этих свойств формируют основу для механизма, используемого агентом пользователя при выборе шрифта. Изменение значения каждого свойства шрифта может осуществляться индивидуально, например, можно отдельно увеличить вес. После этого для выбора шрифта из базы данных будет использоваться новая совокупность значений его свойств. Такая идеология должна скоординировать деятельность тех, кто разрабатывает и внедряет таблицы стилей, а также повысить устойчивость системы к сбоям.

15.2.1 Свойства, используемые для задания шрифтов

При описании шрифта в CSS2 используются следующие его характеристики:

Гарнитура
Гарнитура шрифта определяет, какая гарнитура будет использоваться для вывода текста. Гарнитура - это группа шрифтов, разработанных для совместного использования и обладающих некоторым сходством. Один шрифт гарнитуры может быть курсивным, второй жирным, третий может быть сжатым или состоять из малых прописных букв. Среди названий гарнитур шрифтов можно упомянуть такие как "Helvetica", "New Century Schoolbook" и "Kyokasho ICA L". Названия гарнитур могут включать не только латинские буквы. Гарнитуры шрифтов могут быть сгруппированы в различные категории: гарнитуры с засечками или без; гарнитуры, символы которых располагаются друг относительно друга на одинаковом или различном расстоянии; гарнитуры, тип начертания которых напоминает рукописный; гарнитуры, содержащие аллегорические шрифты, и т.д.
Стиль
Стиль шрифта определяет, какой тип начертания будет использоваться для представления текста: обычный, курсивный или наклонный. Курсив - это нечто среднее между нормальным и рукописным стилем начертания. Наклонный тип отличается от нормального только тем, что имеет некоторый постоянный наклон, не изменяющий начертания нормальной формы шрифта. Такой стиль чаще всего используется в сочетании с рублеными шрифтами (sans-serif). Благодаря этим определениям слегка наклоненное нормальное начертание шрифта теперь уже не будет спутано с наклонным начертанием, а нормальное греческое начертание - с курсивным.
Варианты
Вариант шрифта указывает, будут ли строчные символы текста отображаться с использованием обычных глифов или глифов капители. Каждый конкретный шрифт может содержать либо только обычные глифы, либо только глифы капители, либо и те, и другие. Это свойство используется для запроса необходимого шрифта и необходимого типа глифов, если шрифт содержит оба варианта глифов.
Вес
Вес шрифта определяет, насколько глифы, используемые для отображения текста, темнее или светлее других шрифтов той же гарнитуры.
Масштабирование
Масштабирование шрифта определяет, насколько глифы, используемые для отображения текста, сжаты или растянуты относительно других шрифтов той же гарнитуры.
Размер
Размер шрифта определяет величину шрифта от одной базовой линии до другой при наборе без шпонов (в терминах CSS это имеет место, если свойства 'font-size' и 'line-height' принимают одинаковые значения).

Для всех свойств, кроме 'font-size', масштаб единиц измерения длины 'em' и 'ex' определяется относительно размера шрифта текущего элемента. Для свойства 'font-size' масштаб этих единиц измерения определяется относительно размера шрифта родительского элемента. Дополнительную информацию можно получить в разделе о единицах измерения длины.

В CSS свойства шрифтов используются для задания желаемого стиля отображения текста документа. Напротив, дескрипторы шрифтов используются для описания характеристик шрифтов, нацеленного на выбор шрифта, подходящего для создания желаемого стиля отображения. Информацию о классификации шрифтов можно найти в разделе, посвященном дескрипторам шрифтов.

15.2.2 Гарнитура шрифта: свойство 'font-family'

'font-family'
Значение: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit
Начальное значение: зависит от пользовательского агента
Область применения: все элементы
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

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

Пример(ы):

Например, для текста, содержащего английские слова и математические символы, может потребоваться набор из двух шрифтов, один из которых содержит латинские буквы и цифры, а другой - математические символы. Приведем пример набора шрифтов, соответствующий тексту, содержащему фразы из латинских и японских букв и математических символов:

 BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

Глифы, имеющиеся в шрифте "Baskerville" (который содержит только латинские символы), будут взяты из него, глифы для японских букв будут взяты из "Heisi Mincho W3", а глифы математических символов будут взяты из набора "Symbol". Все другие глифы будут взяты из общедоступной гарнитуры serif.

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

Существует два типа имен гарнитур шрифтов:

<имя-семейства>
Имя выбранной гарнитуры шрифтов. В предыдущем примере "Baskerville", "Heisi Mincho W3" и "Symbol" являются гарнитурами шрифтов. Имена гарнитур шрифтов, содержащие пробелы, должны заключаться в кавычки. Если кавычки не используются, то пробелы, расположенные до и после имени шрифта, игнорируются, а любая последовательность пробелов, фигурирующая непосредственно внутри самого имени шрифта, преобразуется в один пробел.
<общее-семейство>
Существуют следующие общедоступные гарнитуры шрифтов: антиква ('serif'), гротески ('sans-serif'), курсивы ('cursive'), аллегорические ('fantasy') и моноширнные ('monospace') шрифты. Описания этих гарнитур можно найти в разделе об общедоступных гарнитурах шрифтов. Имена общедоступных гарнитур шрифтов являются ключевыми словами, и поэтому не должны заключаться в кавычки.

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

Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Тестирование шрифта</TITLE>
    <STYLE type="text/css">
      BODY { font-family: "new century schoolbook", serif }
    </STYLE>
  </HEAD>
  <BODY>
   <H1 style="font-family: 'My own font', fantasy">Test</H1>
    <P>Что случилось, Док?
  </BODY>
</HTML>

Пример(ы):

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

*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif }
*:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif }

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

15.2.3 Стиль шрифта: свойства 'font-style', 'font-variant', 'font-weight' и 'font-stretch'

'font-style'
Значение: normal | italic | oblique | inherit
Начальное значение: normal
Область применения: все элементы
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

Свойство 'font-style' определяет выбор нормального (прямого ("roman" или "upright")), курсивного или наклонного типа начертания в рамках одной гарнитуры шрифтов. Принимаемые им значения имеют следующий смысл:

normal
Задает шрифт, который в базе данных шрифтов агента пользователя описывается как нормальный ('normal').
oblique
Задает шрифт, который в базе данных шрифтов агента пользователя описывается как наклонный ('oblique'). Шрифты, содержащие в своих именах слова 'Oblique', 'Slanted' или 'Incline' в базе данных шрифтов обычно обозначаются одним словом 'oblique'. Шрифт, обозначенный в базе шрифтов агента пользователя словом 'oblique', может быть сгенерирован путем обычного наклона нормального шрифта.
italic
Задает шрифт, который в базе данных шрифтов агента пользователя описывается как курсивный ('italic') или наклонный ('oblique'), если курсивный тип начертания недоступен. Шрифты, содержащие в своих именах слова Italic, Cursive или Kursiv, обычно обозначаются одним словом 'italic'.

Пример(ы):

В этом примере текст элементов H1, H2 и H3 будет отображаться курсивом. Однако выделенный (с помощью элемента EM) текст в элементе H1 будет отображаться нормальным шрифтом.

 H1, H2, H3 { font-style: italic } H1 EM { font-style: normal }
'font-variant'
Значение: normal | small-caps | inherit
Начальное значение: normal
Область применения: все элементы
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

В шрифтах, обладающих капителью, глифы для строчных букв выглядят аналогично глифам прописных, но имеют при этом меньший размер и немного другие пропорции. Свойство 'font-variant' определяет выбор варианта шрифта, обладающего двумя наборами знаков (т.е. двумя регистрами, как в латинице). Это свойство не имеет видимого эффекта для шрифтов, обладающих одним набором знаков (т.е. одним регистром, как в большинстве мировых систем письменности). Принимаемые им значения имеют следующий смысл:

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

Пример(ы):

В следующем примере элемент H3 отображается капителью, а выделенные (с помощью элемента EM) слова отображаются наклонной капителью:

     H3 { font-variant: small-caps }
     EM { font-style: oblique }

Поскольку данное свойство приводит к преобразованию всех букв текста в заглавные, то к нему применимы все замечания относительно свойства 'text-transform'.

'font-weight'
Значение: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Начальное значение: normal
Применяется: все элементы
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

Свойство 'font-weight' задает вес шрифта. Принимаемые им значения имеют следующий смысл:

от 100 до 900
Эти значения представляют упорядоченную последовательность, каждое число в которой обозначает вес в порядке его возрастания.
normal
Аналогично '400'.
bold
Аналогично '700'.
bolder
Задает вес шрифта, превышающий унаследованный им вес. Если такого веса не существует, то происходит простое увеличение численного значения веса (а шрифт не изменяется). Если унаследованное значение равно '900', то результирующим значением будет также '900'.
lighter
Задает вес шрифта меньше унаследованного им веса. Если такого веса не существует, происходит простое уменьшение численного значения веса (а шрифт не изменяется). Если унаследованное значение равно '100', то результирующим значением будет также '100'.

Пример(s):

P { font-weight: normal }        /* 400 */
H1 { font-weight: 700 }          /* жирный */
BODY { font-weight: 400 }
STRONG { font-weight: bolder }   /* 500, если такое значение доступно */

Дочерние элементы наследуют вычисляемое значение веса.

'font-stretch'
Значение: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
Начальное значение: normal
Область применения: все элементы
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

С использованием свойства 'font-stretch' можно осуществить выбор нормального, сжатого или разреженного начертания из гарнитуры шрифтов. Абсолютные значения, соответствующие ключевым словам, упорядочены следующим образом, начиная с самого узкого типа начертания и заканчивая самым широким:

  1. ultra-condensed
  2. extra-condensed
  3. condensed
  4. semi-condensed
  5. normal
  6. semi-expanded
  7. expanded
  8. extra-expanded
  9. ultra-expanded

Относительное ключевое слово 'wider' задает значение, превосходящее наследуемое значение (если последнее не равно 'ultra-expanded'). Относительное ключевое слово 'narrower' задает значение, которое меньше наследуемого значения (если последнее не равно 'ultra-condensed').

15.2.4 Размер шрифта: свойства 'font-size' и 'font-size-adjust'

'font-size'
Значение: <absolute-size> | <relative-size> | <length> | <percentage> | inherit
Начальное значение: medium
Область применения: все элементы
Наследование: да, наследуется вычисляемое значение
Процентное задание: относительно размера шрифта родительского элемента
Устройства: визуального форматирования

Это свойство описывает размер шрифта. Принимаемые им значения имеют следующий смысл:

<absolute-size>
Ключевое слово <absolute-size> указывает на элемент в таблице размеров шрифтов, которая вычисляется и хранится пользовательским агентом. Возможные значения:

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

Применительно к компьютерным мониторам при переходе между двумя соседними индексами рекомендуется использовать масштабирующий коэффициент, равный 1.2. Если размер 'medium' шрифта равен 12пт, то размер 'large' должен быть равен 14.4пт. Для разных устройств требуются разные масштабирующие коэффициенты. Кроме того, при вычислении элементов таблицы пользовательский агент должен учитывать качество и доступность шрифтов. Эта таблица может изменяться в зависимости от гарнитуры шрифтов.

Примечание. В CSS1 изначально было предложно при переходе между двумя соседними индексами использовать масштабирующий коэффициент, равный 1.5. Затем на практике пользователи доказали, что это значение слишком велико.

<relative-size>
Интерпретация ключевого слова <relative-size> осуществляется, исходя из содержимого таблицы размеров шрифтов и размера шрифта родительского элемента. Возможные значения:

[ larger | smaller ]

Например, если размер шрифта родительского элемента равен 'medium', то при значении 'larger' размер шрифта текущего элемента будет равен 'large'. Если размер шрифта родительского элемента не совпадает ни с одним элементом таблицы, то пользовательский агент может интерполировать его значение в интервале между двумя соседними элементами таблицы или округлить его до значения ближайшего элемента. Если числовое значение выходит за границы, устанавливаемые ключевыми словами, то может оказаться, что пользовательскому агенту потребуется осуществить его экстраполяцию.

<length>
Данное значение определяет абсолютный размер шрифта (который не зависит от таблицы шрифтов пользовательского агента). Использование отрицательных значений не допускается.
<percentage>
Процентное соотношение определяет абсолютный размер шрифта относительно размера шрифта родительского элемента. Использование процентных соотношений или значений, пропорциональных кегельной шпации ('em'), позволяет увеличить отказоустойчивость и иерархичность таблиц стилей.

Фактическое значение этого свойства может отличаться от вычисляемого значения из-за числовых поправок, привносимых свойством 'font-size-adjust', и недоступности определенных размеров шрифтов.

Дочерние элементы наследуют вычисляемое значение свойства 'font-size' (в противном случае осуществится наложение значения свойства 'font-size-adjust').

Пример(ы):

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
'font-size-adjust'
Значение: <number> | none | inherit
Начальное значение: none
Область применения: все элементы
Наследование: да
Процентное задание значений: нет
Ассоциированные устройства: устройства визуального форматирования

Субъективно воспринимаемые размер и различимость шрифтов, содержащих два набора знаков, зависят от значения свойства 'font-size' намного меньше, чем от значения свойства 'x-height', или, говоря на практическом языке, от отношения этих двух значений, называемого перспективой (равной отношению размера шрифта к высоте его строчных символов). Чем выше значение перспективы, тем больше вероятность того, что шрифт меньшего размера будет хорошо различимым. И наоборот, чем меньше значение перспективы шрифта, тем быстрее (по сравнению со шрифтами с большим значением перспективы) падает различимость букв при уменьшении его размера ниже заданного порогового значения. Непосредственная подстановка шрифтов, основанная только на их размерах, может привести к понижению различимости их символов.

Например, значение перспективы широко известного шрифта Verdana равно 0.58: если размер шрифта Verdana равен 100 единицам, то высота его строчных букв равна при этом 58 единицам. Для сравнения, значение перспективы шрифта Times New Roman равно 0.46. Таким образом, при небольших размерах различимость символов шрифта Verdana будет выше, чем символов шрифта Times New Roman. И наоборот, шрифт Verdana часто выглядит 'слишком большим', если он подставляется вместо шрифта Times New Roman при сохранении его размеров постоянными.

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

none
Высота строчных букв шрифта не сохраняется.
<number>
Определяет значение перспективы первого выбранного шрифта. Масштабирующий коэффициент для доступных шрифтов вычисляется по следующей формуле:
  y(a/a') = c

где:

y = значение свойства 'font-size' первого выбранного шрифта
a' = значение перспективы доступного шрифта
c = значение свойства 'font-size', которое будет использовано для доступного шрифта

Пример(ы):

Например, если шрифт Verdana размером в 14 пикселей (и значением перспективы 0.58) недоступен, а значение перспективы имеющегося шрифта равно 0.46, то подставляемый шрифт будет иметь размер, равный 14*(0.58/0.46) = 17.65 пикселям.

Корректировка размера шрифта производится при вычислении фактического значения свойства 'font-size'. Т.к. наследование происходит по вычисляемым значениям, то дочерние элементы будут наследовать некорректированные значения.

На первом представленном ниже рисунке показано несколько типов шрифтов одинакового размера (11 пунктов при разрешении 72 пункта на дюйм) вместе со своими значениями перспективы. Обратите внимание, что шрифты, имеющие более высокие значения перспективы, выглядят крупнее, чем шрифты с меньшими значениями перспективы. Шрифты с очень маленькими значениями перспективы отображаются не совсем четко.

Сравнение шрифтов, размер которых равен 11 пунктам

На следующем рисунке показаны результаты использования свойства 'font-size-adjust', когда применяется масштабирующий коэффициент и в качестве "первого выбранного" выступает шрифт Verdana. После коррекции видимые размеры шрифтов кажутся не изменившимися, хотя фактические размеры ('em') изменились более чем на 100%. Обратите внимание, что действие свойства 'font-size-adjust' направлено к сохранению горизонтальных размеров строк.

Сравнение корректируемых шрифтов

15.2.5 Свойство 'font' стенографического типа

'font'
Значение: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Начальное значение: см. каждое свойство в отдельности
Область применения: все элементы
Наследование: да
Процентное задание значений: допускается в свойствах 'font-size' и 'line-height'
Ассоциированные устройства: устройства визуального форматирования

За исключением некоторых аспектов, которые будут описаны ниже, свойство 'font', являясь стенографическим, используется для определения значений свойств 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' и 'font-family' в одном месте таблицы стилей. Синтаксис этого свойства основан на традиционной типографической сокращенной записи свойств шрифтов.

Всем свойствам шрифтов, включая те, которые были описаны в предыдущем абзаце, а также свойства 'font-stretch' и 'font-size-adjust', сначала присваиваются их начальные значения. Затем те свойства, значения которых в сокращенной записи свойства 'font' заданы явно, принимают эти значения. Для определения допустимых и начальных значений следует обратиться к вышеизложенному описанию свойств. Двусторонняя совместимость уровней CSS приводит к тому, что свойство сокращенной записи 'font' не позволяет присваивать свойствам 'font-stretch' и 'font-size-adjust' никаких других значений кроме начальных. Значения этих свойств можно задать индивидуально.

Пример(ы):

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

Процентное соотношение ('80%'), используемое во втором правиле для определения размера шрифта, задается относительно размера шрифта родительского элемента. Процентное соотношение ('110%'), используемое в третьем правиле для определения высоты строки, задается относительно размера шрифта самого элемента.

В первых трех правилах значения свойств 'font-variant' и 'font-weight' не задаются явно, поэтому они принимают свои начальные значения ('normal'). Обратите внимание, что название "new century schoolbook" гарнитуры шрифтов, содержащее пробелы, заключено в кавычки. В четвертом правиле свойству 'font-weight' присваивается значение 'bold', свойству 'font-style' - значение 'italic', а свойству 'font-variant' явно присваивается значение 'normal'.

В пятом правиле определяются значения свойств 'font-variant' ('small-caps'), 'font-size' (120% от размера шрифта родительского элемента), 'line-height' (120% от размера шрифта) и 'font-family' ('fantasy'). Таким образом, в качестве значения двух оставшихся свойств 'font-style' и 'font-weight' используется ключевое слово 'normal'.

В шестом правиле определяются значения свойств 'font-style', 'font-size' и 'font-family'. Другим свойствам шрифтов присваиваются их начальные значения. Затем в этом правиле свойству 'font-stretch' присваивается значение 'condensed', т.к. это значение не может быть присвоено данному свойству с помощью свойства сокращенной записи 'font'.

Следующие значения относятся к системным шрифтам:

caption
Шрифт, используемый для заголовков элементов управления (кнопок, выпадающих меню и т.д.).
icon
Шрифт, используемый для обозначения пиктограмм.
menu
Шрифт, используемый в меню (например, в выпадающих меню и списках меню).
message-box
Шрифт, используемый в диалоговых окнах.
small-caption
Шрифт, используемый для обозначения небольших элементов управления.
status-bar
Шрифт, используемый в панелях, описывающих статус окон.

Параметры системных шрифтов могут быть описаны только все целиком, т.е. гарнитура шрифтов, размер, насыщенность, стиль и прочие параметры определяются одновременно. При желании эти значения могут быть затем изменены отдельно. Если на данной платформе нет шрифта с указанными характеристиками, то пользовательский агент должен либо выполнить адекватную подстановку (например, шрифт 'caption' с меньшим размером букв может быть использован для шрифта 'smallcaption'), либо подставить свой шрифт, используемый им по умолчанию. Как и в случае обычных шрифтов, если операционная система не предоставляет пользователю доступа к отдельному свойству системных шрифтов, то ему присваивается его начальное значение.

По этой причине рассматриваемое свойство является свойством "почти" сокращенной записи: самого по себе свойства 'font-family' недостаточно для описания системных шрифтов, которые могут быть заданы только с использованием свойства 'font', предоставляющего разработчикам возможности, не сводящиеся к простому суммированию включенных в него свойств. Тем не менее, значения отдельных свойств системных шрифтов, таких, как 'font-weight', могут по-прежнему изменяться в индивидуальном порядке.

Пример(ы):

BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
BUTTON P { font: menu }
BUTTON P EM { font-weight: bolder }

Если бы в некоторой системе для выпадающих меню был задан, например, шрифт Charcoal размером в 9 пунктов и насыщенностью, равной 600, то элементы P, являющиеся дочерними элементами элемента BUTTON, отображались бы так, как если бы действовало следующее правило:

BUTTON P { font: 600 9pt Charcoal }

Т.к. сокращенная запись 'font' возвращает начальное значение всем свойствам, для которых значение не было задано явно, то равносильным этой записи является действие следующего объявления:

BUTTON P {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9pt;
  line-height: normal;
  font-family: Charcoal
}

15.2.6 Общедоступные гарнитуры шрифтов

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

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

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

Антиква

Глифы антиквенных шрифтов в соответствии с тем, как этот термин используется в CSS, имеют концевые штрихи, расширяющиеся и сужающиеся окончания, а также явно засекаемые концы, включая брусковые засечки. Символы антиквенных шрифтов обычно отстоят друг от друга на одинаковом расстоянии. В антикве различие между толстыми и тонкими штрихами обычно выражено намного сильнее, чем в гротесках. В CSS термин 'serif' ('антиква') используется для обращения к шрифтам любого начертания в то время, как для некоторых частных типов начертаний могут существовать свои собственные имена, такие, как Mincho (японский), Sung или Song (китайский), Totum или Kodig (корейский). Любой шрифт, обозначенный одним из этих терминов, может использоваться в качестве представителя общедоступной гарнитуры 'антиква'.

Примерами шрифтов, подходящих под это описание, могут быть:

Латинские шрифты | Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
Греческие шрифты | Bitstream Cyberbit
Кириллица | Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
Еврейские шрифты | New Peninim, Raanana, Bitstream Cyberbit
Японские шрифты | Ryumin Light-KL, Kyokasho ICA, Futo Min A101
Арабские шрифты | Bitstream Cyberbit
Шрифты cherokee | Lo Cicero Cherokee

Гротески

Глифы в гротесках (рубленных шрифтах) в соответствии с тем, как этот термин используется в CSS, имеют простые окончания без каких-либо расширений, штрихов или других орнаментов. Символы рубленных шрифтов обычно отстоят друг от друга на одинаковом расстоянии. В гротесках различие между толстыми и тонкими штрихами обычно выражено намного слабее, чем в антикве. В CSS термин 'sans-serif' ('гротески') используется для обращения к шрифтам любого начертания в то время, как для некоторых частных типов начертаний могут существовать свои собственные имена, такие, как Gothic (японский), Kai (китайский) или Pathang (корейский). Любой шрифт, обозначенный одним из этих терминов, может использоваться в качестве представителя общедоступной гарнитуры 'гротески'.

Примерами шрифтов, подходящих под это описание, могут быть:

Латинские шрифты | MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
Греческие шрифты | Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Кириллица | Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
Еврейские шрифты | Arial Hebrew, MS Tahoma
Японские шрифты | Shin Go, Heisei Kaku Gothic W5
Арабские шрифты | MS Tahoma

Курсивы

Глифы в курсивных шрифтах в соответствии с тем, как этот термин используется в CSS, имеют либо соединяющие штрихи, либо другие отличительные элементы курсива, кроме тех, которые присущи наклонным шрифтам. Глифы курсива частично или полностью соединены друг с другом, в результате чего они напоминают больше рукописный, нежели печатный текст. Некоторые шрифты, например, арабские, почти всегда отображаются курсивом. В CSS термин 'cursive' ('курсив') используется для обращения к шрифтам любого начертания, несмотря на то, что другие названия, такие, как Chancery, Brush, Swing и Script также используются в названиях шрифтов данной гарнитуры.

Примерами шрифтов, подходящих под это описание, могут быть:

Латинские шрифты | Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
Кириллица | ER Architekt
Еврейские шрифты | Corsiva
Арабские шрифты | DecoType Naskh, Monotype Urdu 507

Аллегорические шрифты

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

Латинские шрифты Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

Моноширные шрифты

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

Примерами шрифтов, подходящих под это описание, могут быть:
Латинские шрифты | Courier, MS Courier New, Prestige, Everson Mono
Греческие шрифты | MS Courier New, Everson Mono
Кириллица | ER Kurier, Everson Mono
Японские шрифты | Osaka Monospaced
Шрифты Cherokee | Everson Mono

15.3 Выбор шрифта

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

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

Сопоставление по имени шрифта
В этом случае пользовательский агент использует имеющийся у него доступный шрифт, принадлежащий той же самой гарнитуре, которой принадлежит запрашиваемый шрифт. (Следует заметить, что при этом внешний вид и метрические данные шрифтов не обязательно должны совпадать, если шрифт, используемый автором документа, и шрифт, доступный в системе клиента, имеют различных производителей.) Информация, по которой осуществляется сопоставление, полностью заимствуется из определяемых в CSS свойств шрифта, включая название его гарнитуры. Этот метод был единственным, который использовался в CSS1.
Интеллектуальное сопоставление шрифтов
В этом случае пользовательский агент использует существующий у него доступный шрифт, который по внешнему виду больше всего похож на запрашиваемый шрифт. (Следует заметить, что точного совпадения метрических данных при этом не требуется.) Информация, используемая при сопоставлении, включает в себя данные о типе шрифта (буквенный или символьный), структуре засечек, насыщенности, высоте заглавных и строчных букв, нижних и верхних выступающих элементах, наклоне и прочих его характеристиках.
Синтез шрифтов
В этом случае пользовательский агент создает шрифт, схожесть которого с запрашиваемым шрифтом обусловлена не только его внешним видом, но и метрическими данными. Для синтеза привлекается информация, используемая при сопоставлении, и обычно требуется, чтобы значения параметров при этом задавались точнее, чем это принято в некоторых схемах сопоставления. Если необходимо сохранить стиль отображения заданного шрифта, то в процессе синтеза, в частности, могут понадобиться точные сведения о ширине и местоположении символа, а также о подставляемом вместо него глифе.
загрузка шрифтов
И наконец, пользовательский агент может загрузить шрифт из глобальной сети. Это происходит аналогично процессу извлечения графических и звуковых файлов или апплетов из глобальной сети для их отображения в текущем документе, поэтому может сопровождаться небольшой задержкой при отображении страницы.

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

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

15.3.1 Описания шрифтов и правило @font-face

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

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

Можно выделить три типа дескрипторов шрифтов:

  1. дескрипторы, устанавливающие связь между использованием конкретного шрифта в CSS и его описанием (имена этих дескрипторов совпадают с названиями соответствующих свойств шрифтов в CSS);
  2. URI, устанавливающие местоположение данных о шрифте;
  3. дескрипторы, устанавливающие дополнительные характеристики шрифта для обеспечения связи между его описанием и данными об этом шрифте.

Все дескрипторы определяются с использованием правила at @font-face. Общая форма его записи имеет вид:

@font-face { <font-description> }

где <font-description> имеет следующую форму:

дескриптор: значение;
дескриптор: значение;
[...]
дескриптор: значение;

Каждое правило @font-face явным или неявным образом определяет значение для каждого дескриптора шрифта. Дескрипторы, значения которых в этом правиле не были заданы явно, принимают свои начальные значения, определенные в данной спецификации для каждого дескриптора. Дескрипторы используются исключительно в контексте правила @font-face, в котором они и определяются, и не применяются к элементам языка документа. Более того, не существует точного представления о том, к каким элементам могут применяться дескрипторы, и наследуются ли их значения дочерними элементами.

Доступные дескрипторы шрифтов описаны в следующих разделах данной спецификации.

В следующем примере шрифт 'Robson Celtic' определяется и вызывается в рамках таблицы стилей, содержащейся в HTML-документе.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Тестирование шрифтов</TITLE>
    <STYLE TYPE="text/css" MEDIA="screen, print">
      @font-face {
        font-family: "Robson Celtic";
        src: url("http://site/fonts/rob-celt")
      }
      H1 { font-family: "Robson Celtic", serif }
    </STYLE>
  </HEAD>
  <BODY>
    <H1> Этот заголовок отображается шрифтом Robson Celtic</H1>
  </BODY>
</HTML>

Таблица стилей (в элементе STYLE) содержит правило CSS, которое устанавливает для всех элементов H1 гарнитуру шрифтов 'Robson Celtic'.

Приложение, использующее CSS1, выполнит в системе пользователя поиск шрифта, название гарнитуры которого и другие свойства соответствуют 'Robson Celtic'. Если такой шрифт не будет найден, то будет использован подстановочный антиквенный шрифт (который по определению обязательно существует), определенный пользовательским агентом.

Пользовательский агент, поддерживающий CSS2, в первую очередь проверяет правила @font-face на наличие описания шрифта 'Robson Celtic'. В данном примере такое правило имеется. Несмотря на то, что это правило содержит не так много данных о шрифте, оно содержит URI, который позволит загрузить его для последующего отображения документа. Загружаемые шрифты не должны становиться доступными для других приложений. Если ни одного подходящего правила @font-face не найдется, то будет использована стратегия, реализуемая пользовательским агентом, поддерживающим CSS1.

Заметьте, что если бы шрифт 'Robson Celtic' был установлен в системе клиента, то пользовательский агент добавил бы соответствующую запись в базу данных шрифтов, как это описано в разделе "Алгоритм сопоставления шрифтов". В представленном выше примере установленная копия была бы выбрана раньше, чем загружаемый шрифт.

В реализациях CSS1, не поддерживающих правило @font-face, все, что содержится между открывающей и закрывающей фигурными скобками тела данного правила, игнорируется. Это правило at отвечает требованиям совместимости с будущими версиями грамматического анализатора CSS. Поэтому грамматические анализаторы могут спокойно игнорировать это правило, не вызывая при этом никаких ошибок.

Хранение дескрипторов отдельно от данных о шрифтах предоставляет определенные преимущества, которые оказываются гораздо шире, чем просто возможность выбора и/или подстановки шрифтов. Требования, касающиеся защищенности и вопросов воспроизведения, для дескрипторов шрифтов могут быть гораздо менее строгими, чем для всего массива данных о шрифтах. Поэтому не исключено, что описание шрифта может устанавливаться локально или, в крайнем случае, храниться в локальном кэше, если оно используется в таблице стилей, к которой осуществляются частые обращения. Благодаря этому для каждого шрифта достаточно только однажды обратиться к его полному описанию, хранящемуся в сети.

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

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

15.3.2 Дескрипторы, используемые для выбора шрифта: 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' и 'font-size'

Рассматриваемые дескрипторы имеют имена, совпадающие с именами соответствующих свойств шрифтов, определенных в CSS2, и принимают одно или несколько (разделенных друг с другом запятой) значений.

Если не делается явных оговорок, то в списке принимаемых дескриптором значений фигурируют значения, определенные для соответствующего свойства CSS2. Если в списке содержится только одно значение, то оно выступает в качестве объекта, по которому осуществляется сопоставление. В случае многоэлементного списка сопоставление осуществляется по всем значениям, содержащимся в нем. Если в правиле @font-face некоторый дескриптор не упоминается, то ему присваивается его начальное значение.

'font-family' (Дескриптор)
Значение: [ <family-name> | <generic-family> ] [, [<family-name> | <generic-family> ]]*
Начальное значение: зависит от агента пользователя
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор имени гарнитуры шрифта. Его значения совпадают со значениями свойства 'font-family'.

'font-style' (Дескриптор)
Значение: all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]*
Начальное значение: all
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор стиля шрифта. Его значения совпадают со значениями свойства 'font-style', за исключением того, что в нем разрешено использование списка разделенных запятыми значений.

'font-variant' (Дескриптор)
Значение: [normal | small-caps] [,[normal | small-caps]]*
Начальное значение: normal
Ассоциированные устройства: устройства визуального форматирования

Этот дескриптор CSS определяет, является ли данное начертание капителью. Его значения совпадают со значениями свойства 'font-variant', за исключением того, что в нем разрешено использование списка разделенных запятыми значений.

Примечание. Для обеспечения лучшей совместимости латинских и кириллических шрифтов два типа начертания pryamoĭ и Kursiv последнего могут быть помечены дескрипторами 'font-variant' и 'font-style', принимающими значения 'small-caps' и 'italic', соответственно.

'font-weight' (Дескриптор)
Значение: all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]*
Начальное значение: all
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор насыщенности шрифта, определяемой относительно шрифтов той же гарнитуры. Его значения совпадают со значениями свойства 'font-weight', за исключением следующего:

  1. запрещается использование относительных ключевых слов (bolder, lighter);
  2. для шрифтов, имеющих несколько градаций насыщенности, разрешается использование списка разделенных запятыми значений;
  3. разрешается использование дополнительного ключевого слова 'all', которое означает, что этот шрифт либо сопоставляется всем возможным значениям насыщенности, либо отображается с использованием нескольких градаций насыщенности, либо отображается с использованием только одной градации насыщенности.
'font-stretch' (Дескриптор)
Значение: all | [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded] ]*
Начальное значение: normal
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор CSS, определяющий степень сжатия или растяжения данного типа начертания относительно других шрифтов той же гарнитуры. Его значения совпадают со значениями свойства 'font-stretch', за исключением следующего:

  • запрещается использование относительных ключевых слов (wider, narrower);
  • допускается использование списка разделенный запятыми значений;
  • допускается использование ключевого слова 'all'.
'font-size' (Дескриптор)
Значение: all | <length> [, <length>]*
Начальное значение: all
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор возможных размеров данного шрифта. В отличие от свойства 'font-size', позволяющего использовать как относительные, так и абсолютные единицы измерения длины, в значениях этого дескриптора разрешается использовать только абсолютные единицы. Допускается список разделенных запятыми абсолютных значений длины.

Начальное значение 'all' подходит для большинства масштабируемых шрифтов. Поэтому данный дескриптор прежде всего предназначен для использования в правиле @font-face для растровых шрифтов или масштабируемых шрифтов, разработанных для растрового представления в ограниченном диапазоне значений своих размеров.

15.3.3 Дескрипторы, используемые для оценки данных о шрифте: 'unicode-range'

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

'unicode-range' (Дескриптор)
Значение: <urange> [, <urange>]*
Начальное значение: U+0-7FFFFFFF
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор набора символов из стандарта ISO 10646, содержащихся в данном шрифте.

Значения <urange> задаются с помощью префикса "U+", следом за которым выписывается шестнадцатеричное число, которое является кодом символа в системе ISO 10646 ([ISO10646]).

Например, U+05D1 кодирует символ 'Еврейская буква bet' в системе ISO 10646. К значениям, выходящим за рамки основной многоязыковой базы (Basic Multilingual Plane), спереди добавляется дополнительное шестнадцатеричное число, соответствующие уровню базы. Например U+A1234 представляет символ в базе десятого уровня с шестнадцатеричным кодом, равным 1234. Во время написания за пределами основной многоязыковой базы не было определено ни одного символа. Использование нулей вначале кода (например, 0000004D) допускается, но не желательно.

Начальное значение данного дескриптора покрывает не только всю основную многоязыковую базу, выраженную значением U+0-FFFF, но и весь набор символов из ISO 10646. Таким образом, начальное значение указывает на то, что шрифт может содержать глифы для любого символа из ISO 10646. Присваиваемое дескриптору 'unicode-range' значение задает ограниченный набор символов, для которых в шрифте найдется соответствующий глиф, и тем самым предоставляет информацию, позволяющую увеличить эффективность поиска глифов. При этом отпадает всякая необходимость выполнения поиска глифов для символов, находящихся за пределами указанного диапазона.

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

unicode-range: U+20A7
нет универсальных символов - указывается на код одного символа (испанской денежной единицы, писеты)
unicode-range: U+215?
один универсальный символ - охватываются символы (дроби), код которых лежит в диапазоне от 2150 до 215F
unicode-range: U+00??
два универсальных символа - охватываются символы (Latin-1), код которых лежит в диапазоне от 0000 до 00FF
unicode-range: U+E??
два универсальных символа - охватываются символы (шрифт Lao), код которых лежит в диапазоне от 0E00 до 0EFF

В этом формате для определения больших диапазонов можно использовать пару чисел, объединенных с помощью тире. Например:

unicode-range: U+AC00-D7FF
охватывается диапазон от AC00 до D7FF (область символов Hangul Syllables)

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

unicode-range: U+370-3FF, U+1F??
охватывается диапазон от 0370 до 03FF (современный греческий язык) и от 1F00 до 1FFF (старинный политонический греческий язык).
unicode-range: U+3000-303F, U+3100-312F, U+32??, U+33??, U+4E00-9FFF, U+F9000-FAFF, U+FE30-FE4F
Если исходить из количества требуемых пояснений, то эта запись представляет один из самых наихудших случаев, в котором с большой точностью указано, что этот (чрезмерно большой) шрифт содержит исключительно китайские символы (не включает никаких символов, происходящих из японского или корейского языка), принадлежащие стандарту ISO 10646. Диапазоном включает значения, заключенные в интервале от 3000 до 303F (китайско-корейско-японские символы и знаки пунктуации), от 3100 до 312F (Bopomofo), от 3200 до 32FF (китайско-корейско-японские вложенные буквы и обозначения месяцев), от 3300 до 33FF (область китайско-корейско-японской совместимости), от 4E00 до 9FFF (обобщенные китайско-корейско-японские идеограммы), от F900 до FAFF (совместимые китайско-корейско-японские идеограммы) и от FE30 до FE4F (совместимые китайско-корейско-японские формы).

Более простое представление типичного китайского шрифта задается следующим диапазоном:

unicode-range: U+3000-33FF, U+4E00-9FFF

unicode-range: U+11E00-121FF
Этот шрифт покрывает область, которую предлагается использовать для пиктограмм ацтеков, охватывая диапазон от 1E00 до 21FF в базе первого уровня.
unicode-range: U+1A00-1A1F
Этот шрифт покрывает область, которую предлагается использовать для одного из Ирландских диалектов (Ogham), охватывая диапазон от 1A00 до 1A1F

15.3.4 Дескриптор единиц измерения: 'units-per-em'

Следующий дескриптор задает число "единиц измерения", приходящихся на одну кегельную шпацию. Впоследствии эти единицы могут быть использованы другими дескрипторами для определения различных поперечных размеров. Таким образом, дескриптор 'units-per-em' нужен только тогда, когда он используется другими дескрипторами.

'units-per-em' (Дескриптор)
Значение: <number>
Начальное значение: не определено
Ассоциированные устройства: устройства визуального форматирования

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

15.3.5 Дескриптор, используемые для обращения: 'src'

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

'src' (Дескриптор)
Значение: [ <uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri> [format(<string> [, <string>]*)] | <font-face-name> ]*
Начальное значение: не определено
Ассоциированные устройства: устройства визуального форматирования

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

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

Вспомогательная информация о формате содержит список разделенных запятыми описаний хорошо известных форматов шрифтов. Пользовательский агент распознает названия поддерживаемых им форматов шрифтов и не осуществляет загрузку тех форматов, которые он не распознает.

Ниже приведен определенный в рамках данной спецификации исходный список описаний форматов, которые могут быть реализованы на различных платформах:

Описание | Формат шрифта | Примеры типичных расширений
"truedoc-pfr" | TrueDoc™ Portable Font Resource | .pfr
"embedded-opentype" | Embedded OpenType | .eot
"type-1" | PostScript™ Type 1 | .pfb, .pfa
"truetype" | TrueType | .ttf
"opentype" | OpenType, including TrueType Open | .ttf
"truetype-gx" | TrueType with GX extensions
"speedo" | Speedo
"intellifont" | Intellifont

Подобно всякому URI, используемому в CSS, рассматриваемый URI может быть относительным. В этом случае он доопределяется относительно местоположения таблицы стилей, содержащей правило @font-face.

В качестве полного имени локально установленного шрифта выступает локально определенное значение <font-face-name>. Полным именем шрифта является имя шрифта в том виде, в котором оно задано в операционной системе, в котором оно вероятнее всего будет использоваться в таблицах стилей пользователя или разработчика, имеющего доступ к внутренней сети, а также в таблицах стилей, установленных в браузерах по умолчанию. Такие элементы оформления текста, как насыщенность, курсив и подчеркивание, часто используются для различения типов начертания шрифтов в пределах одной гарнитуры. Более подробную информацию о полных именах шрифтов можно найти ниже.

Запись <font-face-name> является полным именем шрифта, которое должно быть заключено в кавычки, т.к. оно может содержать любой символ, включая пробелы и знаки пунктуации, а также должно быть заключено в "local(" и ")".

Пример(ы):

src: url("http://foo/bar")
полный URI без информации о доступных форматах шрифтов
src: local("BT Century 751 No. 2 Semi Bold Italic")
ссылка на определенный тип начертания локально установленного шрифта
src: url("../fonts/bar") format("truedoc-pfr")
относительный URI, указывающий на шрифт, доступный в формате TrueDoc
src: url("http://cgi-bin/bar?stuff") format("opentype", "intellifont")
полный URI, указывающий в данном случае на шрифт, который может представляться в двух различных форматах - OpenType и Intellifont
src: local("T-26 Typeka Mix"), url("http://site/magda-extra") format("type-1")
заданы два варианта: первый - локально установленный шрифт, и второй - загружаемый шрифт, доступный в формате Type 1.

Обращение к локально установленным шрифтам осуществляется посредством значения <font-face-name>. Не смотря на то, что имя начертания шрифта не является абсолютно уникальным также, как и абсолютно независимым от платформы и формата шрифта, оно, тем не менее, на данный момент предоставляет наилучший способ идентификации локально установленных данных о шрифтах. Использование этого имени может стать более корректным, если учитывать информацию об отображении символов в глифы. Последнее может быть достигнуто путем перечисления кодов символов из ISO 10646, для которых данный шрифт предоставляет соответствующие глифы (см. 'unicode-range').

15.3.6 Дескрипторы, используемые для сопоставления: 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent' и 'descent'

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

'panose-1' (Дескриптор)
Значение: [<integer>]{10}
Начальное значение: 0 0 0 0 0 0 0 0 0 0
Ассоциированные устройства: устройства звукового воспроизведения

Это дескриптор числа Panose-1. Он состоит из десяти разделенных пробелом десятичных целых чисел. В качестве значений данного дескриптора не допускается использовать списки, элементы которых разделены запятыми, т.к. система Panose-1 может проинтерпретировать его как диапазон значений, предназначенный для сопоставления. Начальным значением является совокупность нулей, каждый из которых означает возможность появления "любой" цифры на месте, отведенном для нее в PANOSE. Если используется это значение, то с числом Panose будет сопоставим любой шрифт. Для латинских шрифтов настоятельно рекомендуется использовать дескриптор Panose-1. Дополнительную информацию можно получить в Приложении В.

'stemv' (Дескриптор)
Значение: <number>
Начальное значение: не определено
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор ширины вертикального штамба шрифта. Если его значение не определено, то он не используется при осуществлении сопоставления. В противном случае наряду с ним должен использоваться дескриптор 'units-per-em'.

'stemh' (Дескриптор)
Значение: <number>
Начальное значение: не определено
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор ширины горизонтального штамба шрифта. Если его значение не определено, то он не используется при осуществлении сопоставления. В противном случае наряду с ним должен использоваться дескриптор 'units-per-em'.

'slope' (Дескриптор)
Значение: <number>
Начальное значение: 0
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор угла наклона вертикального штриха шрифта.

'cap-height' (Дескриптор)
Значение: <number>
Начальное значение: не определено
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор высоты глифов заглавных букв шрифта. Если его значение не определено, то он не используется при осуществлении сопоставления. В противном случае наряду с ним должен использоваться дескриптор 'units-per-em'.

'x-height' (Дескриптор)
Значение: <number>
Начальное значение: не определено
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор высоты глифов строчных букв шрифта. Если его значение не определено, то он не используется при осуществлении сопоставления. В противном случае наряду с ним должен использоваться дескриптор 'units-per-em'. Дескриптор 'x-height' рекомендуется использовать вместе со свойством 'font-size-adjust', т.к. при вычислении значения z для потенциально подходящих шрифтов требуется знание их размера и высоты их строчных букв.

'ascent' (Дескриптор)
Значение: <number>
Начальное значение: неопределено
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор максимальной высоты не акцентированных букв шрифта. Если его значение не определено, то он не используется при осуществлении сопоставления. В противном случае наряду с ним должен использоваться дескриптор 'units-per-em'.

'descent' (Дескриптор)
Значение: <number>
Начальное значение: не определено
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор максимальной глубины посадки не акцентированных букв шрифта. Если его значение не определено, то он не используется при осуществлении сопоставления. В противном случае наряду с ним должен использоваться дескриптор 'units-per-em'.

15.3.7 Дескрипторы, используемые для синтеза: 'widths', 'bbox' и 'definition-src'

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

Среди этих дескрипторов наиболее важными являются 'widths' и 'bbox', которые позволяют избежать повторного вывода текста после активизации запрошенного шрифта. Помимо этого, для улучшения внешнего вида синтезируемого шрифта могут быть использованы дескрипторы, применяемые при сопоставлении.

'widths' (Дескриптор)
Значения: [<urange> ]? [<number> ]+ [,[<urange> ]? <number> ]+]
Начальное значение: не определено
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор ширины глифов. В качестве его значения выступает список разделенных запятыми параметров <urange>, после каждого из которых следует одно или несколько значений ширины глифов. Если используется этот дескриптор, то наряду с ним должен использоваться дескриптор 'units-per-em'.

Если параметр <urange> пропущен, то предполагается, что в качестве его значения используется диапазон U+0-7FFFFFFF, который охватывает все символы и их глифы. Если задано недостаточное количество значений ширины глифов, то последнее значение в этом списке дублируется, чтобы охватить все их множество. Если задано слишком много значений, то лишние игнорируются.

Пример(ы):

Например:

значения ширины: U+4E00-4E1F 1736 1874 1692
значения ширины: U+1A?? 1490, U+215? 1473 1838 1927 1684 1356 1792
    1815 1848 1870 1492 1715 1745 1584 1992 1978 1770

В первом примере задан диапазон из 32 символов, заключенных в интервале от 4E00 до 4E1F. Глиф, соответствующий первому символу (4E00), имеет ширину, равную 1736. Второй глиф имеет ширину, равную 1874, а ширина третьего глифа равна 1692. Т.к. задано недостаточное количество значений, то последнее из них повторяется столько раз, сколько необходимо, чтобы охватить оставшуюся часть указанного диапазона. Во втором примере для диапазона из 256 глифов устанавливается одно значение ширины, равное 1490, а затем для каждого из следующих 16 глифов значения ширины задаются явно.

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

'bbox' (Дескриптор)
Значение: <number>, <number>, <number>, <number>
Начальное значение: не определено
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор максимального ограничивающего блока шрифта. Принимаемые им значения состоят из четырех разделенных запятыми чисел, которые в порядке своего следования определяют нижнюю левую координату x, нижнюю левую координату y, верхнюю правую координату x и верхнюю правую координату y ограничивающего блока всего шрифта.

'definition-src' (Дескриптор)
Значение: <uri>
Начальное значение: не определено
Ассоциированные устройства: устройства визуального форматирования

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

15.3.8 Дескрипторы, используемые для выравнивания: 'baseline', 'centerline', 'mathline' и 'topline'

Эти дескрипторы не являются обязательными и используются для выравнивания различных шрифтов относительно друг друга.

'baseline' (Дескиптор)
Значение: <number>
Начальное значение: 0
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор нижней базовой линии шрифта. Если ему присваивается ненулевое значение, отличное от используемого по умолчанию, то наряду с ним должен использоваться дескриптор 'units-per-em'.

'centerline' (Дескриптор)
Значение: <number>
Начальное значение: не определено
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор центральной базовой линии шрифта. Если его значение не определено, то в качестве него пользовательский агент может использовать различные эвристики, такие, например, как срединная точка между уровнями верхних и нижних выносных знаков. Если этот дескриптор используется, то наряду с ним должен использоваться дескриптор 'units-per-em'.

'mathline' (Дескриптор)
Значение: <number>
Начальное значение: не определено
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор математической базовой линии шрифта. Если эго значение не определено, то в качестве него пользовательский агент может использовать уровень центральной базовой линии. Если этот дескриптор используется , то наряду с ним должен использоваться дескриптор 'units-per-em'.

'topline' (Дескриптор)
Значение: <number>
Начальное значение: не определено
Ассоциированные устройства: устройства визуального форматирования

Это дескриптор верхней базовой линии шрифта. Если его значение не определено, то в качестве него пользовательский агент может использовать приблизительное значение, такое, например, как высота уровня верхних выносных знаков. Если этот дескриптор используется, то наряду с ним должен использоваться дескриптор 'units-per-em'.

15.3.9 Примеры

Пример(ы):

Рассмотрим следующий список шрифтов:
Swiss 721 light | light & light italic
Swiss 721 | roman, bold, italic, bold italic
Swiss 721 medium | medium & medium italic
Swiss 721 heavy | heavy & heavy italic
Swiss 721 black | black, black italic, & black #2
Swiss 721 Condensed | roman, bold, italic, bold italic
Swiss 721 Expanded | roman, bold, italic, bold italic

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

@font-face {
    font-family: "Swiss 721";
    src: url("swiss721lt.pfr"); /* Swiss 721 light */
    font-style: normal, italic;
    font-weight: 200;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721.pfr"); /* The regular Swiss 721 */
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721md.pfr"); /* Swiss 721 medium */
    font-style: normal, italic;
    font-weight: 500;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721hvy.pfr"); /* Swiss 721 heavy */
    font-style: normal, italic;
    font-weight: 700;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721blk.pfr"); /* Swiss 721 black */
    font-style: normal, italic;
    font-weight: 800,900; /* отметьте очень интересный факт, что для курсива */
                          /* насыщенность, равная 900, не существует */
}
@font-face {
    font-family: "Swiss 721";
    src: url(swiss721.pfr); /* The condensed Swiss 721 */
    font-stretch: condensed;
}
@font-face {
    font-family: "Swiss 721";
    src: url(swiss721.pfr); /* The expanded Swiss 721 */
    font-stretch: expanded;
}

15.4 Параметры шрифтов

15.4.1 Основное представление о параметрах шрифтов

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

Рассматриваемые здесь параметры используются для описания шрифтов. Они не предназначены для использования в CSS или таблицах стилей. В CSS каждый параметр описывается дескриптором шрифта. Наряду с этим параметры могут быть отображены в узлы VRML, в структуры формата CGM, в программный интерфейс Java или в объект любого другого языка спецификации таблиц стилей. Если повсюду использовать общую систему параметризации, то шрифты, извлекаемые одним устройством и хранящиеся в кэш-памяти прокси-сервера, легко смогут быть использованы другим устройством. А это позволит сохранить пропускную способность сети и сократить время загрузки.

Неполный список примеров таких устройств включает:

  • Двумерные векторные форматы
    • Computer Graphics Metafile
    • Simple Vector Format
  • Трехмерные векторные форматы
    • VRML
    • 3DMF
  • Технологии вставки объектов
    • Java
    • Active-X
    • Obliq

15.4.2 Полное имя шрифта

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

Например, названия гарнитур шрифтов формата TrueType и PostScript могут различаться в использовании пробелов, знаков пунктуации а аббревиатур (например, чтобы удовлетворить ограничениям, устанавливаемым различными системами или принтерами на длину имен). В частности, в названиях гарнитур шрифтов формата PostScript в отличие от полных имен шрифтов не допускается использовать пробелы. Таблица имен гарнитур в формате TrueType может также содержать не имеющее пробелов имена гарнитур в формате PostScript.

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

Идеальным решением станет имя, которое однозначно идентифицирует каждый набор данных о шрифте. В настоящее время на практике не существует такого типа имен. Шрифты с одинаковыми названиями начертаний могут различаться по количеству дескрипторов. Некоторые из этих дескрипторов также, как и различные дополнения глифов в шрифте, могут оказаться несущественными, если он содержит все необходимые глифы. Другие дескрипторы, например, устанавливающие различные значения ширины, приводят к тому, что шрифты с одинаковыми именами становятся несовместимыми. Пожалуй, невозможно определить такое правило, которое позволило бы всегда обнаруживать несовместимости, но при этом не препятствовало бы использованию локальной копии данных о шрифте с заданным именем. Более того, имя начертания шрифта сопоставляется только на основании символов из стандарта ISO 10646.

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

15.4.3 Разбиение кегельного квадрата

Определенные типы значений, такие, например, как значения ширины, выражаются в единицах, масштаб которых определяется относительно абстрактного квадрата с высотой, равной наименьшему расстоянию между линиями глифов шрифта одного и того же размера (кегля). Этот квадрат называется кегельным квадратом и является элементом рабочей сетки, в котором выводятся контуры глифов. Значение соответствующего дескриптора определяет частоту разбиения кегельного квадрата. Наиболее часто встречающимися значениями являются следующие: 250 (Intellifont), 1000 (Type 1) и 2048 (TrueType, TrueType GX и OpenType).

Если данное разбиение не определено, то все размеры шрифта становятся бессмысленными. Например, может оказаться, что высота капители одного шрифта равна 450 в то время, как высота более мелкой капители другого шрифта равна 890! Фактически, эти числа представляют дроби: в первом шрифте - дробь 450/1000, а во втором - дробь 890/2048, которая, действительно, меньше первой.

15.4.4 Центральная базовая линия

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

15.4.5 Кодировка шрифта

Явно или неявно для каждого шрифта задается ассоциированная с ним таблица кодировок шрифта, в которой содержится информация о том, каким глифом представляется каждый символ. Эта таблица называется также вектором кодировки.

Фактически, для одного и того же символа многие шрифты содержат по несколько глифов. Использование того или иного глифа зависит либо от правил языка, либо от предпочтений разработчика.

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

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

15.4.6 Имя гарнитуры шрифта

Соответствующий дескриптор указывает ту часть имени начертания шрифта, которая является названием содержащей его гарнитуры. Например, названием гарнитуры, содержащей шрифт Helvetica-Bold, является Helvetica, а названием гарнитуры, содержащей шрифт ITC Stone Serif Semibold Italic, является ITC Stone Serif. В некоторых системах дополнения, указывающие на сжатый или разреженный типы начертания, обрабатываются так, как будто они являются частью названия гарнитуры.

15.4.7 Ширина глифов

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

15.4.8 Ширина горизонтального штамба

Это значение относится к штамбу, доминирующему в шрифте. Существует возможность использования нескольких значений ширины, заданных в процессе создания шрифта. Например, основные вертикальные штамбы римских символов могут отличаться от тонких штамбов в засеченных буквах "M" и "N". К тому же в одном и том же шрифте могут использоваться различные значения ширины штамба для заглавных и строчных символов. Не исключено, что в результате разработки или некоторой ошибки значения ширины всех штамбов будут хотя бы немного, но различаться.

15.4.9 Высота глифов заглавных букв

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

15.4.10 Высота глифов строчных букв

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

Высота строчных букв

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

Высота еврейских символов

15.4.11 Нижняя базовая линия

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

15.4.12 Математическая базовая линия

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

15.4.13 Максимальный ограничивающий блок

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

Если динамически загружаемый шрифт сгенерирован путем подстановки шрифта родительского элемента, то значение его дескриптора 'bbox' должно совпадать со значением соответствующего дескриптора шрифта родительского элемента.

15.4.14 Максимальная высота не акцентированных букв

Измерение данной величины осуществляется в кегельном квадрате от базовой линии до самой верхней точки, достигаемой глифами, исключая акценты и диакритики.

Рисунок, иллюстрирующий несколько глифов и максимальную высоту не акцентированных букв

15.4.15 Максимальная глубина не акцентированных букв

Измерение данной величины осуществляется в кегельном квадрате от базовой линии до самой низкой точки, достигаемой глифами, исключая акценты и диакритики.

Рисунок, иллюстрирующий несколько глифов и максимальную глубину не акцентированных букв

15.4.16 Число Panose-1

Panose-1 является производственным стандартом сопоставления и классификации шрифтов формата TrueType. Система PANOSE представляет собой совокупность десяти чисел, определяющих ключевые атрибуты латинского шрифта, процедуры классификации для выработки этих чисел и программы-сопоставителя, определяющей шрифт, который наибольшим образом подходит для заданного набора начертаний шрифтов. С небольшими изменениями эта система может использоваться для греческих и кириллических шрифтов. В то же время она не подходит для шрифтов с одним набором знаков и идеографических шрифтов (еврейских, армянских, арабских, китайских/японских/корейских).

15.4.17 Набор символов, принадлежащих стандарту ISO 10646

Этот параметр определяет набор глифов, содержащихся в шрифте и соответствующих символам, принадлежащим стандарту ISO 10646 (уникоду). Т.к. символы в этом наборе появляются в разрядку (большинство шрифтов не охватывают всего стандарта ISO 10646), то соответствующий дескриптор перечисляет интервалы или диапазоны, совокупность которых в определенной степени покрывает требуемый набор глифов (нельзя гарантировать, что всегда удастся покрыть весь набор). Он используется для исключения ненужных шрифтов (в которых отсутствуют необходимые глифы). Этот дескриптор не позволяет зафиксировать существование необходимых глифов в шрифте, а только говорит о том, стоит ли его загружать и просматривать. Дополнительная информация о соответствующей документации может быть получена в [ISO10646].

Этот метод предусматривает возможные модернизации, обусловленные перераспределением символов в уникоде, и позволяет осуществлять их без потери и изменения синтаксиса существующих данных.

Форматы шрифтов, не содержащие данный параметр, явно или косвенно могут использовать его только со значением, заимствованным от разработчика документа или таблицы стилей.

Существуют другие системы классификации шрифтов, такие, как Monotype (см. [MONOTYPE]) и ISO. Они не являются легко модернизируемыми.

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

15.4.18 Верхняя базовая линия

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

15.4.19 Ширина вертикального штамба

Данный параметр задает значение ширины вертикальных (или почти вертикальных) штамбов глифов, которое часто содержится во вспомогательном материале и в некоторых форматах шрифтов не может быть легко изъято. Это значение должно быть задано для штамба, который доминирует в шрифте, т.к. в нем может существовать несколько групп вертикальных штамбов (например, один главный штамб и один более светлый штамб, как, например, в прописных буквах 'M' или 'N').

15.4.20 Угол наклона вертикального штриха

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

15.5 Алгоритм сопоставления шрифтов

Рассматриваемый в данной спецификации алгоритм является расширением своего аналога, изложенного в описании CSS1. Если в таблицах стилей разработчика и читателя нет ни одного правила @font-face, то этот алгоритм сводится к своему предшественнику из CSS1.

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

  1. Пользовательский агент создает (или использует) базу данных соответствующих дескрипторов начертаний всех известных ему шрифтов. Если найдутся два шрифта с абсолютно одинаковыми дескрипторами, то один из них игнорируется. Информация о шрифте доступна пользовательскому агенту, если:
    • шрифт установлен локально;
    • шрифт объявлен с использованием правила @font-face в одной из таблиц стилей, содержащейся в текущем документе или присоединенной к нему;
    • шрифт используется в таблице стилей, применяемой пользовательским агентом по умолчанию. Концептуально она существует во всех пользовательских агентах и содержит полностью определенные правила @font-face для всех шрифтов, которые пользовательский агент будет использовать по умолчанию, а также правила @font-face для пяти специальных общедоступных гарнитур шрифтов (см. 'font-family'), определенных в CSS2
  2. Для заданного элемента и каждого содержащегося в нем символа пользовательский агент находит все применяемые к ним свойства шрифтов. На основании полного набора всех этих свойств пользовательский агент выбирает предполагаемую гарнитуру шрифтов, используя дескриптор 'font-family'. Таким образом, сопоставление по названию гарнитуры осуществляется раньше сопоставления любого другого дескриптора. Остальные свойства анализируются, исходя из типа гарнитуры, в соответствии с критериями, описываемыми каждым дескриптором отдельно. Если для всех этих свойств сопоставление осуществится, то найденное начертание шрифта оказывается тем самым, которое необходимо для данного элемента.
  3. Если в рамках гарнитуры 'font-family' на втором шаге не было найдено адекватного начертания шрифта, то для определения другой предполагаемой гарнитуры шрифта пользовательский агент, осуществляющий интеллектуальное соответствие, может воспользоваться другими дескрипторами, такими, как высота строчных букв, значение ширины глифов и panose-1. Если после этого все остальные дескрипторы будут адекватно сопоставлены, то найденное начертание шрифта оказывается тем самым, которое необходимо для данного элемента. Значение дескриптора 'font-family', отраженного в свойствах CSS2, выступает в роли названия запрашиваемой гарнитуры шрифта. Его не следует путать с произвольным названием, которое может иметь интеллектуально сопоставленный шрифт. Предполагается, что пользовательские агенты, не поддерживающие интеллектуальное сопоставление, не смогут выполнить этот шаг.
  4. Если в рамках гарнитуры 'font-family' на третьем шаге не было найдено адекватного начертания шрифта, то для определения доступного сетевого ресурса, обладающего корректным форматом, пользовательский агент, осуществляющий загрузку шрифта из сети, может воспользоваться дескриптором 'src' предполагаемого начертания шрифта, определенного на втором или третьем шаге. Если все остальные дескрипторы будут адекватно сопоставлены, то найденное начертание шрифта оказывается тем самым, которое необходимо для данного элемента, и пользовательский агент может попытаться загрузить ресурс этого шрифта. Пользовательский агент может заблокировать загрузку или перейти к следующему шагу во время загрузки шрифта. Предполагается, что любая из причин: пользовательский агент не осуществляет загрузку шрифтов или не подключен к сети, в настройках пользователя заблокирована загрузка шрифта, по какой-то причине необходимый ресурс недоступен или загруженный шрифт не удается использовать - приводит к тому, что пользовательский агент не сможет выполнить этот шаг.
  5. Если в рамках гарнитуры 'font-family' на третьем шаге не было найдено адекватного начертания шрифта, то для определения другой предполагаемой гарнитуры шрифта, которая затем будет синтезирована, пользовательский агент, осуществляющий синтез шрифта, может воспользоваться другими дескрипторами, такими, как 'x-height', значение ширины глифов и 'panose-1'. Если все остальные дескрипторы будут адекватно сопоставлены, то найденное начертание шрифта оказывается тем самым, которое необходимо для данного элемента, и пользовательский агент может приступить к синтезу подстановочного шрифта. Предполагается, что пользовательские агенты, не поддерживающие синтез шрифта, не смогут выполнить этот шаг.
  6. Если не удалось выполнить третий, четвертый и пятый шаги и в наборе шрифтов существует альтернативное значение дескриптора 'font-family', то для него осуществляется повторное выполнение всех предыдущих шагов, начиная со второго.
  7. Если необходимое начертание шрифта было найдено, но оно не содержит глиф(ы) для текущего символа(ов), и если в наборе шрифтов существует альтернативное значение дескриптора 'font-family', то для него осуществляется повторное выполнение всех предыдущих шагов, начиная со второго. Использование дескриптора 'unicode-range' позволяет быстро исключить из рассмотрения те начертания шрифтов, которые не содержат корректных глифов. Если дескриптор 'unicode-range' указывает, что в шрифте содержится несколько глифов из корректного диапазона, то пользовательский агент может проверить его на предмет существования в нем конкретного символа.
  8. Если в гарнитуре, выбранной на втором шаге, не существует ни одного шрифта, то используется наследуемое или определяемое пользовательским агентом значение дескриптора 'font-family', вместе с которым осуществляется повторное выполнение всех предыдущих шагов, начиная со второго. При этом используется наилучшее сопоставление, которое может быть получено для данного шрифта. Если с его помощью не удается отобразить некоторый символ, то пользовательский агент должен сигнализировать о невозможности вывода данного символа (например, посредством использования глифа недостающего символа).
  9. Пользовательские агенты, поддерживающие динамическое отображение и осуществляющие на данный момент загрузку шрифта, могут использовать его в качесвте гарнитуры, как только он будет успешно загружен. Символы, для которых в загруженном шрифте отсутствуют глифы, продолжают отображаться с помощью временного шрифта, содержащего требующиеся глифы.

Примечание. Представленный выше алгоритм может быть оптимизирован, во избежание повторной проверки свойств CSS2 для каждого символа в отдельности.

Правила сопоставления дескрипторов, используемые на втором шаге вышеприведенного алгоритма:

  1. Дескриптор 'font-style' проверяется первым. Курсив будет удовлетворять требованиям, если в базе данных шрифтов пользовательского агента имеется шрифт, помеченный ключевым словом 'italic' (предпочтительнее) или 'oblique'. В противном случае, необходимо потребовать точного совпадения значений или отказаться от сопоставления данного дескриптора.
  2. Затем проверяется дескриптор 'font-variant'. Нормальное начертание сопоставляется шрифту, не помеченному как 'small-caps'; капитель сопоставляется (1) шрифту, помеченному как 'small-caps', (2) шрифту, в котором возможен синтез капители, или (3) шрифту, в котором все строчные буквы заменяются прописными. Капитель может быть синтезирована электронным образом путем масштабирования прописных букв нормального начертания шрифта.
  3. Затем проверяется дескриптор 'font-weight'. Он никогда не будет нарушен. (См. ниже раздел 'font-weight'.)
  4. Сопоставление дескриптора 'font-size' должно осуществляться в рамках допустимых значений размеров, устанавливаемых пользовательским агентом. (Обычно размеры масштабируемых шрифтов округляются до ближайшего целого значения в пикселях, в то время как допуск на масштабирование растровых шрифтов не может быть установлен более 20%.) Дальнейшие вычисления, например, использующие кегельную шпацию в других свойствах, основываются на используемом, а не на указанном значении дескриптора 'font-size'.

15.5.1 Отображение градаций насыщенности шрифтов на их имена

Значения свойства 'font-weight' задаются в числовом формате, в котором значение '400' (или 'normal') соответствует нормальному начертанию шрифта данной гарнитуры. В качестве названия насыщенности, связанной с данным начертанием, обычно используются слова Book, Regular, Roman, Normal или иногда Medium.

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

  • Если гарнитура шрифтов уже использует числовую шкалу с девятью значениями (как, например, принято в формате OpenType), то значения насыщенности шрифтов должны отображаться напрямую.
  • Если наряду со шрифтом, помеченным словом Book, Regular, Roman или Normal, существует шрифт, помеченный словом Medium, то Medium обычно ассоциируется со значением, равным '500'.
  • Шрифт, помеченный словом "Bold", зачастую ассоциируется со значением насыщенности, равным '700'.
  • Если в данной гарнитуре имеется менее 9 градаций насыщенности, то по умолчанию пробелы заполняются следующим образом. Если значение '500' еще не ассоциировано, то оно назначается шрифту, с которым ассоциировано значение '400'. Если какое-либо из значений '600', '700', '800' или '900' остается не ассоциированным, то оно назначается следующему более темному шрифту, если такой существует, или, в противном случае, следующему более светлому шрифту. Если какое-либо из значений '300', '200' или '100' остается не ассоциированным, то оно назначается следующему более светлому шрифту, если такой существует, или в противном случае, следующему более темному шрифту.

Существование более темного шрифта для каждого значения свойства 'font-weight' не гарантировано. Например, некоторые шрифты имеют только обычное и жирное начертание, а другие шрифты могут иметь восемь различных градаций насыщенности.

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

Допустим, что в гарнитуре "Rattlesnake" существует четыре градации насыщенности, от самой светлой и до самой темной: Regular, Medium, Bold, Heavy.

Первый пример отображения названия шрифта в значение его насыщенности
Доступные шрифты | Числовое значение насыщенности | Заполнение пробелов
"Rattlesnake Regular" | 400 | 100, 200, 300
"Rattlesnake Medium" | 500 |
"Rattlesnake Bold" | 700 | 600
"Rattlesnake Heavy" | 800 | 900

Допустим, что в гарнитуре "Ice Prawn" существует шесть градаций насыщенности: Book, Medium, Bold, Heavy, Black, ExtraBlack. Обратите внимание, что в данном примере пользовательский агент решил не задавать числовое значение для градации "ExtraBlack".

Второй пример отображения названия шрифта в значение его насыщенности
Доступные шрифты | Числовое значение насыщенности | Заполнение пробелов
"Ice Prawn Book" | 400 | 100, 200, 300
"Ice Prawn Medium" | 500 |
"Ice Prawn Bold" | 700 | 600
"Ice Prawn Heavy" | 800 |
"Ice Prawn Black" | 900 |
"Ice Prawn ExtraBlack" | (none) |

15.5.2 Примеры сопоставления шрифтов

Пример(ы):

В следующем примере определяется специальное начертание шрифта Alabama Italic. Также предоставляются описание шрифта в системе panose и исходный URI для загрузки шрифта с сервера truetype. Для описания шрифта используются дескрипторы его насыщенности и стиля. В объявлениях говорится, что насыщенность будет сопоставляться любому значению в диапазоне от 300 до 500. Гарнитурой шрифтов является Alabama, а дополненным именем шрифта является Alabama Italic.

@font-face {
  src: local("Alabama Italic"),
       url(http://www.fonts.org/A/alabama-italic) format("truetype");
  panose-1: 2 4 5 2 5 4 5 9 3 3;
  font-family: Alabama, serif;
  font-weight:   300, 400, 500;
  font-style:  italic, oblique;
}

Пример(ы):

В следующем примере осуществляется определение гарнитуры шрифта. Для загрузки данных о шрифте предоставляется один URI. Этот файл данных будет содержать несколько стилей и значений насыщенности указанного шрифта. Если к одному из правил @font-face было осуществлено несколько обращений, то данные будут помещены в кэш пользовательского агента для других шрифтов, использующих этот же URI.

@font-face {
  src: local("Helvetica Medium"),
       url(http://www.fonts.org/sans/Helvetica_family) format("truedoc");
  font-family: "Helvetica";
  font-style: normal
}
@font-face {
  src: local("Helvetica Oblique"),
       url("http://www.fonts.org/sans/Helvetica_family") format("truedoc");
  font-family: "Helvetica";
  font-style: oblique;
  slope: -18
}

Пример(ы):

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

@font-face {
  font-family: Excelsior;
  src: local("Excelsior Roman"), url("http://site/er") format("intellifont");
  unicode-range: U+??; /* Latin-1 */
}
@font-face {
  font-family: Excelsior;
  src: local("Excelsior EastA Roman"), url("http://site/ear") format("intellifont");
  unicode-range: U+100-220; /* Latin Extended A and B */
}
@font-face {
  font-family: Excelsior;
  src: local("Excelsior Cyrillic Upright"), url("http://site/ecr") format("intellifont");
  unicode-range: U+4??; /* Cyrillic */
}
@font-face {
  font-family: Excelsior;
  src: url("http://site/excels") format("truedoc");
  unicode-range: U+??,U+100-220,U+4??;
}

Пример(ы):

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

@font-face {
  src: local("Palatino"),
      local("Times New Roman"),
      local("New York"),
      local("Utopia"),
      url("http://somewhere/free/font");
  font-family: serif;
  font-weight: 100, 200, 300, 400, 500;
  font-style: normal;
  font-variant: normal;
  font-size: all
}


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

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'

В некоторых случаях у авторов может возникнуть необходимость в том, чтобы агенты пользователей отображали на экране содержимое, которое не принадлежит дереву документа. Одним из хорошо известных примеров такой ситуации является нумерованный список, когда разработчик не желает вводить числа явным образом, а предпочитает, чтобы агент пользователя генерировал их автоматически. Подобным образом у разработчика может возникнуть желание, чтобы пользовательский агент вставлял слово "Рисунок" перед названием рисунка или строку "Глава 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, значение атрибута "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;
}

Обратите внимание, что звуковой агент пользователя будет воспроизводить фразу "Конец" после вывода остальной части содержимого элемента BODY.

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

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

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

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

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

'content'
Значение: [ <строка> | <uri> | <счетчик> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | наследуемое
Начальное значение: пустая строка
Область применения: псевдоэлементы :before и :after
Наследование: нет
Процентное задание: нет
Устройства: все

Это свойство используется вместе с псевдоэлементами :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") }
   }

Пример(ы):

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

IMG:before { content: attr(alt) }

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

Пример(ы):

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

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

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

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.

Пример(ы):

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

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

применяется к исходному документу:

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

то после визуального форматирования получится:

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

12.4 Кавычки

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

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

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

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

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:

<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.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 и вставляет в конце одну закрывающую кавычку:

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

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

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

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

Пример(ы):

Например, можно цитировать французский текст внутри английского:

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

В приведенной ниже таблице стилей свойство 'quotes' устанавливается так, 'open-quote' и 'close-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-reset'
Значение: [ <идентификатор> <целое>? ]+ | none | наследуемое
Начальное значение: none
Область применения: все элементы
Наследование: нет
Процентное задание: нет
Устройства: все
'counter-increment'
Значение: [ <идентификатор> <целое>? ]+ | none | наследуемое
Начальное значение: none
Область применения: все элементы
Наследование: нет
Процентное задание значений: нет
Ассоциированные устройства: все

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

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

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

Пример(ы):

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

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, где элементы могут быть вложены сами в себя на произвольную глубину. Было бы невозможно определить для каждого уровня счетчик с уникальным именем.

Пример(s):

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

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

<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()' генерирует последовательность разделенных заданной строкой значений всех счетчиков, имена которых совпадают.

Пример(ы):

Следующая таблица стилей нумерует вложенные элементы списка с использованием символов "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(имя)

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

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", не увеличивают значение счетчика 'count2'.

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

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

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

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

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

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

<!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:   Это очень короткий
                  документ.

                  Конец.
'marker-offset'
Значение: <длина> | auto | наследуемое
Начальное значение: auto
Область применения: элементы с 'display: marker'
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования

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

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

<!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-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 | наследуемое
Начальное значение: disc
Область применения: элементы с 'display: list-item'
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

Это свойство задает вид маркера элемента списка, если для свойства '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'.

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

<!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 Это третий элемент.

Обратите внимание, что выравнивание маркера списка (в этом примере по правому краю) определяется агентом пользователя.

Примечание. Возможно, что в следующих версиях CSS будут представлены более полные механизмы работы стилей нумерации для разных языков.

'list-style-image'
Значение: <uri> | none | наследуемое
Начальное значение: none
Область применения: элементы с 'display: list-item'
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

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

Пример(ы):

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

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

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

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>

Приведенный выше пример может быть отформатирован следующим образом:

Различие между внутренним и внешним расположением в стиле списка [D]

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

'list-style'
Значение: [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | наследуемое
Начальное значение: не определено для свойств стенографического типа
Область применения: элементы с 'display: list-item'
Наследование: да
Процентное задание: нет
Устройства: визуального форматирования

Свойство '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. Именно этот способ рекомендуется использовать для определения информации о стиле списка.

Пример(ы):

Значение 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 }

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


Appendix D: The grammar of CSS2

Appendix D. The grammar of CSS2

Contents

  • D.1 Grammar
  • D.2 Lexical scanner
  • D.3 Comparison of tokenization in CSS2 and CSS1

This appendix is normative.

The grammar below defines the syntax of CSS2. It is in some sense, however, a superset of CSS2 as this specification imposes additional semantic constraints not expressed in this grammar. A conforming UA must also adhere to the forward-compatible parsing rules, the property and value notation, and the unit notation. In addition, the document language may impose restrictions, e.g. HTML imposes restrictions on the possible values of the "class" attribute.

D.1 Grammar

The grammar below is LL(1) (but note that most UA's should not use it directly, since it doesn't express the parsing conventions, only the CSS2 syntax). The format of the productions is optimized for human consumption and some shorthand notation beyond Yacc (see [YACC]) is used:

  • *: 0 or more
  • +: 1 or more
  • ?: 0 or 1
  • |: separates alternatives
  • [ ]: grouping

The productions are:

stylesheet
  : [ CHARSET_SYM S* STRING S* ';' ]?
    [S|CDO|CDC]* [ import [S|CDO|CDC]* ]*
    [ [ ruleset | media | page | font_face ] [S|CDO|CDC]* ]*
  ;
import
  : IMPORT_SYM S*
    [STRING|URI] S* [ medium [ ',' S* medium]* ]? ';' S*
  ;
media
  : MEDIA_SYM S* medium [ ',' S* medium ]* '{' S* ruleset* '}' S*
  ;
medium
  : IDENT S*
  ;
page
  : PAGE_SYM S* IDENT? pseudo_page? S*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
pseudo_page
  : ':' IDENT
  ;
font_face
  : FONT_FACE_SYM S*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
operator
  : '/' S* | ',' S* | /* empty */
  ;
combinator
  : '+' S* | '>' S* | /* empty */
  ;
unary_operator
  : '-' | '+'
  ;
property
  : IDENT S*
  ;
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator simple_selector ]*
  ;
simple_selector
  : element_name? [ HASH | class | attrib | pseudo ]* S*
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ]? ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* IDENT S* ')' ]
  ;
declaration
  : property ':' S* expr prio?
  | /* empty */
  ;
prio
  : IMPORTANT_SYM S*
  ;
expr
  : term [ operator term ]*
  ;
term
  : unary_operator?
    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
      TIME S* | FREQ S* | function ]
  | STRING S* | IDENT S* | URI S* | RGB S* | UNICODERANGE S* | hexcolor
  ;
function
  : FUNCTION S* expr ')' S*
  ;
/*
 * There is a constraint on the color that it must
 * have either 3 or 6 hex-digits (i.e., [0-9a-fA-F])
 * after the "#"; e.g., "#000" is OK, but "#abcd" is not.
 */
hexcolor
  : HASH S*
  ;

D.2 Lexical scanner

The following is the tokenizer, written in Flex (see [FLEX]) notation. The tokenizer is case-insensitive.

The two occurrences of "\377" represent the highest character number that current versions of Flex can deal with (decimal 255). They should be read as "\4177777" (decimal 1114111), which is the highest possible code point in Unicode/ISO-10646.

%option case-insensitive

h		[0-9a-f]
nonascii	[\200-\377]
unicode		\\{h}{1,6}[ \t\r\n\f]?
escape		{unicode}|\\[ -~\200-\377]
nmstart		[a-z]|{nonascii}|{escape}
nmchar		[a-z0-9-]|{nonascii}|{escape}
string1		\"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2		\'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'

ident		{nmstart}{nmchar}*
name		{nmchar}+
num		[0-9]+|[0-9]*"."[0-9]+
string		{string1}|{string2}
url		([!#$%&*-~]|{nonascii}|{escape})*
w		[ \t\r\n\f]*
nl		\n|\r\n|\r|\f
range		\?{1,6}|{h}(\?{0,5}|{h}(\?{0,4}|{h}(\?{0,3}|{h}(\?{0,2}|{h}(\??|{h})))))

%%

[ \t\r\n\f]+		{return S;}

\/\*[^*]*\*+([^/][^*]*\*+)*\/	/* ignore comments */

"<!--"			{return CDO;}
"-->"			{return CDC;}
"~="			{return INCLUDES;}
"|="			{return DASHMATCH;}

{string}		{return STRING;}

{ident}			{return IDENT;}

"#"{name}		{return HASH;}

"@import"		{return IMPORT_SYM;}
"@page"			{return PAGE_SYM;}
"@media"		{return MEDIA_SYM;}
"@font-face"		{return FONT_FACE_SYM;}
"@charset"		{return CHARSET_SYM;}
"@"{ident}		{return ATKEYWORD;}

"!{w}important"		{return IMPORTANT_SYM;}

{num}em			{return EMS;}
{num}ex			{return EXS;}
{num}px			{return LENGTH;}
{num}cm			{return LENGTH;}
{num}mm			{return LENGTH;}
{num}in			{return LENGTH;}
{num}pt			{return LENGTH;}
{num}pc			{return LENGTH;}
{num}deg		{return ANGLE;}
{num}rad		{return ANGLE;}
{num}grad		{return ANGLE;}
{num}ms			{return TIME;}
{num}s			{return TIME;}
{num}Hz			{return FREQ;}
{num}kHz		{return FREQ;}
{num}{ident}		{return DIMEN;}
{num}%			{return PERCENTAGE;}
{num}			{return NUMBER;}

"url("{w}{string}{w}")"	{return URI;}
"url("{w}{url}{w}")"	{return URI;}
{ident}"("		{return FUNCTION;}

U\+{range}		{return UNICODERANGE;}
U\+{h}{1,6}-{h}{1,6}	{return UNICODERANGE;}

.			{return *yytext;}

D.3 Comparison of tokenization in CSS2 and CSS1

There are some differences in the syntax specified in the CSS1 recommendation ([CSS1]), and the one above. Most of these are due to new tokens in CSS2 that didn't exist in CSS1. Others are because the grammar has been rewritten to be more readable. However, there are some incompatible changes, that were felt to be errors in the CSS1 syntax. They are explained below.

  • CSS1 style sheets could only be in 1-byte-per-character encodings, such as ASCII and ISO-8859-1. CSS2 has no such limitation. In practice, there was little difficulty in extrapolating the CSS1 tokenizer, and some UAs have accepted 2-byte encodings.
  • CSS1 only allowed four hex-digits after the backslash (\) to refer to Unicode characters, CSS2 allows six. Furthermore, CSS2 allows a whitespace character to delimit the escape sequence. E.g., according to CSS1, the string "\abcdef" has 3 letters (\abcd, e, and f), according to CSS2 it has only one (\abcdef).
  • The tab character (ASCII 9) was not allowed in strings. However, since strings in CSS1 were only used for font names and for URLs, the only way this can lead to incompatibility between CSS1 and CSS2 is if a style sheet contains a font family that has a tab in its name.
  • Similarly, newlines (escaped with a backslash) were not allowed in strings in CSS1.
  • CSS2 parses a number immediately followed by an identifier as a DIMEN token (i.e., an unknown unit), CSS1 parsed it as a number and an identifier. That means that in CSS1, the declaration 'font: 10pt/1.2serif' was correct, as was 'font: 10pt/12pt serif'; in CSS2, a space is required before "serif". (Some UAs accepted the first example, but not the second.)
  • In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\55ft")


Index

Appendix H. Index

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

  • :active, 2, 3
  • :after, 1, 2
  • :before, 1, 2, 3
  • :first, 1
  • :first-child, 1
  • :first-letter, 1
  • :first-line, 1
  • :focus, 1
  • :hover, 1
  • :lang, 1
  • :left, 1
  • :link, 1, 2
  • :right, 1
  • :visited, 1, 2
  • =, 1
  • ~=, 1
  • |=, 1

  • @charset, 1
  • @font-face, 1, 2, 3, 4, 5, 6, 7
  • @import, 1, 2, 3
  • @media, 1, 2, 3, 4
  • @page, 1

  • absolute length, 1
  • <absolute-size>
    • definition of, 1
  • absolutely positioned element, 1
  • abstract glyph, 1
  • active (pseudo-class), 1, 2
  • actual value, 1
  • after, 1
  • 'all' media group, 1
  • ancestor, 1
  • <angle>, 1, 2
    • definition of, 1
  • anonymous, 1
  • anonymous inline boxes, 1
  • armenian, 1
  • 'ascent' (descriptor), 1
  • aspect value, 1
  • at-rule, 1
  • at-rules, 1, 2
  • attr(), 1
  • attribute, 1
  • auditory icon, 1
  • 'aural' media group, 1
  • authoring tool, 1
  • automatic numbering, 1
  • 'azimuth', 1

  • 'background', 1
  • 'background-attachment', 1
  • 'background-color', 1
  • 'background-image', 1
  • 'background-position', 1
  • 'background-repeat', 1
  • backslash escapes, 1
  • 'baseline' (descriptor), 1
  • 'bbox' (descriptor), 1
  • before, 1
  • bicameral, 1
    • definition of, 1
  • bidirectionality (bidi), 1
  • 'bitmap' media group, 1
  • block, 1
  • block box, 1
  • 'block', definition of, 1
  • block-level element, 1
  • border edge, 1
  • 'border', 1
  • 'border-bottom', 1
  • 'border-bottom-color', 1
  • 'border-bottom-style', 1
  • 'border-bottom-width', 1
  • 'border-collapse', 1
  • 'border-color', 1
  • 'border-left', 1
  • 'border-left-color', 1
  • 'border-left-style', 1
  • 'border-left-width', 1
  • 'border-right', 1
  • 'border-right-color', 1
  • 'border-right-style', 1
  • 'border-right-width', 1
  • 'border-spacing', 1
  • <border-style>, 1
  • <border-style>, definition of, 1
  • 'border-style', 1
  • 'border-top', 1
  • 'border-top-color', 1
  • 'border-top-style', 1
  • 'border-top-width', 1
  • <border-width>
    • definition of, 1
  • 'border-width', 1
  • border
    • of a box, 1
  • <bottom>
    • definition of, 1
  • 'bottom', 1
  • box
    • border, 1
    • content, 1
    • content height, 1
    • content width, 1
    • height, 1
    • margin, 1
    • overflow, 1
    • padding, 1
    • width, 1

  • canvas, 1, 2
  • 'cap-height' (descriptor), 1
  • 'caption-side', 1
  • cascade, 1
  • case sensitivity, 1
  • 'centerline' (descriptor), 1
  • character, 1
  • character encoding, 1
    • default, 1
    • user agent's determination of, 1
  • child, 1
  • child selector, 1
  • circle, 1
  • cjk-ideographic, 1
  • 'clear', 1
  • 'clip', 1
  • clipping region, 1
  • close-quote, 1, 2
  • collapsing margin, 1
  • color, 1
  • <color>, 1, 2
    • definition of, 1
  • 'color', 1
  • combinator, 1, 2
  • comments, 1
  • compact, 1
  • compact box, 1
  • 'compact', definition of, 1
  • computed value, 1
  • conditional import, 1
  • conformance, 1, 2, 3, 4, 5, 6, 7, 8
  • containing block, 1, 2, 3
    • initial, 1
  • content, 1
  • content edge, 1
  • 'content', 1
  • content
    • of a box, 1
    • rendered, 1
  • 'continuous' media group, 1
  • <counter>, 1
  • <counter>, definition of, 1
  • counter(), 1
  • 'counter-increment', 1
  • 'counter-reset', 1
  • counters, 1
  • crop marks, 1
  • cross marks, 1
  • 'cue', 1
  • 'cue-after', 1
  • 'cue-before', 1
  • cursive, definition of, 1
  • 'cursor', 1

  • 'dashed', 1, 2
  • decimal, 1
  • decimal-leading-zero, 1
  • declaration, 1
  • declaration-block, 1
  • default style sheet, 1
  • default
    • character encoding, 1
  • 'definition-src' (descriptor), 1
  • descendant, 1
  • descendant-selectors, 1
  • 'descent' (descriptor), 1
  • 'direction', 1
  • disc, 1
  • 'display', 1
  • document language, 1
  • document tree, 1
  • 'dotted', 1, 2
  • 'double', 1, 2
  • drop caps, 1
  • DTD, 1, 2

  • element, 1
    • following, 1
    • preceding, 1
  • 'elevation', 1
  • em (unit), 1
  • em square, 1, 2
  • empty, 1
  • 'empty-cells', 1
  • encoding vector, 1
  • ex (unit), 1
  • exact matching, 1

  • <family-name>
    • definition of, 1
  • fantasy, definition of, 1
  • fictional tag sequence, 1, 2, 3
  • first-child, 1
  • first-letter, 1
  • first-line, 1
  • float rules, 1
  • 'float', 1
  • focus, 1
  • focus (pseudo-class), 1
  • following element, 1
  • font, 1
  • font data, 1
  • font definition resource, 1
  • font description, 1
  • font download, 1
  • font encoding table, 1
  • font family, 1
  • font set, 1
  • font synthesis, 1
  • 'font', 1
  • <font-description>
    • definition of, 1
  • <font-face-name>
    • definition of, 1
  • 'font-family', 1
  • 'font-family' (descriptor), 1
  • 'font-size', 1
  • 'font-size' (descriptor), 1
  • 'font-size-adjust', 1
  • 'font-stretch', 1
  • 'font-stretch' (descriptor), 1
  • 'font-style', 1
  • 'font-style' (descriptor), 1
  • 'font-variant', 1
  • 'font-variant' (descriptor), 1
  • 'font-weight', 1
  • 'font-weight' (descriptor), 1
  • forced line break, 1
  • formatting context, 1
  • formatting structure, 1
  • forward-compatible parsing, 1
  • <frequency>, 1
    • definition of, 1
  • full font name, 1

  • generated content, 1
  • <generic-family>
    • definition of, 1
  • <generic-voice>, definition of, 1
  • georgian, 1
  • glyph, 1
  • 'grid' media group, 1
  • 'groove', 1, 2

  • half-leading, 1
  • hebrew, 1
  • 'height', 1
  • 'hidden, 1
  • 'hidden', 1
  • hiragana, 1
  • hiragana-iroha, 1
  • horizontal margin, 1
  • hover (pseudo-class), 1
  • hyphen-separated matching, 1

  • identifier, 1
  • identifier, definition of, 1
  • ignore, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27
  • illegal, 1
  • important, 1
  • inherit, definition of, 1
  • initial caps, 1
  • initial containing block, 1
  • initial value, 1
  • 'inline', definition of, 1
  • inline-level element, 1
  • inline-table, 1
  • 'inline-table', 1
  • inner edge, 1
  • 'inset', 1, 2
  • <integer>, 1
    • definition of, 1
  • intelligent font matching, 1
  • 'interactive media group, 1
  • internal table element, 1
  • intrinsic dimensions, 1
  • invert, 1
  • iso-10646, 1
  • Italic, definition of, 1

  • katakana, 1
  • katakana-iroha, 1

  • lang (pseudo-class), 1
  • language (human), 1
  • language code, 1, 2
  • leading, 1
  • <left>
    • definition of, 1
  • 'left', 1
  • <length>, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
    • definition of, 1
  • 'letter-spacing', 1
  • ligatures, 1
  • line box, 1
  • line-box, 1
  • 'line-height', 1
  • link (pseudo-class), 1, 2
  • list properties, 1
  • 'list-item', definition of, 1
  • 'list-style', 1
  • 'list-style-image', 1
  • 'list-style-position', 1
  • 'list-style-type', 1
  • LL(1), 1
  • local stacking context, 1
  • lower-greek, 1
  • lower-latin, 1
  • lower-roman, 1

  • mapping elements to table parts, 1
  • margin edge, 1
  • 'margin', 1
  • 'margin-bottom', 1
  • 'margin-left', 1
  • 'margin-right', 1
  • 'margin-top', 1
  • <margin-width>
    • definition of, 1
  • margin
    • horizontal, 1
    • of a box, 1
    • vertical, 1
  • marker', definition of, 1
  • 'marker-offset', 1
  • markers, 1
  • 'marks', 1
  • match, 1
  • 'mathline' (descriptor), 1
  • 'max-height', 1
  • 'max-width', 1
  • MAY, 1
  • media, 1
  • media group, 1
  • media type, 1
  • media-dependent import, 1
  • message entity, 1
  • 'min-height', 1
  • 'min-width', 1
  • monospace, definition of, 1
  • multiple declarations, 1
  • MUST, 1
  • MUST NOT, 1

  • name matching, 1
  • newline, 1
  • no-close-quote, 1, 2
  • no-open-quote, 1, 2
  • 'none'
    • as border style, 1, 2
    • as display value, 1
  • <number>, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
    • definition of, 1

  • open-quote, 1, 2
  • OPTIONAL, 1
  • 'orphans', 1
  • outer edge, 1
  • outline, 1
  • 'outline', 1
  • 'outline-color', 1
  • 'outline-style', 1
  • 'outline-width', 1
  • 'outset', 1, 2
  • overflow, 1
  • 'overflow', 1

  • padding edge, 1
  • 'padding', 1
  • 'padding-bottom', 1
  • 'padding-left', 1
  • 'padding-right', 1
  • 'padding-top', 1
  • <padding-width>
    • definition of, 1
  • padding
    • of a box, 1
  • page area, 1
  • page box, 1
  • page model, 1
  • page selector, 1
  • 'page', 1
  • 'page-break-after', 1
  • 'page-break-before', 1
  • 'page-break-inside', 1
  • page-context, 1
  • 'paged' media group, 1
  • Panose-1, 1
  • panose-1, 1
  • 'panose-1' (descriptor), 1
  • parent, 1
  • 'pause', 1
  • 'pause-after', 1
  • 'pause-before', 1
  • <percentage>, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
    • definition of, 1
  • 'pitch', 1
  • 'pitch-range', 1
  • pixel, 1
  • 'play-during', 1
  • 'position', 1
  • positioned element/box, 1
  • positioning scheme, 1
  • preceding element, 1
  • principal block box, 1
  • progressive rendering, 1
  • property, 1
  • pseudo-class
    • :first, 1
    • :left, 1
    • :right, 1
  • pseudo-classes, 1
    • :active, 1, 2
    • :focus, 1
    • :hover, 1
    • :lang, 1
    • :link, 1, 2
    • :visited, 1, 2
  • pseudo-elements, 1
    • :after, 1, 2
    • :before, 1, 2
    • :first-letter, 1
    • :first-line, 1, 2

  • quad width, 1
  • 'quotes', 1

  • RECOMMENDED, 1
  • reference pixel, 1
  • relative positioning, 1
  • relative units, 1
  • <relative-size>
    • definition of, 1
  • rendered content, 1
  • replaced element, 1
  • REQUIRED, 1
  • Resource Identifier (URI), 1
  • 'richness', 1
  • 'ridge', 1, 2
  • <right>
    • definition of, 1
  • 'right', 1
  • root, 1
  • root stacking context, 1
  • rule sets, 1
  • run-in, 1
  • run-in box, 1
  • 'run-in', definition of, 1

  • sans-serif, definition of, 1
  • scope, 1
  • screen reader, 1
  • selector, 1, 2, 3, 4
    • match, 1
    • subject of, 1
  • separated borders, 1
  • serif, definition of, 1
  • SHALL, 1
  • SHALL NOT, 1
  • <shape>
    • definition of, 1
  • sheet, 1
  • shorthand property, 1, 2, 3
  • SHOULD, 1
  • SHOULD NOT, 1
  • sibling, 1
  • simple selector, 1
  • 'size', 1
  • 'slope' (descriptor), 1
  • 'solid', 1, 2
  • source document, 1
  • space-separated matching, 1
  • 'speak', 1
  • 'speak-header', 1
  • 'speak-numeral', 1
  • 'speak-punctuation', 1
  • <specific-voice>
    • definition of, 1
  • specified value, 1
  • 'speech-rate', 1
  • square, 1
  • 'src' (descriptor), 1
  • stack level, 1
  • stacking context, 1
  • statements, 1
  • 'static' media group, 1
  • 'stemh' (descriptor), 1
  • 'stemv' (descriptor), 1
  • 'stress', 1
  • string, 1
  • <string>, 1, 2, 3, 4, 5
  • <string>, definition of, 1
  • style sheet, 1
  • subject (of selector), 1
  • system fonts, 1

  • table, 1
  • table element, 1
    • internal, 1
  • 'table', 1
  • table-caption, 1
  • 'table-caption', 1
  • table-cell, 1
  • 'table-cell', 1
  • table-column, 1
  • 'table-column', 1
  • table-column-group, 1
  • 'table-column-group', 1
  • table-footer-group, 1
  • 'table-footer-group', 1
  • table-header-group, 1
  • 'table-header-group', 1
  • 'table-layout', 1
  • table-row, 1
  • 'table-row', 1
  • table-row-group, 1
  • 'table-row-group', 1
  • tables, 1
  • 'tactile' media group, 1
  • 'text-align', 1
  • 'text-decoration', 1
  • 'text-indent', 1
  • 'text-shadow', 1
  • 'text-transform', 1
  • text/css, 1
  • <time>, 1
    • definition of, 1
  • tokenizer, 1
  • <top>
    • definition of, 1
  • 'top', 1
  • 'topline' (descriptor), 1
  • type selector, 1

  • UA, 1
  • unicameral, 1, 2
    • definition of, 1
  • unicode, 1
  • 'unicode-bidi', 1
  • 'unicode-range' (descriptor), 1
  • Uniform Resource Locator (URL), 1
  • Uniform Resource Name (URN), 1
  • 'units-per-em' (descriptor), 1
  • universal selector, 1
  • upper-latin, 1
  • upper-roman, 1
  • <urange>
    • definition of, 1
  • URI (Uniform Resource Identifier), 1
  • <uri>, 1, 2, 3, 4, 5, 6
    • definition of, 1
  • URL (Uniform Resource Locator), 1
  • URN (Uniform Resource Name), 1
  • user agent, 1

  • valid style sheet, 1
  • value, 1
  • vertical margin, 1
  • 'vertical-align', 1
  • viewport, 1
  • 'visibility', 1
  • visited (pseudo-class), 1, 2
  • visual formatting model, 1
  • 'visual' media group, 1
  • 'voice-family', 1
  • volume, 1
  • 'volume', 1

  • 'white-space', 1
  • 'widows', 1
  • 'width', 1
  • 'widths' (descriptor), 1
  • 'word-spacing', 1

  • x-height, 1
  • 'x-height' (descriptor), 1

  • 'z-index', 1


Ввдение в CSS2

2 Введение в CSS2

Содержание

  • 2.1 Краткое руководство по языку CSS2 для HTML-документов
  • 2.2 Краткое руководство по языку CSS2 для XML-документов
  • 2.3 Модуль предобработки в CSS2
    • 2.3.1 Область представления
    • 2.3.2 Модель адресации в CSS2
  • 2.4 Принципы разработки CSS-описаний

2.1 Краткое руководство по CSS2 для HTML-документов

В этом разделе будет продемонстрировано, насколько легко разрабатываются небольшие таблицы стилей. Для этого достаточно иметь общие представления о языке HTML (см. [HTML40]) и настольной издательской терминологии.

Начнем с небольшого HTML-документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Домашняя страница об И.С. Бахе</TITLE>
  </HEAD>
  <BODY>
    <H1>Домашняя страница об И.С. Бахе </H1>
    <P> Иоган Себастьян Бах написал много музыкальных произведений.
  </BODY>
</HTML>

Для того, чтобы текст стиля H1 отображался синим цветом, Вы можете написать следующее CSS-правило:

  H1 { color: blue }

Правило в CSS состоит из двух частей: селектора ('H1') и описания ('color: blue'). В свою очередь, описание также имеет две части: свойство ('color') и значение ('blue'). И хотя в вышеприведённом примере осуществляется попытка повлиять только на одно из свойств, необходимых для исполнения HTML-документа, тем не менее, непосредственно сам он и может быть назван таблицей стиля. Будучи объединённым с другими таблицами стилей (такая возможность является одной из основных характеристик CSS), он будет определять полное и окончательное отображение документа.

Спецификация языка HTML 4.0 определяет правила описания таблиц стилей для HTML-документов: либо непосредственно внутри HTML документа, либо посредством внешней таблицы стилей. Для вставки таблицы стиля в документ используют элемент STYLE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE> Домашняя страница об И.С. Бахе </TITLE>
  <STYLE type="text/css">
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1> Домашняя страница об И.С. Бахе </H1>
    <P> Иоган Себастьян Бах написал много музыкальных произведений
  </BODY>
</HTML>

Для максимальной гибкости мы рекомендуем авторам создавать внешние таблицы стилей, которые могут быть модифицированы без изменения исходного HTML- документа и могут совместно использоваться несколькими документами. Для соединения с внешней таблицей стиля можно использовать элемент LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE> Домашняя страница об И.С. Бахе </TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1> Домашняя страница об И.С. Бахе </H1>
    <P> Иоган Себастьян Бах написал много музыкальных произведений.
  </BODY>
</HTML>

Элемент LINK определяет:

  • тип соединения: "stylesheet".
  • местонахождение таблицы стилей через атрибут "ref".
  • тип присоединяемой таблицы стилей: "text/css".

Чтобы показать тесную связь между таблицей стилей и структурной разметкой документа, продолжим использование элемента STYLE в этом руководстве. Добавим больше цветов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE> Домашняя страница об И.С. Бахе </TITLE>
  <STYLE type="text/css">
    BODY { color: red }
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1> Домашняя страница об И.С. Бахе </H1>
    <P> Иоган Себастьян Бах написал много музыкальных произведений.
  </BODY>
</HTML>

Таблица стилей теперь содержит два правила: первое предопределяет отображение элементов основного текста красным цветом 'red', в то время как второе - отображение элементов стиля H1 синим цветом 'blue'. Так как для элемента P значение цвета не было установлено, то он унаследует цвет от родительского элемента, а именно от основного текста. Элемент стиля H1 также является дочерним элементом основного текста, но второе правило переопределяет унаследованное им значение. Подобные конфликты часто возникают в CSS между различными предписаниями значений. Представленное описание определяет пути их разрешения.

В CSS2 существует более 100 различных свойств, одним из которых является свойство 'color'. Далее предлагается рассмотреть некоторые другие свойства:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE> Домашняя страница об И.С. Бахе </TITLE>
  <STYLE type="text/css">
    BODY {
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em;
    }
  </STYLE>
  </HEAD>
  <BODY>
    <H1> Домашняя страница об И.С. Бахе </H1>
    <P> Иоган Себастьян Бах написал много музыкальных произведений.
  </BODY>
</HTML>

Первой бросается в глаза группа строк, разделенных точкой с запятой и заключённых в фигурные скобки "{}". После последней строки в этой группе также может ставиться точка с запятой.

Первая строка в элементе BODY устанавливает семейство шрифтов "Gill Sans". Если этот тип шрифтов недоступен, то пользовательский агент (часто именуемый программой просмотра или браузером) будет использовать шрифт 'sans-serif', который является одним из пяти шрифтов, распознаваемых всеми пользовательскими агентами. Дочерние элементы BODY наследуют значение 'font-family' .

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

Третья строка использует относительную единицу измерения, масштаб которой изменяется в зависимости от окружения. Единица измерения "em" относится к размеру шрифта элемента. В данном случае, размер полей вокруг элемента BODY в три раза больше размера шрифта.

2.2 Краткое руководство по CSS2 для XML-документов

Язык CSS может использоваться с любым структурированным форматом документов, например, с приложениями, написанными на языке XML (eXtensible Markup Language) [XML10]. Фактически, XML-приложения зависят от таблиц стилей больше, чем HTML-приложения, т.к. в первом случае разработчики могут создавать свои собственные элементы, которые не могут быть отображены программами просмотра.

Приведем простой фрагмент из XML-документа:

<ARTICLE>
  <HEADLINE> Фридрих Великий знакомится с Бахом </HEADLINE>
  <AUTHOR> Иоган Николас Форкель </AUTHOR>
  <PARA>
    Однажды вечером, как раз когда он готовил
    <INSTRUMENT>флейта</INSTRUMENT>, а его музыканты уже собрались, офицер подал ему список прибывших незнакомцев.
  </PARA>
</ARTICLE>

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

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

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

Одним из возможных путей интеграции таблицы стилей с XML-документом является использование команд предобработки:

<?XML:stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
  <HEADLINE> Фридрих Великий знакомится с Бахом </HEADLINE>
  <AUTHOR> Иоган Николас Форкель </AUTHOR>
  <PARA>
    Однажды вечером, как раз когда он готовил
    <INSTRUMENT>флейта</INSTRUMENT>, а его музыканты уже собрались, офицер подал ему список прибывших незнакомцев.
  </PARA>
</ARTICLE>

Программа просмотра изобразила бы вышеприведенный пример следующим образом:

Пример [D]

Заметьте, что слово "флейта" остается внутри абзаца, являясь содержимым элемента INSTRUMENT, принадлежащего непосредственно самой строке.

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

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

Программа просмотра изобразит вышеприведённый пример следующим образом:

Пример [D]

Добавляя больше правил в таблицу стилей, вы сможете и дальше улучшать представление документа.

2.3 Модуль предобработки в CSS2

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

Согласно предлагаемой модели, пользовательский агент обрабатывает исходный код в несколько этапов:

  1. Осуществляет грамматический анализ исходного документа и создает дерево документа.
  2. Определяет тип конечного устройства.
  3. Выбирает все таблицы стилей, связанные с документом и ассоциированные с определённым на предыдущем этапе конечным устройством.
  4. Комментирует каждый элемент дерева документа, присваивая по одному значению каждому свойству, ассоциированному с конечным типоп устройства. Операция присвоения значений осуществляется в соответствии с теми правилами, которые описаны в разделе "Каскадирование и наследование".

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

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

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

  6. Передает структуру форматирования на конечное устройство (например, печать результатов, отображение их на экране, звуковое воспроизведение, и т.д.).

Шаг 1 выходит за рамки данного описания (см., например, [DOM]).

Шаги 2-5 составляют предмет основного внимания в данном описании.

Шаг 6 выходит за рамки данного описания.

2.3.1 Область представления

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

2.3.2 Модель адресации в CSS2

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

  • Элементы в дереве документа и определенные связи между ними (см. раздел "Селекторы").
  • Атрибуты элементов в дереве документа и значения этих атрибутов (см. раздел "Селекторы атрибутов").
  • Некоторые части содержимого элемента (см. псевдоэлементы :first-line и :first-letter).
  • Элементы в дереве документа, находящиеся в определенном состоянии (см. раздел "Псевдоклассы").
  • Некоторые части области представления, в которых будет осуществлен вывод документа.
  • Определенная информация о системе (см. раздел "Пользовательский интерфейс").

2.4 Принципы разработки CSS-описаний

Язык CSS2, также как и его предшественник CSS1, базируется на совокупности определенных принципов разработки описаний:

  • Совместимость уровней. Пользовательские агенты, поддерживающие CSS2, смогут воспринимать таблицы стилей CSS1. В свою очередь, пользовательские агенты, поддерживающие CSS1, смогут читать таблицы стилей CSS2, игнорируя те их части, которые не доступны их пониманию. Кроме того, пользовательские агенты, не поддерживающие CSS, смогут отображать документы с использованием доступных стилей. Очевидно, что стилистические улучшения, появляющиеся за счет использования CSS, при этом не смогут быть отображены, но все содержимое документа, однако, будет представлено.

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

  • Независимость от поставщика, платформы и аппаратуры. Таблицы стилей позволяют документам сохранять независимость от поставщика, платформы и используемой аппаратуры. Сами таблицы стилей также не зависят от поставщика и платформы, а CSS2 позволяет определять целевую таблицу для группы устройств (например, принтеров).

  • Удобство эксплуатации. Используя в документах ссылки на таблицы стилей, вебмастеры позволяют существенно упростить обслуживание сайта, сохраняя его внешний вид относительно постоянным во времени и однообразным в пределах всего сайта. Например, для изменения цвета фона на web-странице организации необходимо модифицировать только один файл.

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

  • Производительность сети. Средства языка CSS предоставляют системы кодировки для компактного представления содержимого документа. Нередко по сравнению с графическими и звуковыми файлами, часто используемыми разработчиками для достижения определенных эффектов в презентации, таблицы стилей позволяют существенно выиграть в использовании ресурсов памяти. Кроме того, при этом необходимо меньшее число сетевых соединений, что позволяет еще больше увеличить производительность сети.

  • Гибкость. Использование CSS может осуществляться несколькими способами. Решающей при этом является возможность иерархического использования информации о стиле, описанной в основной (определяемой пользовательским агентом) таблице стиля, пользовательских таблицах стилей, присоединенных таблицах стилей, заголовке документа и в атрибутах элементов, формирующих тело документа.

  • Многообразие эффектов. Предоставляя разработчикам богатый набор эффектов, CSS увеличивает красочность Web-страницы как средства визуального отображения информации. Если дизайнеры стремились получить богатые функциональные возможности, то они и находили их в настольных издательских и слайд-шоу приложениях. Однако, некоторые из желаемых ими эффектов вступали в конфликт со свойством аппаратуры быть независимой. Теперь возможности языка CSS2 существенно продвинулись вперед, учитывая все требования дизайнеров.

  • Альтернативные средства интеграции. Совокупность свойств, определяемых в CSS и описанных в данной спецификации, формирует модель самосогласованного форматирования для вывода визуальной и звуковой информации. Доступ к данной модели форматирования осуществляется посредством языка CSS, либо, благодаря существующей возможности, посредством других языков. Например, программа JavaScript может динамически изменять значение свойства 'color' некоторого элемента.

  • Доступность. Некоторые функции CSS сделают web-страницу более доступной для тех пользователей, у которых имеются ограничения доступа:

    • Свойства, позволяющие управлять выводом шрифтов, позволяют разработчикам избегать недоступных побитовых отображений текста.
    • Свойства позиционирования позволяют разработчикам избегать разметки (например, невидимых изображений), управляющей расположением объектов.
    • Семантика правил !important позволяет пользователям, имеющим специфические требования к презентации, игнорировать таблицы стилей разработчика.
    • Новый тип значения 'inherit', которым обладают все свойства, делает более универсальным каскадное использование таблиц и позволяет упростить и сделать более последовательной настройку стиля.
    • Усовершенствованная поддержка устройств, включая поддержку групп устройств и устройств для эктипографии, рельефной печати и телетайпа, позволит пользователям и разработчикам настраивать вывод под свою аппаратуру.
    • Свойства, позволяющие управлять звуковым сигналом, предоставляют контроль за воспроизведением речи и аудио-выходным.
    • Селекторы атрибутов, функция 'attr()' и свойство 'content' предоставляют доступ к модифицируемому содержимому.
    • Счетчики и нумерация параграфов/разделов могут улучшить просмотр документа и сохранить расстояние между выпуклостями (что очень важно для эктипографических устройств). Кроме того, свойства 'word-spacing' и 'text-indent' исключают необходимость в дополнительном свободном месте.

    Примечание. Для получения дополнительной информации по разработке легко читаемых документов с использованием CSS и HTML обращайтесь по адресу [WAI-PAGEAUTH].


Типы устройств

7 Типы устройств

Содержание

  • 7.1 Ознакомление с типами устройств
  • 7.2 Построение аппаратно-зависимых таблиц стилей
    • 7.2.1 Правило @media
  • 7.3 Распознаваемые типы устройств
    • 7.3.1 Группы устройств

7.1 Ознакомление с типами устройств

Одним из важнейших свойств таблиц стилей является то, что они определяют способ представления документа для различных устройств вывода: монитора, синтезатора речи, устройства печати азбуки Брайля, печатных устройств и т.д.

Некоторые свойства CSS предназначены только для конкретных устройств (например, свойство 'cue-before' предназначено для агентов пользователей, управляющих воспроизведением звука). Однако иногда таблицы стилей, созданные для различных типов устройств, могут использовать одно и то же свойство, но при этом только требовать, чтобы оно принимало различные значения в зависимости от используемого устройства. Например, свойство 'font-size' может использоваться как при работе с монитором, так и с печатающими устройствами. Т.к. эти два устройства отличны друг от друга, то для одного и того же свойства могут потребоваться различные значения: при отображении документа на экране обычно необходим шрифт большего размера, чем при его выводе на печатающее устройство. Практика свидетельствует, что шрифты семейства sans-serif лучше воспринимаются на экране, а шрифты семейства serifs лучше читаются на бумаге. По этой причине очень важно определять тип устройства, к которому относится таблица стилей или некоторый ее раздел.

7.2 Построение аппаратно-зависимых таблиц стилей

Существует два способа построения аппаратно-зависимых таблиц стилей:

  • Задать целевое устройство с помощью правил @media или @import.

    Пример(ы):

    @import url("loudvoice.css") aural;
@media print {
  /* далее идет таблица стиля для печати */
}
  • Задать конечное устройство в языке документа. Например, в HTML 4.0 ([HTML40]) атрибут "media" элемента LINK указывает конечное устройство для внешней таблицы стилей:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
      <TITLE>Связь с конечным устройством</TITLE>
      <LINK rel="stylesheet" type="text/css"
     media="print, handheld" href="foo.css">
   </HEAD>
   <BODY>
      <P>Основное тело документа
   </BODY>
</HTML>

Правило @import описывается в главе о каскаде.

7.2.1 Правило @media

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

  @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

7.3 Распознаваемые типы устройств

Тип устройств, определяемый в CSS, именует набор свойств CSS. Агент пользователя, который поддерживает определенный тип устройств, должен Уметь использовать все свойства, применяющиеся к данному типу.

Имена, приписываемые типам устройств в CSS, отражают конечные устройства, для которых соответствующие свойства имеют смысл. В следующем списке типов устройств CSS описания, находящиеся в скобках, не являются нормативными. Они только дают представление об устройстве, которое может относиться к данному типу.

all
Предназначен для всех устройств.
aural
Предназначен для речевых синтезаторов. Подробную информацию можно получить в разделе о звуковых таблицах стилей.
braille
Предназначен для устройств чтения азбуки Брайля.
embossed
Предназначен для печати азбуки Брайля.
handheld
Предназначен для переносимых портативных устройств (небольшие монохромные экраны с ограниченной полосой частот).
print
Предназначен для страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра печати. Информацию о принципах форматирования, характерных только для устройств с постраничной разбивкой, можно получить в разделе об устройствах постраничного вывода.
projection
Предназначен для настенных презентаций, например, для проекторов или для печати плакатов. Информацию о принципах форматирования, характерных только для устройств с постраничной разбивкой, можно получить в разделе об устройствах постраничного вывода.
screen
В первую очередь предназначен для цветных дисплеев.
tty
Предназначен для устройств, использующих набор символов с фиксированной шириной, например, телетайпов, терминалов или портативных устройств с ограниченными возможностями отображения. Для устройств типа "tty" не следует использовать пикселы.
tv
Предназначен для устройств типа телевизора (для которых характерны низкое разрешение, цветное изображение, ограниченная прокрутка на экране, возможность передачи звука).

Названия типов устройств не зависят от регистра.

Из-за быстрого изменения технологий в CSS2 не представлен список конкретных типов устройств, выступающих в качестве значений для правила @media.

Примечание. В будущих версиях CSS список устройств, возможно, будет дополнен. Разработчикам не стоит полагаться на названия типов устройств, которые еще не определены в описании CSS.

7.3.1 Группы устройств

Определение каждого свойства CSS сопровождается перечислением типов устройств, для которых оно должно реализовываться конформным агентом пользователя. Т.к. свойства применяются обычно к нескольким устройствам, то в пункте "применяется к устройствам" определения свойства указываются не отдельные типы, а группы устройств. Свойство применяется ко всем типам устройств, принадлежащим хотя бы одной из упомянутых групп устройств.

В CSS2 имеются следующие группы устройств:

  • устройства без разбивки или с постраничной разбивкой. "Оба" обозначает, что свойство применяется к обеим группам устройств.
  • устройства визуального, звукового или тактильного форматирования.
  • устройства с сеточным (устройства с символьной сеткой) или растровым типом вывода. "Оба" обозначает, что свойство применяется к обеим группам устройств.
  • интерактивные (взаимодействующие с пользователем) или статические (не взаимодействующие с пользователем) устройства. "Оба" обозначает, что свойство применяется к обеим группам устройств.
  • all(включает все типы устройств)

В следующей таблице представлены взаимоотношения между группами устройств и типами устройств:

Взаимодействие между группами устройств и типами устройств
Типы устройств | Группы устройств
 | без разбивки/с разбивкой | визуальные / звуковые / тактильные | сеточные / растровые | интерактивные / статичные
aural | без разбивки | звуковые | N/A | оба
braille | без разбивки | тактильные | сеточные | оба
emboss | страничные | тактильные | сеточные | оба
handheld | оба | визуальные | оба | оба
print | страничные | визуальные | растровые | статичные
projection | страничные | визуальные | растровые | статичные
screen | без разбивки | визуальные | растровые | оба
tty | без разбивки | визуальные | сеточные | оба
tv | оба | визуальные, звуковые | растровые типа | оба


Приложение C. Замечания по реализации и использованию шрифтов

Содержание

  • C.1 Глоссарий полиграфических терминов
  • C.2 Доступ к шрифтам
  • C.3 Значение чисел Panose
  • C.4 Диапазон уникода, используемый для шрифтов формата TrueType
  • C.5 Автоматическая генерация дескрипторов

Это приложение не является нормативным, а носит только информативный характер.

C.1 Глоссарий полиграфических терминов

DocLock™
Технология DocLock™, разработанная компанией Bitstream, позволяет использовать переносимые ресурсы шрифтов (PFR) формата TrueDoc исключительно в пределах того сервера, для которого они опубликованы. Названные ресурсы, будучи перемещенными на другой сервер или используемыми с другого сервера, функционировать не будут.
Цифровая подпись (digital signature)
Компонента технологии управления по доверенности, используемая для предоставления подписанных утверждений о ресурсе.
Кэширование шрифтов (font cashing)
Кэширование шрифтов позволяет создавать временные копии шрифтов в системе клиента. Зачастую на диске эти копии хранятся вместе с другими кэшированными объектами, такими, например, как изображения, исключительно для агента пользователя.
Начертание шрифта (font face)
"Дескриптор", указывающий на определенный внешний вид шрифта, за исключением размера.
Сопоставление шрифтов (font matching)
Сопоставление шрифтов - это процедура выбора шрифта, похожего на исходный, с использованием одного или нескольких атрибутов последнего. Типичными являются те атрибуты, которые задают наличие засечек у букв, толщину, высоту строчных и заглавных букв, межсимвольный интервал, язык и наклон. Результат процедуры сопоставления определяется используемым алгоритмом и множеством доступных шрифтов.
Создание подмножества отображаемых глифов (Glyph Representation Sub-setting)
Создание подмножества отображаемых глифов - это процедура удаления представлений ненужных глифов (вместе с информацией об их несущих контурах и кернинге) из исходного шрифта для формирования его подмножества, достаточного для представления некоторой совокупности документов. Это оказывается удобным для документов, в которых используются системы идеографической письменности, в которых множество глифов, используемое в качестве дополнения к основному шрифту, может быть очень большим. Не зная правил формирования лигатур, используемых в конечной системе вывода, очень тяжело создавать подмножество отображаемых глифов для документов, использующих системы письменности (например, арабские), в которых необходимы лигатуры.
Intellifont
Технология Intellifont была разработана компанией Agfa и принята в качестве основного формата для принтеров, разрабатываемых, в частности, компанией Hewlett-Packard, в которых используется язык PCL5. Кроме того, она представляет собой основной формат шрифтов, используемых на компьютерах Amiga.
Infinifont
Процедура синтеза шрифтов, которая, имея в распоряжении число Panose-1 (и, возможно, описание дополнительных характеристик шрифта) может генерировать подстановочный шрифт, не прибегая при этом ни к экстраполяции имеющегося основного контура, ни к интерполяции между двумя или несколькими контурами (см. [INFINIFONT]).
Курсив (italic)
Совокупность форм начертаний латинских букв, наклон которых круче наклона, используемого при прямом начертании, и не превосходит наклона глифов рукописных шрифтов. Очень часто для совместного использования разрабатывается пара шрифтов - прямой и курсив. Для описания рассматриваемой совокупности форм могут использоваться другие термины, такие, например, как 'cursive' или 'kursiv' для кириллических шрифтов. Совместно с гротесками чаще всего используются наклонные шрифты ('slanted' или 'oblique').

Курсив [D]

Кернинг
Изменение интервала между отдельными отображениями глифов, которые, если это не будет сделано, будут отображены либо слишком близко, либо слишком далеко друг от друга. Благодаря этому формируется более равномерное распределение типографской краски.

Пример кернинга [D]

Ведущий многокомпонентный шрифт (Multiple Master Font)
Ведущий многокомпонентный шрифт формируется из двух исходных шрифтов как результат их интерполяции, осуществляемой специальной программой вывода. Компания Adobe Systems предоставляет методику многопараметрического управления результатом интерполяции. Используемые при этом параметры в основном описывают характеристики желаемого результата синтеза, реальным воплощением которого является ведущий многокомпонентный шрифт.
Open Type
Open Type - это расширение шрифтового формата TrueType, содержащее дополнительную информацию, улучшающую возможности шрифтов и обеспечивающую высококачественную многоязыковую печать. Формат Open Type позволяет устанавливать соответствие между одним символом и несколькими отображаемыми глифами или (при создании лигатуры) между совокупностью символов и одним отображаемым глифом. Данный формат содержит информацию о двумерном представлении, позволяющую осуществлять сложное позиционирование и прикрепление глифов. Форматы TrueType Open и OpenType содержат исчерпывающую информацию о шрифте и языке, в соответствии с которой приложение, осуществляющее обработку текста, может настраивать свою работу соответствующим образом (см. [OPENTYPE]).
Шрифт сервера
Шрифт сервера - это расположенный на web-сервере ресурс шрифта, обращение к которому осуществляется в соответствии с описанием сетевого шрифта (WebFont). Агент пользователя может использовать этот ресурс для отображения страницы.
Speedo
Типографская технология Speedo разработана компанией Bitstream и используется в качестве основного формата шрифтов на компьютерах фирм Atari ST и Falcon. Кроме того,она используется на компьютерах, работающих под управлением системы X-windows.
TrueDoc
Технология TrueDoc разработана компанией Bitstream для использования в глобальной сети при создании, передислокации и отображении масштабируемых объектов шрифтов, независящих от платформы. Создание и отображение объектов шрифта выполняется с использованием устройств, осуществляющих соответственно запись (character shape recorder - CSR) и воспроизведение (character shape player - CSP) формы символов формата TrueDoc. Данная технология предназначена для использования в глобальной сети для просмотра и печати.
Переносимый шрифтовой ресурс (Portable Font Resource) формата TrueDoc
Переносимый шрифтовой ресурс формата TrueDoc (или PFR) - это независящий от платформы масштабируемый объект шрифта, создаваемый устройством воспроизведения формы символов. В качестве входного может выступать любой шрифт формата TrueType или Type 1, поддерживаемый множеством различных операционных систем, таких как Windows, Mac или Unix. Мобильные шрифтовые ресурсы формата TrueDoc обеспечивают хорошие коэффициенты сжатия, не зависят от платформы, но по причине несоответствия естественным форматам шрифтов (TrueType или Type 1) оказываются неудобными в установке.
TrueType
TrueType - это формат шрифта, разработанный компанией Apple и лицензированный для компании Microsoft. Этот формат шрифтов используется в операционных системах Windows и Macintosh. TrueType содержит иерархическое множество таблиц и отображений глифов. Символы могут задаваться как целиком, так и по отдельным точкам, что позволяет достигнуть высокого качества при реальных разрешающих способностях дисплеев. Шрифты формата TrueType, используемые в Windows и Mac, имеют определенные различия, которые могут достигать уровня, не позволяющего использовать их на различных платформах.
TrueType Collection
TrueType Collection (или TTC) - это расширение формата TrueType, включающее таблицы, которые позволяют хранить несколько шрифтов формата TrueType в одном файле. В настоящий момент файлы типа TrueType Collection используются достаточно редко.
Шрифты формата TrueType GX
Шрифты формата TrueType GX содержат дополнения к стандартному формату TrueType, позволяющие создавать видоизменяемые шрифты, аналогичные ведущим многокомпонентным шрифтам. При модификациях формы шрифта может использоваться несколько степеней свободы, таких как насыщенность, высота и наклон шрифта. Для достижения практически любого эффекта может быть определена своя степень свободы. Формат TrueType GX может также поддерживать видоизменяющиеся замены для отображаемых глифов лигатур, контекстных форм, дробей и др. В настоящее время этот формат доступен только на компьютерах Macintosh (см. [TRUETYPEGX]).
Шрифты формата Type 1
Шрифты формата Type 1, разработанные компанией Adobe Systems, стали одними из первых доступных представителей масштабируемых форматов. Обычно шрифты формата Type 1 содержат 228 символов с отображаемыми глифами, описанными с помощью кривых Безье третьего порядка. В системах Mac, Windows и X используются однотипные, но при этом несовместимые форматы. Фирма Adobe представляет программу Adobe Type Manager для всех трех платформ. Type1c - это более поздняя версиея формата хранения отображаемых глифов Type 1, в которой сжатие информации происходит без ее потери.
Привязка к URI
Процесс привязки определенного шрифтового ресурса к заданному web-серверу путем вставки в ресурс шрифта зашифрованного URI или уведомления об использовании, заверенного цифровой подписью.

C.2 Доступ к шрифтам

Существует множество различных форматов шрифтов, используемых на разных платформах. При выборе необходимого формата анализируется содержание его описания (см. [NEGOT]). Поскольку оно содержит URI, то всегда можно сказать, когда на данный шрифт осуществляется ссылка. Каждая конкретная реализация агента имеет вспомогательную информацию о поддерживаемых ею форматах загружаемых шрифтов, которая может использоваться во избежание загрузки шрифтов в неподдерживаемых форматах.

C.3 Значение чисел Panose

Иллюстрация системы Panose-1 [D]

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

Ниже описаны семантика этих десяти чисел и их допустимые значения (в круглых скобках) для наиболее типичного случая, когда для обозначения гарнитуры используется цифра 2, текст и непечатаемые символы. (Если первая цифра имеет другое значение, то и остальные девять цифр имеют другой смысл). Более подробную информацию о системе Panose-1 можно получить в [PANOSE].

Первое число. Гарнитура
  • Может использоваться любое значение (0)
  • Подходящего значения нет (1)
  • [PANOSE] Латинская текстовая и непечатаемые символы (2)
  • [PANOSE] Латинская рукописная (3)
  • [PANOSE] Латинская декоративная (4)
  • [PANOSE] Латинская иллюстративная (5)
Второе число. Стили засечек
  • Может использоваться любое значение (0)
  • Подходящего значения нет (1)
  • Куполообразный [Cove] (2)
  • Куполообразный тупоугольный [Obtuse Cove] (3)
  • Граненный куполообразный [Square Cove] (4)
  • Граненный куполообразный тупоугольный [Obtuse Square Cove] (5)
  • Прямоугольный [Square] (6)
  • Нитевидный [Thin] (7)
  • Шипообразный [Bone] (8)
  • Резко расширяющийся [Exaggerated] (9)
  • Треугольный [Triangle] (10)
  • Нормальный [Normal Sans] (11)
  • Тупоугольный [Obtuse Sans] (12)
  • Крутой или перпендикулярный [Perp Sans] (13)
  • Расширяющийся [Flared] (14)
  • Закругленный [Rounded](15)
Третье число. Насыщенность
  • Может использоваться любое значение (0)
  • Подходящего значения нет (1)
  • Сверхсветлое начертание (Very Light) (2)[100]
  • Светлое начертание (Light) (3) [200]
  • Светлое начертание (Thin) (4) [300]
  • Нормальное начертание (book) (5) [400] аналогично 'normal' в CSS1
  • Полужирное начертание (Medium) (6) [500]
  • Полужирное начертание (Demi) (7) [600]
  • Жирное начертание (Bold) (8) [700] аналогично 'bold' в CSS1
  • Жирное начертание (Heavy) (9) [800]
  • Сверхжирное начертание (Black) (10) [900]
  • Сверхжирное начертание (Extra Black / Nord) (11) [900] принудительное отображение в диапазон от 100 до 900, используемый в CSS1
Четвертое число. Пропорции
  • Может использоваться любое значение (0)
  • Подходящего значения нет (1)
  • Минускульный шрифт (Old Style) (2)
  • Современный шрифт (Modern) (3)
  • Пропорциональный шрифт (Even Width) (4)
  • Широкий шрифт (Expanded) (5)
  • Узкий шрифт (Condensed) (6)
  • Сверхширокий шрифт (Very Expanded) (7)
  • Сверхузкий шрифт (Very Condensed) (8)
  • Моноширный шрифт (Monospaced) (9)
Пятое число. Контрастность
  • Может использоваться любое значение (0)
  • Подходящего значения нет (1)
  • Неконтрастный (None) (2)
  • Ультранизкая контрастность (Very Low) (3)
  • Сверхнизкая контрастность (Low) (4)
  • Низкая контрастность (Medium Low) (5)
  • Контрастный (Medium) (6)
  • Высокая контрастность (Medium High) (7)
  • Сверхвысокая контрастность (High) (8)
  • Ультравысокая контрастность (Very High) (9)
Шестое число. Форма штрихов
  • Может использоваться любое значение (0)
  • Подходящего значения нет (1)
  • Без вариаций (No Variation) (2)
  • С плавными вариациями/диагональными (Gradual/Diagonal) (3)
  • С плавными вариациями/промежуточными (Gradual/Transitional) (4)
  • С плавными вариациями/вертикальными (Gradual/Vertical) (5)
  • С плавными вариациями/горизонтальными (Gradual/Horizontal) (6)
  • С резкими вариациями/вертикальными (Rapid/Vertical) (7)
  • С резкими вариациями/горизонтальными (Rapid/Horizontal) (8)
  • С мгновенными вариациями/горизонтальными (Instant/Horizontal) (9)
  • С мгновенными вариациями/вертикальными (Instant/Vertical)(10)
Седьмое число. Форма росчерков
  • Может использоваться любое значение (0)
  • Подходящего значения нет (1)
  • Прямые росчерки/горизонтальные (Straight Arms/Horizontal) (2)
  • Прямые росчерки/клинообразные (Straight Arms/Wedge) (3)
  • Прямые росчерки/вертикальные (Straight Arms/Vertical) (4)
  • Прямые росчерки/с одной засечкой (Straight Arms/Single Serif) (5)
  • Прямые росчерки/с двумя засечками (Straight Arms/Double Serif) (6)
  • Непрямые росчерки/горизонтальные (Non-Straight Arms/Horizontal) (7)
  • Непрямые росчерки/клинообразные (Non-Straight Arms/Wedge) (8)
  • Непрямые росчерки/вертикальные (Non-Straight Arms/Vertical) 90)
  • Непрямые росчерки/с одной засечкой (Non-Straight Arms/Single Serif) (10)
  • Непрямые росчерки/с двумя засечками (Non-Straight Arms/Double Serif) (11)
Восьмое число. Общая форма символов
  • Может использоваться любое значение (0)
  • Подходящего значения нет (1)
  • Нормальная/непрерывная (Normal/Contact) (2)
  • Нормальная/насыщенная (Normal/Weighted) (3)
  • Нормальная/блочная (Normal/Boxed) (4)
  • Нормальная/расширяющаяся (Normal/Flattened) (5)
  • Нормальная/закругленная (Normal/Rounded) (6)
  • Нормальная/децентрированная (Normal/Off Center) (7)
  • Нормальная/прямоугольная (Normal/Square) (8)
  • Наклонная/непрерывная (Oblique/Contact) (9)
  • Наклонная/насыщенная (Oblique/Weighted) (10)
  • Наклонная/блочная (Oblique/Boxed) (11)
  • Наклонная/расширяющаяся (Oblique/Flattened) (12)
  • Наклонная/закругленная (Oblique/Rounded) (13)
  • Наклонная/децентрированная (Oblique/Off Center) (14)
  • Наклонная/прямоугольная (Oblique/Square) (15)
Девятое число. Средняя линия
  • Может использоваться любое значение (0)
  • Подходящего значения нет (1)
  • Стандартная/укороченная (Standard/Trimmed) (2)
  • Стандартная/заостренная (Standard/Pointed) (3)
  • Стандартная/с засечкой (Standard/Serifed) (4)
  • Завышенная/укороченная (High/Trimmed) (5)
  • Завышенная/заостренная (High/Pointed) (6)
  • Завышенная/с засечкой (High/Serifed) (7)
  • Постоянная/укороченная (Constant/Trimmed) (8)
  • Постоянная/заостренная (Constant/Pointed) (9)
  • Постоянная/с засечкой (Constant/Serifed) (10)
  • Заниженная/укороченная (Low/Trimmed) (11)
  • Заниженная/заостренная (Low/Pointed) (12)
  • Заниженная/с засечкой (Low/Serifed) (13)
Десятое число. Строчные буквы
  • Может использоваться любое значение (0)
  • Подходящего значения нет (1)
  • Постоянной высоты/маленькие (Constant/Small) (2)
  • Постоянной высоты/стандартные (Constant/Standard) (3)
  • Постоянной высоты/большие (Constant/Large) (4)
  • Непостоянной высоты/маленькие (Ducking/Small) (5)
  • Непостоянной высоты/стандартные (Ducking/Standard) (6)
  • Непостоянной высоты/большие (Ducking/Large) (7)

Panose-2 (см. [PANOSE2]) представляет собой описание процедуры сопоставления и более тщательной классификации шрифтов, которая не ограничивается только латинскими шрифтами. Здесь, например, можно сравнить характеристики засечек и штриховых окончаний букв латинского и японского начертания соответственно.

Значение Panose-2 не хранится ни в одном из известных форматов шрифтов, но может быть измерено.

C.4 Вывод диапазонов Unicode для шрифтов формата TrueType

Диапазон, содержащий символы unicode, используемые некоторым шрифтом, задается битами 'ulUnicodeRange' таблицы 'OS/2' (если таковая имеется), реализующей побитовое представление диапазона. Эта таблица определена в описании формата TrueType версии 1.66, разработанном компанией Microsoft. Данный диапазон можно охарактеризовать набором определенных элементов, каждому из которых в соответствие можно поставить множество символов Unicode 1.1, а наличие некоторого элемента в наборе можно будет интерпретировать как наличие в шрифте одного или нескольких отображаемых глифов, используемых для представления хотя бы одного символа из множества, соответствующего данному элементу. Упомянутый набор состоит из 128 элементов, как описано ниже. Порядок их следования обычно заимствуется из стандарта Unicode 1.1. Эта таблица может использоваться для преобразования информации, представленной в формате TrueType, в дескрипторе 'unicode-range' каскадной таблицы стилей.
Мн-во | Плюс | Русскоязычное название множества | Англоязычное название множества | Диапазон Unicode
0 | 1 | Основная латиница | Basic Latin | U+0-7F
1 | 2 | Латиница-1 | Latin-1 Supplement | U+80-FF
2 | 4 | A. Расширение Латиницы-1 | Latin-1 Extended-A | U+100-17F
3 | 8 | B. Расширение Латиницы-1 | Latin Extended-B | U+180-24F
4 | 1 | Дополнения из международного алфавита фонетических символов | IPA Extensions | U+250-2AF
5 | 2 | Символы изменения пробела | Spacing Modifier Letters | U+2B0-2FF
6 | 4 | Диакритические знаки | Diacritical Marks | U+300-36F
7 | 8 | Основной греческий | Greek | U+370-3CF
8 | 1 | Символы греческого и коптского языков | Greek Symbols and Coptic | U+3D0-3EF
9 | 2 | Кириллица | Cyrillic | U+400-4FF
10 | 4 | Армянский язык | Armenian | U+530-58F
11 | 8 | Иврит | Hebrew | U+590-5FF
12 | 1 | A. Расширение иврита B. Расширение иврита | Hebrew Extended-A Hebrew Extended-B | ?? диапазон ??
13 | 2 | Арабский язык | Arabic | U+600-69F
14 | 4 | Расширенный арабский язык | Arabic Extended | U+670-6FF
15 | 8 | Деванагари (Индийское слоговое письмо) | Devanagari | U+900-97F
16 | 1 | Бенгальский язык | Bengali | U+980-9FF
17 | 2 | Гурмукхи | Gurmukhi | U+A00-A7F
18 | 4 | Гуярати | Gujarati | U+A80-AFF
19 | 8 | Язык ория (Индия) | Oriya | U+B00-B7F
20 | 1 | Тамильский язык | Tamil | U+B80-BFF
21 | 2 | Язык телугу | Telugu | U+C00-C7F
22 | 4 | Каннада (дравидийский язык Южной Индии) | Kannada | U+C80-CFF
23 | 8 | Малайский язык | Malayalam | U+D00-D7F
24 | 1 | Тайский язык | Thai | U+E00-E7F
25 | 2 | Лаосский язык | Lao | U+E80-EFF
26 | 4 | Грузинский язык | Georgian | U+10A0-10EF
27 | 8 | Расширенный грузинский язык | Georgian Extended | U+10F0-10FF ??
28 | 1 | Хангул (корейская азбука) | Hangul Jamo | U+1100-11FF
29 | 2 | Расширенная латиница (дополнение) | Latin Extended Additional | -
30 | 4 | Расширенный греческий | Greek Extended | U+1F00-1FFF
31 | 8 | Знаки пунктуации | General Punctuation | U+2000-206F
32 | 1 | Верхние и нижние индексы | Superscripts and Subscripts | -
33 | 2 | Денежные знаки | Currency Symbols | U+20A0-20CF
34 | 4 | Элементы группировки для символов | Combining Marks for Symbols | U+20D0-20FF
35 | 8 | Буквенные символы | Letterlike Symbols | U+2100-214F
36 | 1 | Числовые символы | Number Forms | U+2150-218F
37 | 2 | Стрелки | Arrows | U+2190-21FF
38 | 4 | Математические операторы | Mathematical Operators | U+2200-22FF
39 | 8 | Различные технические символы | Miscellaneous Technical | U+2300-23FF
40 | 1 | Управляющая графика | Control Pictures | U+2400-243F
41 | 2 | Оптически распознаваемые символы | Optical Character Recognition | U+2440-245F
42 | 4 | Встроенный буквенно- цифровой индикатор | Enclosed Alphanumerics | U+2460-24FF
43 | 8 | Символы рамок | Box Drawing | U+2500-257F
44 | 1 | Элементы диаграмм | Block Elements | U+2580-259F
45 | 2 | Геометрические фигуры | Geometric Shapes | U+25A0-25FF
46 | 4 | Различные символы | Miscellaneous Symbols | U+2600-26FF
47 | 8 | Символы графической разметки текста | Dingbats | U+2700-27BF
48 | 1 | Символы и знаки пунктуации японского, корейского и китайского языков | CJK Symbols and Punctuation | U+3000-303F
49 | 2 | Хирагана | Hiragana | U+3040-309F
50 | 4 | Катакана | Katakana | U+30A0-30FF
51 | 8 | Бопомофо | Bopomofo | U+3100-312F
52 | 1 | Символы, совместимые с языком хангул | Hangul Compatibility Jamo | U+3130-318F
53 | 2 | Различные символы японского, корейского и китайского языков | CJK Miscellaneous | ?? Диапазон ??
54 | 4 | Буквы и символы месяцев японского, корейского и китайского языков | Enclosed CJK Letters and Months | U+3200-32FF
55 | 8 | Символы, совместимые с грамматикой японского, корейского и китайского языков | CJK compatibility | U+3300-33FF
56 | 1 | Хангул | Hangul | U+AC00-D7FF
59 | 8 | Обобщенные идеографы японского, корейского и китайского языков | CJK Unified Ideographs | U+4E00-9FFF
60 | 1 | Область личных символов | Private Use Area | U+E000-F8FF
61 | 2 | Идеографы, совместимые с грамматикой японского, корейского и китайского языков | CJK Compatibility Ideographs | U+F900-FAFF
62 | 4 | Формы для создания алфавитного списка | Alphabetic Presentation Forms | U+FB00-FB4F
63 | 8 | A. Формы для представления арабских символов | Arabic Presentation Forms-A | U+FB50-FDFF
64 | 1 | Неполные элементы группировки | Combining Half Marks | U+FE20-FE2F
65 | 2 | Формы, совместимые с грамматикой японского, корейского и китайского языков | CJK compatibility Forms | U+FE30-FE4F
66 | 4 | Разновидности мелких форм | Small Form Variants | U+FE50-FE6F
67 | 8 | B. Формы для представления арабских символов | Arabic Presentation Forms-B | U+FE70-FEFF
68 | 1 | Полные и неполные формы | Halfwidth and Fullwidth Forms | U+FF00-FFEF
69 | 2 | Специальные символы | Specials | U+FFF0-FFFD

Один из недостатков формата TrueType состоит в том, что его система побитового представления привязана к Unicode 1.1 и не может работать с его расширениями. Например, с ее помощью невозможно отобразить символы тибетского языка или других систем письменности, представленных в Unicode версии 2.0 и выше.

C.5 Автоматическая генерация дескрипторов

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

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

Дескриптор | Type 1 | TrueType и OpenType | TrueType GX [TRUETYPEGX]
'ascent' | 'Ascender' в файле AFM/PFM | 'Ascender' в таблице 'hhea' или (предпочтительнее) 'sTypoAscender' в таблице 'OS/2' | 'horizontalBefore' в таблице 'fmtx'
'baseline' |  |  | таблица bsln, см. примечание
'bbox' | FontBBox, словарь шрифтов | элементы 'xMin', 'xMax', 'yMin' и 'yMax' таблицы 'head' |
'cap-height' | CapHeight в файле AFM/PFM |  |
'descent' | 'Descender' в файле AFM/PFM. |  |
'mathline' |  |  | таблица bsln
'font-family' | FamilyName, словарь по характеристикам шрифта | таблица name |
'stemh' | StdHW, собственный словарь файла AFM/PFM |  |
'stemv' | /StdVW, собственный словарь | таблица cvt |
'topline' |  |  | таблица bsln
'unicode-range' | файл cmap | таблица OS/2, см. Приложение C |
'units-per-em' | FontMatrix, словарь шрифтов | unitsPerEm, таблица head. |
'widths' |  | таблица hmtx |
  • В таблице bsln идеографическая центральная и нижняя базовые линии могут использоваться для растяжения идеографических символов в случае преобладания идеографических или латинских, греческих или кириллических символов соответственно.


Устройства с постраничной разбивкой

13 Устройства с постраничной разбивкой

Содержание

  • 13.1 Ознакомление с системами постраничного представления документа
  • 13.2 Страничные блоки: правило @page
    • 13.2.1 Поля страницы
    • 13.2.2 Размер страницы: свойство 'size'
      • Отображение страничных блоков, не вмещающихся на листе
      • Позиционирование страничного блока на листе
    • 13.2.3 Метки обрезки: свойство 'marks'
    • 13.2.4 Левые, правые и первая страницы
    • 13.2.5 Содержимое за пределами страничного блока
  • 13.3 Разрывы страниц
    • 13.3.1 Разрывы до и после элементов: 'page-break-before', 'page-break-after', 'page-break-inside'
    • 13.3.2 Использование именованных страниц: 'page'
    • 13.3.3 Разрывы внутри элементов: 'orphans', 'widows'
    • 13.3.4 Допустимые разрывы страниц
    • 13.3.5 Принудительные разрывы страниц
    • 13.3.6 Наилучшие разрывы страниц
  • 13.4 Каскад в контексте описания страницы

13.1 Ознакомление с системами постраничного представления документа

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

  1. модель представления документа в виде блоков расширена путем введения страничного блока, позволяющего разработчикам регулировать размеры страниц, их поля и т.д.;
  2. модель визуального форматирования расширена путем введения модели страницы, позволяющей осуществлять разрывы страниц.

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

  • переход от одного страничного блока к одному листу (например, при односторонней печати);
  • переход от двух страничных блоков к обеим сторонам одного листа (например, при двусторонней печати);
  • переход от N (небольших) страничных блоков к одному листу (так называемое "n-арное склеивание");
  • переход от одного (большого) страничного блока к N x M листам (так называемое "мозаичное представление");
  • создание брошюры. Брошюра - это группа страниц, напечатанных на одном листе, который, будучи разрезанным и сложенным в виде книги, представит их в должной последовательности;
  • печать одного документа, ориентированная на несколько исходящих лотков;
  • печать в файл.

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

13.2 Страничные блоки: правило @page

Страничный блок - это прямоугольная область, состоящая из следующих двух частей:

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

Примечание. В CSS2 свойства границ и свойства отступов не применяются к страницам; возможно, в будущем они будут применяться.

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

Селектор страниц указывает страницы, к которым применяются объявления. В CSS2 селекторы страниц могут обозначать первую страницу, все левые страницы, все правые страницы или страницы с определенными именами.

Размеры страничного блока указываются с помощью свойства 'size'. Размеры области страницы определяются размерами страничного блока за вычетом размеров области полей.

Пример(ы):

Например, следующее правило @page устанавливает размеры страничного блока равными 8.5 x 11 дюймам и создает поле размером 2 см со всех сторон между краем страничного блока и областью страницы:

@page { size 8.5in 11in; margin: 2cm }
Свойство 'marks' в правиле @page указывает метки выравнивания и обрезки страничных блоков.

13.2.1 Поля страницы

Свойства полей ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin') используются в контексте описания страницы. На следующем рисунке продемонстрировано взаимное расположение листов, страничных блоков и полей страницы:

Иллюстрация взаимного расположения листа, страничного блока, поля и области страницы [D]

Вычисленное значение ширины полей страницы в верхней и нижней частях страницы равно '0'.

В контексте описания страницы шрифты не различаются, поэтому не допускается использование единиц измерения 'em' и 'ex'. Процентные соотношения, используемые в качестве значений свойств полей, задаются относительно размеров страничного блока; ширина левого и правого полей определяется относительно ширины страничного блока, а высота верхнего и нижнего полей определяется относительно высоты страничного блока. Допускается использование других единиц измерения, связанных с соответствующими свойствами CSS2.

Иногда из-за отрицательных значений ширины полей (как страничного блока, так и элемента) или абсолютного позиционирования может случиться, что содержимое выйдет за пределы страничного блока. Но при этом оно может быть "отсечено" агентом пользователя, принтером или, в конце концов, просто каким-нибудь режущим инструментом.

13.2.2 Размер страницы: свойство 'size'

'size'
Значение: <длина>{1,2} | auto | portrait | landscape | наследуемое
Начальное значение: auto
Область применения: содержанию страницы
Наследование: N/A
Процентное задание: N/A
Устройства: визуального форматирования, устройства с постраничной разбивкой

Данное свойство определяет размер и ориентацию страничного блока.

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

Три значения свойства 'size' позволяют создавать страничный блок относительных размеров:

auto
Страничному блоку присваиваются размер и ориентация листа, на котором будет осуществляться вывод.
landscape
Ориентация листа, на котором будет осуществляться вывод, переназначается. Размеры страничного блока и листа, на котором будет осуществляться вывод, совпадают, а наиболее длинная сторона блока располагается горизонтально.
portrait
Ориентация листа, на котором будет осуществляться вывод, переназначается. Размеры страничного блока и листа, на котором будет осуществляться вывод, совпадают, а наиболее короткая сторона блока располагается горизонтально.

Example(s):

В следующем примере осуществляется выравнивание внешних краевых линий страничного блока и листа, на котором будет осуществляться вывод. Процентное соотношение, выступающее в качестве значения свойства 'margin', задается относительно размеров листа, на котором будет осуществляться вывод. Если последний имеет размеры 21.0 см x 29.7 см (т.е. является листом формата A4), то размер полей будет равен 2.10 см и 2.97 см.

@page {
  size: auto;   /* auto является начальным значением */
  margin: 10%;
}

Значения длины, принимаемые свойством 'size', позволяют создавать страничный блок абсолютных размеров. Если свойство принимает только одно значение, то оно используется в качестве ширины и высоты страничного блока (т.е. блок получается в форме квадрата). Т.к. страничный блок является начальным контейнером, то в качестве значений свойства 'size' не допускается использование процентных соотношений.

Пример(ы):

Например:

@page {
  size: 8.5in 11in;  /* ширина и высота */
}

В этом примере ширина страничного блока устанавливается равной 8.5 дюймам, а высота - равной 11 дюймам. Исходя из этих значений, размеры листа, на котором будет осуществляться вывод, должны быть не менее 8.5"x11".

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

Отображение страничных блоков, не вмещающихся на листе

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

  • повернуть страничный блок на 90°, если в результате этого страничный блок поместится на листе;
  • изменить масштаб страницы, чтобы уместить ее на листе.

Перед выполнением этих процедур агент пользователя должен выдать запрос пользователю.

Позиционирование страничного блока на листе

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

13.2.3 Метки обрезки: свойство 'marks'

'marks'
Значение: [ crop || cross ] | none | наследуемое
Начальное значение: none
Область применения: контекст описания страницы
Наследование: N/A
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

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

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

Метки видны только в страничных блоках абсолютных размеров (см. свойство 'size'). Страничные блоки, имеющие относительные размеры, выравниваются относительно листа, на котором будет осуществляться их вывод, а метки при этом помещаются за пределами области печати.

Размер, стиль и положение меток выравнивания полностью определяются агентом пользователя.

13.2.4 Левые, правые и первые страницы

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

Все страницы автоматически подразделяются агентом пользователя на два псевдокласса :left и :right.

Пример(ы):

@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

@page :right {
  margin-left: 3cm;
  margin-right: 4cm;
}

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

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

Пример(ы):

@page { margin: 2cm } /* Ширина всех полей - 2 см */

@page :first {
  margin-top: 10cm    /* Верхнее поле на первой странице - 10 см */
}

Определение того, будет ли первая страница принадлежать классу :left или :right зависит от направления ввода текста, принятого в документе в качестве основного, и находится за пределами рассмотрения данного документа. Тем не менее, у разработчиков существует возможность принудительного назначения первой страницы классу :left или :right посредством вставки разрыва страницы перед первым сгенерированным блоком (например, это можно сделать для элемента BODY языка HTML).

Свойства, определенные в правиле :left (или :right) @page, переназначают те свойства, которые определяются в правиле @page, не имеющем псевдокласса. Свойства, определенные в правиле :first @page, переназначают свойства, которые определяются в правилах :left (или :right) @page.

Примечание. Добавление описаний к псевдоклассам :left и :right не влияет на то, будет ли документ печататься с двух или с одной стороны (последний вопрос находится за рамками рассмотрения данной спецификации).

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

13.2.5 Содержимое за пределами страничного блока

При форматировании содержимого, осуществляемом в рамках модели страницы, некоторая часть содержимого может оказаться за пределами страничного блока. Например, элемент, свойству 'white-space' которого было присвоено значение 'pre', может породить блок, превосходящий по размерам страничный блок. Наряду с этим может случиться, что при абсолютном позиционировании блоков некоторые из них примут "не очень подходящее" местоположение. Например, графические объекты могут оказаться на краю страничного блока или на 100000 дюймов ниже него.

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

  • содержимое желательно позиционировать на некотором расстоянии от страничного блока, чтобы существовала возможность обрезки страниц впритык к полям;
  • пользовательским агентам следует избегать генерации большого числа пустых страничных блоков, уделяя больше внимания позиционированию элементов (например, Вы не хотите печатать 100 пустых страниц). Обратите внимание, что генерация небольшого числа пустых страничных блоков необходима для обработки значений 'left' и 'right' свойств 'page-break-before' и 'page-break-after';
  • не следует размещать элементы в несоответствующих местах во избежание их представления в документе. Вместо этого следует:
    • полностью прекратить генерацию блока, присвоив свойству 'display' значение 'none';
    • сделать блок невидимым, используя свойство 'visibility'.
  • агенты пользователей могут по-разному обрабатывать блоки, расположенные за пределами страничного блока, в частности, не обрабатывать их или создавать для них страничные блоки в конце документа.

13.3 Разрывы страниц

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

13.3.1 Разрывы до и после элементов: 'page-break-before', 'page-break-after', 'page-break-inside'

'page-break-before'
Значение: auto | always | avoid | left | right | наследуемое
Начальное значение: auto
Область применения: элементы структурного уровня
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой
'page-break-after'
Значение: auto | always | avoid | left | right | наследуемое
Начальное значение: auto
Область применения: элементы структурного уровня
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой
'page-break-inside'
Значение: avoid | auto | наследуемое
Начальное значение: auto
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

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

auto
Не инициирует и не запрещает разрыва страницы до (после или внутри) генерируемого блока.
always
Всегда инициирует разрыв страницы до (после) генерируемого блока.
avoid
Отменяет разрыв страницы до (после или внутри) генерируемого блока.
left
Инициирует один или два разрыва страниц до (после) генерируемого блока, так что следующая страница форматируется как левая страница.
right
Инициирует один или два разрыва страниц до (после) генерируемого блока, так что следующая страница форматируется как правая страница.

Потенциально возможное местоположение разрыва страницы определяется свойством 'page-break-inside' родительского элемента, свойством 'page-break-after' предшествующего элемента и свойством 'page-break-before' последующего элемента. Если значения этих свойств отличны от 'auto', то значения 'always', 'left' и 'right' превосходят по приоритету значение 'avoid'. В разделе о допустимых разрывах страниц указаны четкие правила, позволяющие инициировать или запрещать разрывы страниц с помощью этих свойств.

13.3.2 Использование именованных страниц: 'page'

'page'
Значение: <идентификатор> | auto
Начальное значение: auto
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

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

Пример(ы):

В этом примере все таблицы будут помещены по правую сторону страницы (называемой "rotated"), имеющей альбомную ориентацию:

@page rotated {size: landscape}
TABLE {page: rotated; page-break-before: right}

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

Пример(ы):

В следующем примере две таблицы отображаются на страницах с альбомной ориентацией (естественно, на одной и той же странице, если они обе умещаются на ней), тип страницы "narrow" не используется вообще, несмотря на то, что он установлен для элемента DIV.

Правила

@page narrow {size: 9cm 18cm}
@page rotated {size: landscape}
DIV {page: narrow}
TABLE {page: rotated}

используются в документе

<DIV>
<TABLE>...</TABLE>
<TABLE>...</TABLE>
</DIV>

13.3.3 Разрывы страниц внутри элементов: 'orphans', 'widows'

'orphans'
Значение: <целое> | наследуемое
Начальное значение: 2
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой
'widows'
Значение: <целое> | наследуемое
Начальное значение: 2
Область применения: элементы структурного уровня
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования, с постраничной разбивкой

Свойство 'orphans' определяет минимальное количество строк абзаца, которые должны быть оставлены в нижней части страницы. Свойство 'widows' определяет минимальное количество строк абзаца, которые должны быть оставлены в верхней части страницы. Примеры использования данных свойств для управления разрывами страниц приводятся ниже.

Подробную информацию о форматировании абзацев можно получить в разделе о линейных блоках.

13.3.4 Допустимые разрывы страниц

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

  1. В пространстве, отведенном для вертикальных полей между структурными блоками. Если разрыв страницы осуществляется в этом месте, то вычисляемые значения соответствующих свойств 'margin-top' и 'margin-bottom' устанавливаются равными '0'.
  2. Между линейными блоками внутри блока структурного уровня.

Разрывы рассматриваемого типа удовлетворяют следующим правилам:

  • Правило А: Разрыв (1) разрешен, только если значения свойств 'page-break-after' и 'page-break-before' всех элементов, порождающих блоки, встречающиеся в месте разрыва, допускают его осуществление, что имеет место тогда, когда по крайней мере одно из них имеет значение 'always', 'left' или 'right', или все они одновременно имеют значение 'auto'.
  • Правило Б: Тем не менее, если все эти свойства имеют значение 'auto', а свойство 'page-break-inside' ближайшего общего для всех названных элементов предка имеет значение 'avoid', то разрыв страницы в этом месте запрещается.
  • Правило В: Разрыв страницы (2) разрешен, только если количество линейных блоков между разрывом и началом заключительного структурного блока равно значению свойства 'orphans' или превышает его, а количество линейных блоков между разрывом и концом блока равно значению свойства 'widows' или превышает его.
  • Правило Г: Более того, разрыв страницы (2) разрешен, только если свойство 'page-break-inside' имеет значение 'auto'.

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

Если и после этого не удается достигнуть достаточного количества разрывов, то для поиска дополнительных точек разрыва не учитываются правила А и В.

Разрывы страницы не могут осуществляться в абсолютно позиционируемых блоках.

13.3.5 Принудительные разрывы страниц

Разрыв страницы должен осуществляться (1), если хотя бы одно из всех свойств 'page-break-after' и 'page-break-before' элементов, порождающих блоки, встречающиеся в месте разрыва, принимает значение 'always', 'left' или 'right'.

Разрыв страницы также должен осуществляться (1), если значения свойства 'page' линейных блоков, находящихся непосредственно до и после разрыва, различны.

13.3.6 "Наилучшие" разрывы страниц

Язык CSS2 не определяет, какой именно разрыв страницы из множества допустимых разрывов должен использоваться; CSS2 не запрещает агентам пользователей вставлять разрывы страниц в любом месте или вообще не использовать их. Но в спецификации CSS2 настоятельно рекомендуется, чтобы агенты пользователей соблюдали следующие эвристические правила (до тех пор, пока не окажется, что они иногда противоречат друг другу):

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

Пример(ы):

Предположим, что таблица стилей содержит свойства 'orphans: 4' и 'widows: 2', а в нижней части текущей страницы доступно 20 строк (линейных блоков):

  • если последний абзац текущей страницы содержит не более 20 строк, то он должен остаться на текущей странице;
  • если абзац содержит 21 или 22 строки, а вторая часть абзаца не должна нарушать ограничения, устанавливаемого свойством 'widows', то в силу этого его вторая часть должна состоять из двух строк;
  • если в абзаце более 23 строк, то первая его часть должна состоять из 20 строк, а вторая часть должна включать все остальные строки.

Теперь предположим, что значение свойства 'orphans' равно '10', значение свойства 'widows' равно '20', а в нижней части текущей страницы доступно 8 строк:

  • если абзац в конце текущей страницы содержит не более 8 строк, то он должен остаться на текущей странице;
  • если абзац содержит более 9 строк, то его нельзя делить (т.к. при этом будет нарушено ограничение, устанавливаемое свойством 'orphans'). Поэтому его следует переместить на следующую страницу в виде блока.

13.4 Каскад в контексте описания страницы

Объявления, осуществляемые в контексте описания страницы подчиняются правилам каскада как обычные объявления CSS2.

Пример(ы):

Рассмотрим следующий пример:

@page {
  margin-left: 3cm;
}

@page :left {
  margin-left: 4cm;
}

За счет высокой специфичности селектора псевдоклассов ширина левого поля левых страниц будет равна 4 см, а на всех остальных страницах (т.е. на правых страницах) поля будут равны 3 см.


Property index

Appendix F. Property index

Name | Values | Initial value | Applies to (Default: all) | Inherited? | Percentages (Default: N/A) | Media groups
'azimuth' | <angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit | center |  | yes |  | aural
'background' | ['background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit | XX |  | no | allowed on 'background-position' | visual
'background-attachment' | scroll | fixed | inherit | scroll |  | no |  | visual
'background-color' | <color> | transparent | inherit | transparent |  | no |  | visual
'background-image' | <uri> | none | inherit | none |  | no |  | visual
'background-position' | [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit | 0% 0% | block-level and replaced elements | no | refer to the size of the box itself | visual
'background-repeat' | repeat | repeat-x | repeat-y | no-repeat | inherit | repeat |  | no |  | visual
'border' | [ 'border-width' || 'border-style' || <color> ] | inherit | see individual properties |  | no |  | visual
'border-collapse' | collapse | separate | inherit | collapse | 'table' and 'inline-table' elements | yes |  | visual
'border-color' | <color>{1,4} | transparent | inherit | see individual properties |  | no |  | visual
'border-spacing' | <length> <length>? | inherit | 0 | 'table' and 'inline-table' elements | yes |  | visual
'border-style' | <border-style>{1,4} | inherit | see individual properties |  | no |  | visual
'border-top' 'border-right' 'border-bottom' 'border-left' | [ 'border-top-width' || 'border-style' || <color> ] | inherit | see individual properties |  | no |  | visual
'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color' | <color> | inherit | the value of the 'color' property |  | no |  | visual
'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style' | <border-style> | inherit | none |  | no |  | visual
'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' | <border-width> | inherit | medium |  | no |  | visual
'border-width' | <border-width>{1,4} | inherit | see individual properties |  | no |  | visual
'bottom' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to height of containing block | visual
'caption-side' | top | bottom | left | right | inherit | top | 'table-caption' elements | yes |  | visual
'clear' | none | left | right | both | inherit | none | block-level elements | no |  | visual
'clip' | <shape> | auto | inherit | auto | block-level and replaced elements | no |  | visual
'color' | <color> | inherit | depends on user agent |  | yes |  | visual
'content' | [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit | empty string | :before and :after pseudo-elements | no |  | all
'counter-increment' | [ <identifier> <integer>? ]+ | none | inherit | none |  | no |  | all
'counter-reset' | [ <identifier> <integer>? ]+ | none | inherit | none |  | no |  | all
'cue' | [ 'cue-before' || 'cue-after' ] | inherit | XX |  | no |  | aural
'cue-after' | <uri> | none | inherit | none |  | no |  | aural
'cue-before' | <uri> | none | inherit | none |  | no |  | aural
'cursor' | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit | auto |  | yes |  | visual, interactive
'direction' | ltr | rtl | inherit | ltr | all elements, but see prose | yes |  | visual
'display' | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit | inline |  | no |  | all
'elevation' | <angle> | below | level | above | higher | lower | inherit | level |  | yes |  | aural
'empty-cells' | show | hide | inherit | show | 'table-cell' elements | yes |  | visual
'float' | left | right | none | inherit | none | all but positioned elements and generated content | no |  | visual
'font' | [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit | see individual properties |  | yes | allowed on 'font-size' and 'line-height' | visual
'font-family' | [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit | depends on user agent |  | yes |  | visual
'font-size' | <absolute-size> | <relative-size> | <length> | <percentage> | inherit | medium |  | yes, the computed value is inherited | refer to parent element's font size | visual
'font-size-adjust' | <number> | none | inherit | none |  | yes |  | visual
'font-stretch' | normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit | normal |  | yes |  | visual
'font-style' | normal | italic | oblique | inherit | normal |  | yes |  | visual
'font-variant' | normal | small-caps | inherit | normal |  | yes |  | visual
'font-weight' | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | normal |  | yes |  | visual
'height' | <length> | <percentage> | auto | inherit | auto | all elements but non-replaced inline elements, table columns, and column groups | no | see prose | visual
'left' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to width of containing block | visual
'letter-spacing' | normal | <length> | inherit | normal |  | yes |  | visual
'line-height' | normal | <number> | <length> | <percentage> | inherit | normal |  | yes | refer to the font size of the element itself | visual
'list-style' | [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit | XX | elements with 'display: list-item' | yes |  | visual
'list-style-image' | <uri> | none | inherit | none | elements with 'display: list-item' | yes |  | visual
'list-style-position' | inside | outside | inherit | outside | elements with 'display: list-item' | yes |  | visual
'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 | elements with 'display: list-item' | yes |  | visual
'margin' | <margin-width>{1,4} | inherit | XX |  | no | refer to width of containing block | visual
'margin-top' 'margin-right' 'margin-bottom' 'margin-left' | <margin-width> | inherit | 0 |  | no | refer to width of containing block | visual
'marker-offset' | <length> | auto | inherit | auto | elements with 'display: marker' | no |  | visual
'marks' | [ crop || cross ] | none | inherit | none | page context | N/A |  | visual, paged
'max-height' | <length> | <percentage> | none | inherit | none | all elements except non-replaced inline elements and table elements | no | refer to height of containing block | visual
'max-width' | <length> | <percentage> | none | inherit | none | all elements except non-replaced inline elements and table elements | no | refer to width of containing block | visual
'min-height' | <length> | <percentage> | inherit | 0 | all elements except non-replaced inline elements and table elements | no | refer to height of containing block | visual
'min-width' | <length> | <percentage> | inherit | UA dependent | all elements except non-replaced inline elements and table elements | no | refer to width of containing block | visual
'orphans' | <integer> | inherit | 2 | block-level elements | yes |  | visual, paged
'outline' | [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit | see individual properties |  | no |  | visual, interactive
'outline-color' | <color> | invert | inherit | invert |  | no |  | visual, interactive
'outline-style' | <border-style> | inherit | none |  | no |  | visual, interactive
'outline-width' | <border-width> | inherit | medium |  | no |  | visual, interactive
'overflow' | visible | hidden | scroll | auto | inherit | visible | block-level and replaced elements | no |  | visual
'padding' | <padding-width>{1,4} | inherit | XX |  | no | refer to width of containing block | visual
'padding-top' 'padding-right' 'padding-bottom' 'padding-left' | <padding-width> | inherit | 0 |  | no | refer to width of containing block | visual
'page' | <identifier> | auto | auto | block-level elements | yes |  | visual, paged
'page-break-after' | auto | always | avoid | left | right | inherit | auto | block-level elements | no |  | visual, paged
'page-break-before' | auto | always | avoid | left | right | inherit | auto | block-level elements | no |  | visual, paged
'page-break-inside' | avoid | auto | inherit | auto | block-level elements | yes |  | visual, paged
'pause' | [ [<time> | <percentage>]{1,2} ] | inherit | depends on user agent |  | no | see descriptions of 'pause-before' and 'pause-after' | aural
'pause-after' | <time> | <percentage> | inherit | depends on user agent |  | no | see prose | aural
'pause-before' | <time> | <percentage> | inherit | depends on user agent |  | no | see prose | aural
'pitch' | <frequency> | x-low | low | medium | high | x-high | inherit | medium |  | yes |  | aural
'pitch-range' | <number> | inherit | 50 |  | yes |  | aural
'play-during' | <uri> mix? repeat? | auto | none | inherit | auto |  | no |  | aural
'position' | static | relative | absolute | fixed | inherit | static | all elements, but not to generated content | no |  | visual
'quotes' | [<string> <string>]+ | none | inherit | depends on user agent |  | yes |  | visual
'richness' | <number> | inherit | 50 |  | yes |  | aural
'right' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to width of containing block | visual
'size' | <length>{1,2} | auto | portrait | landscape | inherit | auto | the page context | N/A |  | visual, paged
'speak' | normal | none | spell-out | inherit | normal |  | yes |  | aural
'speak-header' | once | always | inherit | once | elements that have table header information | yes |  | aural
'speak-numeral' | digits | continuous | inherit | continuous |  | yes |  | aural
'speak-punctuation' | code | none | inherit | none |  | yes |  | aural
'speech-rate' | <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit | medium |  | yes |  | aural
'stress' | <number> | inherit | 50 |  | yes |  | aural
'table-layout' | auto | fixed | inherit | auto | 'table' and 'inline-table' elements | no |  | visual
'text-align' | left | right | center | justify | <string> | inherit | depends on user agent and writing direction | block-level elements | yes |  | visual
'text-decoration' | none | [ underline || overline || line-through || blink ] | inherit | none |  | no (see prose) |  | visual
'text-indent' | <length> | <percentage> | inherit | 0 | block-level elements | yes | refer to width of containing block | visual
'text-shadow' | none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit | none |  | no (see prose) |  | visual
'text-transform' | capitalize | uppercase | lowercase | none | inherit | none |  | yes |  | visual
'top' | <length> | <percentage> | auto | inherit | auto | positioned elements | no | refer to height of containing block | visual
'unicode-bidi' | normal | embed | bidi-override | inherit | normal | all elements, but see prose | no |  | visual
'vertical-align' | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit | baseline | inline-level and 'table-cell' elements | no | refer to the 'line-height' of the element itself | visual
'visibility' | visible | hidden | collapse | inherit | inherit |  | no |  | visual
'voice-family' | [[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ] | inherit | depends on user agent |  | yes |  | aural
'volume' | <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit | medium |  | yes | refer to inherited value | aural
'white-space' | normal | pre | nowrap | inherit | normal | block-level elements | yes |  | visual
'widows' | <integer> | inherit | 2 | block-level elements | yes |  | visual, paged
'width' | <length> | <percentage> | auto | inherit | auto | all elements but non-replaced inline elements, table rows, and row groups | no | refer to width of containing block | visual
'word-spacing' | normal | <length> | inherit | normal |  | yes |  | visual
'z-index' | auto | <integer> | inherit | auto | positioned elements | no |  | visual


References

Appendix E. References

Contents

  • E.1 Normative references
  • E.2 Informative references

E.1 Normative references

[COLORIMETRY]
"Colorimetry, Second Edition", CIE Publication 15.2-1986, ISBN 3-900-734-00-3.
Available at http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html.
[CSS1]
"Cascading Style Sheets, level 1", H. W. Lie and B. Bos, 17 December 1996.
Available at http://www.w3.org/TR/REC-CSS1-961217.html.
[FLEX]
"Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213.
[HTML40]
"HTML 4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs, 8 July 1997.
Available at http://www.w3.org/TR/REC-html40/. The Recommendation defines three document type definitions: Strict, Transitional, and Frameset, all reachable from the Recommendation.
[IANA]
"Assigned Numbers", STD 2, RFC 1700, USC/ISI, J. Reynolds and J. Postel, October 1994.
Available at ftp://ftp.internic.net/rfc/rfc1700.txt.
[ICC32]
"ICC Profile Format Specification, version 3.2", 1995.
Available at ftp://sgigate.sgi.com/pub/icc/ICC32.pdf.
[ISO8879]
ISO 8879:1986 "Information Processing -- Text and Office Systems -- Standard Generalized Markup Language (SGML)", ISO 8879:1986.
For the list of SGML entities, consult ftp://ftp.ifi.uio.no/pub/SGML/ENTITIES/.
[ISO10646]
"Information Technology - Universal Multiple- Octet Coded Character Set (UCS) - Part 1: Architecture and Basic Multilingual Plane", ISO/IEC 10646-1:1993. The current specification also takes into consideration the first five amendments to ISO/IEC 10646-1:1993. Useful roadmap of the BMP and roadmap of plane 1 documents show which scripts sit at which numeric ranges.
[PNG10]
"PNG (Portable Network Graphics) Specification, Version 1.0 specification", T. Boutell ed., 1 October 1996.
Available at http://www.w3.org/pub/WWW/TR/REC-png-multi.html.
[RFC1808]
"Relative Uniform Resource Locators", R. Fielding, June 1995.
Available at ftp://ds.internic.net/rfc/rfc1808.txt.
[RFC2045]
"Multipurpose Internet Mail Extensions (MIME) Part One: Format of Internet Message Bodies", N. Freed and N. Borenstein, November 1996.
Available at ftp://ftp.internic.net/rfc/rfc2045.txt. Note that this RFC obsoletes RFC1521, RFC1522, and RFC1590.
[RFC2068]
"HTTP Version 1.1 ", R. Fielding, J. Gettys, J. Mogul, H. Frystyk Nielsen, and T. Berners-Lee, January 1997.
Available at ftp://ftp.internic.net/rfc/rfc2068.txt.
[RFC2070]
"Internationalization of the HyperText Markup Language", F. Yergeau, G. Nicol, G. Adams, and M. Dürst, January 1997.
Available at ftp://ds.internic.net/rfc/rfc2070.txt.
[RFC2119]
"Key words for use in RFCs to Indicate Requirement Levels", S. Bradner, March 1997.
Available at ftp://ds.internic.net/rfc/rfc2119.txt.
[RFC2318]
"The text/css Media Type", H. Lie, B. Bos, C. Lilley, March 1998.
Available at ftp://ds.internic.net/rfc/rfc2318.txt.
[RFC1738]
"Uniform Resource Locators", T. Berners-Lee, L. Masinter, and M. McCahill, December 1994.
Available at ftp://ds.internic.net/rfc/rfc1738.txt.
[SRGB]
"Proposal for a Standard Color Space for the Internet - sRGB", M. Anderson, R. Motta, S. Chandrasekar, M. Stokes.
Available at http://www.w3.org/Graphics/Color/sRGB.html.
[UNICODE]
"The Unicode Standard: Version 2.0", The Unicode Consortium, Addison-Wesley Developers Press, 1996. For bidirectionality, see also the corrigenda at http://www.unicode.org/unicode/uni2errata/bidi.htm. For more information, consult the Unicode Consortium's home page at http://www.unicode.org/.
The latest version of Unicode. For more information, consult the Unicode Consortium's home page at http://www.unicode.org/.
[URI]
"Uniform Resource Identifiers (URI): Generic Syntax and Semantics", T. Berners-Lee, R. Fielding, L. Masinter, 18 November 1997.
Available at http://www.ics.uci.edu/pub/ietf/uri/draft-fielding-uri-syntax-01.txt. This is a work in progress that is expected to update [RFC1738] and [RFC1808].
[XML10]
"Extensible Markup Language (XML) 1.0" T. Bray, J. Paoli, C.M. Sperberg-McQueen, editors, 10 February 1998.
Available at http://www.w3.org/TR/REC-xml/.
[YACC]
"YACC - Yet another compiler compiler", S. C. Johnson, Technical Report, Murray Hill, 1975.

E.2 Informative references

[CHARSETS]
Registered charset values. Download a list of registered charset values from ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets.
[DOM]
"Document Object Model Specification", L. Wood, A. Le Hors, 9 October 1997.
Available at http://www.w3.org/TR/WD-DOM/
[ISO10179]
ISO/IEC 10179:1996 "Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL)"
Available at http://occam.sjf.novell.com:8080/dsssl/dsssl96.
[GAMMA]
"Gamma correction on the Macintosh Platform", C. A. Poynton.
Available at ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf.
[HTML32]
"HTML 3.2 Reference Specification", Dave Raggett, 14 January 1997.
Available at http://www.w3.org/TR/REC-html32.html.
[INFINIFONT]
See http://www.fonts.com/hp/infinifont/moredet.html.
[ISO9899]
ISO/IEC 9899:1990 Programming languages -- C.
[MONOTYPE]
See http://www.monotype.com/html/oem/uni_scrmod.html.
[NEGOT]
"Transparent Content Negotiation in HTTP", K. Holtman, A. Mutz, 9 March, 1997.
Available at http://gewis.win.tue.nl/~koen/conneg/draft-ietf-http-negotiation-01.html.
[OPENTYPE]
See http://www.microsoft.com/OpenType/OTSpec/tablist.htm.
[PANOSE]
For information about PANOSE classification metrics, consult http://www.fonts.com/hp/panose/greybook and the following chapters: Latin Text, Latin Script, Latin Decorative, and Latin Pictorial.

Panose numbers for some fonts are available online and may be queried.

[PANOSE2]
See http://www.w3.org/Fonts/Panose/pan2.html Panose-2 is not limited to Latin typefaces.
[POSTSCRIPT]
"The PostScript Language Reference Manual", Second Edition, Adobe Systems, Inc., Addision-Wesley Publishing Co., December 1990.
[RFC1630]
"Universal Resource Identifiers in WWW: A Unifying Syntax for the Expression of Names and Addresses of Objects on the Network as used in the World-Wide Web", T. Berners-Lee, June 1994.
Available at ftp://ftp.internic.net/rfc/rfc1630.txt.
[RFC1766]
"Tags for the Identification of Languages", H. Alvestrand, March 1995.
Available at ftp://ftp.internic.net/rfc/rfc1766.txt.
[RFC1866]
"HyperText Markup Language 2.0", T. Berners-Lee and D. Connolly, November 1995.
Available at ftp://ds.internic.net/rfc/rfc1866.txt.
[RFC1942]
"HTML Tables", Dave Raggett, May 1996.
Available at ftp://ds.internic.net/rfc/rfc1942.txt.
[TRUETYPEGX]
See http://fonts.apple.com/TTRefMan/index.html for details about TrueType GX from Apple Computer, including descriptions of the added tables and font quality specifications.
[W3CSTYLE]
W3C resource page on web style sheets.
Examine at http://www.w3.org/pub/WWW/Style.
[WAI-PAGEAUTH]
"WAI Accesibility Guidelines: Page Authoring" for designing accessible documents are available at:
http://www.w3.org/TR/WD-WAI-PAGEAUTH.


Приложение А. Пример таблицы стилей для HTML 4.0

Это приложение не является нормативным, а носит только информативный характер.

Рассматриваемая таблица стилей иллюстрирует типичное форматирование всех элементов языка HTML 4.0 ([HTML40]), в основе которого лежит богатый опыт, полученный из работы с агентами пользователей. Желательно, чтобы разработчики использовали ее в своих реализациях в качестве таблицы стилей, применяемой по умолчанию.

Полное представление некоторых элементов языка HTML, таких как заменяемые элементы (IMG, OBJECT), элементы для работы со сценариями (SCRIPT, APPLET), элементы управления формами и элементы работы с фреймами, не может быть задано в рамках CSS2.

ADDRESS,
BLOCKQUOTE,
BODY, DD, DIV,
DL, DT,
FIELDSET, FORM,
FRAME, FRAMESET,
H1, H2, H3, H4,
H5, H6, IFRAME,
NOFRAMES,
OBJECT, OL, P,
UL, APPLET,
CENTER, DIR,
HR, MENU, PRE   { display: block }
LI              { display: list-item }
HEAD            { display: none }
TABLE           { display: table }
TR              { display: table-row }
THEAD           { display: table-header-group }
TBODY           { display: table-row-group }
TFOOT           { display: table-footer-group }
COL             { display: table-column }
COLGROUP        { display: table-column-group }
TD, TH          { display: table-cell }
CAPTION         { display: table-caption }
TH              { font-weight: bolder; text-align: center }
CAPTION         { text-align: center }
BODY            { padding: 8px; line-height: 1.33 }
H1              { font-size: 2em; margin: .67em 0 }
H2              { font-size: 1.5em; margin: .83em 0 }
H3              { font-size: 1.17em; margin: 1em 0 }
H4, P,
BLOCKQUOTE, UL,
FIELDSET, FORM,
OL, DL, DIR,
MENU            { margin: 1.33em 0 }
H5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
H6              { font-size: .67em; margin: 2.33em 0 }
H1, H2, H3, H4,
H5, H6, B,
STRONG          { font-weight: bolder }
BLOCKQUOTE      { margin-left: 40px; margin-right: 40px }
I, CITE, EM,
VAR, ADDRESS    { font-style: italic }
PRE, TT, CODE,
KBD, SAMP       { font-family: monospace }
PRE             { white-space: pre }
BIG             { font-size: 1.17em }
SMALL, SUB, SUP { font-size: .83em }
SUB             { vertical-align: sub }
SUP             { vertical-align: super }
S, STRIKE, DEL  { text-decoration: line-through }
HR              { border: 1px inset }
OL, UL, DIR,
MENU, DD        { margin-left: 40px }
OL              { list-style-type: decimal }
OL UL, UL OL,
UL UL, OL OL    { margin-top: 0; margin-bottom: 0 }
U, INS          { text-decoration: underline }
CENTER          { text-align: center }
BR:before       { content: "\A" }

/* Пример стиля для элементов ABBR/ACRONYM в HTML 4.0 */

ABBR, ACRONYM   { font-variant: small-caps; letter-spacing: 0.1em }
A[href]         { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Начало установок для процедуры двунаправленного ввода текста (не изменять) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

/* Элементы структурного уровня в HTML 4 */
ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET,
FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME,
NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER,
DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT,
COL, COLGROUP, TD, TH, CAPTION
                { unicode-bidi: embed }
/* Конец установок для процедуры двунаправленного ввода текста */

@media print {
  @page         { margin: 10% }
  H1, H2, H3,
  H4, H5, H6    { page-break-after: avoid; page-break-inside: avoid }
  BLOCKQUOTE,
  PRE           { page-break-inside: avoid }
  UL, OL, DL    { page-break-before: avoid }
}

@media speech {
  H1, H2, H3,
  H4, H5, H6    { voice-family: paul, male; stress: 20; richness: 90 }
  H1            { pitch: x-low; pitch-range: 90 }
  H2            { pitch: x-low; pitch-range: 80 }
  H3            { pitch: low; pitch-range: 70 }
  H4            { pitch: medium; pitch-range: 60 }
  H5            { pitch: medium; pitch-range: 50 }
  H6            { pitch: medium; pitch-range: 40 }
  LI, DT, DD    { pitch: medium; richness: 60 }
  DT            { stress: 80 }
  PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
  EM            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  STRONG        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  DFN           { pitch: high; pitch-range: 60; stress: 60 }
  S, STRIKE     { richness: 0 }
  I             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  B             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  U             { richness: 0 }
  A:link        { voice-family: harry, male }
  A:visited     { voice-family: betty, female }
  A:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}


Селекторы

5 Селекторы

Содержание

  • 5.1 Сопоставление шаблонов
  • 5.2 Синтаксис селекторов
    • 5.2.1 Группировка
  • 5.3 Универсальный селектор
  • 5.4 Селекторы типов
  • 5.5 Селекторы потомков
  • 5.6 Селекторы дочерних элементов
  • 5.7 Селекторы сестринских элементов
  • 5.8 Селекторы атрибутов
    • 5.8.1 Соответствие атрибутам и значениям атрибутов
    • 5.8.2 Значения атрибутов, используемые в DTD по умолчанию
    • 5.8.3 Селекторы классов
  • 5.9 ID-селекторы
  • 5.10 Псевдоэлементы и псевдоклассы
  • 5.11 Псевдоклассы
    • 5.11.1 Псевдокласс :first-child
    • 5.11.2 Псевдоклассы ссылок :link и :visited
    • 5.11.3 Динамические псевдоклассы :hover, :active и :focus
    • 5.11.4 Псевдокласс :lang
  • 5.12 Псевдоэлементы
    • 5.12.1 Псевдоэлемент :first-line
    • 5.12.2 Псевдоэлемент :first-letter
    • 5.12.3 Псевдоэлементы :before и :after

5.1 Сопоставление шаблонов

Существующие в CSS принципы сопоставления шаблонов определяют применение правил, задающих стиль, к элементам в дереве документа. Эти шаблоны, называемые селекторами, могут изменяться в диапазоне от простых имен элементов до сложных текстовых структур. Если определенный элемент удовлетворяет всем критериям, устанавливаемым шаблоном, то соответствующий селектор сопоставляется данному элементу.

Чувствительность имен элементов языка документа к регистру определяется языком документа. Например, в HTML-документах имена элементов не зависят от регистра, а в XML-документах - зависят.

В следующей таблице приводятся краткие сведения о синтаксисе селекторов в CSS2:

Шаблон | Значение | Описано в разделе
* | Сопоставляется любому элементу. | Универсальный селектор
E | Сопоставляется любому элементу E (т.е. элементу типа E. | Селекторы типа
E F | Сопоставляется любому элементу F, который является потомком элемента E. | Селекторы потомков
E > F | Сопоставляется любому элементу F, который является дочерним элементом элемента E. | Селекторы дочерних элементов
E:first-child | Сопоставляется элементу E, если он является первым дочерним элементом своего родительского элемента. | Псевдокласс :first-child
E:link E:visited | Сопоставляется элементу E, если он является привязкой гиперссылки, направляющей к документу, которой еще не был просмотрен (:link) или уже был просмотрен (:visited). | Псевдоклассы ссылок
E:active E:hover E:focus | Сопоставляется элементу E во время определенных действий пользователя. | Динамические псевдоклассы
E:lang(c) | Сопоставляется элементу E, если он присутствует в разговорном языке (язык документа указывает, каким образом определяется разговорный язык). | Псевдокласс :lang
E + F | Сопоставляется любому элементу F, которому непосредственно предшествует элемент E. | Селекторы сестринских элементов
E[foo] | Сопоставляется любому элементу E с набором атрибутов "foo" (независимо от значения). | Селекторы атрибутов
E[foo="warning"] | Сопоставляется любому элементу E, у которого значение атрибута "foo" в точности равно "warning". | Селекторы атрибутов
E[foo~="warning"] | Сопоставляется любому элементу E, у которого значением атрибута "foo" является список значений, разделенных пробелами, и одно из этих значений в точности равно "warning". | Селекторы атрибутов
E[lang|="en"] | Сопоставляется любому элементу E, атрибут "lang" которого имеет список значений, разделенных знаками дефиса, начинающийся (слева) со значения "en". | Селекторы атрибутов
DIV.warning | Только в HTML. Значение аналогично значению DIV[class~="warning"]. | Селекторы классов
E#myid | Сопоставляется любому элементу E, атрибут ID которого равен "myid". | ID-селекторы

5.2 Синтаксис селекторов

Простой селектор - это либо селектор типа, либо универсальный селектор, непосредственно за которым в произвольном порядке может следовать несколько селекторов атрибутов, ID-селекторов или псевдоклассов. Простой селектор сопоставим, если сопоставимы все его компоненты.

Селектор представляет собой последовательность из одного или нескольких простых селекторов, между которыми расположены комбинаторы. Комбинаторами могут служить пробелы, символы ">" и "+". Между комбинатором и простыми селекторами может находиться произвольное количество пробелов.

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

К последнему в последовательности простому селектору может быть добавлен один псевдоэлемент. В этом случае информация о стиле будет применяться только к части каждой области применения.

5.2.1 Группировка

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

Пример(ы):

В данном примере собраны три правила с одинаковыми объявлениями. Таким образом, запись

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

эквивалентна следующей:

H1, H2, H3 { font-family: sans-serif }

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

5.3 Универсальный селектор

Универсальный селектор, при написании обозначаемый символом "*", сопоставляется имени элемента любого типа. Он сопоставляется любому одиночному элементу в дереве документа.

Если универсальный селектор является не единственным компонентом простого селектора, то символ "*" может быть опущен. Например, записи:

  • *[LANG=fr] и [LANG=fr] эквивалентны.
  • *.warning и .warning эквивалентны.
  • *#myid и #myid эквивалентны.

5.4 Селекторы типов

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

Пример(ы):

Следующее правило сопоставляется всем элементам H1 в дереве документа:

H1 { font-family: sans-serif }

5.5 Селекторы потомков

Иногда бывает необходимо, чтобы селекторы сопоставлялись элементу, который является потомком некоторого другого элемента в дереве документа (например, элементам EM, содержащимся в элементе H1). Селекторы потомков позволяют устанавливать такие ассоциации в шаблоне. Селектор потомков состоит из двух и более селекторов, разделенных пробелом. Селектор потомков вида "A B" сопоставим, если элемент B является произвольным потомком некоторого своего предка A.

Пример(ы):

Например, рассмотрим следующие правила:

H1 { color: red }
EM { color: red }

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

<H1>Данный заголовок <EM>очень</EM> важен</H1>

Приведем тот же пример, дополнив предыдущие правила еще одним, устанавливающим синий цвет текста всякий раз, когда элемент EM находится внутри элемента H1:

H1 { color: red }
EM { color: red }
H1 EM { color: blue }

Третье правило в следующем фрагменте будет сопоставляться элементу EM:

<H1>This <SPAN class="myclass">headline
is <EM>very</EM> important</SPAN></H1>

Пример(ы):

Следующий селектор:

DIV * P

сопоставляется элементу P, который является потомком второго и более старшего поколения элемента DIV. Обратите внимание на пробелы с обеих сторон звездочки "*".

Пример(ы):

Селектор, который фигурирует в следующем правиле, объединяющем селекторы потомков и селекторы атрибутов, сопоставляется любому элементу, который, во-первых, имеет заданный атрибут "href" и, во-вторых, находится внутри элемента P, который, в свою очередь, находится внутри элемента DIV:

DIV P *[href]

5.6 Селекторы дочерних элементов

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

Пример(ы):

Следующее правило задает стиль всех элементов P, являющихся дочерними элементами элемента BODY:

BODY > P { line-height: 1.3 }

Пример(ы):

В приведенном ниже примере осуществляется объединяются селекторы потомков и селекторы дочерних элементов:

DIV OL>LI P

Селектор, построенный в этом примере, сопоставляется элементу P, являющемуся потомком элемента LI, который должен быть дочерним элементом элемента OL. Последний, в свою очередь, должен быть потомком элемента DIV. Обратите внимание, что необязательные пробелы вокруг комбинатора ">" опущены.

Информацию о выборе первого дочернего элемента см. ниже в раздел о псевдоклассах first-child.

5.7 Селекторы сестринских элементов

Селекторы сестринских элементов имеют следующий синтаксис: E1 + E2, где E2 - область применения данного селектора. Он сопоставим, если E1 и E2 являются дочерними элементами одного и того же родительского элемента в дереве документа, и E1 непосредственно предшествует E2.

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

Пример(ы):

Таким образом, следующее правило утверждает, что если элемент P следует непосредственно за элементом MATH, то между ними не должно быть отступа:

MATH + P { text-indent: 0 }

В приведенном ниже примере уменьшается размер вертикального пространства между элементом H1 и непосредственно следующим за ним элементом H2:

H1 + H2 { margin-top: -5mm }

Пример(ы):

Следующее правило аналогично правилу из предыдущего примера, за исключением того, что в нем добавлен атрибут селектора. Таким образом, специальное форматирование выполняется, если для элемента H1 установлен класс class="opener":

H1.opener + H2 { margin-top: -5mm }

5.8 Селекторы атрибутов

CSS2 позволяет разработчикам создавать правила, сопоставляемые атрибутам, определенным в исходном документе.

5.8.1 Сопоставление атрибутам и значениям атрибутов

Селекторы атрибутов могут сопоставляться в следующих четырех случаях:

[att]
Если для элемента установлен атрибут "att", независимо от значения этого атрибута.
[att=val]
Если значение атрибута "att" данного элемента в точности равно "val".
[att~=val]
Если значением атрибута "att" данного элемента является список "слов", разделенных пробелами, одно из которых в точности равно "val". Если используется данный селектор, то слова, указанные в значении, не должны содержать пробелов (так как они уже используются для разделения слов).
[att|=val]
Если значением атрибута "att" элемента является список разделенных дефисом "слов", начинающийся со слова "val". Сопоставление всегда начинается с начала значения атрибута. В первую очередь это необходимо для сопоставления отдельным участкам кода языка (например, атрибут "lang" в HTML), как описано в стандарте RFC 1766 ([RFC1766]).

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

Пример(ы):

Например, следующий селектор атрибута сопоставляется всем элементам H1, которые описывают атрибут "title", независимо от его значения:

H1[title] { color: blue; }

Пример(ы):

В следующем примере селектор сопоставляется всем элементам SPAN, у которых значение атрибута "class" в точности равно "example":

SPAN[class=example] { color: blue; }

Для обращения к нескольким атрибутам элемента или многократного обращения к одному и тому же атрибуту можно использовать несколько селекторов атрибутов.

Пример(ы):

В этом примере селектор сопоставляется всем элементам SPAN, у которых значение атрибута "hello" в точности равно "Cleveland", а значение атрибута "goodbye" в точности равно "Columbus":

SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Пример(ы):

Следующие селекторы иллюстрируют различия между "=" и "~=". Первый селектор будет сопоставляться, например, значению "copyright copyleft copyeditor" атрибута "rel". Второй селектор будет сопоставляться только в том случае, если значение атрибута "href" равно "http://www.w3.org/".

A[rel~="copyright"]
A[href="http://www.w3.org/"]

Пример(ы):

Следующее правило скрывает все элементы, атрибут "lang" которых имеет значение "fr" (т.е. документ на французском языке).

*[LANG=fr] { display : none }

Пример(ы):

Следующее правило будет сопоставляться тем значениям атрибута "lang", которые начинается с "en", включая "en", "en-US" и "en-cockney":

*[LANG|="en"] { color : red }

Пример(ы):

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

DIALOGUE[character=romeo]
     { voice-family: "Lawrence Olivier", charles, male }

DIALOGUE[character=juliet]
     { voice-family: "Vivien Leigh", victoria, female }

5.8.2 Значения атрибутов, используемые в DTD по умолчанию

Сопоставление осуществляется со значениями атрибутов в дереве документа. Если язык документа отличен от HTML, значения, принимаемые атрибутами по умолчанию, можно установить различными способами, в частности, с помощью DTD. Таблицы стилей должны разрабатываться таким образом, чтобы они работали даже в том случае, если информация о значениях, принимаемых по умолчанию, не включена в дерево документа.

Пример(ы):

Например, рассмотрим элемент EXAMPLE с атрибутом "notation", который по умолчанию принимает значение "decimal". Фрагмент DTD может выглядеть следующим образом:

<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">

Если таблица стилей содержит правила

EXAMPLE[notation=decimal] { /*... установки по умолчанию ...*/ }
EXAMPLE[notation=octal] { /*... прочие установки...*/ }

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

EXAMPLE { /*... установки, используемые по умолчанию ...*/ }

Т.к. этот селектор является менее специфичным, чем селектор атрибутов, то он будет использоваться только в тех случаях, когда обрабатываются значения, принимаемые по умолчанию. Необходимо позаботиться о том, чтобы все другие значения атрибутов, которые не устанавливаются по умолчанию, были обработаны явно.

5.8.3 Селекторы классов

В таблицах стилей, используемых с HTML-документами, при сопоставлении атрибуту "class" разработчики могут использовать точку (".") как альтернативу условному обозначению "~=". Таким образом, два выражения HTML "DIV.value" и "DIV[class~=value]" имеют одинаковый смысл. Значение атрибута должно находиться непосредственно после точки (".").

Пример(ы):

Например, для всех элементов с class~="pastoral" информацию о стиле можно определить следующим образом:

*.pastoral { color: green }  /* все элементы с class~=pastoral */
или просто
.pastoral { color: green }  /* все элементы с class~=pastoral */

Следующее правило назначает стиль только элементу H1 с class~="pastoral":

H1.pastoral { color: green }  /* элемент H1 с class~=pastoral */

Благодаря этим правилам в следующем примере при первом появлении элементы H1 не будут отображаться зеленым цветом, а при втором появлении будут:

<H1>Не зеленый цвет</H1>
<H1 class="pastoral">Настоящий зеленый цвет</H1>

Для сопоставления подмножеству значений атрибута "class" перед каждым из них, записанных в произвольном порядке, должна следует поставить точку (".").

Пример(ы):

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

P.pastoral.marine { color: green }

Это правило сопоставляется, если, например, class="pastoral blue aqua marine" и не сопоставляется, если class="pastoral blue".

Примечание. В языке CSS атрибут "class" наделен большими описательными возможностями, позволяющими разработчикам создавать свои собственные "языки написания документов" с использованием элементов, с которыми не связана никакая информация о представлении (например, элементы DIV и SPAN в HTML) и назначать информацию о стиле посредством атрибута "class". Разработчикам следует избегать использования таких возможностей на практике, т.к. структурные элементы языка документа в основном имеют общепринятые значения, а определяемые разработчиком классы чаще всего их не имеют.

5.9 ID-селекторы

Язык документа может содержать атрибуты типа ID. Их отличие от других атрибутов заключается в том, что любые два из них обязательно имеют различные значения. Независимо от языка документа атрибут ID может использоваться для уникальной идентификации элементов. В HTML-документах все атрибуты ID обозначаются "id", а в XML-документах атрибуты ID могут обозначаться по-другому, но для них справедливо то же самое ограничение.

Атрибут ID языка документа позволяет разработчикам назначать идентификатор одному экземпляру элемента в дереве документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ "#", непосредственно за которым следует значение атрибута ID.

Пример(ы):

Следующий ID-селектор сопоставляется элементу H1, значение атрибута ID которого равно "chapter1":

H1#chapter1 { text-align: center }

В следующем примере правило стиля сопоставляется элементу, у которого значение атрибута ID равно "z98y". Т.е. это правило будет сопоставляться элементу P:

<HEAD>
  <TITLE>Match P</TITLE>
  <STYLE type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Разреженный текст</P>
</BODY>

Однако в следующем примере это правило стиля будет сопоставляться только элементу H1, значение атрибута ID которого равно "z98y". В этом примере данное правило не сопоставляется элементу P:

<HEAD>
  <TITLE>Match H1 only</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Разреженный текст</P>
</BODY>

ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML-документе, в терминах каскада селектор #p123 более специфичен, чем [ID=p123].

Примечание. В XML 1.0 [XML10] информация о том, в каком атрибуте содержатся ID элементов, располагается в DTD. Во время синтаксического анализа XML-документа агенты пользователей не всегда просматривают DTD и поэтому не всегда могут иметь информацию об идентификаторе элемента. Если разработчик таблицы стилей знает или предполагает, что подобное может случиться, то он должен использовать обычные селекторы атрибутов вместо ID-селекторов: [name=p371] вместо #p371. Порядок каскадирования обычных селекторов атрибутов отличается от порядка каскадирования ID-селекторов. Возможно, при этом понадобится добавить в объявления приоритет "!important": [name=p371] {color: red ! important}. Естественно, что элементы в документах XML 1.0, не использующих DTD, вообще не имеют атрибута ID.

5.10 Псевдоэлементы и псевдоклассы

В языке CSS2 стиль обычно прикрепляется к элементу в зависимости от его местонахождения в дереве документа. В большинстве случаев эта простая модель оказывается приемлемой, но все же иногда из-за структуры дерева документа она не позволяет реализовать некоторые устоявшиеся сценарии построения публикации. Например, в HTML 4.0 (см. [HTML40]) нет элемента, который бы указывал на первую строку абзаца, и поэтому нет простого селектора CSS, который бы мог указывать на нее.

В CSS вводится представление о псевдоэлементах и псевдоклассах, позволяющих осуществлять форматирование на основании информации, не включенной в дерево документа.

  • Псевдоэлементы формируют абстрактные представления о дереве документа в дополнение к тем, которые определяются языком документа. Например, в языках, используемых для создания документов, не предусмотрены алгоритмы доступа к первой букве или первой строке содержимого элемента. Псевдоэлементы CSS позволяют разработчикам таблиц стилей обращаться к этим объектам, доступ к которым нельзя получить другим способом. Псевдоэлементы предоставляют разработчикам таблиц стилей различные способы назначения стиля содержимому, не существующему в исходном документе (например, псевдоэлементы :before и :after предоставляют доступ к генерируемому содержимому).
  • Псевдоклассы позволяют осуществлять классификацию элементов по их характеристикам, которые не являются именем, атрибутом или содержимым и не могут быть получены из дерева документа. Псевдоклассы могут быть динамическими в том смысле, что элемент может приобрести псевдокласс или лишиться его во время работы пользователя с этим документом. Исключение составляет псевдокласс ':first-child', который может быть выведен из дерева документа.

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

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

Имена псевдокласов и псевдоэлементов учитывают регистр.

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

Конформные агенты пользователей HTML могут либо игнорировать все правила, которые определяют селекторы, содержащие :first-line или :first-letter, либо поддержать только некоторую часть свойств, обусловленных использованием псевдоэлементов.

5.11 Псевдоклассы

5.11.1 Псевдокласс :first-child

Псевдокласс :first-child сопоставляется элементу, который является первым дочерним элементом некоторого другого элемента.

Пример(ы):

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

DIV > P:first-child { text-indent: 0 }
Данный селектор сопоставляется элементу P внутри DIV в следующем фрагменте:
<P>Последний P перед примечанием.
<DIV class="note">
   <P>Первый P внутри примечания.
</DIV>
но не сопоставляется второму элементу P в следующем фрагменте:
<P>Последний P перед примечанием.
<DIV class="note">
   <H2>Примечание</H2>
   <P>Первый P внутри примечания.
</DIV>

Пример(ы):

В следующем примере устанавливается вес шрифта 'bold' для каждого элемента EM, являющегося одним из потомков первого дочернего элемента P:

P:first-child EM { font-weight : bold }

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

Например, EM в:

<P>abc <EM>default</EM>
является первым дочерним элементом элемента P.

Следующие два селектора эквивалентны:

* > A:first-child   /* A  - первый дочерний элемент любого элемента */
A:first-child       /* Аналогично */

5.11.2 Псевдоклассы ссылок :link и :visited

Обычно агенты пользователей по-разному отображают просмотренные и непросмотренные ссылки. В CSS предусмотрены псевдоклассы ':link' и ':visited' для различения этих типов ссылок:

  • Псевдокласс :link применяется, если ссылка не была просмотрена.
  • Псевдокласс :visited применяется, если ссылка была просмотрена пользователем.

Примечание. По истечении определенного времени агенты пользователей могут вернуть просмотренную ссылку в состояние ':link' (непросмотренная).

Эти два состояния являются взаимоисключающими.

Язык документа определяет элементы, служащие точками привязки гиперссылки. Например, в HTML 4.0 псевдоклассы ссылок применяются к элементам A с атрибутом "href". Таким образом, следующие два объявления CSS2 эквивалентны:

A:link { color: red }
:link  { color: red }

Пример(ы):

Если следующая ссылка:

<A class="external" href="http://out.side/">external link</A>
была просмотрена, то, согласно правилу:
A.external:visited { color: blue }
она будет представляться синим цветом.

5.11.3 Динамические псевдоклассы :hover, :active и :focus

Иногда интерактивные агенты пользователей изменяют представление документа после выполнения пользователем некоторых действий. В CSS предусмотрены три псевдокласса для наиболее часто встречающихся случаев:

  • Псевдокласс :hover применяется, когда пользователь (с помощью некоторого указывающего устройства) выделяет элемент, но не активизирует его. Например, визуальный агент пользователя может применять этот псевдокласс, когда курсор (указатель мыши) находится поверх поля, генерируемого данным элементом. Агенты пользователей, не поддерживающие интерактивные устройства, не используют этот псевдокласс. Некоторые конформные пользовательские агенты, поддерживающие интерактивные устройства, не имеют возможности использовать этот псевдокласс (например, устройство типа ручки).
  • Псевдокласс :active применяется, когда элемент активизируется пользователем. Например, между моментами, когда пользователь нажимает кнопку мыши и отпускает ее.
  • Псевдокласс :focus применяется, когда элемент находится в центре некоторых событий (обрабатывает события клавиатуры или другие типы ввода текста).

Эти псевдоклассы не являются взаимоисключающими. Элемент может сопоставляться одновременно нескольким псевдоклассам.

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

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

Пример(ы):

A:link    { color: red }    /* непросмотренные ссылки */
A:visited { color: blue }   /* просмотренные ссылки */
A:hover   { color: yellow } /* выбранный, но не активизированный */
                            /* пользователем элемент */
A:active  { color: white }   /* активные ссылки */

Обратите внимание, что правило A:hover должно располагаться после правил A:link и A:visited, так как в противном случае правила каскадирования скроют свойство 'color' правила A:hover. Аналогичным образом, благодаря тому, что A:active находится после A:hover, активная ссылка отображается белым цветом, когда пользователь устанавливает указатель поверх элемента А и одновременно активизирует его.

Пример(ы):

Пример сочетания динамических псевдоклассов:

A:focus { background: yellow }
A:focus:hover { background: white }

Последний селектор сопоставляется элементам A, которые находятся в псевдоклассах :focus и :hover.

Информацию об отображении области активизации (фокуса) можно найти в разделе о динамических областях активизации.

Примечание. В CSS1 псевдокласс ':active' и группа псевдоклассов ':link' и ':visited' были взаимоисключающим. Теперь это не так. Элемент может одновременно принадлежать псевдоклссам ':visited' и ':active' (или ':link' и ':active'), а применяемые правила будут определяться принципами нормального каскадирования.

5.11.4 Псевдокласс :lang

Если в языке документа предусмотрен способ определения разговорного языка элемента, то в CSS можно создавать селекторы, сопоставляемые элементу, использующему данный разговорный язык. Например, в HTML [HTML40] язык определяется сочетанием атрибута "lang", элемента META и, возможно, информацией из протокола (такой как заголовки HTTP). С другой стороны, в XML-приложениях используется атрибут XML:LANG и, возможно, существуют другие методы, позволяющие в языке документа определять разговорный язык.

Псевдокласс ':lang(C)' сопоставляется элементу, использующему язык C. Здесь C - код языка в соответствии с определением HTML 4.0 [HTML40] и RFC 1766 [RFC1766]. Он сопоставляется аналогично оператору '|='.

Пример(ы):

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

HTML:lang(fr) { quotes: '" ' ' "' }
HTML:lang(de) { quotes: '"' '"' '\2039' '\203A' }
:lang(fr) > Q { quotes: '" ' ' "' }
:lang(de) > Q { quotes: '"' '"' '\2039' '\203A' }

Вторая пара правил фактически задает свойство 'quotes' для элементов Q в соответствии с языком их родительских элементов. Это сделано, потому что выбор кавычек обычно зависит от языка элементов вокруг кавычек, а не от самих кавычек, как это имеет место во фрагменте французского текста “à l'improviste”, расположенного в английском тексте и использующего английские кавычки.

5.12 Псевдоэлементы

5.12.1 Псевдоэлемент :first-line

Псевдоэлемент :first-line используется для применения специальных стилей к первой форматируемой строке абзаца. Например:

P:first-line { text-transform: uppercase }

Представленное выше правило означает "сделать буквы первой строки каждого абзаца заглавными". Однако селектор "P:first-line" не соответствует ни одному реальному элементу HTML. Он сопоставляется псевдоэлементу, который конформные агенты пользователей будут помещать в начало каждого абзаца.

Обратите внимание, что длина первой строки зависит от множества факторов, таких как ширина страницы, размер шрифта и др. Поэтому типичный абзац HTML-документа, такой как

<P>Это довольно длинный абзац
HTML-документа, который будет разбит на несколько строк.
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца.</P>
претерпит следующую реорганизацию строк:
ЭТО ДОВОЛЬНО ДЛИННЫЙ АБЗАЦ HTML-ДОКУМЕНТА,
который будет разбит на несколько строк.
Первая строка будет отмечена последовательностью
функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца.
и будет "переписан" агентами пользователей так, чтобы включить последовательность функциональных тегов для :first-line. Эта фиктивная последовательность помогает показать, как наследуются свойства.
<P><P:first-line> Это довольно длинный абзац HTML-документа,
</P:first-line> который будет разбит на несколько строк.
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца. </P>

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

<P><SPAN class="test"> Это довольно длинный абзац HTML-документа,
который будет разбит на несколько строк.</SPAN>
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца.</P>
и пользовательский агент сможет сгенерировать соответствующие начальные и конечные теги для SPAN во время вставки последовательности функциональных тэгов для :first-line.
<P><P:first-line><SPAN class="test"> Это
довольно длинный абзац HTML-документа,
</SPAN></P:first-line><SPAN class="test"> который будет разбит
на несколько строк. </SPAN>
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца. </P>

Псевдоэлемент :first-line может прикрепляться только к элементам уровня блока.

Псевдоэлемент :first-line подобен строковому элементу только с некоторыми ограничениями. К псевдоэлементу :first-line применяются следующие свойства: свойства шрифтов, цветов, фона, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' и 'clear'.

5.12.2 Псевдоэлемент :first-letter

Псевдоэлемент :first-letter может использоваться для создания таких простых типографических эффектов, как заглавные буквы и буквицы. Тип начальной буквы аналогичен строковому элементу, если его свойству 'float' присвоено значение 'none', в противном случае он аналогичен перемещаемому объекту.

К псевдоэлементам :first-letter применяются следующие свойства: свойства шрифтов, цветов, фона, 'text-decoration', 'vertical-align' (только если для свойства 'float' установлено значение 'none'), 'text-transform', 'line-height', свойства полей, полей в ячейке таблицы, рамок, 'float', 'text-shadow' и 'clear'.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <TITLE>Начальная буква</TITLE>
  <STYLE type="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; font-style: italic;
                    font-weight: bold; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>Первые</SPAN> несколько слов из статьи
    в журнале "Экономист".</P>
 </BODY>
</HTML>

Данный пример может быть отформатирован следующим образом:

Рисунок, иллюстрирующий объединенный эффект псевдоэлементов :first-letter и :first-line [D]

Последовательность функциональных тегов:

<P>
<SPAN>
<P:first-letter>
П
</P:first-letter>ервые
</SPAN>
несколько слов из статьи в журнале "Экономист".
</P>

Обратите внимание, что теги псевдоэлементов :first-letter примыкают к содержимому (например, к начальному символу), а начальный тег псевдоэлемента :first-line вставляется сразу после начального тега элемента, к которому он прикрепляется.

Чтобы добиться традиционного оформления буквиц, агенты пользователей могут устанавливать примерные значения размеров шрифтов, например, для выравнивания базовых строк. Кроме того, во время форматирования можно учитывать контур глифа.

Перед первой буквой должны быть включены имеющиеся знаки пунктуации (т.е. символы, определенные в классах пунктуации "open" (Ps), "close" (Pe) и "other" (Po) Unicode [UNICODE]), как это сделано в следующем примере:

Перед первой буквой должны быть кавычки. [D]

Псевдоэлемент :first-letter сопоставляется только некоторым частям элементов уровня блока.

В некоторых языках могут существовать специальные правила обращения с определенными комбинациями букв. Например, в голландском языке, если сочетание букв "ij" находится в начале слова, то они обе должны находиться в псевдоэлементе :first-letter.

Пример(ы):

В следующем примере показано, как могут повлиять друг на друга налагающиеся псевдоэлементы. Первая буква каждого элемента P выделяется зеленым цветом, а размер шрифта установлен в '24pt'. Остальные буквы первой форматируемой строки будут представлены синим цветом, а все оставшиеся буквы абзаца - красным.

P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }

<P>Некоторый текст, разделенный на две строки</P>

Допустим, что разрыв строки произойдет до того, как слово "закончится", тогда последовательность функциональных тегов для данного фрагмента может быть следующей:

<P>
<P:first-line>
<P:first-letter>
Не
</P:first-letter>который текст,
</P:first-line>
разделенный на две строки
</P>

Обратите внимание, что элемент :first-letter находится внутри элемента :first-line. Свойства, установленные для элемента :first-line, наследуются элементом :first-letter, но могут быть переназначены, если в элементе :first-letter этому же свойству присваивается значение.

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

Псевдоэлементы ':before' и ':after' можно использовать для вставки генерируемого содержимого до или после содержимого элемента. Подробнее о них рассказывается в разделе о генерируемом тексте.

Пример(ы):

H1:before {content: counter(chapno, upper-roman) ". "}

Когда псевдоэлементы :first-letter и :first-line сочетаются с псевдоэлементами :before и :after, они применяются к первой букве или строке элемента, включая вставляемый текст.

Пример(ы):

P.special:before {content: "Special! "}
P.special:first-letter {color: #ffd800}

Буква "S" слова "Special!" будет представлена золотистым цветом.


4 Синтаксис CSS2 и основные типы данных

Содержание

  • 4.1 Синтаксис
    • 4.1.1 Маркирование
    • 4.1.2 Ключевые слова
    • 4.1.3 Символы и регистр
    • 4.1.4 Выражения
    • 4.1.5 Правила at
    • 4.1.6 Блоки
    • 4.1.7 Наборы правил, блоки объявлений и селекторы
    • 4.1.8 Объявления и свойства
    • 4.1.9 Комментарии
  • 4.2 Правила обработки ошибок, возникающих на этапе синтаксического анализа
  • 4.3 Значения
    • 4.3.1 Целые и вещественные числа
    • 4.3.2 Единицы измерения длины
    • 4.3.3 Процентные соотношения
    • 4.3.4 URL + URN = URI
    • 4.3.5 Счетчики
    • 4.3.6 Цвета
    • 4.3.7 Углы
    • 4.3.8 Время
    • 4.3.9 Частота
    • 4.3.10 Строки
  • 4.4 Представление документов, в которых используются CSS
    • 4.4.1 Ссылки на символы, отсутствующие в системе кодировки

4.1 Синтаксис

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

Данные описания являются нормативными и идут в дополнении к грамматическим правилам, изложенным в Приложении Г .

4.1.1 Маркирование

Язык CSS любого уровня, включая первый, второй и последующие уровни, возможные в будущем, использует общее ядро синтаксических правил. Это позволяет агентам пользователей выполнять синтаксический анализ (хотя они могут и не понимать некоторые выражения) таблиц стилей, написанных с использованием того уровня CSS, который не существовал на момент создания агента пользователя. Дизайнеры могут использовать это свойство для создания таблиц стилей, которые будут работать с более старыми версиями агентов пользователей, а также реализовывать возможности самых новых уровней CSS.

На лексическом уровне таблицы стилей CSS состоят из последовательности меток. Список меток, используемых в CSS2, приведен ниже. В их определениях используются регулярные выражения в стиле Lex. Использование восьмеричных кодов осуществляется в соответствии со стандартом ISO 10646 ([ISO10646]). Как и в Lex, в случае множественных совпадений метку определяет самое длинное совпадение.
Метка | Определение
IDENT | {ident}
ATKEYWORD | @{ident}
STRING | {string}
HASH | #{name}
NUMBER | {num}
PERCENTAGE | {num}%
DIMENSION | {num}{ident}
URI url\({w}{string}{w}\)
|url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE | U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?
CDO <!--
CDC -->
; ;
{ \{
} \}
( \(
) \)
[ \[
] \]
S | [ \t\r\n\f]+
COMMENT \/\*[^*]*\*+([^/][^*]*\*+)*\/
FUNCTION | {ident}\(
INCLUDES ~=
DASHMATCH |=
DELIM | символ, не подпадающий ни под одно из вышеприведенных правил

Макросы, фигурирующие в предыдущей таблице и заключенные в фигурные скобки "{}", определяются следующим образом:
Макрос | Определение
ident | {nmstart}{nmchar}*
name | {nmchar}+
nmstart | [a-zA-Z]|{nonascii}|{escape}
nonascii | [^\0-\177]
unicode | \\[0-9a-f]{1,6}[ \n\r\t\f]?
escape | {unicode}|\\[ -~\200-\4177777]
nmchar | [a-z0-9-]|{nonascii}|{escape}
num | [0-9]+|[0-9]*\.[0-9]+
string | {string1}|{string2}
string1 | \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2 | \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
nl | \n|\r\n|\r|\f
w | [ \t\r\n\f]*

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

stylesheet  : [ CDO | CDC | S | statement ]*;
statement   : ruleset | at-rule;
at-rule     : ATKEYWORD S* any* [ block | ';' S* ];
block       : '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*;
ruleset     : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;
selector    : any+;
declaration : property ':' S* value;
property    : IDENT S*;
value       : [ any | block | ATKEYWORD S* ]+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
              | FUNCTION | DASHMATCH | '(' any* ')' | '[' any* ']' ] S*;

Из соображений удобочитаемости непосредственно в самом грамматическом описании метки comment не используются, хотя они может присутствовать произвольное число раз между другими метками.

Метка S используется для обозначения свободного места. В качестве последнего могут выступать символы "пробел" (код в unicode: 32), "отступ" (9), "перевод строки" (10), "возврат каретки" (13) и "подача бумаги" (12). Другие символы, обозначающие пробелы, например, "em-пробел" (8195) и "идеографический пробел" (12288) не могут быть частью свободного места.

4.1.2 Ключевые слова

Ключевые слова имеют форму идентификаторов. Они не должны заключаться в кавычки ("..." или '...'). Таким образом,

red

это ключевое слово, а

"red"
не является таковым. (Это строка.) Можно привести другие примеры недопустимого написания:

Illegal example(s):

width: "auto";
border: "none";
font-family: "serif";
background: "red";

4.1.3 Символы и регистр

Здесь действуют следующие правила:

  • Таблицы стилей CSS не учитывают регистр за исключением тех их частей, которые не являются объектами языка CSS. За пределами рассмотрения данной спецификации остается, например, учет региструа в значениях атрибутов языка HTML "id" и "class", названий шрифтов и URI. В частности, заметим, что в формате HTML в названиях элементов регистр не учитывается, в то время как в формате XML учитывается.
  • В CSS2 идентификаторы (включая названия элементов, классы и атрибут ID в селекторах) могут содержать символы из диапазонов от A до Z, от a до z и от 1 до 9; символы, код которых по стандарту ISO-10646 превосходит 161, а также дефис "-". Идентификаторы не могут начинаться с дефиса или с цифры и могут содержать специальные комбинации символов (с использованием обратного слэша), а также числовые коды кодировки ISO-10646 (см. следующий пункт). Например, идентификатор "B&W?" можно написать как "B\&W\?" или "B\26 W\3F".

    Следует заметить, что кодировка unicode эквивалентна кодировке ISO-10646 (см. [UNICODE] и [ISO10646]).

  • В CSS2 обратный слэш (\) используется для специального кодирования символов тремя различными способами.

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

    Наличие обратного слэша отменяет действие специальных символов языка CSS. Специальное значение любого символа (за исключением шестнадцатеричного числа) можно "нейтрализовать" с помощью обратного слэша. Например, "\"" представляет собой строку, содержащую только одну пару кавычек. Препроцессоры таблиц стилей не должны удалять обратные слэши, т.к. это повлечет за собой изменение смысла таблицы стилей.

    Использование обратного слэша позволяет разработчикам оперировать с символами, которые нельзя просто поместить в документ. В данном случае после обратного слэша должно находиться не более шести шестнадцатеричных цифр (0,...,9,A,...,F), выступающих в качестве кодов этих символов в системе ISO-10646 ([ISO10646]). Если за шестнадцатеричным числом следует цифра или буква, то следует четко обозначить конец данного числа. Это можно сделать с помощью:

    1. обычного пробела (или любого другого пустого символа): "\26 B" ("&B");
    2. написания ровно шести шестнадцатеричных цифр: "\000026B" ("&B").

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

  • Комбинации символов с обратным слэшем всегда интерпретируются как часть идентификатора или строки (т.е. "\7B" не является символом пунктуации, в то время как "{" является таковым, а "\32" допускается использовать в начале имени класса, хотя цифра "2" в этом качестве не допускается).

4.1.4 Выражения

Таблица стилей, написанная с использованием CSS любого уровня, представляет собой список выражений (см. выше описание грамматики). Все выражения делятся на два класса: правила at и наборы правил. С обоих сторон вокруг выражений может находиться пустое пространство.

Такие выражения, как "непосредственно перед" или "непосредственно после" в данной спецификации означают отсутствие промежуточных пробелов или комментариев.

4.1.5 Правила at

Правила at начинаются с ключевого слова at, т.е. с символа '@', непосредственно за которым следует идентификатор (например, '@import', '@page').

Правило at включает все, что находится до первой находящейся после него точки с запятой ";" или до первого следующего за ним структурного блока включительно. Агент пользователя с поддержкой CSS, если он встретит нераспознаваемое правило at, должен игнорировать все это правило целиком и продолжить синтаксический анализ далее.

Агенты пользователей с поддержкой CSS2 должны игнорировать все правила '@import', которые находятся внутри блока, либо не предшествует ни одному набору правил.

Illegal example(s):

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

@import "subs.css";
H1 { color: blue }
@import "list.css";

Второе правило '@import' в соответствии со спецификацией CSS2 недопустимо. Синтаксический анализатор CSS2 полностью проигнорирует все правило at целиком, сокращая размер таблицы стиля до:

@import "subs.css";
H1 { color: blue }

Пример(ы) недопустимого использования:

В следующем примере второе правило '@import' недопустимо, т.к. оно находится в пределах блока '@media'.

@import "subs.css";
@media print {
  @import "print-main.css";
  BODY { font-size: 10pt }
}
H1 {color: blue }

4.1.6 Блоки

Блок начинается с левой фигурной скобки "{" и заканчивается соответствующей ей правой фигурной скобкой "}". В промежутке между ними могут находиться любые символы с тем лишь исключением, что круглые "( )", квадратные "[ ]" и фигурные "{ }" скобки всегда должны присутствовать парами и при этом могут быть вложенными. Одинарные и двойные кавычки также должны присутствовать только парами, тогда расположенный между ними текст будет рассматриваться как строка. Определение строки можно найти в разделе "Маркирование".

Illegal example(s):

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

{ causta: "}" + ({7} * '\'') }

И хотя данное правило не является допустимым правилом CSS2, оно, согласно определению, все же является структурным блоком.

4.1.7 Наборы правил, блоки объявлений и селекторы

Набор правил (также называемый правилом) состоит из селектора и следующего за ним блока объявлений.

Блок объявлений (обозначаемый далее как {}-блок) начинается с левой фигурной скобки "{" и заканчивается соответствующей ей правой фигурной скобкой "}". Между ними должен находиться, список объявлений (он может быть пустым), отделенных друг от друга точкой с запятой (";").

Селектор (см. раздел о селекторах) включает все, что находится до первой следующей за ним левой фигурной скобки "{", не включая ее. Он всегда находится рядом с {}-блоком. Если агент пользователя не может выполнить синтаксический анализ селектора (т.е. селектор не является допустимым селектором CSS2), то он также должен проигнорировать и {}-блок.

Согласно спецификации CSS2 запятая (",") в селекторах имеет определенное значение. Пока еще не известно, примет ли запятая в будущих версиях CSS другие значения. Тем не менее, если в селекторе имеется ошибка, то, несмотря на корректность остальной его части, все объявление должно игнорироваться целиком.

Illegal example(s):

В приведенном ниже примере символ "&" в теле селектора CSS2 недопустим, поэтому агент пользователя должен полностью игнорировать вторую строку и не устанавливать красный цвет для отображения элемента H3:

H1, H2 {color: green }
H3, H4 & H5 {color: red }
H6 {color: black }

Пример(ы):

Ниже приведен более сложный пример. Первые две пары фигурных скобок находятся внутри строки, и не обозначают конца селектора. Это пример корректного объявления CSS2.

P[example="public class foo\
{\
    private int x;\
\
    foo(int x) {\
        this.x = x;\
    }\
\
}"] { color: red }

4.1.8 Объявления и свойства

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

В соответствии с принципами работы селекторов несколько объявлений для одного селектора могут быть объединены в группы, в которых они отделяются друг от друга точкой с запятой (";").

Пример(ы):

Таким образом, приведенные ниже правила:

H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }

эквиваленты следующим правилам:

H1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal
}

Свойство является идентификатором. Поэтому в его значении могут присутствовать произвольные символы с тем лишь исключением, что круглые "( )", квадратные "[ ]" и фигурные "{ }" скобки, а также одинарные и двойные кавычки должны появляться парами, а точка с запятой, если она не принадлежит строке, должна кодироваться с помощью обратного слэша. Круглые, квадратные и фигурные скобки могут быть вложенными. Символы внутри кавычек интерпретируются как строка.

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

Агент пользователя должен игнорировать объявление с некорректным именем свойства или с некорректным его значением. У каждого свойства в CSS2 имеются собственные синтаксические и семантические ограничения на принимаемые им значения.

Illegal example(s):

Например, предположим, что синтаксический анализатор CSS2 анализирует следующую таблицу стилей:

H1 { color: red; font-style: 12pt } /* Некорректное значение 12pt */
P { color: blue;  font-vendor: any; /* Некорректное свойство font-vendor */
    font-variant: small-caps }
EM EM { font-style: normal }

Второе объявление в первой строке имеет некорректное значение '12pt'. Второе объявление во второй строке содержит неопределенное свойство 'font-vendor'. Таким образом, синтаксический анализатор CSS2 проигнорирует эти объявления, заметно уменьшив при этом таблицу стиля до следующего вида:

H1 { color: red; }
P { color: blue;  font-variant: small-caps }
EM EM { font-style: normal }

4.1.9 Комментарии

Комментарии начинаются с символов "/*" и заканчиваются символами "*/". Они могут находиться в любом месте между метками, и их содержимое не влияет на работу таблицы. Комментарии могут и не включаться в таблицу.

В CSS допускается использование ограничителей комментариев ("<!--" и "-->"), принятых в SGML. Но они не ограничивают комментарии CSS. Их использование уместно тогда, когда от пользовательского агента, написанного для HTML-приложений версии 3.2 и ниже, необходимо скрыть стилистические правила, описанные в элементе STYLE исходного HTML-документа. Подробную информацию можно получить в спецификации HTML 4.0 ([HTML40]).

4.2 Правила обработки ошибок, возникающих на этапе синтаксического анализа

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

Для обеспечения возможности добавления новых свойств и новых значений для уже существующих свойств агенты пользователей в перечисленных ниже ситуациях должны выполнять следующие правила:

  • Неизвестные свойства. Агенты пользователей должны игнорировать объявления, содержащие неизвестные свойства. Например, следующую таблицу стилей:
    H1 { color: red; rotation: 70minutes }

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

    H1 { color: red }
  • Недопустимые значения. Агенты пользователей должны игнорировать объявления, содержащие недопустимые значения. Например:
    IMG { float: left }       /* корректное объявление */
IMG { float: left here }  /* "here" не является значением */
                          /* свойства 'float' */
IMG { background: "red" } /* ключевое слово заключено в кавычки */
IMG { border-width: 3 }   /* не определена единица измерения */
                          /* для значения длины */
    Анализатор CSS2 должен применить первое правило и проигнорировать остальные:
    IMG { float: left }
IMG { }
IMG { }
IMG { }

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

  • Некорректные ключевые слова at. Агенты пользователей должны игнорировать некорректные ключевые слова at и весь следующий за ними текст до первой точки с запятой (";") или первого {}-блока включительно, в зависимости от того, что встретится первым. Рассмотрим следующий пример:
    @three-dee {
  @background-lighting {
    azimuth: 30deg;
    elevation: 190deg;
  }
  H1 { color: red }
}
H1 { color: blue }

    Правило at '@three-dee' не принадлежит языку CSS2. Поэтому все правило до третьей правой фигурной скобки включительно игнорируется. Агент пользователя с поддержкой CSS2 проигнорирует его, сократив таблицу стилей до следующего вида:

    H1 { color: blue }

4.3 Значения

4.3.1 Целые и вещественные числа

Некоторые типы значений могут быть выражены в целых (обозначаются как <целое>) или вещественных числах (обозначаются как <число>). Вещественные и целые числа представляются только в десятичной системе счисления. Значения типа <целое> состоят из одной или нескольких цифр от 0 до 9. Значения типа <число> могут совпадать с типом <целое> или состоять из группы цифр и следующих за нею точки и другой группы цифр. Вещественным и целым числам могут предшествовать символы "-" или "+" для обозначения знака.

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

4.3.2 Единицы измерения длины

Единицы измерения длины используются при определении горизонтальных и вертикальных размеров.

Значения поперечных размеров (в данной спецификации обозначенные как <длина>) задаются в соответствии со следующим форматом: знак ('+' или '-', по умолчанию используется знак '+'), непосредственно за которым следует <число> (с десятичной точкой или без нее), непосредственно за которым следует единица измерения длины (например, пикселы, градусы и т.д.). После нулевого значения длины единицу измерения можно опускать.

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

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

К относительным единицам измерения относятся:

  • em: свойство 'font-size' соответствующего шрифта
  • ex: свойство 'x-height' соответствующего шрифта
  • px: пиксели, относительно устройства просмотра

Пример(ы):

H1 { margin: 0.5em }      /* em */
H1 { margin: 1ex }        /* ex */
P  { font-size: 12px }    /* px */

Единица измерения 'em' равна вычисленному значению свойства 'font-size' элемента, с которым она используется. Исключение составляет тот случай, когда 'em' используется непосредственно со значением самого свойства 'font-size' при указании размера шрифта родительского элемента. Она может использоваться для измерения вертикальных и горизонтальных размеров. (В типографической лексике данная единица измерения иногда называется учетверенной шириной.)

Единица измерения 'ex' определяется свойством шрифта 'x-height'. Термин "x-высота" принят из-за того, что он определял размеры, равные высоте строчной буквы "x". Данная единица измерения может использоваться и для тех шрифтов, не включающих букву "x".

Пример(ы):

Правило

H1 { line-height: 1.2em }

говорит о том, что высота строки элементов H1 будет на 20% больше размера шрифта элементов H1. С другой стороны, правило

H1 { font-size: 1.2em }

говорит о том, что размер шрифта элементов H1 будет на 20% больше размера шрифта, наследуемого элементами H1.

Если единицы измерения 'em' и 'ex' используются для корневого элемента дерева документа (например, для элемента "HTML" в HTML-документе), то их масштаб определяется относительно начального значения свойства.

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

При чтении на расстоянии вытянутой руки 1px равен примерно 0.28 мм (1/90 дюйма). При печати на лазерном принтере, т.е. при чтении на расстоянии меньшем, чем длина руки (примерно, 55 см, 21 дюйм), 1px равен примерно 0.21 мм. Для принтера с разрешением в 300 точек на дюйм значение пиксела может быть округлено до 3 точек (0.25 мм); для принтера с разрешением в 600 точек на дюйм - до 5 точек.

Следующие два рисунка демонстрируют влияние расстояния, на котором осуществляется их просмотр, на размер пиксела и разрешение устройства вывода. На первом рисунке при чтении на расстоянии 71 см (28 дюймов) размер пиксела равен 0.28 мм, а при чтении на расстоянии 3.5 м (12 футов) - 1.4 мм.

Размеры пиксела прямо пропорциональны расстоянию, на котором просматривается изображение [D]

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

Больше разрешающая способность - больше точек для покрытия одного квадратного пиксела [D]

Дочерние элементы не наследуют относительные значения, указанные для их родительских элементов, обычно они наследуют вычисляемые значения.

Пример(ы):

Согласно следующим правилам вычисляемое значение свойства 'text-indent' элементов H1 будет равно 36pt, а не 45pt, как это было бы, если бы H1 являлся дочерним элементом элемента BODY.

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* т.е. 36pt */
}
H1 { font-size: 15pt }

Абсолютные единицы измерения полезны только в том случае, когда известны физические параметры устройства вывода. К ним относятся:

  • in: дюйм - 1 дюйм равен 2.54 сантиметрам.
  • cm: сантиметр
  • mm: миллиметр
  • pt: точка - 1 точка, используемая в CSS2, равна 1/72 дюйма.
  • pc: пика - 1 пика равна 12 точкам.

Пример(ы):

H1 { margin: 0.5in }      /* дюймы */
H2 { line-height: 3cm }   /* сантиметры */
H3 { word-spacing: 4mm }  /* миллиметры */
H4 { font-size: 12pt }    /* точки */
H4 { font-size: 1pc }     /* пики */

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

4.3.3 Процентные соотношения

Процентное соотношение (обозначаемое в данной спецификации как <проценты>) записывается в соответствии со следующим форматом: знак числа ('+' или '-', по умолчанию используется знак '+'), непосредственно за которым следует <число>, непосредственно за которым следует символ '%'.

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

Пример(ы):

Т.к. дочерние элементы, как правило, наследуют вычисляемое значение от родительских элементов, то в следующем примере дочерний элемент элемента P унаследует значение свойства 'line-height', равное 12pt, а не процентное значение (120%):

P { font-size: 10pt }
P { line-height: 120% }  /* 120% от 'font-size' */

4.3.4 URL + URN = URI

URL (универсальный адрес ресурса - Uniform Resource Locator, см. [RFC1738] и [RFC1808]) описывает адрес ресурса в Web. Идентификация ресурсов осуществляется с помощью URN (универсального имени ресурса - Uniform Resource Name). В совокупности они образуют URI (универсальный идентификатор ресурсов - Uniform Resource Identifier, см. [URI]). В данной спецификации используется понятие URI.

Значения URI обозначаются как <uri>. Для указания URI в значениях свойств используется структура "url()". Например:

Пример(ы):

BODY { background: url("http://www.bg.com/pinkish.gif") }

Значение URI задается в следующем формате: строка 'url(', затем, возможно, пробел, затем, возможно, одинарная или двойная кавычка, затем сам URI, затем одинарная или двойная кавычка, затем пробел, затем скобка ')'. Кавычки в обоих случаях должны быть одинаковыми.

Пример(ы):

Пример без использования кавычек:

LI { list-style: url(http://www.redballs.com/redball.png) disc }

Скобки, запятые, пробелы, одинарные и двойные кавычки, находящиеся непосредственно в самом URI, должны кодироваться с использованием обратного слэша: '\(', '\)', '\,' и т.д.

В зависимости от типа используемого URI вышеупомянутые символы можно задавать с помощью процедур, предусмотренных в URI (где "(" = %28, ")" = %29, и т.д.) [URI].

Для создания модульных таблиц стилей, не зависящих от абсолютного адреса ресурса, разработчики могут использовать относительные URI. Они (в соответствии с [RFC1808]) разрешаются в полные URI с использованием базового URI. Алгоритм этой процедуры описан в разделе 3 стандарта RFC 1808. Для таблиц стилей CSS базовым является URI таблиц стилей, а не исходного документа.

Example(s):

Например, предположим, что следующее правило:

BODY { background: url("yellow") }

помещено в таблицу стилей, ссылка на которую определяется следующим URI:

http://www.myorg.org/style/basic.css

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

http://www.myorg.org/style/yellow

Агенты пользователей могут по-разному обрабатывать URI, ссылающиеся на несуществующие или неисполнимые ресурсы.

4.3.5 Счетчики

Счетчики обозначаются идентификаторами (см. свойства 'counter-increment' и 'counter-reset'). Для обращения к значению счетчика, используется запись 'counter(<идентификатор>)' или 'counter(<идентификатор>, <тип-стиля-списка>)'. По умолчанию используется стиль 'decimal'.

Чтобы обратиться к последовательности вложенных счетчиков, обозначенных одним именем, используется запись вида 'counters(<идентификатор>, <строка>)' или 'counters(<идентификатор>, <строка>, <тип-стиля-списка>)'. См. раздел "Вложенные счетчики и диапазон" в главе о генерируемом содержимом.

В CSS2 доступ к значениям счетчиков можно получить только с помощью свойства 'content'. Следует помнить, что в качестве <типа-стиля-списка> может выступать 'none'. Так 'counter(x, none)' приводит к выводу пустой строки.

Пример(ы):

Ниже представлена таблица стилей, которая позволяет осуществить нумерацию абзацев (P) в каждой главе (H1). Нумерация производится с использованием римских цифр, после которых стоит точка и пробел:

P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}

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

4.3.6 Цвета

<Цвет> является либо ключевым словом, либо численным значением в RGB.

Список ключевых слов, используемых для названия цветов: aqua (цвет морской волны), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (желто-зеленый), maroon (темно-бордовый), navy (темно-синий), olive (оливковый), purple (пурпурный), red (красный), silver (серебряный), teal (темно-бирюзовый), white (белый) и yellow (желтый). Эти 16 цветов определены в HTML 4.0 ([HTML40]). В дополнение к этим ключевым словам пользователи могут создавать собственные для обозначения цветов, используемых определенными объектами в пользовательской среде. Дополнительную информацию можно получить в разделе о системных цветах.

Пример(ы):

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

Цветовая модель RGB используется при числовом описании цветов. Во всех следующих примерах указывается один и тот же цвет:

Пример(ы):

EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }      /* целое в диапазоне 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* число с плавающей точкой 0.0% - 100.0% */

В шестнадцатеричном представлении запись значения RGB имеет следующий формат: символ '#', непосредственно за которым следует три или шесть шестнадцатеричных символов. Значение RGB из трех цифр (#rgb) преобразуется в последовательность из шести цифр (#rrggbb) путем дублирования цифр, а не добавления нулей. Например, #fb0 расширяется до #ffbb00. Поэтому белый цвет (#ffffff) можно указать в более короткой форме (#fff). Более того, при этом исчезает зависимость от цветопередачи дисплея.

В функциональном представлении формат записи значения RGB имеет следующий вид: строка 'rgb(', непосредственно за которой следует список из трех разделенных запятыми вещественных (или целочисленных, или процентных) значений, непосредственно за которыми следует скобка ')'. Целочисленное значение 255 эквивалентно процентному значению 100% и шестнадцатеричным значениям F или FF, так что rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Допускаются пробелы вокруг числовых значений.

Все цвета, используемые в модели RGB, принадлежат цветовому пространству sRGB (см. [SRGB]). Агенты пользователей могут представлять цвета с разной точностью, но использование sRGB дает возможность однозначного определения цвета, соотносимого с международным стандартом (см. [COLORIMETRY]).

Конформные пользовательские агенты в возможностях отображения цветов могут ограничиваться только гамма-коррекцией. Пространство sRGB в заданных условиях просмотра определяет цветовую гамму дисплея 2.2. Агенты пользователей должны корректировать заданные в CSS цвета таким образом, чтобы в комбинации с "натуральной" гаммой цветов выходных устройств получалась эффективная цветовая гамма 2.2. Более подробную информацию можно получить в разделе о гамма-коррекции. Помните, что это повлияет только на цвета, определенные в CSS; считается, что каждое изображение само по себе несет информацию о цвете.

Значения, находящиеся за пределами возможностей цветопередачи какого-либо устройства, должны быть удалены: значения красного, зеленого и синего цветов должны быть откорректированы так, чтобы они попадали в диапазон цветопередачи устройства. У обычных мониторов, использующих электронно-лучевую трубку, цветовой диапазон совпадает с sRGB. Поэтому для них три нижеприведенных правила эквивалентны:

Пример(ы):

EM { color: rgb(255,0,0) }       /* целое в диапазоне 0 - 255 */
EM { color: rgb(300,0,0) }       /* обрезается до rgb(255,0,0) */
EM { color: rgb(255,-10,0) }     /* обрезается до rgb(255,0,0) */
EM { color: rgb(110%, 0%, 0%) }  /* обрезается до rgb(100%,0%,0%) */

У других устройств, например, у принтеров, цветовой диапазон отличается от sRGB. Поэтому некоторые цвета, находящиеся за пределами пространства sRGB, т.е. не попадающие в диапазон от 0 до 255, несмотря на это, будут отображаться (в рамках цветового диапазона устройства), в то время как другие цвета из диапазона 0..255, лежащие за пределами цветовой гаммы устройства, будут усечены.

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

4.3.7 Углы

Значения углов (в тексте обозначаемые как <угол>) используются в звуковых таблицах стилей.

Значения углов задаются в соответствии со следующим форматом: произвольный символ знака ('+' или '-', знак '+' используется по умолчанию), непосредственно за которым следует <число>, непосредственно за которым следует идентификатор единицы измерения углов.

К идентификаторам единиц измерения углов относятся:

  • deg: градусы
  • grad: грады
  • rad: радианы

Значения углов могут быть отрицательными. Произвольное значение должно преобразовываться агентами пользователей в диапазон от 0 до 360 градусов. Например, значения -10deg и 350deg задают один и тот же угол.

Например, правый угол равен '90deg', или '100grad', или '1.570796326794897rad'.

4.3.8 Время

Временные значения (в тексте обозначаемые как <время>) используются в звуковых таблицах стилей.

Значения времени задаются в соответствии со следующим форматом: <число>, непосредственно за которым следует идентификатор единицы измерения времени.

К идентификаторам единиц измерения времени относятся:

  • ms: миллисекунда
  • s: секунда

Значения времени не могут быть отрицательными.

4.3.9 Частота

Значения частоты (в тексте обозначаемые как <частота>) используются в звуковых таблицах стилей.

Значения частоты задаются в соответствии со следующим форматом: <число>, непосредственно за которым следует идентификатор единицы измерения частоты.

К идентификаторам единиц измерения частоты относятся:

  • Hz: герцы
  • kHz: килогерцы

Значения частот не могут быть отрицательными.

Например, частота 200Гц (или 200гц) - это низкий звук, а 6кГц (или 6кгц) - высокий.

4.3.10 Строки

Строки заключаются в двойные или одинарные кавычки. Двойные кавычки не могут быть вложенными друг в друга за исключением тех случаев, когда одни из них кодируются с использованием обратного слэша (например, '\"' или '\22'). Аналогичное имеет место и для одинарных кавычек ("\'" или "\27").

Пример(ы):

"это 'строка'"
"это \"строка\""
'это "строка"'
'это \'строка\''

Символ новой строки не может содержаться непосредственно в самой строке. Чтобы его включить, необходимо использовать комбинацию с обратным слэшем "\A" (шестнадцатеричное число A является кодом символа перевода строки в Unicode и "символа новой строки" в CSS). За примером можно обратиться к свойству 'content'.

Из эстетических и прочих соображений строки могут разбиваться принудительно. В этом случае символ новой строки должен кодироваться с помощью обратного слэша "\". Например, следующие два селектора совершенно идентичны:

Пример(ы):

A[TITLE="не слишком длин\
ный заголовок"] {/*...*/}
A[TITLE="не слишком длинный заголовок"] {/*...*/}

4.4 Представление документов, в которых используются CSS

Таблица стилей CSS представляет собой последовательность символов универсального набора (см. [ISO10646]). Для передачи и хранения эти символы должны кодироваться в соответствии с той системой кодировки, которая поддерживает набор символов US-ASCII (например, ISO 8859-x, SHIFT JIS и т.д.). Информацию о наборах символов и кодировании символов можно найти в спецификации HTML 4.0 ([HTML40], глава 5), а также в спецификации XML 1.0 ([XML10], разделы 2.2 и 4.3.3) и Приложении Е.

Если таблица стилей импортируется в другой документ, например, в элемент STYLE или атрибут "style" HTML-документа, то она использует систему кодировки, принятую в документе.

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

  1. Параметр "charset" HTTP в поле "Content-Type".
  2. Правило at @charset.
  3. Элементы кодировки языка в документе, из которого происходит ссылка на таблицу (например, атрибут "charset" элемента LINK в HTML-документе).

Во внешней таблице стилей может быть не больше одного правила @charset. Его не должно быть во внедренной таблице стилей, и оно должно Располагаться в самом начале документа, чтобы перед ним не было ни одного символа. После слова "@charset" нужно указать название системы кодировки символов. Название должно представлять собой название набора символов в соответствии с реестром IANA (см. [IANA]. Полный список наборов символов можно найти в [CHARSETS]). Например:

Пример(ы):

@charset "ISO-8859-1";

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

Следует помнить, что использование конструкции @charset теоретически может вызвать проблемы, связанные с тем, что заранее неизвестно, какая кодировка используется используется в самой этой конструкции. Однако на практике Интернет чаще всего используются кодировки на базе ASCII, UTF-16, UCS-4 или (редко) на EBCDIC. Это означает, что в общем случае начальные байты документа позволяют агентам пользователей достоверно определять тип кодировки, что предоставляет достаточный объем информации для декодирования правила @charset, который в свою очередь точно указывает тип кодировки.

4.4.1 Ссылки на символы, отсутствующие в системе кодировки

В таблице стилей может понадобиться обращение к символам, которые не могут быть представлены в текущей кодировке. Эти символы должны представляться в виде ссылок на символы кодировки ISO 10646 с использованием обратного слэша. Это делается с той же целью, что и кодирование цифровых ссылок в документах HTML или XML (см. [HTML40], главы 5 и 25).

Механизм кодирования символов с использованием обратного слэша рекомендуется использовать только для небольшого количества символов. Если необходимость в его использовании возникает часто, следует использовать наиболее приемлемую систему кодировки (например, если документ содержит много греческих символов, то рекомендуется использовать "ISO-8859-7" или "UTF-8").

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

Конформные агенты пользователей должны осуществлять корректное преобразование всех символов любой распознаваемой системы кодировки в Unicode (или должны вести себя так, как если бы они сделали это).

Например, документ, переданный как документ в кодировке ISO-8859-1 (Latin-1), не может содержать греческие символы: "κουρος" (греческий: "kouros"). Эта последовательность должна быть представлена в виде: "3BA\3BF\3C5\3C1\3BF\3C2".

Примечание. В HTML 4.0 числовые ссылки на символы интерпретируются в значениях атрибута "style", но не в содержимом элемента STYLE. Вследствие подобной асимметрии для атрибута "style" и элемента STYLE разработчикам рекомендуется использовать механизм в CSS обратные слэши, а не числовую кодировку. Например,

<SPAN style="voice-family: D\FC rst">...</SPAN>

рекомендуется использовать вместо

<SPAN style="voice-family: D&#252;rst">...</SPAN>


Таблицы

17 Таблицы

Содержание

  • 17.1 Знакомство с работой таблиц
  • 17.2 Модель таблицы CSS
    • 17.2.1 Анонимные объекты таблицы
  • 17.3 Селекторы столбцов
  • 17.4 Таблицы в модели визуального форматирования
    • 17.4.1 Положение и выравнивание заголовка
  • 17.5 Визуальное положение содержания таблицы
    • 17.5.1 Слои и прозрачность таблицы
    • 17.5.2 Алгоритм ширины таблицы: свойство 'table-layout'
      • Фиксированное расположение таблицы
      • Автоматическое расположение таблицы
    • 17.5.3 Алгоритмы высоты таблицы
    • 17.5.4 Горизонтальное выравнивание в столбце
    • 17.5.5 Эффекты динамичной строки и столбца
  • 17.6 Границы
    • 17.6.1 Модель отдельных границ
      • Границы вокруг пустых ячеек: свойство 'empty-cells'
    • 17.6.2 Модель сжатия границ
      • Разрешение конфликтов между границами
    • 17.6.3 Стили границ
  • 17.7 Автоматическое представление таблиц
    • 17.7.1 Произносимые заголовки: свойство 'speak-header'

17.1 Введение в таблицы

Таблицы представляют отношения между данными. Авторы определяют эти отношения в языке документа и указывают способ их представления в CSS: визуальное или звуковое.

Авторы могут определять визуальное форматирование таблиц в виде прямоугольной сетки ячеек. Строки и столбцы ячеек могут объединяться в группы строк и группы столбцов. Вокруг строк, столбцов, групп строк, групп строк и ячеек могут быть видимые границы (в спецификации CSS2 представлено две модели границ). Внутри ячейки данные могут выравниваться по вертикали или по горизонтали. Кроме того, данные могут выравниваться во всех ячейках или столбцах.

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

Пример(ы):

Далее представлена таблица из трех строк и трех абзацев, описанная на языке HTML 4.0:

<TABLE>
<CAPTION>Обычная таблица размером 3x3</CAPTION>
<TR id="row1">
   <TH>Заголовок 1      <TD>Ячейка 1        <TD>Ячейка 2
<TR id="row2">
   <TH>Заголовок 2      <TD>Ячейка 3        <TD>Ячейка 4
<TR id="row3">
   <TH>Заголовок 3      <TD>Ячейка 5        <TD>Ячейка 6
</TABLE>

В этом коде создается одна таблица (элемент TABLE), три строки (элементы TR), три ячейки заголовков (элементы TH) и шесть ячеек данных (элементы TD). Обратите внимание, что три столбца в этом примере указаны неявно: в таблице столько столбцов, сколько понадобится для ячеек заголовков и данных.

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

TH { text-align: center; font-weight: bold }

Следующие правила позволяют выровнять текст ячеек заголовков по базовой линии, а текст каждой ячейки данных - вертикально по центру:

TH { vertical-align: baseline }
TD { vertical-align: middle }

Следующие правила определяют наличие сплошной линии границы синего цвета толщиной 3 пиксела вокруг верхней строки и сплошной границы черного цвета толщиной в 1 пиксел вокруг каждой из последующих строк:

TABLE   { border-collapse: collapse }
TR#row1 { border-top: 3px solid blue }
TR#row2 { border-top: 1px solid black }
TR#row3 { border-top: 1px solid black }

Следует помнить, однако, что границы вокруг строк могут перекрываться в местах пересечения строк. Какого цвета (черная или синяя) и толщины (1 пиксел или 3 пиксела) будет граница между строкой 1 и 2? Это обсуждается в разделе об устранении конфликтов между границами.

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

CAPTION { caption-side: top }

И наконец, следующее правило указывает, что при звуковом представлении таблицы каждая строка данных будет произноситься в формате "Заголовок, Данные, Данные":

TH { speak-header: once }

Например, первая строка будет произноситься в формате "Заголовок1 Ячейка1 Ячейка2". А в соответствии со следующим правилом:

TH { speak-header: always }

эта строка будет произноситься в формате "Заголовок1 Ячейка1 Заголовок1 Ячейка2".

В предыдущих примерах показано, как CSS влияет на элементы HTML 4.0; в HTML 4.0 семантика различных элементов таблицы (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH и TD) определена строго. В других языках документов (например, в приложениях XML) элементы таблицы могут быть не определены заранее. Таким образом, спецификация CSS2 позволяет авторам "отображать" элементы языка документа на элементы таблицы с помощью свойства 'display'. Например, за счет следующего правила элемент FOO действует как элемент HTML TABLE, а элемент BAR работает как элемент CAPTION:

FOO { display : table }
BAR { display : table-caption }

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

17.2 Модель таблиц CSS

Модель таблиц CSS основана на модели таблиц HTML 4.0, в которой структура таблицы тесно связана с визуальным представлением таблицы. В этой модели таблица состоит из необязательного заголовка и произвольного количества строк ячеек. Такая модель таблиц считается "ориентированной на строки", так как в языке документа явным образом определяются строки, а не столбцы. Столбцы определяются только после указания всех строк -- первая ячейка каждой строки относится к первому столбцу, вторая - ко второму и так далее). Строки и столбцы могут образовывать структурные группы с отражением при представлении таблицы (например, вокруг группы строк может располагаться граница).

Таким образом, модель таблицы состоит из таблиц, заголовков, строк, групп срок, столбцов, групп столбцов и ячеек.

Для модели CSS не обязательно, чтобы язык документа включал элементы, соответствующие всем этим компонентам. Для языков документов (таких как приложения XML), не имеющих заранее определенных элементов таблиц, авторы могут отображать элементы языка документа на элементы таблицы; такая процедура осуществляется с помощью свойства 'display'. Следующие значения 'display' связывают семантику таблицы с произвольным элементом:

table (В HTML: TABLE)
Указывает, что элемент определяет таблицу уровня блока: это прямоугольный блок, который используется в контексте форматирования блока.
inline-table (В HTML: TABLE)
Указывает, что элемент определяет таблицу уровня стоки: это прямоугольный блок, который используется в последовательном контексте форматирования).
table-row (В HTML: TR)
Указывает, что элемент является строкой ячеек.
table-row-group (В HTML: TBODY)
Указывает, что элемент группирует одну или несколько строк.
table-header-group (В HTML: THEAD)
Работает аналогично 'table-row-group', но для визуального форматирования эта группа строк всегда отображается вперед всех других строк и их групп, после главного заголовка. Агенты пользователей, осуществляющие вывод на печать, могут повторять строки нижнего заголовка на каждой странице, занимаемой таблицей.
table-footer-group (В HTML: TFOOT)
Работает аналогично 'table-row-group', но для визуального форматирования эта группа строк всегда отображается после всех строк и их групп, перед нижними заголовками. Агенты пользователей, осуществляющие вывод на печать, могут повторять строки нижнего заголовка на каждой странице, занимаемой таблицей.
table-column (В HTML: COL)
Указывает, что элемент определяет столбец ячеек.
table-column-group (В HTML: COLGROUP)
Указывает, что элемент объединяет один или несколько столбцов.
table-cell (В HTML: TD, TH)
Указывает, что элемент представляет собой ячейку таблицы.
table-caption (В HTML: CAPTION)
Задает заголовок таблицы.

Элементы, у которых для свойства 'display' установлено значение 'table-column' или 'table-column-group', не представляются (как если было указано значение 'display: none'), но они могут быть полезны, поскольку могут иметь атрибуты для создания определенного стиля для представляемых столбцов.

Использовании этих значений в HTML 4.0 показано в стандартной таблице стилей для HTML 4.0 в приложении:

TABLE    { display: table }
TR       { display: table-row }
THEAD    { display: table-header-group }
TBODY    { display: table-row-group }
TFOOT    { display: table-footer-group }
COL      { display: table-column }
COLGROUP { display: table-column-group }
TD, TH   { display: table-cell }
CAPTION  { display: table-caption }

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

17.2.1 Анонимные объекты таблицы

Языки документов, отличные от HTML, могут не включать все элементы из модели таблиц CSS2. В этом случае для работы модели таблиц должно считаться, что "отсутствующие" элементы существуют. Отсутствующие элементы генерируют анонимные объекты (например, анонимные блоки в визуальное схеме таблицы) согласно следующим правилам:

  1. Все элементы таблицы будут автоматически генерировать вокруг себя необходимые анонимные объекты таблицы, состоящие по меньшей мере из трех вложенных объектов, соответствующих элементам 'table'/'inline-table', a 'table-row' и 'table-cell'.
  2. Если родительский элемент P элемента T 'table-cell' не является элементом 'table-row', объект, соответствующий 'table-row', будет сгенерирован между элементами P и T. Этот объект будет охватывать все последующие элементы 'table-cell' (в дереве документа) в T.
  3. Если значение родительского элемента P элемента 'table-row' T отлично от 'table', 'inline-table' или 'table-row-group', объект, соответствующий элементу 'table', будет сгенерирован между элементами P и T. Этот объект будет охватывать все последовательные элементы (в дереве документа) элемента T, у которых родительский элемент 'table' должен быть 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' и 'caption'.
  4. Если родительский элемент P элемента T 'table-row-group' (или 'table-header-group' или 'table-footer-group') не является 'table' или 'inline-table', объект, соответствующий элементу 'table', будет сгенерирован между элементами P и T. Этот объект будет охватывать все последовательные элементы (в дереве документа) элемента T, у которых родительский элемент 'table' должен быть 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' и 'caption'.
  5. Если дочерний элемент T элемента P 'table-row' не является элементом 'table-cell', объект, соответствующий элементу 'table-cell', будет сгенерирован между элементами P и T. Этот объект будет охватывать все последовательные элементы T, которые не являются элементами 'table-cell'.

Пример(ы):

В этом примере для XML элемент 'table' может содержать элемент HBOX:

<HBOX>
  <VBOX>George</VBOX>
  <VBOX>4287</VBOX>
  <VBOX>1998</VBOX>
</HBOX>

так как с ним связана следующая таблица стилей:

HBOX { display: table-row }
VBOX { display: table-cell }

Пример(ф):

В данном примере предполагается, что три элемента 'table-cell' в элементах ROW содержат. Обратите внимание, что далее текст помещается в анонимные последовательные блоки, как описано в модели визуального форматирования:

<STACK>
  <ROW>Это <D>top</D> строка.</ROW>
  <ROW>Это <D>middle</D> строка.</ROW>
  <ROW>Это <D>bottom</D> строка.</ROW>
</STACK>

Таблица стилей:

STACK { display: inline-table }
ROW   { display: table-row }
D     { display: inline; font-weight: bolder }

Агенты пользователей HTML могут не создавать анонимные объекты согласно описанным выше правилам.

17.3 Селекторы столбцов

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

Следующие свойства применяются к элементам столбцов и групп столбцов:

'border'
Различные свойства границы применяются к столбцам, только если для свойства 'border-collapse' в элементе таблицы установлено значение 'collapse'. В этом случае границы устанавливаются вокруг столбцов, а группы столбцов передаются в алгоритм разрешения конфликтов, который выбирает стили границ для каждого края ячейки.
'background'
Свойства фона определяют фон для ячеек в столбце, но только если ячейка и строка имеют прозрачный фон. См. раздел "Слои и прозрачность таблицы".
'width'
Свойство 'width' определяет минимальную ширину столбца.
'visibility'
Если свойству столбца 'visibility' присвоено значение 'collapse', ни одна ячейка столбца не представляется, а ячейки, охватывающие другие столбцы, урезаются. Кроме того, ширина таблиц уменьшается на ширину этого столбца. См. ниже раздел "Динамические эффекты". Другие значения свойства 'visibility' не имеют влияния.

Пример(ы):

Вот несколько примеров правил, определяющих свойства столбцов. Первые два правила реализуют атрибут "rules" HTML 4.0, имеющий значение "cols". Третье правил выделяет столбец "totals" синим цветом, а последние два правила указывают способ фиксирования размера столбца, используя алгоритм фиксированного расположения.

COL   { border-style: none solid }
TABLE { border-style: hidden }
COL.totals { background: blue }
TABLE { table-layout: fixed }
COL.totals { width: 5em }

17.4 Таблицы в модели визуального форматирования

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

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

Таблица с заголовком сверху; и таблица, и заголовок имеют пересекающиеся поля, что нормально для вертикальных полей. [D]

Схема таблицы, в верхней части которой находится заголовок; нижнее поле заголовка перекрывается верхним полем таблицы.

17.4.1 Положение и выравнивание заголовка

'caption-side'
Значение: top | bottom | left | right | inherit
Начальное значение: top
Область применения: элементы 'table-caption'
Наследование: да
Процентное значение: N/A
Устройства: визуальные

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

top
Поле заголовка располагается над полем таблицы.
bottom
Поле заголовка располагается ниже поля таблицы.
left
Поле заголовка располагается слева от поля таблицы.
right
Поле заголовка располагается справа от поля таблицы.

Заголовки, расположенные ниже или выше элемента 'table', форматируются подобно элементам блока, находящимся ниже или выше таблицы, с тем исключением, что они (1) наследуют наследуемые свойства таблицы и (2) не считаются блоками для элементов 'compact' или 'run-in', которые могут предшествовать таблице.

Заголовок, находящийся ниже или выше поля таблицы, действует также как блок для вычисления ширины; ширина вычисляется относительно ширины содержащего блока таблицы.

Для заголовка, располагающегося в правой или левой части поля таблицы, значение свойства 'width', отличное от 'auto', явным образом устанавливает ширину, в то время как значение 'auto' предписывает агенту пользователя выбрать "соответствующую ширину". Это значение может колебаться от "самого узкого блока " до "одной строки", поэтому пользователям рекомендуется не указывать значение 'auto' для установки ширины левого и правого заголовка.

Для выравнивания содержимого заголовка по горизонтали внутри поля заголовка используйте свойство 'text-align'. Для вертикального выравнивания левого и правого блока заголовка относительно блока таблицы используйте свойство 'vertical-align'. В этом случае смысл имеют только значения 'top', 'middle' и 'bottom'. Все другие значения трактуются как 'top'.

Пример(ы):

В этом примере свойство 'caption-side' определяет расположение заголовков под таблицей. Заголовок может иметь ширину родительского элемента таблицы, а текст заголовка будет выровнен по левому краю.

CAPTION { caption-side: bottom;
          width: auto;
          text-align: left }

Пример(ы):

В следующем примере показан способ помещения заголовка в левое поле. Таблица выровнена по центру за счет задания для левого и правого полей значения 'auto', а весь блок с таблицей и заголовком сдвинут в левое поле на расстояние, равное ширине заголовка.

BODY {
    margin-left: 8em
}
TABLE {
    margin-left: auto;
    margin-right: auto
}
CAPTION {
    caption-side: left;
    margin-left: -8em;
    width: 8em;

    text-align: right;
    vertical-align: bottom
}

Если ширина таблицы меньше ширины пространства для отображения, то форматирование примет следующий вид:

Выровненная по центру таблица с заголовком в левом поле страницы [D]

Выровненная по центру таблица с заголовком, выступающим на левое поле в результате отрицательного значения свойства 'margin-left'.

17.5 Визуальное расположение содержимого таблицы

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

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

  1. Каждый блок строки занимает одну строку ячеек сетки. Все вместе блоки строк заполняют таблицу сверху вниз в порядке, в котором они располагаются в исходном документе (т.е. таблица занимает ровно столько строк, сколько в таблице элементов строк).
  2. Группа строк занимает те же ячейки, что и строки, которые она включает.
  3. Блок столбцов занимает одну или несколько ячеек сетки. Блоки столбцов помещаются рядом друг с другом в указанном порядке. Первый блок столбцов может находиться слева или справа, в зависимости от значения свойства 'direction' таблицы.
  4. Блок группы занимает те же ячейки сетки, что и содержащиеся в группе столбцы.
  5. Ячейки могут занимать несколько строк или столбцов. (Хотя в спецификации CSS2 не дается способ определения количества занимаемых ячейкой строк или столбцов, у агента пользователя могут быть особые сведения об исходном документе; возможно, в будущих версиях CSS будет определен способ представления такой информации посредством синтаксиса CSS.) Таким образом, каждая ячейка является прямоугольным блоком, по ширине и высоте равным одной или нескольким ячейкам сетки. Верхняя строка этого прямоугольника находится в строке, определяемой родительским элементом ячейки. Этот прямоугольник должен находиться как можно левее, но он не может перекрывать другой блок ячейки и должен находиться правее всех ячеек одной строки, расположенных до него в исходном документе. (Это ограничение сохраняется и в том случае, если свойство 'direction' таблицы имеет значение 'ltr'; если свойство 'direction' имеет значение 'rtl', в предыдущем предложении следует заменить по смыслу слова "слева" на "справа".)
  6. Блок ячейки не может выходить за пределы последней строки таблицы или группы строк; поэтому агенты пользователей должны соответственно сокращать его.

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

Далее представлено два примера. Первый относится к документам HTML:

<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>

<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>

Форматирование второй таблицы показано на рисунке справа. Однако представление таблицы HTML не определено явным образом средствами HTML, и CSS также не определяет его. Агенты пользователей могут представлять таблицы на свое усмотрение, например, так, как показано на рисунке слева.

One table with overlapping cells and one without [D]

Слева - один из вариантов представления некорректной таблицы HTML 4.0; справа - единственный возможный вариант форматирования аналогичной таблицы, описанной без использования HTML.

17.5.1 Слои и прозрачность таблицы

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

schema of table layers [D]

Схема слоев таблицы.

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

  2. Следующий слой содержит группы столбцов. Группы столбцов по высоте равны самой таблице, но не обязательно занимают всю ее ширину.

  3. В верхней части групп столбцов находятся области, представляющие блоки столбцов. Как и группы столбцов, столбцы по высоте равны самой таблице, но не всегда занимают всю ширину таблицы.

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

  5. Предпоследний слой содержит строки. Строки также занимают всю таблицу.

  6. Самый верхний слой содержит собственно ячейки. Как показано на рисунке, хотя все строки и содержат одинаковое количество ячеек, не в каждой ячейке имеется содержимое. "Пустые" ячейки считаются прозрачными, поэтому через них будут видны нижние слои.

В следующем примере первая строка содержит четыре ячейки, вторая - ни одной, поэтому через нее виден фон таблицы, за исключением тех случаев, когда ячейка первой строки занимает и вторую строку. Следующий код HTML и правила стиля

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <STYLE type="text/css">
      TABLE { фон: #ff0; border-collapse: collapse }
      TD    { фон: red; border: double black }
    </STYLE>
  </HEAD>
  <BODY>

    <P>
    <TABLE>
      <TR>
        <TD> 1
        <TD rowspan="2"> 2
        <TD> 3
        <TD> 4
      </TR>
      <TR><TD></TD></TR>
    </TABLE>
  </BODY>
</HTML>

может форматироваться так:

Таблица с тремя пустыми ячейками в нижней строке [D]

Таблица с тремя пустыми ячейками в нижней строке.

17.5.2 Алгоритмы определения ширины таблицы: свойство 'table-layout'

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

'table-layout'
Значение: auto | fixed | inherit
Начальное значение: auto
Область применения: элементы 'table' и 'inline-table'
Наследование: нет
Процентное значение: не применяется
Устройства: визуальные

Свойство 'table-layout' управляет алгоритмом, используемым для размещения ячеек, строк и столбцов таблицы. Значения имеют следующий смысл:

fixed
Используется алгоритм фиксированного положения таблицы
auto
Используется любой алгоритм автоматического размещения таблицы

Ниже представлены описания обоих алгоритмов.

Фиксированное расположение таблицы

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

Ширина таблицы может указываться явным образом с помощью свойства 'width'. Значение 'auto' (для свойств 'display: table' и 'display: inline-table') предполагает использование алгоритма автоматического размещения таблицы.

При использовании алгоритма фиксированного расположения таблицы ширина каждого столбца определяется следующим образом:

  1. Элемент столбца со значением свойства 'width', отличным от 'auto', определяет ширину этого столбца.
  2. В противном случае ширину этого столбца определяет ячейка из первой строки свойства 'width', отличным от 'auto'. Если ячейка охватывает несколько столбцов, ширина делится на количество столбцов.
  3. Между остальными столбцами оставшееся свободное пространство таблицы (минус границы или расстояние между ячейками) длится поровну.

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

При таком алгоритме агент пользователя может начать компоновку таблицы после того, как полностью получена первая строка. Ячейки в последующих строках не влияют на ширину столбцов. Если содержимое не вмещается в ячейку, его сокращение определяется свойством 'overflow'.

Автоматическое расположение таблицы

В данном алгоритме (который обычно требует не более двух проходов) ширина таблицы задается шириной столбцов (и расстоянием между границами). Этот алгоритм отражает поведение популярных агентов пользователей HTML на момент написания данной спецификации. Агенты пользователей могут использовать для компоновки таблицы, для свойства 'table-layout' которой установлено значение 'auto', любой другой алгоритм вместо этого.

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

Ширина столбцов определяется следующим образом:

  1. Вычисляется минимальная ширина содержимого (МШС) каждой ячейки: форматированное содержимое может занимать любое число строк, но не может выходить за пределы блока ячейки. Если указанная в свойстве 'width' ширина (Ш) ячейки превышает МШС, Ш является минимальной шириной ячейки. Значение 'auto' означает, что минимальной шириной ячейки является МШС.

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

  2. Для каждого столбца определяется максимальная и минимальная ширина ячеек, занимающих только этот столбец. Минимальная ширина - это ширина, необходимая для ячейки с самым большим значением минимальной ширины (или значением свойства 'width' столбца, в зависимости от того, какое значение больше). Максимальная ширина - это ширина, необходимая для ячейки с самым большим значением максимальной ширины (или значением свойства 'width' столбца, в зависимости от того, какое значение больше).
  3. Для каждой ячейки, которая занимает несколько столбцов, необходимо увеличить минимальную ширину занимаемых ею столбцов таким образом, чтобы их общая ширина равнялась ширине ячейки. Сделайте это и для максимальной ширины. При возможности необходимо расширить все занимаемые ячейкой столбцы на приблизительно одинаковую величину.

Результатом будет максимальная и минимальная ширина каждого столбца. Ширина столбцов влияет на ширину конечной таблицы следующим образом:

  1. Если для свойства 'width' элементов 'table' или 'inline-table' указано значение (Ш), отличное от 'auto', значением свойства будет наибольшее из Ш и минимальной ширины, необходимой для всех столбцов с учетом расстояния между ячейками и границами (МИН). Если Ш больше МИН, оставшееся пространство будет распределено между столбцами.
  2. Если для элемента 'table' или 'inline-table' установлено значение 'width: auto', ширина таблицы будет равна наибольшему из значений ширины содержащего блока таблицы и значения МИН. Однако если максимальная ширина, необходимая для столбцов и расстояния между ячейками и границами (МАКС), меньше ширины содержащего блока, необходимо использовать значение МАКС.

Процентное значение ширины столбца определяется относительно ширины таблицы. Если для таблицы установлено значение 'width: auto', процентное значение показывает ограничение на ширину столбца, которое агент пользователя должен постараться соблюдать при создании таблицы. (Очевидно, это не всегда возможно: если ширина столбца равна '110%', ограничение не будет соблюдено.)

Примечание. В этом алгоритме строки (и группы строк) и столбцы (и группы столбцов) как ограничивают, так и сами ограничены размерами ячеек, из которых они состоят. Установка ширины столбца может косвенно влиять на высоту строки и наоборот.

17.5.3 Алгоритмы определения высоты таблицы

Высота таблицы определяется свойством 'height' для элемента 'table' или 'inline-table'. Значение 'auto' обозначает, что высота является суммой высот строк и расстояний между ячейками и границ. Любое другое значение указывает точную высоту; поэтому высота таблицы может быть больше или меньше суммарной высоты содержащихся в ней строк. В CSS2 не определяется представление таблицы, если высота этой таблицы не совпадает с высотой содержимого, в частности, должна ли высота содержимого превышать указанную высоту; и если не должна, то как будет распределяться свободное пространство между строками, высота которых меньше указанного значения высоты таблицы; или, если высота содержимого превышает указанную высоту таблицы, должен ли агент пользователя создать механизм прокрутки. Примечание. Возможно, в будущих версиях CSS это будет определено.

Высота поля элемента 'table-row' подсчитывается после того, как агенту пользователя будут доступны все ячейки строки: это будет наибольшая из величин высоты строки (свойство 'height') и минимальной высоты (МИН), необходимой для ячеек. Если для свойства 'height' элемента 'table-row' установлено значение 'auto', это означает, что подсчитанная высота строки имеет значение МИН. Значение МИН зависит от высот блоков ячеек и выравнивания блока ячейки (аналогично вычислению высоты линейного блока). В CSS2 не определяется, относительно чего подсчитываются процентные значения свойства 'height' для строк таблицы и групп строк.

В CSS2 высота блока ячейки является наибольшим из значений свойства 'height' ячейки таблицы и минимальной высотой, необходимой для содержимого (МИН). Если для свойства 'height' установлено значение 'auto', подразумевает, что используется подсчитанное значение МИН. В CSS2 не определяется, относительно чего подсчитываются процентные значения свойства 'height' для ячеек таблицы.

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

Свойство 'vertical-align' каждой ячейки таблицы определяет ее выравнивание в строке. Содержимое каждой ячейки имеет базовую линию, верх, средину и низ, так же как и сама строка. В контексте таблиц значения свойства 'vertical-align' имеют следующий смысл:

baseline
Базовая линия ячейки располагается на той же высоте, что и базовая линия первой строки, занимаемой ячейкой (определение базовой линии ячеек и строк см. ниже).
top
Верх блока ячейки совпадает с верхом первой строки, занимаемой ячейкой.
bottom
Низ блока ячейки совпадает с низом последней строки, занимаемой ячейкой.
middle
Середина ячейки совпадает с серединой строк, занимаемых ячейкой.
sub, super, text-top, text-bottom
Эти значения не применяются к ячейкам; в случае этих значений ячейка выравнивается по базовой линии.

Базовая линия ячейки - это базовая линия первого линейного блока ячейки. Если в нем не содержится текста, базовой служит базовая линией любого объекта, отображенного в этой ячейке, или, если объектов нет, низ блока ячейки. Максимальное расстояние между верхней частью блока ячейки и базовой линией всех ячеек, для которых установлено выравнивание 'vertical-align: baseline', используется для установки базовой линии строки. Пример:

Пример вертикального выравнивания в ячейках [D]

На рисунке показано влияние различных значений свойства 'vertical-align' на ячейки таблицы.

Блоки ячеек 1 и 2 выровнены по базовой линии. У блока ячеек 2 имеет наибольшую высоту до базовой линии, поэтому он определяет базовую линию строки. Обратите внимание, что если ни один из блоков ячеек не выровнен по базовой линии, у строки не будет базовой линии (в этом нет необходимости).

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

  1. Сначала позиционируются ячейки, выровненные относительно базовой линии. В результате будет создана базовая линия строки. Далее позиционируются ячейки со свойством 'vertical-align: top'.
  2. После этого у строки имеется верх, базовая линия (возможно) и условная высота, которая является расстоянием от верхнего края до самого нижнего края ячеек, позиционированных на этот момент. (Условия распределения полей внутри ячейки см. ниже.)
  3. Если высота какой либо из оставшихся ячеек, которые выровнены по нижнему краю или по центру, превышает текущую высоту строки, высота строки увеличится до максимальной высоты таких ячеек за счет опускания нижней части.
  4. В последнюю очередь позиционируются оставшиеся ячейки.

Блокам ячеек, которые меньше высоты строки, добавляется дополнительное верхнее или нижнее поле внутри ячейки.

17.5.4 Горизонтальное выравнивание в столбце

Горизонтальное выравнивание содержимого ячейки внутри блока ячейки задается свойством 'text-align'.

Если свойство 'text-align' имеет значение <string> для нескольких ячеек в столбце, содержимое эти ячеек выравнивается относительно вертикальной оси. Начало строки соприкасается с этой осью. Расположение строки слева или справа относительно оси определяется направленностью текста.

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

Если значением свойства 'text-align' для ячейки таблицы является строка, но этой строки нет в содержимом ячейки, конец содержимого ячейки соприкасается с вертикальной осью выравнивания.

Обратите внимание, что эти строки не должны быть одинаковыми для всех ячеек, хотя обычно они одинаковы.

В CSS не указывается способ указания отступа оси вертикального выравнивания относительно края блока столбца.

Пример(ы):

Согласно следующей таблице стилей:

   TD { text-align: "." }
   TD:before { content: "$" }

цифры, обозначающие доллары, в следующей таблице HTML:

  <TABLE>
  <COL width="40">
  <TR> <TH>Плата за междугородние звонки
  <TR> <TD> 1.30
  <TR> <TD> 2.50
  <TR> <TD> 10.80
  <TR> <TD> 111.01
  <TR> <TD> 85.
  <TR> <TD> 90
  <TR> <TD> .05
  <TR> <TD> .06
  </TABLE>

будут выровнены относительно десятичной точки. Для вставки значка доллара перед каждой цифрой используется псевдоэлемент :before . Таблица может быть представлена следующим образом:

Плата за междугородние звонки
              $1.30
              $2.50
             $10.80
            $111.01
             $85.
             $90
               $.05
               $.06

17.5.5 Динамические эффекты строк и столбцов

Свойство 'visibility' для элементов строк, групп строк, столбцов и групп столбцов может принимать значение 'collapse'. В результате вся строка или весь столбец не будет отображаться, и место, которое бы он занимал, будет доступно для размещения содержания. Такое действие не оказывает на представление таблицы другого влияния. Это позволяет динамически удалять строки или столбцы, не меняя расположения таблицы с учетом возможного изменения ограничений столбцов.

17.6 Границы

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

'border-collapse'
Значение: collapse | separate | inherit
Начальное значение: collapse
Область применения: элементы 'table' и 'inline-table'
Наследование: да
Процентные значения: N/A
Устройства: визуальные

Это свойство позволяет выбрать модель границ таблицы. Значение 'separate' означает модель с отдельными границами. Значение 'collapse' задает модель с пересекающимися границами. Эти модели описаны ниже.

17.6.1 Модель отдельных границ

'border-spacing'
Значение: <length> <length>? | inherit
Начальное значение: 0
Область применения: элементы 'table' и 'inline-table'
Наследование: да
Процентное задание: не определено
Устройства: визуальные

Если задана длина, то она обозначает расстояние между границами соседних ячеек. Если задана одна длина, она определяет расстояние по горизонтали и по вертикали. Если указаны оба значения, первое определяет расстояние по горизонтали, а вторая - по вертикали. Длины не могут быть отрицательными.

В этой модели каждая ячейка имеет собственные границы. Свойство 'border-spacing' определяет расстояние между границами соседних ячеек. Это расстояние заполняется фоном элемента таблицы. У строк, столбцов, групп строк и групп столбцов не может быть границ (т.е. агенты пользователей должны игнорировать свойства границ для данных элементов).

Пример(ы):

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

  TABLE      { border: outset 10pt;
               border-collapse: separate;
               border-spacing: 15pt }
  TD         { border: inset 5pt }
  TD.special { border: inset 10pt }  /* Верхняя левая ячейка */

Таблица с расстоянием между границами [D]

Таблица, в которой для свойства 'border-spacing' установлено определенное значение. Обратите внимание, что у каждой ячейки имеется собственная граница, а у таблицы отдельная граница.

Границы вокруг пустых ячеек: свойство 'empty-cells'

'empty-cells'
Значение: show | hide | inherit
Начальное значение: show
Область применения: элементы 'table-cell'
Наследование: да
Процентное задание: не определено
Устройства: визуальные

В модели с отдельными границами это свойство управляет представлением границ вокруг ячеек, не имеющих видимого содержимого. Считается, что видимого содержимого нет в пустых ячейках и ячейках, для которых свойству 'visibility' присвоено значение 'hidden'. Символы "&nbsp;" и другие символы, представляющие пустое пространство за исключением символов ASCII CR ("\0D"), LF ("\0A"), tab ("\09") и пробела ("\20"), считаются видимым содержимым.

Если для этого свойства установлено значение 'show', вокруг пустых ячеек отображается граница (как вокруг обычных ячеек).

Значение 'hide' означает, что вокруг пустых ячеек не будет границ. Более того, если у всех ячеек в строке это свойство имеет значение 'hide', и ячейки не имеют видимого содержимого, вся строка будет выполняться согласно значению 'display: none'.

Пример(ы):

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

TABLE { empty-cells: show }

17.6.2 Модель с пересекающимися границами

В модели с пересекающимися границами можно указывать границы, которые окружают ячейку, строку, группу строк, столбец или группу столбцов полностью или частично. Таким образом можно установить границы для атрибута HTML "rule".

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

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

ширина_строки = (0.5 * ширина_границы0) + левое_поле_внутри_таблицы1 + ширина1 + правое_поле_внутри_таблицы1 + ширина_границы1 + левое_поле_внутри_таблицы2 +...+ правое_поле_внутри_таблицыn + (0.5 * ширина_границыn)

Здесь n - количество ячеек в строке, а ширина-границыi - граница между ячейками i и i + 1. Обратите внимание, что в ширину таблицы включена только одна из двух внешних границ; другая граница находится в области поля.

Схема ширины ячеек, границ и полей внутри ячейки [D]

Схема ширины ячеек, границ и полей внутри ячеек.

Обратите внимание, что в этой модели ширина таблицы включает половину границы таблицы. Кроме того, в этой модели у таблицы нет полей внутри (но имеются поля).

Разрешение конфликтов между границами

В модели с пересекающимися границами границы с каждого края ячейки могут задаваться свойствами различных элементов, располагающихся у края (ячейки, строки, группы строк, столбцов, группы столбцов и самой таблицы), и эти границы могут различаться по ширине, стилю и цвету. В этом случае для каждого края используется стиль границы, "приковывающий взгляд", за исключением того, что граница не отображается, если используется стиль стиля 'hidden'.

Какой тип границы "выиграет" в случае конфликта, определяется следующими правилами:

  1. Границы, для свойства 'border-style' которых установлено значение 'hidden', имеют приоритет над всеми остальными конфликтующим границами. Все другие границы в указанном месте не отображаются.
  2. У границ, имеющих стиль 'none', самый низкий приоритет. Только если свойства границ всех элементов, относящихся к этому краю, имеют значение 'none', границы не будет (но помните, что значение 'none' используется для стиля границы по умолчанию.)
  3. Если ни один из стилей не имеет значение 'hidden' и хотя бы один из них имеет значение, отличное от 'none', "побеждают" более широкие границы. Если у нескольких границ свойства 'border-width' имеют одинаковые значения, стили применяются в следующем порядке: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove' и стиль с самым низким приоритетом 'inset'.
  4. Если стили границ отличаются только цветом, тогда стиль, заданный для ячейки, имеет приоритет над стилем строки, стиль строки - над стилем группы строк, столбца, группы столбцов и таблицы.

Пример(ы):

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

  TABLE          { border-collapse: collapse;
                   border: 5px solid yellow; }

  *#col1         { border: 3px solid black; }
  TD             { border: 1px solid red; padding: 1em; }
  TD.solid-blue  { border: 5px dashed blue; }
  TD.solid-green { border: 5px solid green; }

к коду HTML:

<P>
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
    <TD> 1
    <TD> 2
    <TD> 3
</TR>
<TR id="row2">
    <TD> 4
    <TD class="solid-blue"> 5
    <TD class="solid-green"> 6
</TR>
<TR id="row3">
    <TD> 7
    <TD> 8
    <TD> 9
</TR>
<TR id="row4">
    <TD> 10
    <TD> 11
    <TD> 12
</TR>
<TR id="row5">
    <TD> 13
    <TD> 14
    <TD> 15
</TR>
</TABLE>

будет представлена примерно следующая таблица:

Пример таблицы с пересекающимися границами [D]

Пример таблицы с пересекающимися границами.

Пример(ы):

В следующем примере представлена таблица с горизонтальными линиями, разделяющими строки. Для верхней границы таблицы указано значение 'hidden', что обеспечивает отсутствие верхней границы первой строки. В результате будет использоваться атрибут "rules" HTML 4.0 (rules="rows").

TABLE[rules=rows] TR { border-top: solid }
TABLE[rules=rows]    { border-collapse: collapse;
                       border-top: hidden }

Таблица с горизонтальными линиями, разделяющими строки [D]

Таблица с горизонтальными линиями, разделяющими строки.

В данном случае такой же результат можно получить, не указывая значения 'hidden' для границы всей ТАБЛИЦЫ, а только для первой строки. Можно использовать любой способ.

TR:first-child { border-top: none }
TR { border-top: solid }

Пример(ы):

Вот еще один пример пересекающихся границ:

Таблица с двумя отсутствующими границами [D]

Таблица с двумя отсутствующими внутренними границами.

HTML source:

<TABLE style="border-collapse: collapse; border: solid;">
<TR><TD style="border-right: hidden; border-bottom: hidden">foo</TD>
    <TD style="border: solid">bar</TD></TR>
<TR><TD style="border: none">foo</TD>
    <TD style="border: solid">bar</TD></TR>
</TABLE>

17.6.3 Стили границ

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

none
Граница отсутствует.
*hidden
Аналогично значению 'none', но в модели с пересекающимися границами имеет приоритет над любыми другими границами (см. раздел о конфликтах между границами).
dotted
Граница представляется рядом точек.
dashed
Граница представляется рядом коротких линейных сегментов.
solid
Граница представляется единым сегментом линии.
double
Граница представляется двумя сплошными линиями. Сумма толщины двух линий и расстояния между ними равно значению 'border-width'.
groove
Граница выглядит вдавленной.
ridge
В противоположность 'groove', граница выглядит выпуклой.
*inset
В модели с отдельными границами весь выглядит вдавленным. В модели с пересекающимися границами это значение дает тот же эффект, что и значение 'groove'.
*outset
В модели с отдельными границами весь блок выглядит выпуклым. В модели с пересекающимися границами это значение дает тот же эффект, что и значение 'ridge'.

17.7 Автоматическое представление таблиц

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

17.7.1 Произносимые заголовки: свойство 'speak-header'

'speak-header'
Значение: once | always | inherit
Начальное значение: once
Область применения: элементы, имеющие информацию о заголовке таблицы
Наследование: да
Процентное задание: не применяется
Устройства: звуковые

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

once
Заголовок произносится только один раз перед рядом ячеек.
always
Заголовок произносится перед каждой ячейкой.

В каждом языке документа могут быть различные механизмы задания заголовков. Например, в HTML 4.0 ([HTML40]) информацию о заголовке можно представить с помощью трех различных атрибутов ("headers", "scope" и "axis"). Кроме того, в этой спецификации дается алгоритм для определения заголовочной информации в случае, если эти атрибуты не указаны.

Таблица, созданная в процессоре MS Word [D]

Таблица, в которой ячейки заголовка ("Сан-Хосе" и "Сиэттл") находятся вне столбца или строки данных, к которым они применяются.

В этом примере на языке HTML представлены затраты на питание, проживание в отеле и транспорт в двух городах (Сан-Хосе и Сиэтл) в течение нескольких дней. В принципе, таблицу можно рассматривать как n-мерное пространство. К заголовкам этого пространства относятся: город, день, категория и промежуточная сумма. Некоторые ячейки определяют отметки на оси, другие - расходы в этой точке пространства. Разметка таблицы выглядит так:

<TABLE>
<CAPTION>Отчет о расходах на командировку</CAPTION>
<TR>
  <TH></TH>
  <TH>Питание</TH>
  <TH>Гостиницы</TH>
  <TH>Транспорт</TH>
  <TH>сумма</TH>
</TR>
<TR>
  <TH id="san-jose" axis="san-jose">Сан-Хосе</TH>
</TR>
<TR>
  <TH headers="san-jose">25 авг. 97</TH>
  <TD>37.74</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">26 авг. 97</TH>
  <TD>27.28</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">сумма</TH>
  <TD>65.02</TD>
  <TD>224.00</TD>
  <TD>90.00</TD>
  <TD>379.02</TD>
</TR>
<TR>
  <TH id="seattle" axis="seattle">Сиэттл</TH>
</TR>
<TR>
  <TH headers="seattle">27 авг. 97</TH>
  <TD>96.25</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">28 авг. 97</TH>
  <TD>35.00</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">сумма</TH>
  <TD>131.25</TD>
  <TD>218.00</TD>
  <TD>72.00</TD>
  <TD>421.25</TD>
</TR>
<TR>
  <TH>ИТОГО</TH>
  <TD>196.27</TD>
  <TD>442.00</TD>
  <TD>162.00</TD>
  <TD>800.27</TD>
</TR>
</TABLE>

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

  Сан-Хосе, 25 авг. 97, Питание:  37.74
  Сан-Хосе, 25 авг. 97, Проживание в гостинице:  112.00
  Сан-Хосе, 25 авг. 97, Транспорт:  45.00
 ...

Браузеры могут также произносить заголовки только при их смене:

Сан-Хосе, 25 авг. 97, Питание: 37.74
    Проживание в гостинице: 112.00
    Транспорт: 45.00
  26 авг. 97, Питание: 27.28
    Проживание в гостинице: 112.00
...


Текст

16 Текст

Содержание

  • 16.1 Отступы: свойство 'text-indent'
  • 16.2 Выравнивание: свойство 'text-align'
  • 16.3 Элементы декорирования
    • 16.3.1 Подчеркивание, надстрочное подчеркивание, перечеркивание и мерцание: свойство 'text-decoration'
    • 16.3.2 Затенение текст: свойство 'text-shadow'
  • 16.4 Расстояние между буквами и словами: свойство 'letter-spacing' и 'word-spacing'
  • 16.5 Выделение заглавными буквами: свойство 'text-transform'
  • 16.6 Пустое пространство: свойство 'white-space'

Свойства, описываемые в следующих разделах, влияют на визуальное представление символов, пробелов, слов и абзацев.

16.1 Отступы: свойство 'text-indent'

'text-indent'
Значение: <length> | <percentage> | inherit
Начальное значение: 0
Область применения: элементам уровня блока
Наследование: да
Процентное задание: относятся к ширине содержащего блока
Устройства: визуальные

Это свойство определяет отступ первой строки теста в блоке. Более точно говоря, оно определяет отступ первого блока, который входит в первую строку блока линейного блока. Блок смещается относительно левого (или правого при расположении текста справа налево) края линейного блока. Агенты пользователей должны представлять этот отступ как пустое пространство.

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

<length>
Отступ является фиксированной величиной.
<percentage>
Отступ задается в процентах относительно ширины содержащего блока.

Значение свойства 'text-indent' может быть отрицательным, но в конкретных реализациях могут быть установлены ограничения на использование значений.

Example(s):

В следующем примере задается отступ текста, равный '3em'.

  P { text-indent: 3em }

16.2 Выравнивание: свойство 'text-align'

'text-align'
Значение: left | right | center | justify | <string> | inherit
Начальное значение: зависит от агентов пользователей и направление написания
Область применения: элементы уровня блока
Наследование: да
Процентное задание: не используется
Устройства: визуальные

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

left, right, center и justify
Выравнивание текста по левому или правому краю, по центру и по обоим краям соответственно.
<строка>
Определяет строку, по которой будет производиться выравнивание ячеек в абзацах таблицы (подробную информацию и примеры можно найти в разделе горизонтальное выравнивание абзаца). Это значение применяется только к ячейкам таблицы. Применительно к другим элементам значение будет трактоваться как 'left' или 'right', в зависимости от значения свойства 'direction': 'ltr' или 'rtl' соответственно.

Блок текста - это совокупность линейных блоков. При значениях 'left', 'right' и 'center' это свойство указывает способ выравнивания последовательных блоков в каждом линейном блоке относительно левой и правой стороны линейного блока; выравнивание производится не относительно области вывода. При значении 'justify' помимо настройки положения линейных блоков, агент пользователя может также увеличить последовательные блоки. (См. также 'letter-spacing' и 'word-spacing'.)

Пример(ы):

В этом примере обратите внимание на то, что значение 'text-align' наследуется, поэтому во всех элементах уровня блока, находящихся в элементе DIV и имеющих значение 'class=center', последовательное содержимое будет выровнено по центру.

DIV.center { text-align: center }

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

Конформные агенты пользователей могут интерпретировать значение 'justify' как 'left' или 'right', это зависит от основного направления написания элемента: слева направо или справа налево соответственно.

16.3 Элементы декорирования

16.3.1 Подчеркивание, надстрочное подчеркивание, перечеркивание и мигание: свойство 'text-decoration'

'text-decoration'
Значение: none | [ underline || overline || line-through || blink ] | inherit
Начальное значение: none
Область применения: все элементы
Наследование: нет (см. описание)
Процентное значение: не используется
Устройства: визуальные

Этим свойством описываются элементы декорирования текста элементов. Если свойство задано для элемента уровня блока, оно влияет на все последующие элементы последовательного уровня. Если свойство задано для элемента последовательного уровня (или влияет на него), оно влияет и на все блоки, генерируемые этим элементом. Если у элемента нет содержимого или текста (например, элемент IMG в HTML), агенты пользователей должны игнорировать это свойство.

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

none
Текст не декорируется.
underline
Все строки текста подчеркиваются.
overline
Над каждой строкой текста располагается черта.
line-through
Все строки текста перечеркнуты
blink
Текст мерцает (становится то видимым, то невидимым). Конформные агенты пользователей не обязательно должны поддерживать данное значение.

Нужный цвет(а) для элемента декорирования текста определяется значением свойства 'color'.

Это свойство не наследуется, но последующие блоки схемы должны форматироваться с использованием тех же самых элементов декорирования (например, все они должны быть подчеркнуты). Цвет элементов декорирования всегда должен оставаться прежним, даже если последующие элементы имеют другие значения 'color'.

Пример(ы):

В следующем примере для HTML текстовое содержимое всех элементов A, действующих как гиперссылки, будет подчеркнуто:

A[href] { text-decoration: underline }

16.3.2 Затенение текста: свойство 'text-shadow'

'text-shadow'
Значение: none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit
Начальное значение: none
Область применения: все элементы
Наследование: нет (см. описание)
Процентное значение: не используется
Устройства: визуальные

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

Для каждого эффекта затенения должно быть указано смещение затенения, а также может указываться радиус размытия и цвет затенения.

Смещение затенения указывается с помощью двух значений <length>, которые определяют расстояние до текста. Первое значение указывает горизонтальное расстояние до правой части текста. При отрицательном значении длины затенение помещается слева от текста. Второе значение определяет вертикальное расстояние снизу от текста. При отрицательном значении вертикального расстояния затенение располагается над текстом.

После смещения затенения можно указать радиус размытия. Это значение, обозначающее границы размытия. Точного алгоритма для вычисления эффекта размытия нет.

До или после значений смещения эффекта затенения можно задать его цвет. Это значение цвета будет использоваться в качестве базового. Если цвет не указан, будет использоваться значение свойства 'color'.

Затенение может использоваться с псевдоэлементами :first-letter и :first-line.

Пример(ы):

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

H1 { text-shadow: 0.2em 0.2em }

В следующем примере тень располагается справа и ниже текста элемента. Тень будет красного цвета с радиусом размытия 5px.

H2 { text-shadow: 3px 3px 5px red }

В следующем примере представлен список эффектов затенения. Первая тень располагается справа и ниже текста элемента, она будет красного цвета без размытия. Вторая тень перекроет первую; она будет желтого цвета, размытая и будет находиться слева и ниже текста. Третья тень будет находиться справа и над текстом. Так как цвет этой тени не указан, будет использоваться значение свойства элемента 'color':

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Пример(ы):

Рассмотрите следующий пример:

SPAN.glow {
    background: white;
    color: white;
    text-shadow: black 0px 0px 5px;
}

В данном случае у свойств 'background' и 'color' одно значение, а свойство 'text-shadow' используется для создания эффекта "солнечного затмения":

Solar eclipse effect [D]

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

16.4 Расстояние между буквами и словами: свойства 'letter-spacing' и 'word-spacing'

'letter-spacing'
Значение: normal | <length> | inherit
Начальное значение: normal
Область применения: все элементы
Наследование: да
Процентное значение: не используется
Устройства: визуальные

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

normal
Стандартное расстояние для текущего шрифта. Это значение позволяет агентам пользователей менять расстояние между символами для выравнивания текста.
<length>
Это значение позволяет задать дополнительно межсимвольное расстояние, которое добавляется к стандартному. Значения могут быть отрицательными, их применение зависит от реализации. Для выравнивания по обоим краям агенты пользователей могут не увеличивать или не уменьшать расстояние между символами.

Алгоритмы определения расстояния между символами зависят от агента пользователя. На расстояние между символами также может повлиять выравнивание по обоим краям (см. свойство 'text-align').

Пример(ы):

В данном примере расстояние между символами в элементах BLOCKQUOTE увеличено на '0.1em'.

BLOCKQUOTE { letter-spacing: 0.1em }

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

BLOCKQUOTE { letter-spacing: 0cm }   /* Same as '0' */

Если итоговое расстояние между двумя символами отлично от стандартного, агенты пользователей не должны использовать лигатуры.

Конформные агенты пользователей могут трактовать значение свойства 'letter-spacing' как 'normal'.

'word-spacing'
Значение: normal | <length> | inherit
Начальное значение: normal
Область применения: все элементы
Наследование: да
Процентное значение: N/A
Устройства: визуальные

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

normal
Стандартное расстояние между словами, определяемое текущим шрифтом и/или агентом пользователя.
<length>
Дополнительное расстояние между словами, оно добавляется к стандартному. Значения могут быть отрицательными, их применение зависит от агентов пользователей.

Алгоритм определения расстояния между словами зависит от параметров, указанных агентом пользователя. На расстояние между словами также влияет выравнивание по обоим краям (см. свойство 'text-align').

Пример(ы):

В данном примере расстояние между всеми словами в элементе H1 увеличивается на '1em'.

H1 { word-spacing: 1em }

Конформные агенты пользователей могут трактовать значение свойства 'word-spacing' как 'normal'.

16.5 Выделение заглавными буквами: свойство 'text-transform'

'text-transform'
Значение: capitalize | uppercase | lowercase | none | inherit
Начальное значение: none
Область применения: все элементы
Наследование: да
Процентное значение: не применяется
Устройства: визуальные

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

capitalize
Каждое слово начинается с заглавной буквы.
uppercase
Все буквы каждого слова будут заглавными.
lowercase
Все буквы каждого слова будут строчными.
none
Не влияет на буквы.

Фактическое преобразование в заглавные или строчные буквы зависит от используемого языка написания. О том, как определить язык элемента, см. в RFC 2070 ([RFC2070]).

Конформные агенты пользователей могут подразумевать для свойства 'text-transform' значение 'none' для символов, не относящихся к набору Latin-1, и для элементов на языках, процесс преобразования которых отличается от процесса, указанного в таблицах преобразования кодировок ISO 10646 ([ISO10646]).

Пример(ы):

В данном примере весь текст в элементе H1 будет выделен заглавными буквами.

H1 { text-transform: uppercase }

16.6 Пустое место: свойство 'white-space'

'white-space'
Значение: normal | pre | nowrap | inherit
Начальное значение: normal
Область применения: элементам уровня блока
Наследование: да
Процентное значение: не применяется
Устройства: визуальные

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

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

Example(s):

В следующих примерах показано возможное поведение путсого пространства из элементов PRE и P и поведение атрибута "nowrap" в HTML.

PRE        { white-space: pre }
P          { white-space: normal }
TD[nowrap] { white-space: nowrap }

Конформные агенты пользователей могут игнорировать в авторских и пользовательских таблицах стилей свойство 'white-space', но должны определить значение этого свойства в основной таблице стилей.


Translations of the CSS 2 Recommendation

This document:
http://www.w3.org/Style/css2-updates/translations.html
Last revised:
$Date: 1998/05/11 15:00:53 $
The latest version of the CSS 2 specification:
http://www.w3.org/TR/REC-CSS2

The normative version of the Recommendation is in English. However, we encourage translations of the document. If you are in a position to help with this, please write to css2-editors@w3.org. We expect you to give us permission to republish the translated version and to allow readers to make copies without restrictions.

Email list for Translators

w3c-translators@w3.org is a mailing list for people working on translations of W3C specifications such as the CSS 2 Recommendation. To subscribe, send an email to w3c-translators-request@w3.org with the word "subscribe" in the subject line (include the word "unsubscribe" if you want to unsubscribe). The archive for the list is available online.

Note on Translators

The following lists the people who have volunteered for particular languages in the order in which they volunteered. The specification is quite long, so translators may wish to share work on writing and reviewing translations.


Интерфейс пользователя

18 Интерфейс пользователя

Содержание

  • 18.1 Курсоры: свойство 'cursor'
  • 18.2 Настройки пользователя для цветов
  • 18.3 Настройки пользователя для шрифтов
  • 18.4 Динамические контуры: свойство 'outline'
    • 18.4.1 Контуры и фокусировка внимания
  • 18.5 Увеличение

18.1 Курсоры: свойство 'cursor'

'cursor'
Значение: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit
Начальное значение: auto
Область применения: все элементы
Наследование: да
Процентное задание значений: нет
Ассоциированные устройства: устройства визуального форматирования, интерактивные устройства

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

auto
Агент пользователя определяет отображаемый курсор, исходя из контекста.
crosshair
Простое перекрестие (напоминающее символ "+").
default
Курсор, используемый на данной платформе по умолчанию. Зачастую представляется в виде стрелки.
pointer
Курсором представляется указателем, обозначающим ссылку.
move
Курсор, определяющий объект, который можно переместить.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Курсор, определяющий перемещение некоторого края. Например, при перемещении, начинающемся с правого нижнего угла блока, используется курсор 'se-resize'.
text
Курсор, используемый при выделении текста. Зачастую представляется в виде вертикальной линии "|".
wait
Курсор, указывающий на занятость программы, когда пользователю необходимо подождать. Зачастую представляется в виде циферблата или песочных часов.
help
Курсор, означающий, что для объекта, на который он указывает, имеется справочная информация. Зачастую представляется в виде вопросительного знака или воздушного шара.
<uri>
Агент пользователя загружает курсор из ресурса, задаваемого этим URI. Если агенту не удается обработать курсор, расположенный первым в списке курсоров, он должен попытаться обработать второй, третий и т.д. Если агенту не удается обработать ни одного курсора, заданного пользователем, он должен использовать общий курсор, расположенный в конце этого списка.

Пример(ы):

P { cursor : url("mything.cur"), url("second.csr"), text; }

18.2 Пользовательские настройки цветов

Кроме использования заранее определенных значений цветов для текста, фона и т.п., CSS2 позволяет авторам определять цвета в такой форме, которая подразумевает их интеграцию в графическую среду пользователя. В результате правила стилей, принимающие во внимание настройки пользователя, предлагают следующие преимущества:

  1. Позволяют создавать страницы, отвечающие требованиям и вкусу пользователя.
  2. Позволяют создавать более доступные страницы, т.к. настройки пользователя могут быть связаны с физическими ограничениями пользователей.

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

Ниже перечислены дополнительные значения атрибутов CSS, используемых при настройке цветов, и их семантика. Любое свойство, используемое при настройке цветов (например, 'color' или 'background-color'), может принимать одно из следующих имен. Несмотря на независимость от регистра, рекомендуется соблюдать используемое в них сочетание заглавных и строчных букв, делающее данные имена более разборчивыми.

ActiveBorder
Цвет границы активного окна.
ActiveCaption
Цвет заголовка активного окна.
AppWorkspace
Цвет фона мультидокументного интерфейса.
Background
Цвет фона рабочего стола.
ButtonFace
Цвет "лицевой" стороны объемных элементов.
ButtonHighlight
Цвет насыщенной тени для объемных элементов (ребер, находящихся в тени).
ButtonShadow
Цвет тени объемных элементов.
ButtonText
Цвет текста на кнопках.
CaptionText
Цвет текста в заголовках, в элементах управления размерами и элементах полосы прокрутки.
GrayText
Цвет отключенного (недоступного) текста. Если текущий драйвер дисплея не поддерживает насыщенно-серый цвет, для этого цвета устанавливается значение #000.
Highlight
Цвет объектов, выделяемых в элементах управления.
HighlightText
Цвет текста в объектах, выделенных в элементах управления.
InactiveBorder
Цвет границы неактивного окна.
InactiveCaption
Цвет заголовка неактивного окна.
InactiveCaptionText
Цвет текста в неактивном заголовке.
InfoBackground
Цвет фона всплывающей подсказки.
InfoText
Цвет текста всплывающей подсказки.
Menu
Цвет фона меню.
MenuText
Цвет текста в меню.
Scrollbar
Цвет полосы прокрутки.
ThreeDDarkShadow
Цвет насыщенной тени для объемных элементов.
ThreeDFace
Цвет "лицевой" стороны объемных элементов.
ThreeDHighlight
Цвет, используемый при выделении объемных элементов.
ThreeDLightShadow
Светлый цвет объемных элементов (ребер, расположенных "лицом" к источнику света).
ThreeDShadow
Цвет насыщенной тени для объемных элементов.
Window
Цвет фона окна.
WindowFrame
Цвет рамки окна.
WindowText
Цвет текста в окне.

Пример(ы):

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

P { color: WindowText; background-color: Window }

18.3 Настройки пользователя для шрифтов

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

18.4 Динамические контуры: свойство 'outline'

Иногда авторам таблиц стилей необходимо акцентировать внимание на некотором визуально отображаемом объекте, например, на кнопке, активном поле формы, месте для графического объекта и т.д. В CSS2 такие объекты можно окружить контуром, отличие которого от границ состоит в следующем:

  1. Контуры вообще не занимают места.
  2. Контуры могут иметь непрямоугольную форму.

Стилем этих динамических контуров управляют соответствующие свойства.

'outline'
Значение: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
Начальное значение: см. каждое свойство в отдельности
Область применения: все элементы
Наследование: нет
Процентное задание значений: нет
Ассоциированные устройства: устройства визуального форматирования, интерактивные устройства
'outline-width'
Значение: <border-width> | inherit
Начальное значение: medium
Область применения: все элементы
Наследование: нет
Процентное задание значений: нет
Ассоциированные устройства: устройства визуального форматирования, интерактивные устройства
'outline-style'
Значение: <border-style> | inherit
Начальное значение: none
Область применения: все элементы
Наследование: нет
Процентное задание значений: нет
Ассоциированные устройства: устройства визуального форматирования, интерактивные устройства
'outline-color'
Значение: <color> | invert | inherit
Начальное значение: invert
Применяется: все элементы
Наследование: нет
Процентное задание значений: нет
Ассоциированные устройства: устройства визуального форматирования, интерактивные устройства

Контур, созданный с использованием свойств контура, выводится "над" блоком, т.е. всегда находится поверх него и не влияет на расположение и размеры данного блока или любых других блоков. Поэтому отображение или удаление контуров не приводит к переформатированию страницы.

Контур выводится непосредственно за пределами краевой линии границы.

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

Свойство 'outline-width' принимает те же значения, что и свойство 'border-width'.

Свойство 'outline-style' принимает те же значения, что и свойство 'border-style', за исключением значения 'hidden', недопустимого для стиля контура.

Свойство 'outline-color' принимает те же значения, что и ключевое слово 'invert', осуществляющее инверсию цветов, используемых для отображения пикселов на экране. Этот традиционный прием используется, для того чтобы независимо от цвета фона акцентирующие границы были всегда видны.

Свойство 'outline' - это сокращенное свойство, оно устанавливает значения для всех трех свойств 'outline-style', 'outline-width' и 'outline-color'.

Обратите внимание, что контуры выглядят одинаково со всех сторон. В отличие от границ, у них нет свойства 'outline-top' или 'outline-left'.

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

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

Пример(ы):

Ниже приведен пример прорисовки толстого контура вокруг элемента BUTTON:

BUTTON { outline-width : thick }

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

18.4.1 Контуры и фокус

Контуры могут использоваться в графическом интерфейсе пользователя вокруг элементов страницы, на которых располагается фокус. Эти контуры выступают в роли дополнения к границам, так что их вывод или удаление не должны приводить к переформатированию документа. Фокус представляет собой часть процесса взаимодействия пользователя с документом (например, для ввода текста, выбора кнопки и т.д.). Агенты пользователей, поддерживающие группу интерактивных устройств, должны отслеживать местоположение фокуса и предоставлять средства для его формирования. Это может быть сделано путем использования динамических контуров в сочетании с псевдоклассом :focus.

Пример(ы):

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

:focus  { outline: thick solid black }
:active { outline: thick solid red }

18.5 Увеличение

Группа разработчиков CSS считает, что увеличение документа или его отдельных частей не должно описываться посредством таблиц стилей. Агенты пользователей могут поддерживать эту процедуру другими способами (например, с помощью более крупных изображений, более громких звуков и т.д.)

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


Подробное описание модели визуального форматирования

10 Подробное описание модели визуального форматирования

Содержание

  • 10.1 Определение "контейнера"
  • 10.2 Ширина содержимого: свойство 'width'
  • 10.3 Определение значений ширины и полей
    • 10.3.1 Незамещаемые элементы строкового уровня
    • 10.3.2 Замещаемые элементы строкового уровня
    • 10.3.3 Незамещаемые элементы уровня блока в нормальном потоке
    • 10.3.4 Замещаемые элементы уровня блока в нормальном потоке
    • 10.3.5 Незамещаемые перемещаемые элементы
    • 10.3.6 Замещаемые перемещаемые элементы
    • 10.3.7 Незамещаемые абсолютно позиционируемые элементы
    • 10.3.8 Замещаемые абсолютно позиционируемые элементы
  • 10.4 Минимальное и максимальное значения ширины: 'min-width' и 'max-width'
  • 10.5 Высота содержимого: свойство 'height'
  • 10.6 Определение значений высоты и полей
    • 10.6.1 Незамещаемые элементы строкового уровня
    • 10.6.2 Замещаемые элементы строкового уровня, замещаемые элементы уровня блока в нормальном потоке и замещаемые перемещаемые элементы
    • 10.6.3 Незамещаемые элементы уровня блока в нормальном потоке и незамещаемые перемещаемые элементы
    • 10.6.4 Незамещаемые абсолютно позиционируемые элементы
    • 10.6.5 Замещаемые абсолютно позиционируемые элементы
  • 10.7 Минимальное и максимальное значения высоты: 'min-height' и 'max-height'
  • 10.8 Определение высоты строки: свойства 'line-height' и 'vertical-align'
    • 10.8.1 Интерлиньяж и половинный интерлиньяж

10.1 Определение "контейнера"

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

  1. Контейнер (он называется начальным контейнером), в котором отображается корневой элемент, выбирается агентом пользователя.
  2. Для любого другого элемента, если он не является абсолютно позиционируемым, контейнер определяется краевой линией информативной области ближайшего блока, выступающего в качестве предка данного элемента.
  3. Если элемент имеет свойство 'position: fixed', то контейнер задается областью просмотра.
  4. Если элемент имеет свойство 'position: absolute', то контейнер назначается ближайшим предком, для свойства 'position' которого установлено значение, отличное от 'static'. Это осуществляется следующим образом:
    1. Если предок принадлежит уровню блока, то контейнер определяется его краевой линией отступов.
    2. Если предок принадлежит строковому уровню, то контейнер определяется значением его свойства 'direction':
      1. Если свойство 'direction' принимает значение 'ltr', то верхний и левый сегменты границы контейнера определяются верхним и левым сегментами краевой линии информативной области первого блока, порожденного предком, а нижний и правый сегменты его границы определяются нижним и правым сегментами краевой линии информативной области последнего блока, порожденного предком.
      2. Если свойство 'direction' принимает значение 'rtl', то верхний и правый сегменты границы контейнера определяются верхним и правым сегментами краевой линии информативной области первого блока, порожденного предком, а нижний и левый сегменты его границы определяются нижним и левым сегментами краевой линии информативной области последнего блока, порожденного предком.

    Если такого предка не существует, то контейнер определяется краями информативной области блока, порожденного корневым элементом.

Пример(ы):

В документе

<HTML>
   <HEAD>
      <TITLE>Пример контейнеров</TITLE>
   </HEAD>
   <BODY id="body">
      <DIV id="div1">
      <P id="p1">Это текст первого абзаца...</P>
      <P id="p2">Это текст <EM id="em1">
      <STRONG id="strong1">второго</STRONG> абзаца.</EM></P>
      </DIV>
   </BODY>
</HTML>

не осуществляется позиционирование элементов. Назначение контейнеров здесь происходит следующим образом:

для блока, порожденного элементом | контейнер назначается элементом
body | начальный контейнер (назначается агентом пользователя)
div1 | body
p1 | div1
p2 | div1
em1 | p2
strong1 | p2

Если осуществить позиционирование элемента "div1":

   #div1 { position: absolute; left: 50px; top: 50px }

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

Если осуществить позиционирование элемента "em1":

   #div1 { position: absolute; left: 50px; top: 50px }
   #em1  { position: absolute; left: 100px; top: 100px }

то таблица контейнеров примет вид:

для блока, порожденного элементом | контейнер назначается элементом
body | начальный контейнер
div1 | начальный контейнер
p1 | div1
p2 | div1
em1 | div1
strong1 | em1

После позиционирования "em1" его контейнером становится ближайший позиционированный блок, порожденный его предком (т.е. элементом "div1").

10.2 Ширина содержимого: свойство 'width'

'width'
Значение: <длина> | <проценты> | auto | inherit
Начальное значение: auto
Область применения: все элементы, кроме незамещаемых элементов строкового уровня, строк таблиц и групп строк
Наследование: нет
Процентное задание: относительно ширины контейнера
Устройства: визуального форматирования

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

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

Ширина блока замещаемого элемента является его внутренним параметром и может регулироваться агентом пользователя, если значение этого свойства отлично от 'auto'.

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

<длина>
Определяет фиксированное значение ширины.
<проценты>
Определяет значение ширины в процентах. Процентное соотношение вычисляется относительно ширины контейнера генерируемого блока.
auto
Ширина зависит от значений других свойств. См. следующие ниже разделы.

Отрицательные значения свойства 'width' недопустимы.

Пример(ы):

Например, согласно следующему правилу ширина содержимого абзацев устанавливается равной 100 пикселам:

P { width: 100px }

10.3 Определение значений ширины и полей

Вычисляемые значения свойств 'width', 'margin-left', 'margin-right', 'left' и 'right' элементов находятся в тесной взаимосвязи, а также зависят от типа генерируемого блока. За некоторыми исключениями (в частности, значение 'auto' заменяется в некотором смысле более подходящим значением) вычисляемые значения совпадают с зарезервированными. При этом необходимо различать следующие ситуации:

  1. незамещаемые элементы строкового уровня;
  2. замещаемые элементы строкового уровня;
  3. незамещаемые элементы уровня блока в нормальном потоке;
  4. замещаемые элементы уровня блока в нормальном потоке;
  5. незамещаемые перемещаемые элементы;
  6. замещаемые перемещаемые элементы;
  7. незамещаемые абсолютно позиционируемые элементы;
  8. замещаемые абсолютно позиционируемые элементы.

Первые шесть пунктов включают случай относительного позиционирования.

10.3.1 Незамещаемые элементы строкового уровня

Свойство 'width' не применяется. Зарезервированное значение 'auto' свойства 'left', 'right', 'margin-left' или 'margin-right' заменяется вычисляемым значением '0'.

10.3.2 Замещаемые элементы строкового уровня

Зарезервированное значение 'auto' свойства 'left', 'right', 'margin-left' или 'margin-right' заменяется вычисляемым значением '0'. Зарезервированное значение 'auto' свойства 'width' позволяет определить внутреннее значение ширины элемента как вычисляемое значение.

10.3.3 Незамещаемые элементы уровня блока в нормальном потоке

Если для свойства 'left' или 'right' установлено значение 'auto', то его вычисляемое значение равно '0'. Другие свойства должны удовлетворять следующему ограничению:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = ширина контейнера

(Если свойство стиля границы принимает значение 'none', то в качестве значения ширины границы следует использовать значение '0'.) Если все из вышеперечисленных свойств принимают значение, отличное от 'auto', то говорят, что значения "перегружены", и считают при этом, что вычисленное значение хотя бы одного свойства не совпадает с зарезервированным. Если свойство 'direction' принимает значение 'ltr', то свойству 'margin-right' присваивается не зарезервированное значение, а вычисленное, исходя из справедливости вышеописанного равенства. Если свойство 'direction' принимает значение 'ltr', то аналогичные действия осуществляются со свойством 'margin-left'.

Если из всех вышеназванных свойств только одно принимает значение 'auto', то его вычисляемое значение определяется путем решения данного равенства.

Если свойство 'width' принимает значение 'auto', то значения 'auto' всех других свойств устанавливаются равными '0', а значение свойства 'width' вычисляется из получившегося в результате этого равенства.

Если свойства 'margin-left' и 'margin-right' оба принимают значение 'auto', то их вычисляемые значения совпадают.

10.3.4 Замещаемые элементы уровня блока в нормальном потоке

Если свойство 'left' или 'right' принимает значение 'auto', то его вычисляемое значение равно '0'. Если свойство 'width' принимает значение 'auto', то в качестве его вычисляемого значения будет выступать значение внутренней ширины элемента. Если значение одного из свойств полей устанавливается равным 'auto', то его вычисляемое значение определяется в соответствии с приведенными выше ограничениями. Более того, если свойства обоих полей принимают значение 'auto', то их вычисляемые значения совпадают.

10.3.5 Незамещаемые перемещаемые элементы

Если свойство 'left', 'right', 'width', 'margin-left' или 'margin-right' принимает значение 'auto', то его вычисляемое значение равно '0'.

10.3.6 Замещаемые перемещаемые элементы

Если свойство 'left', 'right', 'margin-left' или 'margin-right' принимает значение 'auto', то его вычисляемое значение равно '0'. Если свойству 'width' присваивается значение 'auto', то в качестве его вычисляемого значения выступает внутреннее значение ширины элемента.

10.3.7 Незамещаемые абсолютно позиционируемые элементы

Ограничение, которое определяет вычисляемые значения этих элементов состоит в следующем:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ширина контейнера

(Если свойство стиля границы принимает значение 'none', то в качестве значения ширины границы следует использовать значение '0'.) Вычисление результата, являющегося следствием данного ограничения, осуществляется путем реализации следующей последовательности подстановок:

  1. Если свойства 'left' и 'direction' принимают значения 'auto' и 'ltr', соответственно, то вместо 'auto' подставляется значение расстояния от левого сегмента края контейнера до левого сегмента краевой линии поля гипотетического блока, который был бы первым блоком элемента, если бы для его свойства 'position' было установлено значение 'static'. (Вместо того чтобы в действительности определять положение этого блока, агента пользователей могут осуществлять приблизительную оценку его возможного местоположения.) Если гипотетический блок находится слева от контейнера, то упомянутое расстояние принимает отрицательное значение.
  2. Если свойства 'right' и 'direction' принимают значения 'auto' и 'rtl', соответственно, то вместо 'auto' подставляется значение расстояния от правого сегмента края контейнера до правого сегмента краевой линии поля уже упоминавшегося гипотетического блока. Если гипотетический блок находится слева от контейнера, то упомянутое расстояние принимает положительное значение.
  3. Если свойство 'width' принимает значение 'auto', то вместо всех значений 'auto', принимаемых свойствами 'left' и 'right', подставляется значение '0'.
  4. Если свойства 'left', 'right' или 'width' (по-прежнему) принимают значения 'auto', то вместо всех значений 'auto', принимаемых свойствами 'margin-left' и 'margin-right', подставляется значение '0'.
  5. Если на этом этапе свойства 'margin-left' и 'margin-right' все еще имеют значение 'auto', то осуществляется решение уравнения с учетом дополнительного ограничения, согласно которому значения ширины обоих полей совпадают.
  6. Если на этом этапе в левой части уравнения осталось только одно свойство, принимающее значение 'auto', то осуществляется решение уравнения относительно значения этого свойства.
  7. Если на этом этапе значения остаются перегруженными, то значение, принимаемое свойством 'left' (в случае, когда свойство 'direction' принимает значение 'rtl') или свойством 'right' (в случае, когда свойство 'direction' принимает значение 'ltr'), игнорируется и относительно него решается уравнение.

10.3.8 Замещаемые абсолютно позиционируемые элементы

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

  1. Если свойство 'width' принимает значение 'auto', то вместо него подставляется внутреннее значение ширины элемента.
  2. Если свойства 'left' и 'direction' принимают значения 'auto' и 'ltr', соответственно, то вместо 'auto' подставляется значение расстояния от левого сегмента края контейнера до левого сегмента краевой линии поля гипотетического блока, который был бы первым блоком элемента, если бы его свойство 'position' принимало значение 'static'. (Вместо того чтобы в действительности определять положение этого блока, агенты пользователей могут осуществлять приблизительную оценку его возможного местоположения.) Если гипотетический блок находится слева от контейнера, то упомянутое расстояние принимает отрицательное значение.
  3. Если свойства 'right' и 'direction' принимают значения 'auto' и 'rtl', соответственно, то вместо 'auto' подставляется значение расстояния от правого сегмента края контейнера до правого сегмента краевой линии поля уже упоминавшегося гипотетического блока. Если гипотетический блок находится слева от контейнера, то упомянутое расстояние принимает положительное значение.
  4. Если свойство 'width' принимает значение 'auto', то вместо всех значений 'auto', принимаемых свойствами 'left' и 'right', подставляется значение '0'.
  5. Если свойства 'left', 'right' или 'width' (все еще) принимают значения 'auto', то вместо всех значений 'auto', принимаемых свойствами 'margin-left' и 'margin-right', подставляется значение '0'.
  6. Если на этом этапе свойства 'margin-left' и 'margin-right' все еще имеют значение 'auto', то осуществляется решение уравнения с учетом дополнительного ограничения, согласно которому значения ширины обоих полей совпадают.
  7. Если на этом этапе в левой части уравнения осталось только одно свойство, принимающее значение 'auto', то осуществляется решение уравнения относительно значения этого свойства.
  8. Если на этом этапе значения остаются перегруженными, то значение, принимаемое свойством 'left' (в случае, когда свойство 'direction' принимает значение 'rtl') или свойством 'right' (в случае, когда свойство 'direction' принимает значение 'ltr'), игнорируется и относительно него решается уравнение.

10.4 Минимальное и максимальное значения ширины: 'min-width' и 'max-width'

'min-width'
Значение: <длина> | <проценты> | inherit
Начальное значение: зависит от пользовательского агента
Область применения: все элементы, кроме незамещаемых элементов строкового уровня и элементов таблиц
Наследование: нет
Процентное задание: относительно ширины контейнера
Устройства: визуального форматирования
'max-width'
Значение: <длина> | <проценты> | none | inherit
Начальное значение: none
Область применения: все элементы, кроме незамещаемых элементов строкового уровня и элементов таблиц
Наследование: нет
Процентное задание: относительно ширины контейнера
Устройства: визуального форматирования

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

<длина>
Задает фиксированное минимальное и максимальное вычисляемое значение ширины.
<проценты>
Задает процентное соотношение для определения вычисляемого значения. Процентное соотношение вычисляется относительно ширины контейнера генерируемого блока.
none
(Только для свойства 'max-width') На ширину блока не накладывается никаких ограничений.

В следующим алгоритме описано, как эти два свойства влияют на вычисляемое значение свойства 'width':

  1. Значение ширины (кроме 'min-width' и 'max-width') вычисляется по правилам, описанным в разделе "Определение значений ширины и полей".
  2. Если вычисленное значение свойства 'min-width' превышает значение свойства 'max-width', то свойству 'max-width' присваивается значение свойства 'min-width'.
  3. Если вычисленное значение ширины превышает значение свойства 'max-width', то применяются писанные выше правила, но на этот раз в качестве зарезервированного значения для свойства 'width' выступает значение свойства 'max-width'.
  4. Если вычисленное значение ширины не превосходит значения свойства 'min-width', то применяются описанные выше правила, но на этот раз в качестве зарезервированного значения для свойства 'width' выступает значение свойства 'min-width'.

У агента пользователя существует возможность определения минимального неотрицательного значения для свойства 'min-width', зависящего от рассматриваемого элемента и других свойств. Если значение свойства 'min-width' опустится ниже установленного минимума вследствие явного задания значения или вычисления в рамках значения 'auto' с использованием вышеописанных правил, агент пользователя может использовать этот минимум в качестве вычисляемого значения.

10.5 Высота содержимого: свойство 'height'

'height'
Значение: <длина> | <проценты> | auto | inherit
Начальное значение: auto
Область применения: все элементы, кроме незамещаемых элементов строкового уровня, столбцов таблиц и групп столбцов
Наследование: нет
Процентное задание: см. текст
Устройства: визуального форматирования

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

Данное свойство не применяется к незамещаемым элементам строкового уровня. Высота блока незамещаемого элемента строкового уровня определяется значением свойства 'line-height' (которое может быть наследуемым).

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

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

Использование отрицательных значений для свойства 'height' не допускается.

Пример(ы):

Например, следующее правило устанавливает высоту абзаца равной 100 пикселам:

P { height: 100px }

Абзацы, которым в высоту необходимо больше 100 пикселов, при отображении будут выходить за допустимые пределы в соответствии со свойством 'overflow'.

10.6 Определение значений высоты и полей

В зависимости от типа блока следует различать вычисляемые значения свойств 'top', 'margin-top', 'height', 'margin-bottom' и 'bottom' для:

  1. незамещаемых элементов строкового уровня;
  2. замещаемых элементов строкового уровня;
  3. незамещаемых элементов уровня блока в нормальном потоке;
  4. замещаемых элементов уровня блока в нормальном потоке;
  5. незамещаемых перемещаемых элементов;
  6. замещаемых перемещаемых элементов;
  7. незамещаемых абсолютно позиционируемых элементов;
  8. замещаемых абсолютно позиционируемых элементов.

Первые шесть пунктов включают относительное позиционирование.

10.6.1 Незамещаемые элементы строкового уровня

Если свойство 'top', 'bottom', 'margin-top' или 'margin-bottom' принимает значение 'auto', то его вычисляемое значение равно '0'. Свойство 'height' не применяется, а высота блока задается свойством 'line-height'.

10.6.2 Замещаемые элементы строкового уровня, замещаемые элементы уровня блока в нормальном потоке и замещаемые перемещаемые элементы

Если свойство 'top', 'bottom', 'margin-top' или 'margin-bottom' принимает значение 'auto', то его вычисляемое значение равно '0'. Если свойство 'height' принимает значение 'auto', то его вычисляемое значение равно внутреннему значению высоты.

10.6.3 Незамещаемые элементы уровня блока в нормальном потоке и незамещаемые перемещаемые элементы

Если свойство 'top', 'bottom', 'margin-top' или 'margin-bottom' принимает значение 'auto', то его вычисляемое значение равно '0'. Если свойство 'height' принимает значение 'auto', то значение высоты зависит от того, имеются ли у этого элемента какие-либо дочерние элементы уровня блока или нет. Если у него имеются дочерние элементы только строкового уровня, то высота равна расстоянию от верхней границы самого верхнего линейного блока до нижней границы самого нижнего линейного блока. Если у него имеются дочерние элементы уровня блока, то высота равна расстоянию от верхнего края границы самого верхнего дочернего блока структурного уровня до нижнего края границы самого нижнего дочернего блока структурного уровня. При этом учитываются только дочерние элементы, принадлежащие нормальному потоку (т.е. перемещаемые и абсолютно позиционируемые блоки игнорируются, а относительно позиционируемые блоки рассматриваются без их отступов). Обратите внимание, что дочерние блоки могут быть безымянными блоками.

10.6.4 Незамещаемые абсолютно позиционируемые элементы

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

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = высота контейнера

(Если свойство стиля границы принимает значение 'none', то в качестве значения ширины границы используется значение '0'.) Вычисление результата, являющегося следствием данного ограничения, осуществляется путем реализации следующей последовательности подстановок:

  1. Если свойство 'top' принимает значение 'auto', то вместо него подставляется значение расстояния от верхнего сегмента границы контейнера до верхнего сегмента границы поля гипотетического блока, который был бы первым блоком элемента, если бы для его свойства 'position' было установлено значение 'static'. (Вместо того чтобы в действительности определять положение этого блока, агенты пользователей могут осуществлять приблизительную оценку его возможного местоположения.) Если гипотетический блок находится над контейнером, то упомянутое расстояние принимает отрицательное значение.
  2. Если свойства 'height' и 'bottom' принимают значения 'auto', то свойству 'bottom' присваивается значение '0'.
  3. Если на этом этапе свойства 'bottom' и 'height' все еще принимают значения 'auto', то вместо всех значений 'auto', принимаемых свойствами 'margin-top' и 'margin-bottom', подставляется значение '0'.
  4. Если на данном этапе свойства 'margin-top' и 'margin-bottom' все еще принимают значения 'auto', то осуществляется решение упомянутого уравнения с учетом дополнительного ограничения, согласно которому значения ширины обоих полей совпадают.
  5. Если на данном этапе в левой части уравнения имеется только одно свойство, принимающее значение 'auto', то осуществляется решение уравнения относительно значения этого свойства.
  6. Если на данном этапе значения остаются перегруженными, то значение, принимаемое свойством 'bottom', игнорируется и относительно него решается уравнение.

10.6.5 Замещаемые абсолютно позиционируемые элементы

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

  1. Если свойство 'height' принимает значение 'auto', то вместо него подставляется внутреннее значение высоты элемента.
  2. Если свойство 'top' принимает значение 'auto', то вместо него подставляется значение расстояния от верхнего сегмента границы контейнера до верхнего сегмента границы поля гипотетического блока, который был бы первым блоком элемента, если бы для его свойства 'position' было установлено значение 'static'. (Вместо того чтобы в действительности определять положение этого блока, агенты пользователей могут осуществлять приблизительную оценку его возможного местоположения.) Если гипотетический блок находится над контейнером, то упомянутое расстояние принимает отрицательное значение.
  3. Если свойства 'height' и 'bottom' принимают значения 'auto', то свойству 'bottom' присваивается значение '0'.
  4. Если на этом этапе свойства 'bottom' и 'height' все еще принимают значения 'auto', то вместо всех значений 'auto', принимаемых свойствами 'margin-top' и 'margin-bottom', подставляется значение '0'.
  5. Если на данном этапе свойства 'margin-top' и 'margin-bottom' все еще принимают значения 'auto', то осуществляется решение упомянутого уравнения с учетом дополнительного ограничения, согласно которому значения ширины обоих полей совпадают.
  6. Если на данном этапе в левой части уравнения имеется только одно свойство, принимающее значение 'auto', то осуществляется решение уравнения относительно значения этого свойства.
  7. Если на данном этапе значения остаются перегруженными, то значение, принимаемое свойством 'bottom', игнорируется и относительно него решается уравнение.

10.7 Минимальное и максимальное значения высоты: 'min-height' и 'max-height'

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

'min-height'
Значение: <длина> | <проценты> | inherit
Начальное значение: 0
Область применения: все элементы, кроме незамещаемых элементов строкового уровня и элементов таблиц
Наследование: нет
Процентное задание: относительно высоты контейнера
Устройства: визуального форматирования
'max-height'
Значение: <длина> | <проценты> | none | inherit
Начальное значение: none
Область применения: все элементы, кроме незамещаемых элементов строкового уровня и элементов таблиц
Наследование: нет
Процентное задание: относительно высоты контейнера
Устройства: визуального форматирования

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

<длина>
Задает фиксированное минимальное и максимальное вычисляемое значение высоты.
<проценты>
Задает процентное соотношение для определения вычисляемого значения. Процентное соотношение вычисляется относительно высоты контейнера генерируемого блока. Если высота контейнера не задана явно (т.е. она зависит от высоты содержимого), то значение процентного соотношения интерпретируется как 'auto'.
none
(Только для свойства 'max-height'.) На высоту блока не накладывается никаких ограничений.

В следующем алгоритме описано, как эти два свойства влияют на вычисляемое значение свойства 'height':

  1. Значение высоты (кроме 'min-height' и 'max-height') вычисляется согласно правилам, описанным в разделе "Определение значений высоты и полей".
  2. Если вычисленное значение свойства 'min-height' превышает значение свойства 'max-height', то свойству 'max-height' присваивается значение свойства 'min-height'.
  3. Если вычисленное значение высоты превышает значение свойства 'max-height', то применяются описанные выше правила, но на этот раз в качестве зарезервированного значения свойства 'height' выступает значение свойства 'max-height'.
  4. Если вычисленное значение высоты не превосходит значения свойства 'min-height', то применяются описанные выше правила, но на этот раз в качестве зарезервированного значения свойства 'height' выступает значение свойства 'min-height'.

10.8 Определение высоты строки: свойства 'line-height' и 'vertical-align'

Как описано в разделе, посвященном контексту форматирования строк, агенты пользователей преобразуют строковые блоки в набор вертикально упорядоченных линейных блоков, высота которых определяется следующим образом:

  1. Вычисляется высота каждого строкового блока в линейном блоке (см. раздел "Определение значений высоты и полей" и описание свойства 'line-height').
  2. В соответствии со свойствами 'vertical-align' осуществляется вертикальное упорядочение строковых блоков.
  3. Высота линейного блока равна расстоянию от верхней границы самого верхнего блока до нижней границы самого нижнего блока.

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

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

10.8.1 Интерлиньяж и половинный интерлиньяж

Т.к. высота строкового блока может изменяться в зависимости от размера шрифта текста, содержащегося в этом блоке (например, 'line-height' > 1em), то сверху и снизу от отображаемых глифов возможно наличие свободного места. Разность между размером шрифта и вычисляемым значением свойства 'line-height' называется интерлиньяжем (или межстрочным интервалом). Половина интерлиньяжа называется половинным интерлиньяжем.

Агенты пользователей осуществляют вертикальное центрирование глифов в строковых блоках, добавляя сверху и снизу половинный интерлиньяж. Например, если высота части текста равна '12pt', а значение свойства 'line-height' равно '14pt', то необходимо добавить 2pt дополнительного пространства: 1pt сверху и 1pt снизу от букв. (Эта процедура также применяется и к пустым блокам, если предположить, что пустой блок содержит бесконечно узкую букву.)

Если значение свойства 'line-height' меньше размера шрифта, то в итоге высота строкового блока будет меньше размера шрифта, а отображаемые глифы выйдут за пределы этого блока. Если такой блок соприкасается с краями линейного блока, то отображаемые глифы могут найти на границы смежного линейного блока.

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

'line-height'
Значение: normal | <число> | <длина> | <проценты> | inherit
Начальное значение: normal
Область применения: все элементы
Наследование: да
Процентное задание: относительно размера шрифта элемента
Устройства: визуального форматирования

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

Если это свойство применяется к элементу строкового уровня, то оно определяет точное значение высоты каждого порождаемого им блока. (Исключение составляют замещаемые элементы строкового уровня, в которых высота блока задается свойством 'height'.)

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

normal
Сообщает агентам пользователей о необходимости задать "адекватную" величину вычисляемого значения, исходя из размера шрифта элемента. Это значение означает то же, что и <число>. Для 'normal' рекомендуется задавать вычисляемое значение в диапазоне от 1.0 до 1.2.
<длина>
Определяет значение высоты блока. Отрицательные значения не допускаются.
<число>
Вычисляемым значением данного свойства является некоторое число, умноженное на значение размера шрифта данного элемента. Отрицательные значения не допускаются. Наследуется число, а не вычисляемое значение.
<проценты>
Вычисляемым значением данного свойства является соответствующее процентное значение, умноженное на вычисленное значение размера шрифта данного элемента. Отрицательные значения не допускаются.

Пример(ы):

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

DIV { line-height: 1.2; font-size: 10pt }     /* число */
DIV { line-height: 1.2em; font-size: 10pt }   /* длина */
DIV { line-height: 120%; font-size: 10pt }    /* проценты */

Если элемент содержит текст, отображаемый с использованием нескольких типов шрифтов, то значение свойства 'line-height' агент пользователя должен определить, исходя из наибольшего значения размера шрифта.

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

Обратите внимание, что свойства 'font-size' и 'line-height' замещаемых элементов всегда принимают некоторое значение, даже если они не используются непосредственно для определения высоты блока. Тем не менее, свойство 'font-size' используется для определения масштаба единиц измерения 'em' и 'ex', а свойство 'line-height' играет определенную роль для свойства 'vertical-align'.

'vertical-align'
Значение: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <проценты> | <длина> | наследуемое
Начальное значение: baseline
Область применения: строковые и 'table-cell' элементы
Наследование: нет
Процентное задание: относительно значения свойства 'line-height' самого элемента
Устройства: визуального форматирования

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

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

baseline
Осуществляется выравнивание базисной линий блока относительно базисной линии его родительского блока. Если у блока нет базисной линии, то выполняется выравнивание его нижней границы относительно базисной линии родительского блока.
middle
Осуществляется выравнивание средней по вертикали точки блока относительно уровня базисной линии родительского блока в сумме с половиной x-высоты родительского блока.
sub
Осуществляется смещение базисной линии блока вниз до надлежащего уровня, отведенного для нижних индексов блока, порожденного родительским элементом. (Это значение не влияет на размер шрифта текста элемента.)
super
Осуществляется смещение базисной линии блока вверх до надлежащего уровня, отведенного для верхних индексов блока, порожденного родительским элементом. (Это значение не влияет на размер шрифта текста элемента.)
text-top
Осуществляется выравнивание верхней границы блока относительно верхней кромки шрифта родительского элемента.
text-bottom
Осуществляется выравнивание нижней границы блока относительно нижней кромки шрифта родительского элемента.
<проценты>
Осуществляется смещение блока на заданную величину (процент от значения свойства 'line-height') вверх (положительное значение) или вниз (отрицательное значение). Значение '0%' аналогично значению 'baseline'.
<длина>
Осуществляется смещение блока на заданную величину вверх (положительное значение) или вниз (отрицательное значение). Значение '0cm' аналогично значению 'baseline'.

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

top
Осуществляется выравнивание верхней границы блока относительно верхней границы линейного блока.
bottom
Осуществляется выравнивание нижней границы блока относительно нижней границы линейного блока.


Визуальные эффекты

11 Визуальные эффекты

Содержание

  • 11.1 Переполнение и усечение
    • 11.1.1 Переполнение: свойство 'overflow'
    • 11.1.2 Усечение: свойство 'clip'
  • 11.2 Видимость: свойство 'visibility'

11.1 Переполнение и усечение

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

  • строка не может быть разбита на части, в результате чего линейный блок оказывается шире структурного блока;
  • блок структурного уровня оказывается намного шире контейнера. Это происходит тогда, когда свойство 'width' элемента принимает значение, приводящее к выходу генерируемого структурного блока за пределы контейнера;
  • значение высоты элемента превышает явно заданное значение высоты контейнера (т.е. высота контейнера определяется свойством 'height', а не высотой содержимого);
  • блок является абсолютно позиционируемым;
  • ширина полей блока принимает отрицательные значения.

Каждый раз при переполнении блока то, как осуществляется усечение блока (и выполняется ли оно вообще), определяется свойством 'overflow'. Свойство 'clip' определяет размер и форму усекаемой области. Если размеры усекаемой области невелики, то при усечении может случиться, что содержимое остается видимым.

11.1.1 Переполнение: свойство 'overflow'

'overflow'
Значение: visible | hidden | scroll | auto | inherit
Начальное значение: visible
Область применения: элементы структурного уровня и замещаемые элементы
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования

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

visible
Это значение указывает на то, что содержимое не может усекаться, т.е. не может отображаться за пределами структурного блока.
hidden
Это значение указывает на то, что содержимое может усекается и что для просмотра содержимого, находящегося в области усечения, не предусмотрен никакой механизм прокрутки. Т.е. пользователи не будут иметь доступа к отсеченному содержимому. Размер и форма области усечения определяются свойством 'clip'.
scroll
Это значение указывает на то, что содержимое может усекается и что агент пользователя в случае использования явно отображаемого на экране механизма прокрутки (например, полосы прокрутки) должен отобразить этот механизм в пределах блока независимо от того, было ли произведено усечение его содержимого или нет. Это позволяет избегать связанных с появлением или исчезновением полос прокрутки проблем в динамическом окружении. Если свойству присвоено именно это значение, а конечным является устройство типа 'print' или 'projection', то содержимое, выходящее за пределы блока, будет напечатано.
auto
Поведение, обусловленное заданием значения 'auto', определяется агентом пользователя и должно предусматривать возможность использования полосы прокрутки для переполняемых блоков.

Даже если свойство 'overflow' принимает значение 'visible', содержимое может быть усечено рабочим окружением, исходя из размеров окна документа агента пользователя.

Пример(ы):

Рассмотрим следующий пример вывода блока (BLOCKQUOTE), размер которого превышает размер его контейнера (назначенного элементом DIV). Исходный документ имеет вид:

<DIV>
<BLOCKQUOTE>
<P>Мне не нравилась эта игра, но затем я увидел ее
с другой точки зрения - и завеса была снята.
<DIV class="attributed-to">- Гроучо Маркс </DIV>
</BLOCKQUOTE>
</DIV>

Далее приведена таблица стилей, управляющая размерами и стилем генерируемых блоков:

DIV { width : 100px; height: 100px;
      border: thin solid red;
      }

BLOCKQUOTE   { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px;
      border: thin dashed black
      }

DIV.attributed-to { text-align : right; }

Начальным значением свойства 'overflow' является 'visible', поэтому BLOCKQUOTE будет форматироваться без усечения, например, как показано ниже:

Случай отображения переполнения [D]

С другой стороны, если свойству 'overflow' элемента DIV присвоить значение 'hidden', то это приведет к тому, что контейнер произведет усечение BLOCKQUOTE:

Случай усечения переполнения [D]

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

11.1.2 Усечение: свойство 'clip'

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

'clip'
Значение: <форма> | auto | inherit
Начальное значение: auto
Область применения: элементы уровня блока и замещаемые элементы
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования

Свойство 'clip' применяется к элементам, свойство 'overflow' которых имеет значение, отличное от 'visible'. Значения данного свойства имеют следующий смысл:

auto
Размер и местоположение области усечения совпадают с размерами и местоположением блоков, порождаемых элементами.
<форма>
В CSS2 единственным допустимым значением типа <форма> является rect (<top> <right> <bottom> <left>), где <top>, <bottom> <right> и <left> задают величину отступов от соответствующих сторон блока.

<top>, <right>, <bottom> и <left> могут иметь либо значение <длина>, либо 'auto'. Допускается использование отрицательных значений длины. Значение 'auto' подразумевает, что заданные края области усечения будут совпадать с краями блока, порожденного элементом (т.е. 'auto' аналогично '0').

Если координаты задаются с точностью до пикселя, то необходимо позаботиться о том, чтобы на экране не оставался видимым ни один пиксель в случае, когда <left> + <right> равно ширине элемента (или <top> + <bottom> равно высоте элемента), и наоборот, чтобы не было скрыто ни одного пикселя, когда эти значения равны '0'.

Предки элемента также могут иметь области усечения (если их свойство 'overflow' принимает значение, отличное от 'visible'). Область отображаемого содержимого определяется пересечением различных областей усечения.

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

Пример(ы):

Следующие два правила:

P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }

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

Две области усечения [D]

Примечание. В CSS2 все области усечения имеют прямоугольную форму. В дальнейшем предполагается разрешить использование непрямоугольных областей усечения.

11.2 Видимость: свойство 'visibility'

'visibility'
Значение: visible | hidden | collapse | inherit
Начальное значение: inherit
Область применения: все элементы
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования

Свойство 'visibility' определяет, будет ли осуществляться отображение блоков, порождаемых элементом, или нет. Невидимые блоки по-прежнему влияют на отображение (для запрета генерации блоков свойству 'display' необходимо присвоить значение 'none'). Значения данного свойства имеют следующий смысл:

visible
Генерируемый блок является видимым.
hidden
Генерируемый блок является невидимым (полностью прозрачным), но по-прежнему влияет на отображение.
collapse
Обратитесь к разделу, посвященному динамическим преобразованиям строк и столбцов таблиц. Если это значение используются с элементами, отличными от строк или столбцов, то его действие аналогично действию значения 'hidden'.

Данное свойство можно использовать в сочетании со сценариями для создания динамических эффектов.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
   #container1 { position: absolute;
                 top: 2in; left: 2in; width: 2in }
   #container2 { position: absolute;
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Выберите подозреваемого:</P>
<DIV id="container1">
   <IMG alt="Аль Капоне"
        width="100" height="100"
        src="suspect1.jpg">
   <P>Имя: Аль Капоне</P>
   <P>Место жительства: Чикаго</P>
</DIV>

<DIV id="container2">
   <IMG alt="Лаки Лючано"
        width="100" height="100"
        src="suspect2.jpg">
   <P>Имя: Лаки Лючано</P>
   <P>Место жительства: Нью-Йорк</P>
</DIV>

<FORM method="post"
      action="http://www.suspect.org/process-bums">
   <P>
   <INPUT name="Capone" type="button"
          value="Capone"
          onclick='show("container1");hide("container2")'>
   <INPUT name="Luciano" type="button"
          value="Luciano"
          onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>


Модель визуального форматирования

9 Модель визуального форматирования

Содержание

  • 9.1 Знакомство с моделью визуального форматирования
    • 9.1.1 Область просмотра
    • 9.1.2 Контейнеры
  • 9.2 Управление процессом создания блоков
    • 9.2.1 Элементы уровня блока и структурные блоки
      • Безымянные структурные блоки
    • 9.2.2 Элементы строкового уровня и строковые блоки
      • Безымянные строковые блоки
    • 9.2.3 Компактные блоки
    • 9.2.4 Инициальные блоки
    • 9.2.5 Свойство 'display'
  • 9.3 Схемы позиционирования
    • 9.3.1 Выбор схемы позиционирования: свойство 'position'
    • 9.3.2 Смещение блоков: 'top', 'right', 'bottom', 'left'
  • 9.4 Нормальный поток
    • 9.4.1 Контекст форматирования блоков
    • 9.4.2 Контекст форматирования строк
    • 9.4.3 Относительное позиционирование
  • 9.5 Перемещаемые объекты
    • 9.5.1 Позиционирование перемещаемого объекта: свойство 'float'
    • 9.5.2 Управление потоком после перемещаемого объекта: свойство 'clear'
  • 9.6 Абсолютное позиционирование
    • 9.6.1 Фиксированное позиционирование
  • 9.7 Соотношение свойств 'display', 'position' и 'float'
  • 9.8 Сравнение моделей, описывающих нормальный поток, перемещаемые объекты и абсолютное позиционирование
    • 9.8.1 Нормальный поток
    • 9.8.2 Относительное позиционирование
    • 9.8.3 Перемещение блоков
    • 9.8.4 Абсолютное позиционирование
  • 9.9 Многослойный вывод
    • 9.9.1 Определение позиционного уровня: свойство 'z-index'
  • 9.10 Направление вывода текста: свойства 'direction' и 'unicode-bidi'

9.1 Знакомство с моделью визуального форматирования

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

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

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

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

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

9.1.1 Область просмотра

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

9.1.2 Контейнеры

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

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

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

Ширину начального контейнера можно установить с помощью свойства 'width' корневого элемента. Если данному свойству присвоено значение 'auto', то агент пользователя использует начальное значение ширины (например, агент использует текущее значение ширины области просмотра).

Высоту начального контейнера можно установить с помощью свойства 'height' корневого элемента. Если данному свойству присвоено значение 'auto', то высота контейнера увеличится до размеров, позволяющих вмещать содержание документа.

Начальный контейнер нельзя позиционировать или перемещать (т.е. агенты пользователей игнорируют свойства 'position' и 'float' корневого элемента).

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

9.2 Управление процессом создания блоков

В следующих разделах описаны различные типы блоков, которые можно создавать в CSS2. Тип блока частично влияет на его поведение в рамках модели визуального форматирования. Тип блока определяется с помощью свойства 'display', описанного ниже.

9.2.1 Элементы уровня блока и структурные блоки

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

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

Некоторые элементы уровня блока порождают дополнительные блоки за пределами главного: элементы 'list-item' и элементы с маркерами. Дополнительные блоки размещаются относительно главного блока.

Безымянные структурные блоки

В документе

<DIV>
  Тект
  <P>Еще текст
</DIV>
(считается, что для элементов DIV и P установлено значение 'display: block') элемент DIV имеет два типа содержимого: принадлежащего строке и принадлежащего блоку. Чтобы упростить процесс форматирования, предполагается, что надпись "Текст" заключена в безымянный структурный блок.

Рисунок, представляющий три типа блоков для приведенного выше примера [D]

Рисунок, представляющий три типа блоков, один из которых является безымянным, например, верхний.

Другими словами, если структурный блок (подобный сгенерированному для элемента DIV) содержит в себе другой структурный блок (например, сгенерированный для элемента P), то он не должен содержать ничего, кроме структурных блоков. При этом каждый строковый блок вкладывается в безымянный структурный блок.

Пример(ы):

Такая модель в следующем примере может реализоваться, если использовать правила:

/* Замечание: учет этих правил не является обязательным для */
/* пользовательских агентов, управляющих отображением HTML-долкументов */
BODY { display: inline }
P    { display: block }

в приведенном ниже HTML-документе:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
<TITLE>Безымянный текст, разорванный блоком</TITLE>
</HEAD>
<BODY>
Это безымянный текст, расположенный до элемента P.
<P>Это содержимое элемента P.</>
Это безымянный текст, расположенный после элемента P.
</BODY>

Элемент BODY содержит отрывок (C1) безымянного текста, после которого следует элемент уровня блока, за которым, в свою очередь, следует другой отрывок (C2) безымянного текста. В результате будут сгенерированы безымянный структурный блок для элемента BODY, который содержит безымянный структурный блок, заключающий в себя отрывок C1, структурный блок для элемента P и другой безымянный структурный блок, заключающий в себя отрывок C2.

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

9.2.2 Элементы строкового уровня и строковые блоки

Элементы строкового уровня - это элементы исходного документа, которые не формируют новых структурных единиц текста. Их содержимое выводится в строке (например, выделенные отрывки текста в абзаце или графические объекты, импортированные в текст). Определенные значения свойства 'display' делают элемент принадлежащим строке: 'inline', 'inline-table', 'compact' и 'run-in' (см. разделы, посвященные компактным и инициальным блокам). Элементы строкового уровня порождают строковые блоки.

Строковые блоки могут использоваться в контексте различных методологий форматирования:

  • в рамках структурного блока строковые блоки используются в контексте строкового форматирования;
  • компактный строковый блок располагается в поле структурного блока;
  • блоки, порожденные маркерами, также располагаются за пределами структурного блока.

Безымянные строковые блоки

В документе типа:

<P>Отрывок <EM>выделенного</em> текста</P>

Элемент P порождает структурный блок, который содержит несколько строковых блоков. Блок, содержащий слово "выделенного", является строковым блоком, порожденным строковым элементом EM. Блоки, содержащие слова "Отрывок" и "текста", являются строковыми блоками, порожденными элементом P структурного уровня. Последние называются безымянными строковыми блоками, т.к. не существует элемента строкового уровня, который был бы связан с ними.

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

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

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

9.2.3 Компактные блоки

Компактный блок ведет себя следующим образом:

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

Расположение компактного блока на полях осуществляется следующим образом: он находится за пределами (слева или справа) первого строкового блока структурного блока, но при этом влияет на вычисление высоты строкового блока. Свойство 'vertical-align' компактного блока определяет его вертикальное положение относительно упомянутого строкового блока. В горизонтальной плоскости компактный блок всегда находится в поле структурного блока.

Элемент, который не может быть размещен на одной строке, не должен заходить на поля следующего блока. Например, элемент 'compact' в HTML, который включает элемент BR, всегда будет форматироваться как структурный блок (учитывая основной стиль элемента BR, который вставляет новую строку). Для размещения на полях текста, состоящего из нескольких строк, более всего подходит свойство 'float'.

В следующем примере представлен компактный блок.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Пример компактного блока</TITLE>
    <STYLE type="text/css">
      DT { display: compact }
      DD { margin-left: 4em }
    </STYLE>
  </HEAD>
  <BODY>
    <DL>
      <DT>Коротко
        <DD><P>Здесь располагается описание
      <DT>Слишком большая длина по сравнению с шириной поля
        <DD><P>Здесь располагается описание
    </DL>
  </BODY>
</HTML>

Данный пример можно отформатировать следующим образом:

Коротко
        Здесь располагается описание

Слишком большая длина по сравнению с шириной поля
        Здесь располагается описание

Свойство 'text-align' может использоваться для выравнивания компактного элемента внутри поля: по левому краю поля ('left'), по правому краю поля ('right') или по центру поля ('center'). Значение 'justify' не используется и интерпретируется как 'left' или 'right', в зависимости от свойства 'direction' элемента уровня блока, в поле которого производилось форматирование компактного элемента ('left' если значение направления равно 'ltr', 'right' если оно равно 'rtl'.)

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

9.2.4 Инициальные блоки

Инициальный блок ведет себя следующим образом:

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Пример инициального блока</TITLE>
    <STYLE type="text/css">
      H3 { display: run-in }
    </STYLE>
  </HEAD>
  <BODY>
    <H3>Вставляемый заголовок.</H3>
    <P>И абзац текста, который следует
             за ним.
  </BODY>
</HTML>

Данный пример может быть отформатирован следующим образом:

   Вставляемый заголовок. И абзац
  текста, который
  следует за ним.

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

Информацию о взаимодействии инициальных блоков с генерируемым содержимым можно найти в разделе о гененерируемом содержимом.

9.2.5 Свойство 'display'

'display'
Значение: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | наследуемое
Начальное значение: строковое
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Устройства: все

Значения этого свойства:

block
При этом значении свойства элемент порождает главный структурный блок.
inline
При этом значении свойства элемент порождает один или несколько строковых блоков.
list-item
При этом значении свойства элемент (например, LI в HTML) порождает главный структурный блок и строковый блок элемента списка. Информацию о списках и примерах форматирования списков можно найти в разделе о списках.
marker
При этом значении свойства генерируемое содержимое, располагающееся до или после блока, становится маркером. Данное значение должно использоваться только с псевдоэлементами :before и :after, прикрепленным к элементам структурного уровня. В остальных случаях данное значение интерпретируется как 'inline'. Дополнительную информацию можно найти в разделе о маркерах.
none
При этом значении свойства элемент не порождает ни одного блока в структуре форматирования (т.е. элемент никак не влияет на отображение документа). Потомки этого элемента тем более не будут порождать никаких блоков, даже если для их свойства 'display' установлено другое значение.

Обратите внимание, что в результате использования значения 'none' не создается вообще никакого блока, в том числе и невидимого. В CSS имеются такие механизмы, которые позволяют элементам порождать в структуре форматирования определенные блоки, влияющие на форматирование, но при этом явно не отображаемые. Подробную информацию можно найти в разделе о видимости.

run-in и compact
Эти значения свойства в зависимости от контекста создают структурный или строковый блок. Применение свойства к инициальному или компактному блоку осуществляется, исходя из его окончательного статуса (является ли он строковым или структурным блоком). Например, свойство 'white-space' применимо, только если блок становится структурным.
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption
При этих значениях свойства элемент ведет себя как элемент таблицы (ограничения рассматриваются в главе о таблицах).

Необходимо помнить, что хотя в качестве начального значения свойства 'display' используется значение 'inline', правила, содержащиеся в таблице стилей, используемой агентом пользователя по умолчанию, могут переназначить его. Подробную информацию можно найти в приложении при рассмотрении примера таблицы стилей для HTML 4.0.

Пример(ы):

Далее представлено несколько примеров использования свойства 'display':

P   { display: block }
EM  { display: inline }
LI  { display: list-item }
IMG { display: none }      /* Не отображать графику */

Конформные агенты пользователей, управляющие отображением HTML-документов, могут игнорировать свойство 'display'.

9.3 Схемы позиционирования

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

  1. Нормальный поток. В CSS2 модель нормального потока включает форматирование блока структурного уровня, строковое форматирование строковых блоков, относительное позиционирование структурных или строковых блоков, а также позиционирование компактных и инициальных блоков.
  2. Перемещаемые объекты. Согласно этой модели блок сначала размещается в соответствии с нормальным потоком, а затем изымается из него и перемещаются максимально влево или вправо насколько это возможно. Отображаемое содержимое может располагаться по сторонам перемещаемого элемента.
  3. Абсолютное позиционирование. В модели абсолютного позиционирования блок полностью удаляется из нормального потока (и не влияет на последующие сестринские элементы), а затем ему назначается положение относительно контейнера.
Примечание. Схемы позиционирования, разработанные в CSS2, помогают разработчикам делать свои документы более доступными, избавляя разработчиков от необходимости использовать различные приемы разметки (например, невидимые изображения) для управления отображением документа.

9.3.1 Выбор схемы позиционирования: свойство 'position'

Свойства 'position' и 'float' определяют алгоритм позиционирования CSS2, используемый для определения положения блока.

'position'
Значение: static | relative | absolute | fixed | inherit
Начальное значение: static
Область применения: все элементы, кроме генерируемого содержимого
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования

Значения этого свойства:

static
Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства 'left' и 'top' не применяются.
relative
Положение блока рассчитывается в соответствии с нормальным потоком (оно называется нормальным положением). Затем блок смещается относительно своего нормального положения. Когда для расположения блока B используется модель относительного позиционирования, тогда положение следующего блока рассчитывается так, как будто блок B не был смещен.
absolute
Положение блока (возможно и размер) указывается с помощью свойств 'left', 'right', 'top' и 'bottom'. Они указывают величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются из нормального потока. Это значит, что они не влияют на размещение последующих сестринских элементов. Следует заметить, что поля абсолютно позиционируемых блоков не перекрываются ни с какими другими полями.
fixed
Положение блока рассчитывается в соответствии с моделью абсолютного позиционирования, а затем он фиксируется относительно некоторого объекта. При использовании устройств без разбивки блок фиксируется относительно области просмотра (и не перемещается при прокрутке). При использовании устройств с постраничной разбивкой блок фиксируется относительно страницы, даже если она отображается в области просмотра (например, при предварительном просмотре печати). У разработчиков существует возможность сделать определение значения 'fixed' аппаратно-зависимым. Например, разработчик может сделать так, чтобы на экране блок всегда отображался в верхней части области просмотра, но не печатной страницы этого бы не происходило. Два объявления могут быть отделены друг от друга с помощью правила @media, как это показано ниже:

Пример(ы):

@media screen {
  H1#first { position: fixed }
}
@media print {
  H1#first { position: static }
}

9.3.2 Смещение блоков: 'top', 'right', 'bottom', 'left'

Говорят, что элементу была присвоена позиция, если для свойства 'position' устанавливается значение, отличное от 'static'. Позиционированные элементы порождают позиционированные блоки, положение которых регулируется с помощью следующих четырех свойств:

'top'
Значение: <длина> | <проценты> | auto | наследуемое
Начальное значение: auto
Область применения: позиционируемые элементы
Наследование: нет
Процентное задание: относительно высоты контейнера
Устройства: визуального форматирования

Это свойство задает смещение верхнего сегмента внутренней краевой линии относительно верхнего сегмента краевой линии контейнера блока.

'right'
Значение: <длина> | <проценты> | auto | наследуемое
Начальное значение: auto
Область применения: позиционируемые элементы
Наследование: нет
Процентное задание: относительно к ширины контейнера
Устройства: визуального форматирования

Это свойство задает смещение правого сегмента внутренней краевой линии влево относительно правого сегмента краевой линии контейнера блока.

'bottom'
Значение: <длина> | <проценты> | auto | наследуемое
Начальное значение: auto
Область применения: позиционируемые элементы
Наследование: нет
Процентное задание: относительно высоты контейнера
Устройства: визуального форматирования

Это свойство определяет смещение нижнего сегмента внутренней краевой линии вверх относительно нижнего сегмента краевой линии контейнера блока.

'left'
Значение: <длина> | <проценты> | auto | наследуемое
Начальное значение: auto
Область применения: позиционируемые элементы
Наследование: нет
Процентное задание: относительно ширины контейнера
Устройства: визуального форматирования

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

Значения этих четырех свойств имеют следующий смысл:

<длина>
Смещение задается фиксированным значением расстояния от исходной краевой линии.
<проценты>
Смещение задается процентным соотношением относительно ширины (для свойств 'left' и 'right') или высоты (для свойств 'top' и 'bottom') контейнера. Если высота контейнера не указана точно (т.е. зависит от высоты содержимого), то процентное соотношение, определяющее значение свойств 'top' и 'bottom', интерпретируется как значение 'auto'.
auto
Действие данного значения зависит от того, какие из свойств, близких по своему содержанию к рассматриваемым, также имеют значение 'auto'. Подробную информацию можно найти в разделах, посвященных ширине и высоте абсолютно позиционируемых и неперемещаемых элементов.

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

9.4 Нормальный поток

Блоки, содержащиеся в нормальном потоке, принадлежат контексту форматирования, который может быть либо блоковым, либо строковым, но не тем и ни другим одновременно. Структурные блоки участвуют в контексте форматирования блоков. Блоки строкового уровня участвуют в контексте форматирования строк.

9.4.1 Контекст форматирования блоков

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

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

Информацию о разделителях страниц, используемых в устройствах с постраничной разбивкой, можно найти в разделе о допустимых разделителях страниц.

9.4.2 Контекст форматирования строк

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

Ширина линейного блока определяется шириной контейнера. Высота линейного блока регулируется правилами, описанными в разделе "Вычисление высоты строк". Линейный блок всегда имеет высоту достаточную, чтобы вместить все блоки. Однако он может быть выше, чем самый высокий блок, содержащийся внутри, (если, например, блоки выровнены таким образом, что подошвы текста находятся на одной оси). Если высота блока B меньше, чем высота линейного блока, в котором он находится, то вертикальное выравнивание блока B внутри последнего определяется свойством 'vertical- align'.

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

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

Когда суммарная ширина строковых блоков, упорядоченных в строку, меньше ширины содержащего их линейного блока, то горизонтальное распределение этих блоков определяется с помощью свойства 'text-align'. Если ему присвоено значение 'justify', то агент пользователя может увеличить длину строковых блоков.

Поскольку ширина строкового блока не может превышать ширину линейного блока, длинные строковые блоки разбиваются на несколько отдельных сегментов, которые затем распределяются по нескольким линейным блокам. Когда строковый блок разбивается на части, то в месте разбиения поля границы и отступы визуально не отображаются. Форматирование полей, границ и отступов будет определено не полностью, если разбиение производится внутри двунаправленной вставки.

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

Здесь представлен пример построения строкового блока. Следующий абзац (созданный элементом P уровня блока, принадлежащим языку HTML) включает безымянный текст, в который вставлены элементы EM и STRONG:

<P>В этом <EM>предложении,</EM> дорогая,
<STRONG>несколько выделенных</STRONG> слов.</P>

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

  • Безымянный: "В этом"
  • EM: "предложении,"
  • Безымянный: "дорогая,"
  • STRONG: "несколько выделенных"
  • Безымянный: "слов."

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

 В этом предложении, дорогая, несколько выделенных слов.

В противном случае строковые блоки будут разбиты на части, которые затем будут распределены по нескольким линейным блокам. Предыдущий абзац может быть разбит следующим образом:

В этом предложении, дорогая,
несколько выделенных слов.
или по-другому:
В этом предложении,
дорогая, несколько
выделенных слов.

В последнем случае блок, порожденный элементом EM, был разбит на две части (назовем их "split1" и "split2"). Поля, границы, отступы или элементы текстового оформления не отображаются после split1 или перед split2.

Рассмотрим следующий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Пример разбиения на несколько линейных блоков</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px;
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Здесь <EM>несколько выделенных</EM> слов.</P>
  </BODY>
</HTML>

В зависимости от ширины элемента P блоки могут распределяться следующим образом:

Рисунок, иллюстрирующий влияние разрыва строки на отображение полей, границ и отступов [D]

  • Поля располагаются до слова "несколько" и после слова "выделенных".
  • Отступы располагаются до, сверху и снизу слова "несколько" и после, сверху и снизу слова "выделенных". В обоих случаях с трех сторон слова окружены штрих-пунктирной границей.

9.4.3 Относительное позиционирование

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

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

Элемент порождает относительно позиционируемый блок, если для его свойства 'position' установлено значение 'relative'. Смещение определяется с помощью свойств 'top', 'bottom', 'left' и 'right'.

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

Примеры относительного позиционирования представлены в разделе, где производится сравнение моделей, описывающих нормальный поток, перемещаемые объекты и абсолютное позиционирование.

9.5 Перемещаемые объекты

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

У перемещаемого блока должна быть явно задана ширина (назначается с помощью свойства 'width' или у него должно быть собственное значение ширины в случае, когда он является заменяемым элементом). Любой перемещаемый блок становится структурным блоком, сдвинутым влево или вправо, если его внешний край не соприкасается с краем контейнера или другого перемещаемого блока. Верхняя часть перемещаемого блока выравнивается по верхней части текущего линейного блока (или, в случае его отсутствия, по нижней части предшествующего структурного блока). Если в текущей строке недостаточно свободного места для перемещаемого объекта, то он последовательно, строка за строкой, перемещается вниз до тех пор, пока не найдется строка, в которой для него найдется достаточное количество места.

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

Эта модель применима и к перемещаемым объектам, соседствующим друг с другом в одной и той же строке.

Пример(ы):

Следующее правило перемещает все блоки, порожденные элементом IMG с class="icon", влево (и устанавливает значение ширины поля равным нулю):

IMG.icon {
  float: left;
  margin-left: 0;
}

Рассмотрим следующий исходный HTML-документ и таблицу стилей:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Пример перемещаемого объекта</TITLE>
    <STYLE type="text/css">
      IMG { float: left }
      BODY, P, IMG { margin: 2em }
    </STYLE>
  </HEAD>
  <BODY>
    <P><IMG src=img.gif alt="Данный рисунок иллюстрирует перемещаемые объекты">
       Пример текста, у которого нет другого...
  </BODY>
</HTML>

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

Рисунок, иллюстрирующий взаимодействие перемещаемого блока и полей [D]

Форматирование было бы точно таким же, если бы документ выглядел так:

<BODY>
  <P>Некоторый произвольный текст,
  <IMG src=img.gif alt=" Данный рисунок иллюстрирует перемещаемые объекты ">
            у которого нет другого...
</BODY>

Объясняется это тем, что содержимое, находящееся слева от перемещаемого объекта, заменяется им, а само отображается справа от него.

Поля перемещаемых блоков никогда не перекрываются с полями соседних блоков. Таким образом, в предыдущем примере вертикальные поля блока, порожденного элементом P, и поля перемещаемого блока, порожденного элементом IMG, не перекрываются.

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

Пример(ы):

Ниже показано, что происходит при наложении перемещаемого объекта на границы элементов нормального потока.

Рисунок, иллюстрирующий наложение перемещаемого объекта и границ двух абзацев: графический объект разрывает границы [D]

Перемещаемое изображение затеняет границы перекрываемых им структурных блоков.

В следующем примере проиллюстрировано использование свойства 'clear', позволяющего запрещать перемещение содержимого вдоль относительно объекта.

Пример(ы):

Правило

P { clear: left }

может привести к следующему форматированию:

Рисунок, иллюстрирующий перемещаемый объект и влияние правила 'clear: left' на расположение двух абзацев [D]

В обоих абзацах установлено свойство 'clear: left', при действии которого второй абзац "принудительным образом" располагается ниже перемещаемого объекта. Для этого увеличивается ширина его верхнего поля (см. свойство 'clear').

9.5.1 Позиционирование перемещаемого объекта: свойство 'float'

'float'
Значение: left | right | none | inherit
Начальное значение: none
Область применения: все перемещаемые объекты и генерируемое содержимое
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования

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

left
Элемент порождает структурный блок, перемещаемый влево. Содержимое выводится вдоль правой стороны блока, начиная с самого верха (за счет свойства 'clear'). Свойство 'display' игнорируется, если ему не присвоено значение 'none'.
right
Подобно значению 'left' с той лишь разницей, что содержимое выводится вдоль левой стороны блока, начиная с самого верха.
none
Блок не перемещается.

Ниже приведены четкие правила, определяющие поведение перемещаемых объектов:

  1. Левый внешний край левостороннего перемещаемого блока не может находиться слева от левого края контейнера. Подобное правило имеет место и для правостороннего перемещаемого блока.
  2. Если текущий перемещаемый блок является левосторонним и существует хотя бы один левосторонний перемещаемый блок, который был сгенерирован в исходном документе раньше него, то левый внешний край текущего блока должен находиться справа от правого внешнего края предыдущего блока, или верхний его край должен быть ниже, чем нижний край предыдущего блока. Подобное правило имеет место и для правостороннего перемещаемого блока.
  3. Правый внешний край левостороннего перемещаемого блока не может находиться справа от левого внешнего края любого правостороннего перемещаемого блока. Подобное правило имеет место и для правостороннего перемещаемого блока.
  4. Верхний сегмент внешнего края перемещаемого блока не может быть выше аналогичной границы контейнера.
  5. Верхний сегмент внешнего края перемещаемого блока не может быть выше аналогичной границы любого структурного или перемещаемого блока, который был сгенерирован в исходном документе раньше рассматриваемого перемещаемого блока.
  6. Верхний сегмент внешнего края перемещаемого блока не может быть выше аналогичной границы любого линейного блока, содержащего блок, который был сгенерирован в исходном документе раньше рассматриваемого перемещаемого блока.
  7. Левосторонний перемещаемый блок, слева от которого расположен другой левосторонний перемещаемый блок, может не иметь правого внешнего края, расположенного справа от правого края его контейнера. (Иногда левосторонний перемещаемый блок может не выдаваться справа до тех пор, пока он не будет помещен как можно левее). Подобное правило имеет место и для правостороннего перемещаемого блока.
  8. Перемещаемый блок должен быть помещен как можно выше.
  9. Левосторонний перемещаемый блок должен быть помещен как можно левее, а правосторонний перемещаемый блок - как можно правее. Самое верхнее положение должен занимать блок, который занимает более крайнее левое/правое положение.

9.5.2 Управление потоком после перемещаемых объектов: свойство 'clear'

'clear'
Значение: none | left | right | both | inherit
Начальное значение: none
Область применения: элементы структурного уровня
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования

Это свойство определяет, какие стороны блока, порожденного элементом, не могут соседствовать с предшествующим перемещаемым блоком. (Может случиться, что у элемента имеются перемещаемые потомки. Свойство 'clear' не влияет на них.)

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

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

left
Верхнее поле генерируемого блока увеличивается до тех пор, пока верхний сегмент края его границы не окажется ниже нижнего сегмента внешнего края любого левостороннего перемещаемого блока, который был сгенерирован в исходном документе предыдущим элементом.
right
Верхнее поле генерируемого блока увеличивается до тех пор, пока верхний сегмент края его границы не окажется ниже нижнего сегмента внешнего края любого правостороннего перемещаемого блока, который был сгенерирован в исходном документе предыдущим элементом.
both
Генерируемый блок помещается ниже всех перемещаемых блоков, которые были сгенерированы в исходном документе предыдущими элементами.
none
Никаких ограничений на положение блока относительно перемещаемых объектов не накладывается.

Когда это свойство применяется к перемещаемым объектам, оно приводит к изменениям в правилах позиционирования перемещаемых объектов. При этом добавляется дополнительное ограничение (#10):

  • Верхний внешний край перемещаемого объекта должен находиться ниже нижнего внешнего края всех ранее созданных левосторонних перемещаемых блоков ('clear: left') или правосторонних перемещаемых блоков ('clear: right'), или и тех и других сразу ('clear: both').

9.6 Абсолютное позиционирование

В модели абсолютного позиционирования величина смещения блока относительно его контейнера задается явно. Он полностью удаляется из нормального потока (так что не влияет на последующие сестринские элементы). Абсолютно позиционированный блок назначает новый контейнер для дочерних элементов из нормального потока и позиционируемых потомков. Содержимое абсолютно позиционируемого элемента не перемещается вокруг других блоков. Оно может затенять (или не затенять) содержимое другого блока в зависимости от уровней расположения накладывающихся блоков.

Если в данной спецификации элемент (или порожденные ими блоки) называется абсолютно позиционируемым, это означает, что для свойства 'position' данного элемента установлено значение 'absolute' или 'fixed'.

9.6.1 Фиксированное позиционирование

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

Разработчики могут использовать фиксированное позиционирование для создания презентации в виде совокупности кадров. Рассмотрим один из примеров такой презентации:

Рисунок, иллюстрирующий покадровую презентацию с использованием свойства position='fixed'. [D]

Подобный эффект можно достичь с помощью следующего кода HTML и правил стиля:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Создание кадра в CSS2</TITLE>
    <STYLE type="text/css">
      BODY { height: 8.5in } /* будет использовано ниже для определения */
                             /* процентных соотношений, задающих значение */
                             /* высоты элемента */
      #header {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }
      #sidebar {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
      }
      #main {
        position: fixed;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 10em;
      }
      #footer {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <DIV id="header"> ...  </DIV>
    <DIV id="sidebar"> ...  </DIV>
    <DIV id="main"> ...  </DIV>
    <DIV id="footer"> ...  </DIV>
  </BODY>
</HTML>

9.7 Взаимодействие свойств 'display', 'position' и 'float'

Три свойства, влияющие на создание и размещение блока - 'display', 'position' и 'float' - взаимодействуют следующим образом:

  1. Если свойство 'display' принимает значение 'none', то агент пользователя должен проигнорировать свойства 'position' и 'float'. В данном случае элемент не породит ни одного блока.
  2. Если свойство 'position' принимает значение 'absolute' или 'fixed', то свойству 'display' присваивается значение 'block', свойству 'float' - значение 'none', а положение блока определяться свойствами 'top', 'right', 'bottom' и 'left', а также контейнером блока.
  3. Если свойство 'float' принимает значение, отличное от 'none', то свойству 'display' присваивается значение 'block', а блок становится перемещаемым.
  4. Остальные значения свойства 'display' ведут себя согласно их описанию.

Примечание. В CSS2 ничего не говорится о том, что произойдет, если значения этих свойств будут изменены в результате выполнения некоторых сценариев. Например, что произойдет, если элемент, имеющий значение 'width: auto', будет перемещен? Будет ли перемещено его содержимое или оно сохранит прежнее форматирование? Ответа на этот вопрос данный документ не дает, и поведение для различных реализаций CSS2 будет практически разным.

9.8 Сравнение моделей, описывающих нормальный поток, перемещаемые объекты и абсолютное позиционирование

Чтобы продемонстрировать различия между нормальным потоком, относительным позиционированием, перемещаемым объектом и абсолютным позиционированием, предлагается несколько примеров на основе следующего фрагмента кода HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Сравнение схем позиционирования</TITLE>
  </HEAD>
  <BODY>
    <P>Начало основного текста.
      <SPAN id="outer"> Начало внешнего текста.
      <SPAN id="inner"> Внутренний текст.</SPAN>
      Конец внешнего текста.</SPAN>
      Конец основного текста.
    </P>
  </BODY>
</HTML>

Предположим, что в данном документе используются следующие правила:

BODY { display: block; line-height: 200%;
       width: 400px; height: 400px }
P    { display: block }
SPAN { display: inline }

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

9.8.1 Нормальный поток

Рассмотрим следующие объявления языка CSS "outer" и "inner", которые не вносят изменений в нормальный поток блоков:

#outer { color: red }
#inner { color: blue }

Элемент P заключает в себе все содержимое строки: безымянный текст строки и два элемента SPAN. Поэтому все содержимое будет отображаться в контексте строкового форматирования внутри контейнера, порожденного элементом P. В результате получится следующее:

Рисунок, иллюстрирующий нормальный поток текста между родительскими и сестринскими блоками [D]

9.8.2 Относительное позиционирование

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

#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }

Текст обычным образом достигает внешнего элемента. Затем внешний текст принимает те размеры и то положение в конце строки 1, которые назначаются ему в нормальном потоке. Далее строковые блоки, включающие текст (занимающий три строки), перемещаются как единое целое на '-12px'(вверх).

Содержимое внутреннего элемента, выступающего в роли дочернего элемента внешнего, будет отображено обычным образом после слов "внешнего текста" (в строке 1.5). Однако сам внутренний текст смещается относительно внешнего на '12px' (вниз) на свое нормальное положение в строке 2.

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

Рисунок, иллюстрирующий влияние относительного позиционирования на содержимое блока [D]

Заметьте, что если бы внешний элемент был смещен на '-24px', то произошло бы наложение содержимого внешнего и основного элементов.

9.8.3 Перемещение блоков

Рассмотрим результат перемещения текста внутреннего элемента к правому краю с использованием следующих правил:

#outer { color: red }
#inner { float: right; width: 130px; color: blue }

Текст обычным образом выводится до внутреннего блока, который изымается из нормального потока и перемещается к правому полю (значение 'width' его ширины было указано явно). Линейные блоки, находящиеся слева от перемещаемого объекта, укорачиваются, и оставшаяся часть текста документа отображается в них.

Рисунок, иллюстрирующий результаты перемещения блока [D]

Чтобы продемонстрировать эффективность работы свойства 'clear', добавим в пример сестринский элемент:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Сравнение схем позиционирования II</TITLE>
  </HEAD>
  <BODY>
    <P>Начало основного текста.
      <SPAN id=outer> Начало внешнего текста.
      <SPAN id=inner> Внутренний текст.</SPAN>
      <SPAN id=sibling> Содержимое сестринского элемента.</SPAN>
      Конец внешнего текста.</SPAN>
      Конец основного текста.
    </P>
  </BODY>
</HTML>

Следующие правила:

#inner { float: right; width: 130px; color: blue }
#sibling { color: red }

как и ранее приводят к перемещению внутреннего блока к правому краю, а оставшаяся часть текста документа перемещается на освободившееся место:

Рисунок, иллюстрирующий результат перемещения блока без использования свойства [D]

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

#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }

Рисунок, иллюстрирующий результат перемещения блока с использованием свойства [D]

9.8.4 Абсолютное позиционирование

И наконец, рассмотрим результат применения модели абсолютного позиционирования. Рассмотрим следующие объявления outer и inner:

#outer {
    position: absolute;
    top: 200px; left: 200px;
    width: 200px;
    color: red;
}
#inner { color: blue }

В результате верхняя часть внешнего блока размещается относительно контейнера. Контейнер для размещаемого блока назначается ближайшим размещенным предком (или, в случае отсутствия такового, начальным контейнером, как в данном примере). Верхняя сторона внешнего блока находится на '200px' ниже верхней стороны контейнера, а левая сторона на '200px' правее его левой стороны. Дочерний блок внешнего блока перемещается обычным образом относительно его родительского блока.

Рисунок, иллюстрирующий результаты абсолютного позиционирования блока [D]

В следующем примере показан абсолютно позиционируемый блок, дочерний по отношению к относительно позиционируемому блоку. Хотя родительский внешний блок не смещен, присвоение его свойству 'position' значения 'relative' означает, что он может служить контейнером для позиционируемых потомков. Т.к. внешний блок является строковым блоком, разбиваемым на сегменты, распределяемые по нескольким строкам, то в качестве нулевой точки отсчета для смещения 'top' и 'left' выступают верхний и левый края первого сегмента (изображенные на рисунке толстыми пунктирными линиями).

#outer {
  position: relative;
  color: red
}
#inner {
  position: absolute;
  top: 200px; left: -100px;
  height: 130px; width: 130px;
  color: blue;
}

В результате получим:

Рисунок, иллюстрирующий результат абсолютного позиционирования блока относительно контейнера [D]

Если внешний блок не позиционируется, т.е. используются правила

#outer { color: red }
#inner {
  position: absolute;
  top: 200px; left: -100px;
  height: 130px; width: 130px;
  color: blue;
}

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

Абсолютное позиционирование блока относительно нормально размещенного назначенного родительским элементом контейнера [D]

Относительное и абсолютное позиционирование может использоваться для вставки маркеров исправлений, как показано в следующем примере. Документ

<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>

приведет к следующему представлению:

Рисунок, иллюстрирующий использование перемещаемых объектов для создания маркеров исправлений [D]

Сначала позиционирование абзаца (стороны контейнера которого показаны на рисунке) осуществляется согласно модели нормального потока. Затем он смещается на '10px' относительно левого края контейнера (таким образом, правое поле размером в '10px' было предусмотрено для компенсации этого смещения). Два тире, выполняющие роль маркеров исправлений, изымаются из потока и помещаются на текущей строке (с помощью свойства 'top: auto') на расстоянии '-1em' от левого края контейнера (назначенного элементом P в момент его окончательного позиционирования). В результате создается эффект перемещения маркеров исправлений влево по текущей строке.

9.9 Многослойный вывод

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

В CSS2 каждый блок размещается в трехмерном пространстве. Помимо горизонтальных и вертикальных координат блоки имеют координаты вдоль "оси z", располагаясь один поверх другого. Позиционирование объектов вдоль оси z оказывается удобным, когда визуально происходит их наложение. В этом разделе обсуждаются способы позиционирования блоков вдоль оси z.

Любой блок обладает единственным позиционным контекстом. У каждого блока в заданном позиционном контексте имеется целочисленный индекс позиционного уровня, который указывает его положение на оси z относительно других блоков этого же контекста. Блоки с более высоким позиционным уровнем всегда выводятся поверх блоков с меньшим позиционным уровнем. Позиционный уровень блока может иметь отрицательное значение. Блоки, находящиеся в одном и том же позиционном контексте и обладающие одинаковым позиционным уровнем, располагаются снизу вверх, в зависимости от их расположения в дереве документа.

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

Элемент, назначающий локальный позиционный контекст, порождает блок, который имеет два позиционных уровня: первый относится к создаваемому им позиционному контексту (всегда равен нулю), а второй - к позиционному контексту, в котором он находится (указывается свойством 'z-index').

Блок, порождаемый элементом, имеет тот же позиционный уровень, что и его родительский блок, если ему не был присвоен другой уровень с использованием свойства 'z-index'.

9.9.1 Определение позиционного уровня: свойство 'z-index'

'z-index'
Значение: auto | <integer> | inherit
Начальное значение: auto
Область применения: позиционируемые элементы
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования

Для размещенного блока свойство 'z-index' указывает:

  1. Позиционный уровень блока в текущем позиционном контексте.
  2. Назначает ли блок локальный позиционный контекст.

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

<целое>
Данное значение является значением позиционного уровня сгенерированного блока в текущем позиционном контексте. Блок также назначает локальный позиционный контекст с позиционным уровнем '0'.
auto
Позиционный уровень сгенерированного блока в текущем позиционном контексте совпадает с позиционным уровнем родительского блока. Блок не назначает нового локального позиционного контекста.

В следующем примере позиционные уровни блоков (именованные с использованием атрибута "id"): "text2"=0, "image"=1, "text3"=2 и "text1"=3. Позиционный уровень "text2" наследуется от корневого блока. Другие уровни указываются свойством 'z-index'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Позиционирование вдоль оси z</TITLE>
    <STYLE type="text/css">
      .pile {
        position: absolute;
        left: 2in;
        top: 2in;
        width: 3in;
        height: 3in;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      <IMG id="image" class="pile"
           src="butterfly.gif" alt="Бабочка"
           style="z-index: 1">

    <DIV id="text1" class="pile"
         style="z-index: 3">
      Этот текст будет находиться поверх изображения бабочки.
    </DIV>

    <DIV id="text2">
      Этот текст будет находиться под всем остальным.
    </DIV>

    <DIV id="text3" class="pile"
         style="z-index: 2">
      Этот текст будет находиться ниже текста text1, но поверх изображения бабочки.
    </DIV>
  </BODY>
</HTML>

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

9.10 Направление вывода текста: свойства 'direction' и 'unicode-bidi'

Символы определенных в некоторых шрифтах пишутся справа налево. В некоторых документах, в частности, в документах на арабском языке или на иврите и в некоторых смешанных языковых контекстах текст в одном (визуально отображаемом) блоке может выводиться в различных направлениях. Такая ситуация обозначается термином "двунаправленность" или более коротким термином "bidi" от английского "bidirectionality".

В стандарте Unicode ([UNICODE], раздел 3.11) описан сложный алгоритм для определения точного направления текста. Алгоритм состоит из неявной части, основывающейся на свойствах символов, и явной части, управляющей процессом вставки и переназначения. В спецификации CSS2 данный алгоритм используется для осуществления адекватного двунаправленного вывода текста. Свойства 'direction' и 'unicode-bidi' позволяют разработчикам указывать способы отображения множества элементов и атрибутов языка документа на множество понятий данного алгоритма.

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

Т.к. направление текста зависит от строения и семантики языка документа, данные свойства должны преимущественно использоваться создателями описаний типов документов (DTD) или разработчиками специальных документов. Если в основной таблице стилей указаны данные свойства, то разработчики и пользователи не должны вводить переназначающие их правила. Типичное исключение составляет свойство bidi, которое по запросу пользователя может быть переназначено и использовано агентом для транслитерации идиша (как правило, написанного буквами иврита) латинскими буквами.

В спецификации языка HTML 4.0 ([HTML40], раздел 8.2) определяется тип поведения элементов HTML при двунаправленном выводе текста. Конформные пользовательские агенты, управляющие выводом HTML-документов, могут игнорировать свойства 'direction' и 'unicode-bidi' в таблицах стилей разработчиков и пользователей. Правила таблицы стилей, управляющие двунаправленным выводом текста, определенным в описании [HTML40], представлены в примере таблицы стилей. Спецификация языка HTML 4.0 включает и другую информацию об использовании разных направлений вывода текста.

'direction'
Значение: ltr | rtl | inherit
Начальное значение: ltr
Область применения: все элементы, см. описание
Наследование: да
Процентное задание: N/A
Устройства: визуального форматирования

Данное свойство задает основное направление написания, используемое в блоках, направление вставок и переназначений (см. 'unicode-bidi') для алгоритма двунаправленного вывода, используемого в Unicode. Оно также задает направление вывода столбцов таблицы, направление горизонтального переполнения и положение неполной последней строки в блоке в случае, если используется выравнивание 'text-align:justify'.

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

ltr
Направление слева направо.
rtl
Направление справа налево.

Чтобы свойство 'direction' могло влиять на элементы строкового уровня, свойству 'unicode-bidi' необходимо присвоить значение 'embed' или 'override'.

Примечание. Если свойство 'direction' применяется к элементам столбцов таблицы, то оно не наследуется ячейками столбца, т.к. столбцы не существуют в дереве документа. Поэтому в CSS не существует простого способа конструирования правил наследования атрибута "dir", описанных в разделе 11.3.2.1 [HTML40].

'unicode-bidi'
Значение: normal | embed | bidi-override | inherit
Начальное значение: normal
Область применения: все элементы, кроме see prose
Наследование: нет
Процентное задание: N/A
Устройства: визуального форматирования

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

normal
Согласно алгоритму двунаправленного вывода элемент не создает нового дополнительного уровня вставки. Для элементов строкового уровня неявная перегруппировка выполняется только в пределах его границ.
embed
Если элемент является элементом строкового уровня, то данное значение разрешает создание дополнительного уровня вставки согласно алгоритму двунаправленного вывода. Направление данного уровня вставки задается свойством 'direction'. Внутри элемента перегруппировка выполняется неявно. Это соответствует добавлению LRE (U+202A; для 'direction: ltr') или RLE (U+202B; для 'direction: rtl') в начало элемента и PDF (U+202C) в конец элемента.
bidi-override
Если элемент является элементом строкового уровня или элементом уровня блока, который содержит только элементы строкового уровня, то данное значение создает переназначение. Это значит, что внутри элемента перегруппировка осуществляется в строгом порядке согласно свойству 'direction', а неявная часть алгоритма двунаправленного вывода игнорируется. Это соответствует добавлению LRO (U+202D; для 'direction: ltr') или RLO (U+202E; для 'direction: rtl') в начало элемента и добавлению PDF (U+202C) в конец элемента.

В конечном итоге порядок следования символов, выработанный в каждом элементе уровня блока, будет совпадать с тем, который получится в результате добавления управляющих кодов bidi, как это было описано ранее, удаления разметки и подачи получившейся в результате этого последовательности символов в модуль, реализующий алгоритм двунаправленного вывода неформатированного текста, в котором используется то же самое разбиение на строки, что и в форматированном тексте. При этом нетекстовые элементы, например, изображения, рассматриваются как нейтральные символы, если только для свойства 'unicode-bidi' не установлено значение 'normal'. В последнем случае элементы будут рассматриваться как символы в направлении, указанном в свойстве 'direction' элемента.

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

Т.к. для алгоритма, используемого в Unicode, установлено ограничение в 15 уровней вставки, рекомендуется не использовать свойство 'unicode-bidi' со значением, отличным от 'normal', если в этом нет острой необходимости. В частности, значение свойства 'inherit' следует использовать очень осторожно. Тем не менее, для элементов, которые будут отображаться в виде блоков, рекомендуется указать 'unicode-bidi: embed', чтобы сохранить целостность элемента в том случае, если его вывод будет осуществляться по строкам (см. пример ниже).

В следующем примере показан XML-документ с двунаправленным выводом текста. Он иллюстрирует важный принцип: дизайнерам DTD следует учитывать свойство bidi как для корректных элементов и атрибутов языка документа, так и для всех сопутствующих таблиц стилей. Таблицы стилей должны создаваться таким образом, чтобы правила bidi были отделены от других правил стилей. Правила bidi не должны переназначаться другими таблицами стилей для сохранения bidi-поведения языка документа или DTD.

Пример(ы):

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

<HEBREW>
  <PAR>ИВРИТ1 ИВРИТ2 русский3 ИВРИТ4 ИВРИТ5</PAR>
  <PAR>ИВРИТ6 <EMPH>ИВРИТ7</EMPH> ИВРИТ8</PAR>
</HEBREW>
<RUSSIAN>
  <PAR>русский9 русский10 русский11 ИВРИТ12 ИВРИТ13</PAR>
  <PAR>русский14 русский15 русский16</PAR>
  <PAR>русский17 <HE-QUO> ИВРИТ18 русский19 ИВРИТ20</HE-QUO></PAR>
</RUSSIAN>

Поскольу это XML, то за установление направления написания ответственна таблица стилей. Она приведена ниже:

/* Правила для bidi */
HEBREW, HE-QUO  {direction: rtl; unicode-bidi: embed}
RUSSIAN         {direction: ltr; unicode-bidi: embed}

/* Правила для презентации */
HEBREW, RUSSIAN, PAR  {display: block}
EMPH                  {font-weight: bold}

Элемент HEBREW является блоком с направлением написания справа налево, элемент RUSSIAN - это блок с направлением написания слева направо. Элементы PAR - это блоки, которые наследуют основное направление написания у своих родительских элементов. Таким образом, первые два элемента PAR начинаются с верхней правой стороны, а последние три начинаются с верхней левой стороны. Помните, что названия элементов HEBREW и RUSSIAN выбраны только для примера; как правило, названия элементов должны отображать структуру, не ссылаясь на язык.

Элемент EMPH является элементом строкового уровня, и поскольку его свойство 'unicode-bidi' имеет значение 'normal' (начальное значение), то он не влияет на упорядочение текста. А элемент HE-QUO создает вставки.

Форматирование этого текста может иметь следующий вид при большой длине строки:

               5ТИРВИ 4ТИРВИ русский3 2ТИРВИ 1ТИРВИ

                                8ТИРВИ 7ТИРВИ 6ТИРВИ

русский9 русский10 русский11 13ТИРВИ 12ТИРВИ

русский14 русский15 русский16

русский17 20ТИРВИ русский19 18ТИРВИ

Помните, что в случае вставки HE-QUO элемент ИВРИТ18 будет расположен справа от элемента русский19.

Если необходимо разбить строки, рекомендуется сделать это следующим образом:

          2ТИРВИ 1ТИРВИ
    -ВИ 4ТИРВИ русский3
                   5ТИР

    -ВИ 7ТИРВИ 6ТИРВИ
                   8ТИР

русский9 русский10 рус-
ский11 12ТИРВИ
13ТИРВИ

русский14 русский15
русский16

русский17 18ТИРВИ
20ТИРВИ русский19

Т.к. элемент ИВРИТ18 должен читаться до элемента русский19, то он находится на одну строку выше него. Простое разбиение длинной строки при прежнем форматировании не дало бы результатов. Необходимо учесть, что первый слог элемента русский19 мог бы находиться на предыдущей строке, но разбивка по слогам слов, написанных слева направо, в контексте написания справа налево, и наоборот, обычно не используется во избежание появления дефиса в середине строки.


Long description for anonymous block box

This diagram illustrates how anonymous block boxes may spring into existence around anonymous content.

It shows two rectangular boxes that contain text, the first being anonymous. It has a light grey background and contains the words "Some text". Just below it is a P box with a dark grey background that contains the words "More text". The boxes are both within a DIV box.

Return to image.


Long description for the first Bach/XML formatting example

This diagram illustrates an example of rendering an XML document.

Five lines of text are displayed, all the same style. They are:

Fredrick the Great meets Bach
Johann Nikolaus Forkel
One evening, just as he was getting his flute ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.


Long description for the second Bach/XML formatting example

This diagram illustrates a second example of formatting an XML document.

Five lines of text are displayed, all the same color. However, the first is a title and is formatted with a larger font size. The second is the author's name and is in italics. The remainder of the paragraph has no special style. The lines are:

Fredrick the Great meets Bach
Johann Nikolaus Forkel
One evening, just as he was getting his flute ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.


Long description for background pattern

This diagram illustrates how a background image may be repeated within the content and padding areas of a box.

In this example, a background image is first centered within a box (established by the BODY element of the example). The box contains paragraphs of text, shown in gray to make them discrete.

The image, a blue wavy line on a pale yellow background, is then repeated vertically, to the top and bottom of the BODY box. The effect is to create a wavy band down the center of the page.


Long description of illustration of box areas

This diagram illustrates the four areas of the generic CSS box: content, padding, border, and margin.

There are four nested boxes: the content area is the innermost, then padding, border, and margin areas. Each area has a different border style to distinguish its edge: the content edge is thin and solid; padding is thin and dashed; border is thick and solid; margin is thick and dashed.

Below the boxes, a legend lists the border styles used for the four edges.


Long description of list box example showing margins, padding, and borders

This diagram illustrates the boxes generated by a UL list with two LI list items.

There are two parts to the illustration. The first shows the actual rendering of the boxes generated by the list elements. Background colors and border styles vary to delimit the box areas.

The second shows the same rendering, but the content, padding, border, and margin edges of each box are shown explicitly. In particular, the illustration shows how vertical margins between the LI boxes collapse.


Long description of example illustrating table row height calculations and vertical cell alignment

This diagram shows how the 'vertical-align' properties on cells combine to determine the height of the row containing the cells. The diagram also illustrates the meaning of some values of 'vertical-align' that apply to table cells: baseline, top, bottom, and middle.

The diagram shows a row of five (labeled) table cells of varying heights and alignments. To the right of the row, labels indicate the horizontal position of the row's top, baseline, middle, and bottom (from top to bottom).

The first cell is aligned with the row baseline and extends to just below the row top. The second cell is also aligned with the row baseline and extends to just above the row bottom. The third cell is aligned with the top of the row and extends to just above the row middle. The fourth cell is aligned with the row bottom, and extends to just above the row middle. The fifth cell is aligned with the row middle and touches neither the top nor bottom of the row. A red horizontal line within each cell box shows how it aligns vertically in the row box.


Long description for change bar example

This diagram illustrates the use of absolute positioning to create a changebar effect. The changebar (represented by two hyphens in the image) appears in the 10px space to the left of the paragraph.

The illustration shows a vertical line that represents the left edge of the paragraph's containing block. The paragraph text (in black) is shifted 10px from this edge (shown in the diagram). The change bars (two red hyphens) appear to the left of the word "THIS", which begins the fourth line of text.

The following PRE element simulates the example. Vertical bars represent the left containing block edge.

|   I used two red hyphens to serve
|   as a change bar. They will "float"
|   to the left of the line containing
| --THIS word.


Long description for example of clipping region

Long description for example clipping region

This diagram illustrates two block boxes, one above the other, with rectangular clipping regions of different dimensions.

The block boxes (generated for a P element) are identical and depicted with a thick black border and a gray background. A coordinate system has its origin at the upper left corner of each block box. The x-axis increases along the top edge of the P box, the y-axis down the left edge. Both axes depict increments of 5px.

The clipping region of the first P box lies entirely within it, offset 5px from the top and left edges of the P box, and 10px from the right and bottom edges. The clipping region has a thick dashed border and a white background and is labeled "clip region".

The clipping region of the second P box resembles that of the first in style and position, except that the right edge is 5px to the right of the P box's right edge. Thus, the clipping region lies partially outside the P box.


Long description of example illustrating hidden internal borders

This diagram shows how the precedence rules may be used to achieve the effect of hidden internal borders.

The two by two table is surrounded by a solid border. The HTML table specification and style rules following the image cause the vertical border between the two cells in the first row and the horizontal border between the two cells in the first column to disappear.


Long description for sample document tree diagram

This diagram illustrates a sample document tree.

The root node (HTML) is at the top. It has two children: HEAD and BODY. HEAD has one child: TITLE. BODY has three children: H1, P, and UL. The UL has 3 LI leaf nodes.

In outline form, one . indenting for each level, that gives:

HTML
.HEAD
..TITLE
.BODY
..H1
..P
..UL
...LI
...LI
...LI


Long description of text shadow example

This diagram illustrates how text shadow may be used to create an "eclipse effect."

The string "ECLIPSE" is shown in white uppercase letters. Each letter has a gray surrounding shadow extending on all sides of the letter stems.


Long description for punctuation and drop cap example

This diagram illustrates a drop cap layout using the :first-letter pseudo-class. However, unlike the previous diagram, the text begins with punctuation.

There are 5 lines of text. The first line begins with a large double quote mark (") followed by a large, italic capital "A" that spans three lines. The rest of the text flows around the '"A': the first three lines lie to its right and the last two below it (aligned with the left side of the double quote mark).

In the following PRE element layout, the space occupied by the "A" in the second and third lines is represented by underscores (_):

"   A bird in
   __ the hand
  ___ is worth
two in the bush,"
says an old proverb.


Long description for drop cap example

This diagram illustrates a drop cap layout using the :first-letter pseudo-class.

There are 4 lines of text. The first line begins with a large capital "T" that spans two lines. The rest of the text flows around the "T": the first two lines lie to its right and the third and fourth below it (aligned with the left side of the "T").

In the following PRE element layout, the space occupied by the "T" at the beginning of the second line is represented by an underscore (_):

T he first few
_ words of an
article in the
Economist


Long description of how floats overlap with boxes in normal flow

This diagram illustrates a floating image that overlaps the borders of two paragraphs in normal flow: the paragraph borders are clipped by the non-transparent parts of the image.

There are two paragraphs in normal flow, each surrounded by red border. A left-floating image causes the final three lines of the upper paragraph to float along its right side. It causes the first three lines of the following paragraph to do the same, and the remainder of that paragraph flows normally.

The paragraph borders shine through the margin area of the image box. The non-transparent part of the image content area clips them, however.


Long description of how floats overlap with boxes in normal flow

This diagram illustrates a floating image that overlaps the borders of one paragraph in normal flow: the paragraph borders are clipped by the non-transparent parts of the image. The second paragraph is forced below the float by the 'clear' property.

There are two paragraphs in normal flow, each surrounded by red border. A left-floating image causes the final three lines of the upper paragraph to float along its right side. The paragraph borders shine through the margin area of the image box. The non-transparent part of the image content area clips them, however.

The second paragraph flows normally, starting below the image's bottom margin. The top margin of the second paragraph is stretched up to meet the bottom margin of the preceding paragraph.


Long description of float and text flow example

This diagram illustrates how text flows around a float, and in particular, how line boxes of content alongside a float are shortened to make room for the float box (including margins). The HTML source of the example precedes the image. In the source document, a BODY element contains a P that contains a left-floated IMG.

The top of the illustration reads "max (BODY margin, P margin)" to indicate that vertical margins collapse. However, the IMG margin is not involved with this calculation since the IMG is floated.

At the left side of the illustration, the left margins of BODY, P, and IMG do not collapse (horizontal margins don't collapse).

The paragraph text flows along the right side of the IMG, starting at the top and to the right of its right margin. When the text reaches the bottom of the IMG bottom margin, it continues as it would normally within a P element. Thus, line boxes alongside a float are shortened.


Long description for example illustrating positioning with respect to a positioned ancestor

This diagram illustrates the effects of absolutely positioning a box ("inner") with respect to a containing block established by a relatively positioned ancestor ("outer").

A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. All body and "outer" text has been flowed into lines into lines 1, 2, and 3. The "inner" box has been positioned relative to the top and left edges of the "outer" element's first inline box.

In the following PRE element, each 24 pixel line is simulated by two lines, the second beginning with the appropriate number. The reference edges for positioning the "inner" box are indicated in the diagram by thick dashed lines. The upper left coordinates of the "inner" box are labeled by (+200, -100). In the PRE element below, the reference edges for "inner" are indicated by vertical bars and equal signs. The offset of the "inner" box is given in square brackets. The lines of text, as they appear in the image, contain approximately:

                        ====
                             |
1 Beginning of body contents.|Start

2 of outer contents. End of outer

3 contents. End of body contents.

4          [(+200, -100)]

5                Inner

6                contents.

7

8

The default text color is black. "Start of outer contents" is red. "Inner contents" is blue. "End of outer contents" is red.


Long description for example illustrating absolute positioning

This diagram illustrates the effects of absolutely positioning a box.

A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. All text outside the "outer" box has been flowed into lines 1 and 2.

The "outer" box is positioned absolutely so that it occupies the lower right quadrant of the document window. All text in "outer" and its descendants occupies the second half of lines 5 through 8.

In the following PRE element, each 24 pixel line is simulated by two lines, the second beginning with the appropriate number. The lines, as they appear in the image, contain:

1 Beginning of body contents. End of

2 body contents.

3

4

5                Start of outer

6                contents. Inner

7                contents. End of

8                outer contents.

The default text color is black. "Start of outer contents" is red. "Inner contents" is blue. "End of outer contents" is red.


Long description of example illustrating floating with clear

This diagram illustrates the effects of floating a box ("inner") and how its "sibling" is forced below it due to the 'clear' property.

A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Text before the "inner" box flows on lines 1 and halfway on line 2. The "inner" box has been floated to the right and occupies the second half of lines 3 and 4. The sibling box flows on the following line (line 4) and is followed by the remainder of the text.

In the following PRE element, each 24 pixel line is simulated by two lines, the second beginning with the appropriate number. Vertical bars represent the left edge of the floated box. The lines, as they appear in the image, contain:

1 Beginning of body contents. Start

2 of outer contents.     | Inner

3                        | contents.

4 Sibling contents. End of outer

5 contents. End of body contents.

The default text color is black. "Start of outer contents" is red. "Sibling contents" is red. "Inner contents" is blue. "End of outer contents" is red.


Long description of example illustrating floating without clear

This diagram illustrates the effects of floating a box ("inner") and how its "sibling" flows alongside it.

A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Since the "inner" box has been floated to the right, all other text flows around it, including that of the "sibling" box (on lines 1 through 5).

In the following PRE element, each 24 pixel line is simulated by two lines, the second beginning with the appropriate number. Vertical bars represent the left edge of the floated box. The lines, as they appear in the image, contain:

1 Beginning of body contents. Start

2 of outer contents.     | Inner

3 Sibling contents. End  | contents.

4 of outer contents. End of body

5 contents.

The default text color is black. "Start of outer contents" is red. "Sibling contents" is red. "Inner contents" is blue. "End of outer contents" is red.


Long description of example illustrating floating

This diagram illustrates the effects of floating a box.

A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Since the "inner" box has been floated to the right, all other text flows around it (on lines 1 through 4).

In the following PRE element, each 24 pixel line is simulated by two lines, the second beginning with the appropriate number. Vertical bars represent the left edge of the floated box. The lines, as they appear in the image, contain:

1 Beginning of body contents. Start

2 of outer contents. End | Inner

3 of outer contents. End | contents.

4 of body contents.

The default text color is black. "Start of outer contents" is red. "Inner contents" is blue. "End of outer contents" is red.


Long description for normal flow example

This diagram illustrates the normal flow of text between parent and sibling boxes.

A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Four lines of text are displayed, occupying line 1 through 4.

In the following PRE element, each 24 pixel line is simulated by two lines, the second beginning with the appropriate number. The lines, as they appear in the image, contain:

1 Beginning of body contents. Start

2 of outer contents. Inner contents.

3 End of outer contents. End of body

4 contents.

The default text color is black. "Start of outer contents" is red. "Inner contents" is blue. "End of outer contents" is red.


Long description for relative flow example

This diagram illustrates the effects of relative positioning.

A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. The text of the "outer" box (at the end of line 1, halfway into line 2, and halfway into line 3) is shifted upward 12px. The text of the "inner" box, thought shifted upward as well, has been relatively positioned so that it lies in its normal flow position at the end of line 2.

In the following PRE element, each 24 pixel line is simulated by two lines, the second beginning with the appropriate number. The lines, as they appear in the image, contain:

                             Start
1 Beginning of body contents.

2 of outer contents.
                     Inner contents.
3
  End of outer contents.
4                    End of body

5 contents.

The default text color is black. "Start of outer contents" is red. "Inner contents" is blue. "End of outer contents" is red.


Long description illustrating absolute positioning with respect to the initial containing block

This diagram illustrates the effects of absolutely positioning a box with respect to the initial containing block.

A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. All body and "outer" text has been flowed into lines into lines 1, 2, and 3. The "inner" box has been positioned at "-100, 200" relative to the "0, 0" coordinates (the upper left corner of the document window). Most of the "inner" box contents are therefore rendered outside the document window.

In the following PRE element, each 24 pixel line is simulated by two lines, the second beginning with the appropriate number. The text that is to the left of the line numbers lies outside the initial containing block. The lines, as they appear in the image, contain approximately:

      1 Beginning of body contents. [@]Start

      2 of outer contents. End of outer

      3 contents. End of body contents.

      4

Inner 5

Conte 6 nts

      7

      8

The default text color is black. "Start of outer contents" is red. The "nts" in "Inner contents" is blue. "End of outer contents" is red.


Long description for frame layout example

This diagram illustrates a frame-like layout with 'position: fixed'.

The illustration shows a four-panel frameset. The top panel ("header") covers the entire width of the frameset and takes up 15% of the vertical space. Below it on the left is the "sidebar", which is 10em wide; it's height is automatically calculated. To the right of the sidebar and below the header is the "main" area, whose dimensions are computed based on remaining available space. Finally, at the bottom, the "footer" area is 100px high and covers the entire width of the frameset.

Each area is labeled and dimensions that are not 'auto' are indicated.


Long description for illustration of margin/border behavior on split inline box

This diagram illustrates the behavior of margins, borders, and padding at the split points of an inline box.

The illustration shows the rendering of the HTML example preceding the image in the main document, the paragraph "Several emphasized words appear here." The inline box containing the words "emphasized text" is split between the words. At the split point, padding, borders (dashed to emphasize them), and margins are not rendered.


Long description for italic forms

This image illustrates different types and their italic or slanted version.

It shows 8 lines of text: sans-serif, sans-serif-oblique, sans-serif-bold, sans-serif-bold-oblique, serif-bold, serif-bold-italic, serif, serif-italic. We see that italic glyphs are not just slanted with respect to the roman counterparts, but differ in shape as well.


Long description for kerning

This image illustrates kerning.

It shows the letters "AVfj" in a large, italic serif font. We see that the bottom right part of the "A" crosses the vertical axis separating it from the "V" to its right. Similarly, the "f" and "j" enter into each other's space.


Long description for example showing caption to the left of a table

This diagram shows the relationship between a table and a caption to its left and how they behave in the visual formatting model.

The diagram shows a table with 3 columns, one row of headers, and six rows of data cells. The table is centered within its containing block, whose left and right edges are depicted by vertical lines and labeled "current margins". A paragraph of text precedes the table.

To the left of the left containing block edge, a right-justified paragraph of five lines is aligned with the bottom of the table. Thus, this left caption lies in the left margin of the body.


Long description for example showing inside vs. outside list marker

This diagram illustrates the fact that the list marker box has no impact on the position of the principal list box.

Two lists are shown, separated by a horizontal line. Each list contains two items with two lines of text each.

For the upper list, the list marker box (which contains a bullet) is outside and to the left of each list item principal box.

For the lower list, the list marker box (which contains a bullet) is the first inline box inside each list item principal box.

Below the second list, an upward-pointing arrow indicates the left edge of all four list item principal boxes. A label reads, "The left sides of the list item boxes are not affected by marker placement."


Long description for example with unclipped overflow

This diagram illustrates how content may overflow a box.

Two boxes are shown. The first one has a red border and is labeled DIV. The upper left corner of the second box, labeled BLOCKQUOTE, is positioned in the middle of the DIV box. The BLOCKQUOTE box has a black dashed border and contains the following text, attributed to Groucho Marx: "I didn't like the play, but then again I saw it under adverse conditions - the curtain was up." The BLOCKQUOTE box overflows the DIV box to the right and below it. Since the 'overflow' property on BLOCKQUOTE is 'visible', the overflowing text remains visible.


Long description for example with clipped overflow

This diagram illustrates how content may be clipped.

One box, with a red border, is shown. In the lower right hand quadrant of this (DIV) box, part of the text contents of the BLOCKQUOTE element, with a dashed top and left border, are shown. The rest of the text is not visible since it is clipped by the DIV box, whose 'overflow' property has the value 'hidden'.


Long description illustrating relationship between page box and sheet

This diagram shows the relationship between the abstract page box and the target sheet where it will be rendered.

A page box takes up the left side of the diagram. The page box, which has a thin black border, is labeled "Page box" at the top. Within the page box, another box labeled "Page area" is shown, also with a thin black border. The area between the page box edge and the page area edge is labeled "Margin area".

To the right of this box, three arrows (each labeled "transfer") are shown pointing to three sheets of different dimensions. Thus, an abstract page box may be rendered to a variety of target sheets.


Long description for screen shot of Windows 95 font description GUI

This image shows the Windows 95 GUI that describes the characteristics of a given font. In particular, it shows the PANOSE classification of the Georgia Italic font face.


Long description for the illustration of a pixel's definition

This diagram illustrates how the definition of a pixel depends on the users distance from the viewing surface (paper or screen).

The image depicts the user looking at two planes, one 28 inches (71 cm) from the user, the second 140 inches (3.5 m) from the user. An expanding cone is projected from the user's eye onto each plane. Where the cone strikes the first plane, the projected pixel is .28 mm high. Where the cone strikes the second plane, the projected pixel is 1.4mm high.


Long description for the illustration of reference vs. device pixel

This diagram illustrates the relationship between the reference pixel and device pixels (called "dots" below).

The image depicts a high resolution (large dot density) laser printer output on the left and a low resolution monitor screen on the right. For the laser printer, one square reference pixel is implemented by 16 dots. For the monitor screen, one square reference pixel is implemented by a single dot.


Long description of example illustrating a table of travel expenses

This diagram gives one visual rendering of a table that has been marked up especially for aural rendering.

The table has a centered caption above it that reads "Travel Expense Report".

The table shows expenses in three categories (meals, hotels, and transport) in two cities (San Jose and Seattle) on four different dates (25-28 August 1997). In order to group information in a useful way, the table has a central column group with three columns, labeled "Meals", "Hotels", and "Transport" from left to right. The table's first column (to the left of the central column group) lists days of travel and labels these days with the city visited. In the table's last column (to the right of the central column group), cells contain information about the sum of each days expenses.

The first row of data begins with the date "25-Aug-97". The three expense columns show $37.74 (meals), $112 (hotel), and $45 (transport). The final column shows no subtotal.

The second row of data begins with the date "26-Aug-97". The three expense columns show $27.28 (meals), $112 (hotel), and $45 (transport). The final column shows no subtotal.

In the first column, the label "San Jose", in bold, shows that the traveler found herself in San Jose for the first two days.

The third row of data shows San Jose subtotals for each category: $65.02 (meals), $224 (hotels), $90 (transport) and adds them up in the final column: $379.02. The third row has a gray background to distinguish it.

The next three rows present the same information for the next two days, in Seattle.

The last row presents the totals for each category (meals, hotels, and transport) and, in the lower right hand cell of the table, the grand total spent in four days: $800.27


Long description for example showing how structurally overlapping cells are rendered

This example shows a difference between CSS's table model for HTML and for other document formats. The first, HTML, example is defined by HTML to be illegal, as it would lead to overlapping cells if HTML's rules for layout are followed. The CSS rules apply to other formats than HTML, and don't have this problem.

The diagram depicts how the two examples, the HTML one and the almost identical non-HTML one, might be rendered. The rendering of the HTML example is undefined, and one possible rendering is shown here, in the left half of the figure: it has two cells that overlap. The rendering of the non-HTML example is on the right, it follows the CSS rules and thus has no overlapping cells.

In both tables, cells have gray backgrounds and a black border. Each contains a single digit as label. Cells are separated from each other by cell spacing.

The left table has a top row of four cells, containing, resp. the digits "1", "2", "3", and "4". The second of these cells, the one with the digit "2" in it, extends into the row below. The second row of the table contains one cell, which contains the digit "5", and it spans columns one and two. Thus, the cell labeled "2" and the cell labeled "5" overlap in the second row, second column. The overlap is depicted by a darker gray background.

The right table has the same top row of four cells, labeled "1", "2", "3", and "4". The second cell again spans rows one and two. The second row of the table contains one cell, containing the digit "5", that spans columns three and four. Thus, no cells overlap, but the first cell of the second row is left empty.


Long description of example illustrating precedence in the collapsing borders model

This diagram shows an example of which borders would be rendered in the collapsing borders model where borders of different styles, widths, or colors overlap.

The diagram shows a three column, five row table of cells labeled 1 to 15.

The table has a 5px solid yellow border. The first column has a 3px solid black border, so the column's left border is obscured by the table's left border. The fifth cell (row two, column two) has a 5px dashed blue border that obscures the segment of the black column border where they overlap. The sixth cell (row tow, column three) has a 5px solid green border that obscures the fifth cell's right border where they overlap and the table's right border where they overlap.


Long description of example illustrating background calculation

This diagram shows a small table with three transparent cells and illustrates how their final background is determined.

The table consists of two rows. Four (labeled) cells lie in the first row, but the second cell spans the first and second row. The first, third, and fourth cells of the second row are "empty".

Each non-empty cell has a red background and a double black border. Each empty cell has the table's background color (specified as #ff0) as its own.


Long description of example of cell background calculation

This diagram shows the six superimposed "layers" of the CSS table model. This diagram illustrates the algorithm for calculating a cell's final background.

The six layers are depicted as prioritized rectangles floating one above the other in a three-dimensional space (i.e., layers are drawn as rhombuses to give the impression of space). The rectangles represent, from top to bottom: cells, rows, row groups, columns, column groups, and the table itself.

The diagram shows how, looking down on the six rectangles, one may compute the background color of each cell. On the top layer, each cell that specifies a background is shown as a gray box with a black border. A cell without a background color in the top layer is depicted as a "window" onto the lower layers, which give its final background color. The same visual metaphor is used at each layer, so a row without a background acts as a window onto the row group layer, etc.


Long description of example illustrating rows separated by a border

This diagram shows how the precedence rules may be used to achieve the effect of rows being separated by a border. There is no border above or below the table and there are no vertical borders at all.

The table shows a table of three columns and three rows. Each cell contains an integer that labels it. The top row is separated from the second by a solid black border. The second row is separated from the third by a solid black border as well.


Long description of example illustrating the separated borders model

This diagram shows the effect of the 'separate' value of the 'border-collapse' property.

The diagram shows a three column, two row table whose cells are subject to the separated borders model. The cells themselves have a grey background color and an 'inset' border style, which makes them appear to sink into the page. The cells are separated from each other on all sides by 15pt worth of grey space.

The table itself has a 10pt 'outset' border that gives one the impression the table is rising out of the page.

The full effect of the table is that of a bay window with three panes in two rows.


Long description of example illustrating the collapsing borders model

This diagram shows the effect of the 'collapse' value of the 'border-collapse' property.

The diagram shows three cells in the same row and the grid lines that separate them. The left and right content, padding, border, and margin areas of each cell are labeled by rotated text above each of the areas. Each (red, dotted) grid line bisects the border between two cells.

The table width is indicated below the cells as encompassing all the left and right content, padding, border, and margin areas of the cells, except for the cells that touch the sides of the table. In this case, only half the exterior border widths are counted in the table's width.


Long description for example showing caption above a table

This diagram shows the relationship between a table and a caption above it and how they behave in the visual formatting model.

The diagram shows a table (drawn in blue) and a caption (drawn in red) above it.

The table is a 4x4 grid of empty cells surrounded by a labeled margin area. The caption contains a line of (insignificant) text and is surrounded by a labeled margin area. Vertical margins between the boxes collapse.