Максимальный ограничивающий бокс
Это наименьший прямоугольник, включающий фигуру, образующуюся в том случае, если все глифы шрифта размещены вместе с их соответствующими источникамии затем прорисованы.
Если динамически загружаемый шрифт генерируется путём подразделения шрифта-предка, bbox должен быть тот же, что и у шрифта-предка.
Маркировка и списки
Большинство элементов уровня блока в 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. Это третий элемент списка.
С помощью селекторов потомков и дочерних селекторов можно специфицировать маркёры различных типов в зависимости от глубины вложения списков.
Маркировка: свойство 'marker-offset'
Маркёры создаются путём установки свойства 'display' в 'marker' внутри псевдоэлементов :before или :after. Поскольку содержимое 'block' и 'inline' в :before и :after является частью основного бокса, генерируемого элементом, содержимое 'marker' форматируется в независимом боксе маркёра вне основного бокса. Боксы маркёра форматируются как единая строка (т.е. один бокс строки (строчный бокс)), поэтому они не обладают такой гибкостью, как поплавки. Боксы маркёра создаются только тогда, когда свойство 'content' псевдоэлементов действительно генерирует содержимое.
Боксы маркёра имеют заполнение и рамку, но не имеют полей.
Для псевдоэлемента :before базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста первой строки содержимого основного бокса. Если основной бокс не содержит текста, верхний внешний край бокса маркёра будет выровнен с верхним внешним краем основного бокса. Для псевдоэлемента :after базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста последней строки содержимого основного бокса. Если основной бокс не содержит текста, нижний внешний край бокса маркёра будет выровнен с нижним внешним краем основного бокса.
Высота бокса маркёра задаётся в свойстве 'line-height'. Бокс маркёра :before (:after) участвует в подсчёте высоты первого (последнего) строчного бокса основного бокса. Таким образом, маркёры выравниваются по первой и последней строке содержимого элемента, даже если боксы маркёра находятся в разных строчных боксах. Если в основном боксе отсутствует первый или последний строчный бокс, то бокс маркёра сам устанавливает свой первый строчный бокс.
Вертикальное выравнивание бокса маркёра внутри его строчного бокса специфицируется свойством 'vertical-align'.
Если значение свойства 'width'
- 'auto', то ширина содержимого бокса маркёра является шириной содержимого, иначе - это значение 'width'. Для значений 'width' меньших, чем ширина содержимого, свойство 'overflow' специфицирует поведение при переполнении. Боксы маркёра могут перекрывать основные боксы. Для значений 'width'
больших, чем ширина содержимого, свойство 'text-align' определяет горизонтальное выравнивание содержимого в боксе маркёра.
Свойство 'marker-offset'
специфицирует смещение по горизонтали между боксом маркёра и ассоциированным основным боксом. Расстояние измеряется между их ближайшими краями рамок.
Примечание.
Если маркёр всплывает вправо от поплавка в содержимом, отформатированном слева направо, то основной бокс будет всплывать вниз от правой стороны поплавка, но боксы маркёра будут появляться слева от поплавка. Поскольку левый край рамки основного бокса расположен слева от поплавка (см. описание поплавков), а бокс маркёра расположен вне края рамки основного бокса, маркёр расположится также слева от поплавка. Аналогичным будет и поведение при форматировании справа налево, когда маркёр всплывёт слева от поплавка.
Если свойство 'display' имеет значение 'marker' для содержимого, генерируемого элементом с 'display: list-item', то бокс маркёра, генерируемый для ':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>
должен дать примерно такой вывод (здесь используется рисунок ascii вместо изображения gif улыбки):
:-) первый элемент списка появляется первым :-( :-) второй элемент списка появляется вторым :-(
В следующем примере маркёры используются для нумерации примечаний (параграфов).
Данный документ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Маркёры для создания нумерованных примечаний 4</TITLE> <STYLE type="text/css"> P { margin-left: 12 em; } @media screen, print { P.Note:before { display: marker; content: url("note.gif") "Примечание " counter(note-counter) ":"; counter-increment: note-counter; text-align: left; width: 10em; } } </STYLE> </HEAD> <BODY> <P>Это первый параграф данного документа.</P> <P CLASS="Note">Это очень короткий документ.</P> <P>Это конец.</P> </BODY> </HTML>
должен дать примерно такой вывод:
Это первый параграф данного документа.
Примечание 1: Это очень короткий документ.
Это конец.
'marker-offset'
| Значение: | <length> | auto | inherit |
| Начальное: | auto |
| Применяется: | к элементам с 'display: marker' |
| Наследуется: | нет |
| Процентное: | N/A |
| Носитель: | визуальный |
В следующем примере показано, как маркёры могут использоваться для добавления точек после каждого элемента нумерованного списка.
Эта программа 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. Это третий элемент списка.
Это большой последующий параграф ...
Математическая базовая линия
Задаёт позицию математической базовой линии в em-квадрате. Математическая базовая линия используется в математических символах для выравнивания, так же как нижняя базовая линия используется для выравнивания в латинском, греческом и кириллическом письме.
Минимальная и максимальная ширина: 'min-width' и 'max-width'
| Значение: | <length> | <percentage> | inherit |
| Начальное: | зависит от ПА |
| Применяется: | ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы |
| Наследуется: | нет |
| Процентное: | относительно ширины содержащего блока |
| Носитель: | визуальный |
| Значение: | <length> | <percentage> | none | inherit |
| Начальное: | none |
| Применяется: | ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы |
| Наследуется: | нет |
| Процентное: | относительно ширины содержащего блока |
| Носитель: | визуальный |
Эти два свойства позволяют авторам ограничить ширину бокса определёнными рамками.
Значения имеют следующий смысл:
<length>
Специфицирует фиксированную минимальную и максимальную вычисленную ширину. <percentage>
Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно ширины содержащего блока
генерируемого бокса.
none
(Только для 'max-width') Нет ограничений на ширину бокса.
Следующий алгоритм описывает, как эти два свойства воздействуют на вычисленное значение свойства 'width':
Ширина вычисляется (без 'min-width' и 'max-width') по вышеприведённым правилам "Вычисление ширины и полей".
Если вычисленное значение 'min-width' больше, чем значение 'max-width', то 'max-width' устанавливается в значение 'min-width'.
Если вычисленная ширина больше, чем 'max-width', вышеприведённые
правила применяются вновь, но на этот раз с использованием значения 'max-width' как специфицированного для 'width'.
Если вычисленная ширина меньше, чем 'min-width', вышеприведённые
правила применяются вновь, но на этот раз с использованием значения 'min-width'
как специфицированного для 'width'.
ПА может определить неотрицательное минимальное значение для свойства 'min-width', которое (значение) может варьироваться от элемента к элементу и даже зависеть от других свойств. Если 'min-width'
выходит за нижнюю границу этого лимита из-за того, что было установлено явно, или из-за того, что оно 'auto' и вышеприведённые правила сделают его слишком маленьким, ПА может использовать минимальное значение как вычисленное значение.
Минимальная и максимальная высота: 'min-height' и 'max-height'
Иногда необходимо ограничить высоту элементов определёнными рамками. Два свойства выполняют эту функцию:
| Значение: | <length> | <percentage> | inherit |
| Начальное: | 0 |
| Применяется: | ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы |
| Наследуется: | нет |
| Процентное: | относительно высоты содержащего блока |
| Носитель: | визуальный |
| Значение: | <length> | <percentage> | none | inherit |
| Начальное: | none |
| Применяется: | ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы |
| Наследуется: | нет |
| Процентное: | относительно высоты содержащего блока |
| Носитель: | визуальный |
Эти два свойства позволяют авторам ограничить высоту боксов определённым диапазоном. Значения имеют следующий смысл:
<length>
Специфицирует фиксированный минимум и максимум вычисленной высоты. <percentage>
Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентные значения интерпретируются так же, как 'auto'. none
(Только для 'max-height') Высота бокса не ограничена.
Следующий алгоритм описывает, как эти два свойства вводят вычисленное значение свойства 'height':
Высота вычисляется (без 'min-height' и 'max-height') по вышеприведённым правилам в "Вычислении высоты и полей".
Если вычисленное значение 'min-height' больше значения 'max-height', 'max-height' устанавливается в значение 'min-height'.
Если вычисленная высота больше, чем 'max-height', вновь применяются вышеприведённые
правила, но на этот раз с использованием значения 'max-height' как специфицированного значения для 'height'.
Если вычисленная высота меньше, чем 'min-height', вновь применяются вышеприведённые
правила, но на этот раз с использованием значения 'min-height'
как специфицированного значения для 'height'.
Мнемоники символов, не представленных в кодировке символов
Таблице стилей может понадобиться обратиться к символам, которые невозможно представить в текущей кодировке символов. Эти символы обязаны быть записаны как escape'ированные
ссылки на символы ISO 10646. Эти мнемоники служат для тех же целей, что и числовые ссылки в документах HTML или XML (см. [HTML40], главы 5 и 25).
Escape-механизм символов должен использоваться только тогда, когда необходимо вывести таким способом только несколько символов. Если большая часть документа требует этого, авторы должны кодировать документ в более подходящей кодировке (например, если документ содержит много греческих символов, автор может использовать "ISO-8859-7" или "UTF-8").
Процессоры-посредники, использующие другие кодировки символов, могут транслировать эти escape-последовательности в последовательности байтов кодировки. Процессоры-посредники не обязаны, с другой стороны, изменять escape-последовательности, отменяющие специальные значения символов ASCII.
Соответствующие ПА обязаны корректно отображать в Unicode все символы любой кодировки, которые они могут распознать (или они обязаны вести себя так, как будто они это делают).
Например, документ, передаваемый как ISO-8859-1 (Latin-1), не может содержать напрямую греческую букву: "??????" (по-гречески: "kouros"), которая должна быть записана как "\3BA\3BF\3C5\3C1\3BF\3C2".
Примечание.
В HTML 4.0 числовые мнемоники интерпретируются в значениях атрибута "style", но не в содержимом элемента STYLE. Из-за этой асимметрии мы рекомендуем, чтобы авторы использовали escape-механизм CSS вместо числовых мнемоник и для атрибута "style", и для элемента STYLE. Например, мы рекомендуем:
<SPAN style="voice-family: D\FC rst">...</SPAN>
вместо:
<SPAN style="voice-family: Dürst">...</SPAN>
Модель адресации CSS
Селекторы и свойства CSS2 позволяют обращаться из таблиц стилей к следующим частям документа или ПАгента:
Элементам дерева документа и определённым их взаимоотношениям (см. раздел селекторы).
Атрибутам элементов дерева документа и значениям этих атрибутов (см. раздел селекторы атрибутов).
Некоторым частям содержимого элемента (см. псевдоэлементы :first-line и :first-letter.
Элементам дерева документа, находящимся в определённом состоянии (см. раздел псевдоклассы).
Некоторым аспектам канвы при выводе документа.
Некоторой системной информации (см. раздел интерфейс пользователя).
Модель бокса
Содержание
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 описывает прямоугольный бокс, который генерируется для элементов дерева документа и располагается в соответствии с моделью визуального форматирования. Страничный бокс это особый вид бокса, детально описанный в разделе страничный носитель.
Модель процесса CSS
Этот раздел представляет одну из возможных моделей того, как работают ПА, поддерживающие CSS. Это лишь концептуальная модель; конкретные реализации могут варьироваться.
ПА в этой модели обрабатывает источник, выполняя следующие шаги:
Разбирает документ-источник и создаёт дерево документа.
Идентифицирует тип носителя.
Запрашивает все таблицы стилей, ассоциированные с документом, которые специфицированы для целевого типа носителя.
Помечает каждый элемент дерева документа назначением одиночного значения каждому свойству, которое может быть применено к целевому типу носителя. Значения свойств устанавливаются в соответствии с механизмами, описанными в разделе каскадирование и наследование.
Частично расчёт значений зависит от алгоритма форматирования, соответствующего целевому типу носителя. Например, если целевой носитель - это экран, то ПА применяют модель визуального форматирования. Если целевой носитель - это страница для печати, то ПА применяют страничную модель. Если целевой носитель - это устройство звукового вывода (например, речевой синтезатор), то ПА применяют модель звукового представления.
На базе размеченного дерева документа генерирует структуру форматирования. Часто структура форматирования напоминает дерево документа, но может также и слегка отличаться, особенно если авторы используют псевдоэлементы и генерируемое содержимое. Во-первых, структура форматирования вообще не должна иметь "очертания дерева" - природа структуры зависит от реализации. Во-вторых, структура форматирования может содержать информации больше или меньше, чем дерево документа. Например, если элемент дерева документа имеет значение 'none' для свойства 'display', то этот элемент не будет ничего генерировать в структуре форматирования. Элемент list, с другой стороны, может генерировать больше информации в структуре форматирования: содержимое элемента list и стилевую информацию (например, изображение для маркёра).
Обратите внимание, что ПА CSS не изменяет дерево документа на этом этапе. И особенно, что содержимое, генерируемое в связи с таблицы стилей, не возвращается процессору языка документа (например, для повторного разбора).
Переносит структуру форматирования на целевой носитель (например, печатает результат, отображает его на экране, представляет в виде речевого потока и т.д.).
Шаг 1 находится вне пределов действия данной спецификации (см., например, [DOM]).
Шаги 2-5 адресуются основным объёмом данной спецификации.
Шаг 6 находится вне пределов действия данной спецификации.
Модель раздельных рамок
| Значение: | <length> <length>? | inherit |
| Начальное: | 0 |
| Применяется: | к элементам 'table' и 'inline-table' |
| Наследуется: | да |
| Процентное: | N/A |
| Носитель: | визуальный |
Размеры специфицируют расстояние, разделяющее рамки смежных таблиц. Если специфицирован один размер, он задаёт и горизонтальное, и вертикальное расстояние. Если специфицированы два, то первый задаёт расстояние по горизонтали, второй - по вертикали. Значения размеров не могут быть отрицательными.
В этой модели каждая ячейка имеет собственную рамку. Свойство 'border-spacing' специфицирует расстояние между рамками смежных ячеек. Это пространство заполняется фоном элемента таблицы. Ряды, группы рядов, столбцы и группы столбцов не могут иметь рамок (т.е. ПА обязаны игнорировать свойства рамки в таких элементах).
Пример(ы):
Таблица на рисунке может быть результатом такой таблицы стилей:
TABLE { border: outset 10pt; border-collapse: separate; border-spacing: 15pt } TD { border: inset 5pt } TD.special { border: inset 10pt } /* Верхняя левая ячейка */
Таблица с 'border-spacing', установленным в значение размера. Заметьте, что у каждой ячейки имеется своя собственная рамка, а таблица также имеет отдельную рамку.
Модель сжимающихся рамок
В модели сжимающихся рамок имеется возможность специфицировать рамки, окружающие все или часть ячеек, рядов, групп рядов, столбцов и групп столбцов. Рамки для атрибута HTML "rule" могут быть специфицированы таким способом.
Рамки центрируются по линиям сетки между ячейками. ПА обязаны находить подходящее правило для округления при наличии нестандартного числа абстрактных единиц измерения (пикселов экрана, точек принтера).
Диаграмма внизу показывает, как взаимодействуют ширина таблицы, рамок, заполнение и ширина ячеек. Их отношения задаются следующим уравнением, которое действует для каждого ряда таблицы:
row-width = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 +...+ padding-rightn + (0.5 * border-widthn)
Здесь n это число ячеек в ряду, а border-widthi относится к рамке между ячейками i и i + 1. Учтите только, что лишь половина из двух внешних рамок учитывается в ширине таблицы; другая половина этих двух рамок находится в области полей.
Схема показывает размеры ширины ячеек и рамок и заполнение ячеек.
Обратите внимание, что в этой модели ширина таблицы включает половину ширины рамки таблицы. Также в этой модели таблица не имеет заполнения (но имеет поля).
Модель визуального форматирования
Содержание
9.1 Введение
9.1.1 Порт просмотра
9.1.2 Содержащие блоки
9.2 Управление генерацией боксов
9.2.1 Элементы уровня блока и боксы блока
Анонимные боксы блока
9.2.2 Инлайн-элементы и инлайн-боксы
Анонимные инлайн-боксы
9.2.3 Боксы compact
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.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 Габариты и полугабариты
Monospace
Единственным критерием для моноширинных шрифтов служит то, что все глифы имеют одну и ту же фиксированную ширину. (Некоторые виды письма, такие как арабское, выглядят при этом необычно). Вид напоминает шрифт пишущей машинки, и эточасто используется для выделения образцов компьютерного кода. Примеры моноширинных шрифтов:
| Латинские | Courier, MS Courier New, Prestige, Everson Mono |
| Греческие | MS Courier New, Everson Mono |
| Кириллические | ER Kurier, Everson Mono |
| Японские | Osaka Monospaced |
| Чероки | Everson Mono |
Наборы правил, блоки объявлений и селекторы
Набор правил (называемый также "правило") состоит из селектора с последующим блоком объявлений.
Блок объявлений (называемый также в последующем тексте {}-блоком) начинается с левой фигурной скобки ({) и заканчивается парной правой скобкой (}). Между ними может находиться список из 0 или более разделённых точкой с запятой (;) объявлений.
Селектор (см. также раздел Селекторы) состоит из чего-либо, предшествующего первой скобке (но не включая) ({). Селектор всегда идёт вместе с {}-блоком. Если ПА не может разобрать селектор (т.е. если он неверен в CSS2), он обязан также игнорировать и {}-блок.
В CSS2 запятая (,) имеет специальное значение в селекторах. Однако, поскольку не известно, примет ли запятая иные значения в последующих версиях CSS, весь оператор должен быть проигнорирован, если где-либо в селекторе имеется ошибка, даже если остальная часть селектора выглядит как соответствующая CSS2.
Пример неверного использования:
Например, поскольку "&" это неверная лексема в селекторе CSS2, ПА 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 }
Начальное/Initial
Специфицирует начальное значение свойства. Если свойство наследуется, это значение, данное корневому элементу дерева документа. См. в разделе Каскад
информацию о взаимодействии между значениями - начальными, унаследованными и специфицированными в таблице стилей.
"Наилучшие" разрывы страниц
CSS2 не определяет, какой из наборов допустимых разрывов страниц обязан использоваться; CSS2 не запрещает ПАгенту делать разрыв в любой возможной точке разрыва или не делать разрывов вообще. Но CSS2 рекомендует, чтобы ПА следовали следующей эвристике (признавая наличие некоторых противоречий):
Делать разрывы как можно реже. Делать все страницы, не оканчивающиеся форсированным разрывом, одинаковой высоты. Исключить разрывы внутри блока, имеющего рамку. Исключить разрывы внутри таблицы. Исключить разрывы внутри всплывающего элемента.
Пример(ы):
Предположим, например, что таблица стилей содержит 'orphans : 4', 'widows : 2', и имеется 20 свободных строк (строчных боксов) внизу текущей страницы:
Если параграф в конце текущей страницы содержит 20 строк или менее, он должен быть размещён на текущей странице.
Если параграф содержит 21 или 22 строк, вторая часть параграфа обязана не нарушать работы 'widows', и, следовательно, вторая часть обязана содержать точно две строки.
Если параграф содержит 23 строки или более, первая часть должна содержать 20 строк, а вторая часть - остальные строки.
Теперь предположим, что 'orphans'
- '10', 'widows'
- '20', и имеется 8 свободных строк внизу текущей страницы:
Ели параграф в конце текущей страницы содержит 8 строк или менее, он должен быть размещён на текущей странице.
Если параграф содержит 9 строки или более, он не может быть разделён (что могло бы нарушить работу orphans), следовательно, он должен быть перемещён как блок на следующую страницу.
Направление текста: свойства 'direction' и 'unicode-bidi'
Символы в некоторых видах письма записываются справа налево. В некоторых документах, особенно на арабском и еврейском, и в некоторых контекстах смешивания языков текст в одиночном (визуально отображаемом) блоке может появляться со смешанным направлением письма. Этот феномен называется bidirectionality\двунаправленность, или сокращённо - "bidi".
Стандарт Unicode ([UNICODE], раздел 3.11) даёт сложный алгоритм определения направления текста. Этот алгоритм состоит из подразумеваемой части, базирующейся на свойствах символов, а также явной, контролирующей внедрения и переопределения. CSS2 обращается к этому алгоритму для достижения соответствующего двунаправленного отображения. Свойства 'direction' и 'unicode-bidi' позволяют авторам специфицировать, как элементы и атрибуты языка документа отображаются в этот алгоритм.
Если документ содержит символы справа-налево и если ПА отображает эти символы соответствующими глифами (а не произвольно замещающими, такими как знак кавычки, 16-ричный код, чёрный бокс и т.п.), то ПА обязан применять двунаправленный алгоритм. Это кажущееся односторонним требование отражает тот факт, что, хотя не каждый еврейский или арабский документ содержит текст разных направлений, велика вероятность того, что эти документы могут содержать текст слева-направо (например, числа, текст из других языков).
Поскольку направление текста зависит от структуры и семантики документа, эти свойства должны в большинстве случаев использоваться только дизайнерами описания типа документа (ОТД) или авторами специальных документов. Если таблица стилей по умолчанию специфицирует эти свойства, то авторы и пользователи не должны специфицировать правила для их переопределения. Типичным исключением будет переопределение bidi-поведения в ПА, если этот ПА производит транслитерацию идиша (обычно записанного буквами иврита) на латиницу по запросу пользователя.
Спецификация HTML 4.0 ([HTML40], раздел 8.2) определяет двунаправленное поведение для элементов HTML. Соответствующие HTML ПАгенты могут поэтому игнорировать свойства 'direction' и 'unicode-bidi' в авторских и пользовательских таблицах стилей. Правила таблиц стилей, которые необходимо применять для bidi-поведения и которые специфицированы в [HTML40], даны в примере таблицы стилей. Спецификация HTML 4.0 содержит также дополнительную информацию о вопросах двунаправленности.
'direction'
| Значение: | ltr | rtl | inherit |
| Начальное: | ltr |
| Применяется: | ко всем элементам, но см. текст |
| Наследуется: | да |
| Процентное: | N/A |
| Носитель: | визуальный |
и позицию неполной последней строки блока в том случае, если 'text-align: justify'.
Значения этого свойства имеют следующий смысл:
ltr Направление слева направо. rtl
Справа налево.
Чтобы свойство 'direction'
работало в элементах инлайн-уровня, значение свойства 'unicode-bidi' обязано быть 'embed' или 'override'.
Примечание. Свойство 'direction', специфицированное для элементов столбца таблицы, не наследуется ячейками столбца, поскольку столбцы не существуют в дереве документа. Таким образом, CSS не может использовать правила наследования атрибута "dir", описанные в [HTML40], в разделе 11.3.2.1.
'unicode-bidi'
| Значение: | normal | embed | bidi-override | inherit |
| Начальное: | normal |
| Применяется: | ко всем элементам, но см. текст |
| Наследуется: | нет |
| Процентное: | 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') в начале элемента и a PDF (U+202C) в конце элемента.
Окончательный порядок символов в каждом элементе уровня блока - такой, как если бы bidi-код управления был добавлен так, как описано выше, разметка была бы вырезана, а результирующая последовательность символов - передана в двунаправленный алгоритм Unicode в обычный текст, который производил бы те же самые разрывы строк, что и стилизованный текст. В этом процессе нетекстуальные объекты, такие как изображения, рассматриваются как нейтральные символы, если только их свойство 'unicode-bidi' не имеет значений, отличных от 'normal', тогда они рассматриваются как полужирные (strong) символы в 'direction', специфицированном для элемента.
Пожалуйста, обратите внимание, что, для того чтобы иметь возможность разместить инлайн-боксы в одном направлении (все слева-направо или все справа-налево), может понадобиться создание дополнительных инлайн-боксов (включая анонимные инлайн-боксы), и понадобится разделить и переупорядочить некоторые инлайн-боксы до размещения.
Поскольку алгоритм Unicode имеет предел - 15 уровней внедрения, лучше не использовать 'unicode-bidi' со значениями, отличными от 'normal', если отсутствуют подходящие. Значение 'inherit' должно использоваться особенно осторожно. Однако для элементов, которые обычно предполагается отображать как блоки, установка 'unicode-bidi: embed' предпочтительнее для удержания элементов вместе в том случае, когда дисплей изменяется на инлайн (см. пример ниже).
В следующем примере показан документ XML с двунаправленным текстом. Он иллюстрирует важный принцип дизайна: дизайнеры ОТД должны принимать в расчёт bidi и в собственно языке (элементы и атрибуты), и в сопровождающих таблицах стилей. Таблицы стилей должны быть разработаны так, чтобы правила bidi были отделены от других правил стиля. Правила bidi не должны переопределяться другими таблицами стилей, чтобы сохранить поведение bidi языка и ОТД.
Пример(ы):
Здесь буквы нижнего регистра присущи символам слева-направо, а буквы верхнего регистра - символам справа-налево:
<HEBREW> <PAR>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</PAR> <PAR>HEBREW6 <EMPH>HEBREW7</EMPH> HEBREW8</PAR> </HEBREW> <ENGLISH> <PAR>english9 english10 english11 HEBREW12 HEBREW13</PAR> <PAR>english14 english15 english16</PAR> <PAR>english17 <HE-QUO>HEBREW18 english19 HEBREW20</HE-QUO></PAR> </ENGLISH>
Поскольку это - XML, таблица стилей отвечает за направление письма.
Это таблица стилей:
/* Правила для bidi */ HEBREW, HE-QUO {direction: rtl; unicode-bidi: embed} ENGLISH {direction: ltr; unicode-bidi: embed}
/* Правила для представления */ HEBREW, ENGLISH, PAR {display: block} EMPH {font-weight: bold}
Элемент HEBREW это блок с базовым направлением справа-налево, элемент ENGLISH это блок с базовым направлением слева-направо. PARы - это блоки, наследующие базовое направление от своих родителей. Таким образом, первые два PARа готовы начаться справа сверху, а последние три готовы начаться слева сверху. Обратите внимание, пожалуйста, что HEBREW и ENGLISH выбраны как имена элементов лишь для ясности; обычно имена элементов должны относиться к структуре, без ссылок на языки.
Элемент EMPH - уровня инлайн, и, поскольку его значение для 'unicode-bidi' - 'normal' (начальное значение), он не оказывает воздействия на порядок расположения текста. Элемент HE-QUO, напротив, создаёт внедрение.
Если длина строки достаточно большая, форматирование текста может выглядеть примерно так:
5WERBEH 4WERBEH english3 2WERBEH 1WERBEH
8WERBEH 7WERBEH 6WERBEH
english9 english10 english11 13WERBEH 12WERBEH
english14 english15 english16
english17 20WERBEH english19 18WERBEH
Заметьте, что внедрение HE-QUO заставляет HEBREW18 находиться справа от english19.
Если строки должны быть разбиты, то выглядеть будет примерно так:
2WERBEH 1WERBEH -EH 4WERBEH english3 5WERB
-EH 7WERBEH 6WERBEH 8WERB
english9 english10 en- glish11 12WERBEH 13WERBEH
english14 english15 english16
english17 18WERBEH 20WERBEH english19
Поскольку HEBREW18 обязан быть прочитан до english19, он находится в строке над english19. Простой разрыв строки из предыдущего форматирования не должен сработать.
Заметьте также, что первый слог из english19 может войти на предыдущую строку, но перенос слов слева-направо в контекст справа-налево и наоборот обычно подавляется, чтобы исключить отображение знака переноса в середине строки.
Наследование
Некоторые значения наследуются потомками элемента в дереве документа. Каждое свойство определяет, наследуется оно или нет.
Предположим, имеется элемент H1 с выделенным элементом (EM) внутри:
<H1>The headline <EM>is</EM> important!</H1>
Если цвет элементу EM не назначен, выделенное "is" будет наследовать цвет элемента-предка, и, поскольку H1 имеет голубой цвет, элемент EM будет, соответственно, голубым.
Чтобы установить свойство стиля "по умолчанию" в документе, авторы могут установить это свойство в корне дерева документа. В HTML, например, эту функцию могут выполнить элементы HTML или BODY. Заметьте, что это будет работать, даже если автор опустит тэг BODY в тексте HTML, поскольку разборщик HTML вставит отсутствующие тэги.
Пример(ы):
Например, поскольку свойство 'color'
наследуется, все потомки элемента BODY будут наследовать цвет 'black':
BODY { color: black; }
Специфицированные процентные значения не наследуются, а вычисленные значения - наследуются.
Пример(ы):
В данной таблице:
BODY { font-size: 10pt } H1 { font-size: 120% }
и в этом фрагменте документа:
<BODY> <H1>A <EM>large</EM> heading</H1> </BODY>
свойство 'font-size' элемента H1 будет иметь вычисленное значение'12pt' (120% от 10pt, значения-предка). Поскольку значение свойства 'font-size' наследуется, элемент EM также получит вычисленное значение '12pt'. Если ПА не имеет доступного шрифта в 12pt, реальное значение 'font-size'
и для H1, и для EM может быть, например, '11pt'.
Наследуется/Inherited
Обозначает, может ли свойство наследоваться от элемента-предка. См. в разделе Каскад информацию о взаимодействии между значениями - начальными, унаследованными и специфицированными в таблице стилей.
Нижняя базовая линия
Задаёт позицию нижней базовой линии в em-квадрате. Нижняя базовая линия используется в латинском, греческом и кириллическом письме для выравнивания, так же как верхняя базовая линия используется для выравнивания в языках, происходящих от санскрита.
Нормальное расположение
Боксы при нормальном обтекании относятся к контексту форматирования, который может быть уровня блока и инлайн, но не тем и другим одновременно. Боксы блока находятся в контексте форматирования блока. Инлайн-боксы находятся в контексте инлайн-форматирования.
Рассмотрим следующие объявления CSS для outer
и inner, которые не изменяют нормального расположения боксов:
#outer { color: red } #inner { color: blue }
Элемент P содержит всё инлайн-содержимое: анонимный инлайн-текст и два элемента SPAN. Следовательно, всё содержимое будет расположено вне инлайн-контекста форматирования внутри содержащего блока, устанавливаемого элементом P, и получится что-то подобное:
О спецификации CSS
Содержание
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 Авторские права
Объявления и свойства
Объявление может быть пустым или состоять из свойства с последующими двоеточием (:) и значением. Вокруг каждого из них могут быть пробелы.
В зависимости от способа работы селектора, несколько объявлений для одного селектора могут быть упорядочены точкой с запятой (;), разделяющей группы.
Пример(ы):
Таким образом, следующие правила:
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 }
Свойства это идентификаторы. Между ними могут находиться любые символы, кроме скобок (()), квадратных скобок ([ ]) и фигурных скобок ({ }), которые обязаны всегда использоваться в паре, а точка с запятой вне строки обязана вводиться с использованием escape-последовательности. Угловые, квадратные и круглые скобки могут вкладываться. Внутри кавычек символы разбираются как строка.
Синтаксис значений специфицируется отдельно для каждого свойства, но, в любом случае, значения выводятся из идентификаторов, строк, чисел, размеров, процентов, URI, цветов, углов, времени и частот.
ПА обязан игнорировать объявление с неверным названием свойства или неверным значением. Каждое свойство CSS2 имеет свой собственный синтаксис и семантические ограничения для принимаемых значений.
Пример неверного использования:
Предположим, что разборщик 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 }
Обрамление пустых ячеек: свойство 'empty-cells'
| Значение: | show | hide | inherit |
| Начальное: | show |
| Применяется: | к элементам 'table-cell' |
| Наследуется: | да |
| Процентное: | N/A |
| Носитель: | визуальный |
В модели раздельных рамок данное свойство управляет представлением рамок вокруг ячеек, не имеющих видимого содержимого. Пустые ячейки и ячейки со свойством 'visibility', установленным в 'hidden', рассматриваются как не имеющие видимого содержимого. Видимое содержимое включает " " и другие пробелы, за исключением ASCII-символов CR ("\0D"), LF ("\0A"), tab ("\09"), и space ("\20").
Если это свойство имеет значение 'show', рамки прорисовываются вокруг пустых ячеек (как вокруг нормальных ячеек).
Значение 'hide' указывает, что рамки вокруг пустых ячеек не будут прорисованы. Следовательно, если все ячейки в ряду имеют значение 'hide' и не имеют видимого содержимого, весь ряд ведёт себя так, как если бы он имел 'display: none'.
Пример(ы):
Следующее правило вызывает прорисовку рамок вокруг всех ячеек:
TABLE { empty-cells: show }
Общие (родовые) семейства шрифтов
Общие семейства шрифтов являются компромиссным механизмом, служащим для сохранения целей некоторых авторов таблиц стилей в том (худшем) случае, когда ни один из специфицированных шрифтов не может быть выбран. Для оптимального типографского контроля в таблицах стилей нужно использовать особые именованные шрифты.
Все пять общих семейств шрифтов определены для использования во всех реализациях CSS (эти семейства не обязательно должны отображаться в пять различных шрифтов). ПА должны предоставлять осмысленный выбор по умолчанию для шрифтов общих семейств, которые (шрифты) отражают характеристики каждого семейства, допустимые в пределах основных технологий.
Рекомендуется, чтобы ПА позволяли пользователям сделать альтернативный выбор общих шрифтов.
Обтекание бокса
Теперь рассмотрим эффект от всплывания
текста элемента inner вправо при использовании следующих правил:
#outer { color: red } #inner { float: right; width: 130px; color: blue }
Текст нормально расположен до бокса inner, который вытолкнут из расположения и всплыл к правому полю (его 'width' установлено явно). Строчные боксы слева от поплавка укорочены, и оставшийся текст документа всплывает в них.
Чтобы увидеть действие свойства 'clear', мы добавим в пример родственные
элементы:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Сравнение схем позиционирования II</TITLE> </HEAD> <BODY> <P>Beginning of body contents. <SPAN id=outer> Start of outer contents. <SPAN id=inner> Inner contents.</SPAN> <SPAN id=sibling> Sibling contents.</SPAN> End of outer contents.</SPAN> End of body contents. </P> </BODY> </HTML>
Следующие правила:
#inner { float: right; width: 130px; color: blue } #sibling { color: red }
заставляют бокс inner всплывать вправо, как и раньше, а остальной текст документа - всплывать в незанятом пространстве:
Однако, если свойство 'clear'
родственного элемента установлено в 'right' (т.е. генерируемый родственный бокс не займёт позицию справа от всплывающего бокса), родственное содержимое начнёт располагаться ниже поплавка:
#inner { float: right; width: 130px; color: blue } #sibling { clear: right; color: red }
Опечатки и ошибки
Список ошибок и опечаток, найденных в этой спецификации (в английской версии), находится в http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html.
Об ошибках, замеченных Вами в этом документе, сообщайте, пожалуйста, по адресам css2-editors@w3.org
и a_pyramidin@yahoo.com
(переводчик русской версии).
Авторские права © 1998 W3C (MIT, INRIA, Keio ), Все Права Зарезервированы.
Операторы
Таблица стилей любой версии CSS состоит из списка операторов
(см. грамматику выше). Есть два вида операторов: at-правила и наборы правил. Вокруг операторов могут быть пробелы.
В данной спецификации выражения "непосредственно перед" или "сразу после" означают отсутствие пробелов или комментариев.
Описание шрифта и @font-face
Описание шрифта является мостом между авторской спецификацией шрифта и данными шрифта, которые представляют собой данные, необходимые для форматирования текста и для представления абстрактных глифов, для которых карта символов в действительности является упорядоченным контуром или растром. Шрифты имеют ссылку из свойств таблицы стилей.
Описания шрифтов добавляются к БД шрифтов и используются затем для выбора соответствующих данных шрифта. Описание шрифта содержит дескрипторы, такие как размещение данных шрифта в Web, и описание этих данных шрифта. Дескрипторы шрифта необходимы также при выборе свойств шрифта из таблицы стилей для определённых данных шрифта. Степень детализации описания шрифта может варьироваться от имени шрифта до списка ширины глифов.
Дескрипторы шрифта можно классифицировать по трём типам:
служащие связкой между использованием шрифта в CSS и описанием шрифта (эти дескрипторы имеют те же имена, что и соответствующие свойства шрифта CSS),
URI для локализации данных шрифта,
для характеристики шрифта, являющиеся связкой между описанием шрифта и данными шрифта.
Все описания шрифта специфицируются 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>Font test</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', и, если совпадение не будет найдено, будет использоваться специфичный для данного ПА резервный шрифт serif (который должен существовать).
ПА, реализующий CSS2, сначала проверяет правила @font-face для поиска описания шрифта, определённого как 'Robson Celtic'. Данный пример содержит подходящее правило. Хотя в этом правиле и не содержится много данных шрифта, в нём есть URI, где можно запросить шрифт для представления данного документа. Загруженные шрифты не должны становиться доступными для других приложений. Если не найдено совпадение для @font-face, ПА попытается выполнить сравнение как ПА с CSS1.
Обратите внимание, что, если шрифт 'Robson Celtic' был
установлен на клиентской системе, это может вызвать добавление пользовательским агентом входа в БД шрифтов для установленной копии, как описано в разделе алгоритм совпадения шрифта. Установленная копия получит совпадение до загружаемого шрифта (в предыдущем примере).
Реализации CSS1, не понимающие правило @font-face, вычислят открывающую фигурную скобку и будут игнорировать
всё до появления закрывающей скобки. Это at-правило соответствует требованию вперёд-совместимого разбора CSS. Разборщики могут игнорировать эти правила без возникновения ошибки.
Разделение дескрипторов шрифта и данных шрифта даёт возможность выполнит выбор и/или замену шрифта. Защита данных и ограничения репликации для дескрипторов шрифта могут быть менее жёсткими, чем для полных данных шрифта.
Таким образом, возможно установить определение шрифта локально или как минимум иметь его в локальном кэше, если он появляется в обычно используемой таблице стилей; это может не потребовать доступа к полному определению шрифта в Web больше, чем однократно, для именованного шрифта.
Если дескриптор шрифта дублируется, последний появившийся дескриптор используется, а остальное должно игнорироваться.
Также любые дескрипторы, которые не распознаются или не используются ПА, должны игнорироваться. Последующие версии CSS могут предоставить дополнительные дескрипторы для лучшего подбора, замены или синтеза шрифта.
Определение "содержащего блока"
Позиция и размер бокса(ов) элемента иногда вычисляются относительно определённого прямоугольника, называемого содержащий блок элемента.
Содержащий блок элемента определяется так:
Содержащий блок (называемый начальным содержащим блоком), в котором находится корневой элемент, выбирается пользовательским агентом (ПА).
Для других элементов, если только элемент не позиционирован абсолютно, содержащий блок формируется краем содержимого бокса ближайшего предка уровня блока.
Если элемент имеет 'position: fixed', то содержащий блок устанавливается портом просмотра. Если элемент имеет 'position: absolute', то содержащий блок устанавливается ближайшим предком с 'position', отличным от 'static', следующим образом:
Если предок - уровня блока, содержащий блок формируется краем заполнения
предка. Если предок - инлайн-уровня, содержащий блок зависит от свойства 'direction' предка:
Если 'direction'
- 'ltr', верхний и левый края содержащего блока являются верхним и левым краями первого бокса, генерируемого предком, а нижний и правый края являются нижним и правым краями содержимого последнего бокса предка.
Если 'direction'
- 'rtl', верхний и правый края содержащего блока являются верхним и правым краями первого бокса, генерируемого предком, а нижний и левый края являются нижним и левым краями содержимого последнего бокса предка.
Если такого предка нет, край содержимого бокса корневого элемента устанавливает содержащий блок.
Пример(ы):
Содержащие блоки (СБ) без позиционирования в этом документе:
<HTML> <HEAD> <TITLE>Illustration of containing blocks</TITLE> </HEAD> <BODY id="body"> <DIV id="div1"> <P id="p1">This is text in the first paragraph...</P> <P id="p2">This is text <EM id="em1"> in the <STRONG id="strong1">second</STRONG> paragraph.</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 |
Определения
В этом разделе мы начинаем формальную спецификацию CSS2 с соглашения между авторами, пользователями и исполнителями.
Ключевые слова "ОБЯЗАН", "НЕ ОБЯЗАН", "НЕОБХОДИМ", "БУДЕТ", "НЕ БУДЕТ", "ДОЛЖЕН", "НЕ ДОЛЖЕН", "МОЖЕТ", "РЕКОМЕНДУЕТСЯ" И "НЕОБЯЗАТЕЛЕН" в этом документе интерпретируются так, как описано в [RFC2119].
Однако, для удобства чтения эти слова не употребляются в этой спецификации со всеми буквами в верхнем регистре.
Время от времени авторы этой спецификации дают практические рекомендации для авторов и пользовательских агентов (ПА). Эти рекомендации не являются нормативными и соответствие с этой спецификацией не зависит от их реализации. Эти рекомендации содержат выражения типа: "мы рекомендуем ...", "эта спецификация рекомендует ...", или другие подобные конструкции.
Таблица стилей
Набор операторов, специфицирующих представление документа.
Таблицы стилей могут иметь три различных источника: автор, пользователь и ПА. Взаимодействие этих источников описано в разделе Каскадирование и наследование.
Действующие таблицы стилей
Статус таблицы стилей зависит от уровня CSS, используемого в таблице стилей. Все действующие таблицы стилей CSS1 являются действующими и в CSS2. Однако некоторые изменения по сравнению с CSS1 указывают, что некоторые таблицы стилей 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) и может включать объекты, вставленные, явно или неявно, таблицей стилей: маркировка или нумерация списков и т.п.
Дерево документа
Дерево элементов, кодированных в документе-источнике. Каждый элемент в этом дереве имеет только одного предка, за исключением элемента root, который предков не имеет.
Дочерний элемент
Элемент А называется дочерним элементом элемента В, если только В является родителем А.
Потомок
Элемент А называется потомком элемента В, если (1) А является дочерним по отношению к В, или (2) если А является дочерним относительно элемента С, который является потомком В.
Предок (родительский элемент)
Элемент А называется предком элемента В, если, и только если, В является потомком А.
Родственник
Элемент А называется родственником элемента В, если, и только если, В и А имеют одного общего предка.
Элемент А является предшествующим родственником, если появляется перед В в дереве документа.
Элемент В является последующим родственником, если появляется после А в дереве документа.
Предшествующий элемент
Элемент А называется предшествующим элементу В, если, и только если, (1) А является предком В или (2) А является предшествующим родственником В.
Последующий элемент
Элемент А называется последующим элементом для В, если, и только если, В является предшествующим элементом для А.
АвторТот, кто пишет документы и ассоциированные таблицы стилей.
Авторская утилита генерирует документы и ассоциированные таблицы стилей.
Пользователь Тот, кто взаимодействует с пользовательским агентом (ПА) для просмотра, прослушивания или другого использования документа и ассоциированной таблицы стилей. Пользователь может предоставлять персональную таблицу стилей, которая кодирует персональные установки-предпочтения.
Пользовательский агент (ПА)
Это какая-либо программа, интерпретирующая документ, написанный на определённом языке документов, и ассоциированную с ним таблицу стилей в соответствии с терминами данной спецификации. ПА может отображать документ, "читать" его вслух, распечатывать его, конвертировать его в другой формат и т.п.
Это пример документа-источника, кодированного в HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <TITLE>My home page</TITLE> <BODY> <H1>My home page</H1> <P>Welcome to my home page! Let me tell you about my favorite composers: <UL> <LI> Elvis Costello <LI> Johannes Brahms <LI> Georges Brassens </UL> </BODY> </HTML>
Это дерево данного документа:
В соответствии с определением HTML, элементы HEAD будут вставлены во время разбора и станут частью дерева документа, даже если тэги HEAD отсутствовали в документе-источнике. Таким же образом, разборщик "знает", где заканчиваются элементы P и LI, даже если они не имеют тэгов </P> и </LI> в источнике.
Определения свойств CSS
Каждое определение свойства CSS начинается общей ключевой информацией:
| Значение: | действительные значения & синтаксис |
| Начальное: | начальное значение |
| Применяется: | к соответствующим элементам |
| Наследуется: | если свойство наследуется |
| Процентное: | интерпретация процентных значений |
| Носитель: | к каким группам носителей применяется свойство |
Ошибочные условия
В общем, данный документ не специфицирует для ПА поведение при обработке ошибок (например, как ПА ведут себя, если не могут найти ресурс, указанный в URI).
Однако ПА обязаны соблюдать правила обработки ошибок разбора.
Поскольку ПА могут различаться в способах обработки ошибочных условий, авторы и пользователи не обязаны полагаться на специфическое поведение при обработке ошибок.
Относительное позиционирование
После того, как бокс расположен в соответствии с нормальным расположением, он может быть сдвинут относительно этой позиции. Это называется относительным позиционированием. Смещение бокса (B1) таким способом не окажет воздействия на бокс (B2), следующий за ним: B2 получит такую позицию, как будто B1 не смещён и B2 не перемещается после применения смещения B1. Это предполагает, что относительное позиционирование может вызывать взаимное перекрытие боксов.
Относительно позиционированные боксы сохраняют свои нормальные размеры и прорисовку, включая разрывы строк и заполнение, первоначально зарезервированные за ними. Относительно позиционированный бокс устанавливает новый содержащий блок для нормальной прорисовки дочерних и позиционированных потомков.
Относительно позиционированный бокс генерируется, когда свойство 'position' элемента имеет значение 'relative'. Смещение специфицируется свойствами 'top', 'bottom', 'left' и 'right'.
Динамическое перемещение боксов, позиционированных относительно, может создавать эффекты анимации в среде скриптов (см. также свойство 'visibility'). Относительное позиционирование можно использовать также как общую форму под- и надиндексов, за исключением того, что высота строки не устанавливается автоматически при рассмотрении позиционирования. См. дополнительно описание вычисления высоты строки.
Примеры относительного позиционирования есть в разделе Сравнение нормального позиционирования, поплавков и абсолютного позиционирования.
Чтобы увидеть действие относительного позиционирования, мы специфицируем:
#outer { position: relative; top: -12px; color: red } #inner { position: relative; top: 12px; color: blue }
Текст расположен нормально до элемента outer. Текст outer затем всплывает в своей нормальной позиции и размерах в конце строки 1. Затем инлайн-боксы, содержащие текст (распределённый на три строки), сдвигаются вместе на '-12px' (вверх).
Содержание inner
как дочернего от outer было бы нормально расположено сразу после слов "of outer contents" (на строке 1.5). Однако содержимое inner само смещено относительно содержимого outer на '12px' (вниз), обратно на свою первоначальную позицию на строке 2.
Обратите внимание, что на содержимое, следующее после outer, относительное позиционирование outer не влияет.
Заметьте также, что, имея смещение для outer '-24px', текст outer и текст тела могут быть перекрыты.
Отображение значений ширины шрифтов в имена шрифтов
Значения свойства 'font-weight' задаются по цифровой шкале, где значение '400' (или 'normal') соответствует шрифту "normal" данного семейства шрифтов. Название веса, ассоциированное с этим шрифтом, обычно: Book, Regular, Roman, Normal или иногда Medium.
Ассоциирование других весов семейства с числовыми значениями весов предполагается только для сохранения порядка расположения весов внутри данного семейства. ПА обязаны отображать имена в значения тем способом, который сохраняет визуальный порядок; тип шрифта, отображаемого в значение, не должен быть легче, чем типы, отображаемые в меньшие значения. Нет никаких гарантий того, как ПА будет отображать шрифты семейства в значения веса. Однако следующие указания помогут определить, как такие назначения выполняются в типичных случаях:
Если семейство шрифтов уже использует шкалу из 9 цифровых значений (как в OpenType,
например), весы шрифтов должны отображаться напрямую.
Если оба типа помечены как Medium и один из Book, Regular, Roman или Normal, тогда Medium устанавливается в '500'.
Шрифт, помеченный "Bold", часто соответствует значению веса '700'.
Если в семействе имеется менее 9 весов, алгоритм по умолчанию для заполнения "дыр" следующий. Если не назначено '500', оно назначается тому же шрифту, что и с '400'. Если не назначено любое из значений: '600', '700', '800' или '900', оно назначается тому же шрифту, который имеет ближайшее значение более тёмного ключевого слова, если оно имеется, в противном случае - тому, который имеет ближайшее значение более светлого. Если не назначено любое из значений: '300', '200' или '100', оно назначается тому же шрифту, который имеет ближайшее значение более светлого ключевого слова, если оно имеется, в противном случае - тому, который имеет ближайшее значение более тёмного.
Нет никаких гарантий, что в наличии будет более тёмный шрифт для каждого значения 'font-weight'; например, некоторые шрифты могут иметь только разновидности normal и bold, другие могут иметь 8 разновидностей различного веса.
Следующие два примера показывают типичные случаи отображения.
Предположим, что в семействе "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" | 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) |
Отступы: свойство 'text-indent'
| Значение: | <length> | <percentage> | inherit |
| Начальное: | 0 |
| Применяется: | к элементам уровня блока |
| Наследуется: | да |
| Процентное: | относительно ширины содержащего блока |
| Носитель: | визуальный |
Это свойство специфицирует отступ первой строки текста в блоке. Точнее, оно специфицирует отступ первого бокса, всплывающего в первый строчный бокс блока. Бокс получает отступ относительно левого (или правого, для вывода справа-налево) края строчного бокса. Пользовательские агенты (ПА) должны отображать этот отступ как пробел.
Значения имеют следующий смысл:
<length>
Отступ имеет фиксированный размер. <percentage>
Процент от ширины содержащего блока.
Значение 'text-indent' может быть отрицательным, но могут быть ограничения, зависящие от реализации.
Пример(ы):
Отступ размером '3em' для текста.
P { text-indent: 3em }
Оттенение текста: свойство 'text-shadow'
| Значение: | none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit |
| Начальное: | none |
| Применяется: | ко всем элементам |
| Наследуется: | нет (см. текст) |
| Процентное: | N/A |
| Носитель: | визуальный |
Это свойство принимает список разделённых запятыми эффектов оттенения, применяемых к тексту элемента. Эффекты оттенения применяются в том порядке, в котором они специфицированы, и могут, таким образом, перекрываться один другим, но они никогда не перекрывают сам текст. Эффекты оттенения не изменяют размеры бокса, но могут выходить за его пределы. Уровень стэка эффекта оттенения - тот же самый, что и самого элемента.
Каждый эффект оттенения обязан специфицировать смещение оттенения и может по выбору специфицировать радиус рассеяния и цвет тени.
Смещение оттенения специфицируется двумя значениями <length>, указывающими расстояние от текста. Первое значение специфицирует расстояние по горизонтали справа от текста. Отрицательное значение по горизонтали помещает тень слева от текста. Второе значение специфицирует вертикальное расстояние под текстом. Отрицательное значение по вертикали помещает тень сверху от текста.
Радиус рассеяния может быть по выбору специфицирован после смещения оттенения. Радиус рассеяния это значение, обозначающее границы эффекта рассеяния. Точный алгоритм вычисления эффекта рассеяния не специфицирован.
Значение цвета может быть по выбору специфицировано до или после значений 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'
используется для создания эффекта "солнечного затмения":
Примечание. Это свойство не определено в CSS1. Некоторые эффекты оттенения (такие как в последнем примере) могут делать текст невидимым в ПА, поддерживающих только CSS1.
Переполнение и сжатие
Обычно содержимое бокса блока ограничено краями бокса. В определённых случаях бокс может переполняться, то есть его содержимое частично или полностью находится за пределами бокса, например:
Строка не может быть разорвана, и строчный бокс оказывается шире, чем бокс блока.
Бокс уровня блока слишком широк для содержащего блока. Это случается, если свойство 'width' элемента имеет такое значение, которое вызывает растекание генерируемого бокса блока за пределы содержащего блока.
Высота элемента превосходит явно установленную высоту содержащего блока (т.е. высота содержащего блока определяется свойством 'height', а не высотой содержимого).
Бокс позиционирован абсолютно.
Бокс имеет отрицательные значения полей.
Когда возникает переполнение, свойство 'overflow' специфицирует, как сжимается бокс ( и сжимается ли). Свойство 'clip' специфицирует размер и форму сжимаемой области. Спецификация маленькой области для сжатия может вызвать сжатие другого видимого содержимого.
Переполнение: свойство 'overflow'
| Значение: | visible | hidden | scroll | auto | inherit |
| Начальное: | visible |
| Применяется: | к элементам уровня блока и к замещаемым элементам |
| Наследуется: | нет |
| Процентное: | N/A |
| Носитель: | визуальный |
Это свойство специфицирует, сжимается ли содержимое элемента уровня блока, если оно переполняет бокс элемента (который действует как содержащий блок для содержимого).
Значения имеют следующий смысл:
visible
Указывает, что содержимое не сжимается, т.е. может отображаться за пределами бокса блока.
hidden
Указывает, что содержимое сжимается и что механизм прокрутки не должен предоставляться для просмотра содержимого вне сжимаемой области; пользователь не получит доступа к сжатому содержимому. Размер и форма сжимаемой области специфицируются свойством 'clip'.
scroll
Означает, что содержимое сжимается и что если ПА использует механизм прокрутки, видимый на экране (такой как полоса прокрутки или паннер), этот механизм должен отображаться для бокса, независимо от того, сжимается его содержимое или нет. Это устраняет возможные проблемы с появлением и скрытием полосы прокрутки в динамическом окружении. Если это значение специфицировано и целевой носитель - 'print' или 'projection', переполняющее содержимое должно быть напечатано.
auto
Поведение значения 'auto' зависит от ПА, но должно вызывать предоставление механизма прокрутки для переполняемых боксов.
Даже если 'overflow' установлено в 'visible', содержимое может быть обрезано до размеров окна документа ПА средой окружения.
Пример(ы):
Рассмотрим следующий пример блока кавычек (BLOCKQUOTE), который слишком велик для своего содержащего блока (установленного DIV). Вот документ-источник:
<DIV> <BLOCKQUOTE> <P>I didn't like the play, but then I saw it under adverse conditions - the curtain was up. <DIV class="attributed-to">- Groucho Marx</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 может быть сформатирован без сжатия примерно так:
Установка 'overflow'
в 'hidden' для элемента DIV, с другой стороны, вызывает усечение BLOCKQUOTE содержащим блоком:
Значение 'scroll' сообщит ПАгенту, что поддерживается визуальный механизм прокрутки, чтобы вывести его для обеспечения доступа пользователя к усечённому содержимому.
Подчёркивание, надчёркивание, перечёркивание и мигание: свойство 'text-decoration'
| Значение: | none | [ underline || overline || line-through || blink ] | inherit |
| Начальное: | none |
| Применяется: | ко всем элементам |
| Наследуется: | нет (см. текст) |
| Процентное: | N/A |
| Носитель: | визуальный |
Это свойство описывает декоративное оформление текста элемента. Если это свойство специфицировано для элемента уровня блока, оно воздействует на всех потомков инлайн-уровня данного элемента. Если оно специфицировано (или влияет на) элемент инлайн-уровня, оно воздействует на все боксы, генерируемые элементом. Если элемент не имеет содержимого или текста (например, элемент IMG в HTML), ПА обязаны игнорировать
данное свойство.
Значения имеют следующий смысл:
none
Не производит декоративное оформление. underline
Каждая строка текста подчёркнута. overline
Каждая строка текста имеет над собой линию. line-through
Каждая строка текста имеет посередине перечёркивающую линию. blink
Текст мигает. От соответствующих ПА не требуется поддерживать это значение.
Цвет(а), необходимый для декорирования текста, должен быть получен из значения свойства 'color'.
Это свойство не наследуется, но боксы - потомки бокса блока должны быть сформатированы с тем же оформлением (например, все должны быть с подчёркиванием). Цвет оформления должен остаться тем же самым, даже если элементы-потомки имеют другие значения 'color'.
Пример(ы):
В следующем примере для HTML, текстовое содержимое всех элементов A будет подчёркнуто:
A[href] { text-decoration: underline }
Подсчёт высоты строк: свойства 'line-height' и 'vertical-align'
Как описано в разделе о контекстах инлайн-форматирования, ПА заполняют инлайн-боксами вертикальный стэк строчных боксов. Высота инлайн-бокса определяется так:
Вычисляется высота каждого инлайн-бокса в строчном боксе (см. "Вычисление высоты и полей" и свойство 'line-height').
Инлайн-боксы выравниваются по вертикали в соответствии с их свойствами 'vertical-align'.
Высота строчного бокса - это расстояние между верхом самого верхнего бокса и низом самого нижнего бокса.
Пустые инлайн-элементы генерируют пустые инлайн-боксы, но эти боксы всё же имеют поля, заполнение, рамки и высоту строки и, таким образом, вычисления выполняются как с элементами, имеющими содержимое.
Заметьте, что если все боксы в строчном боксе выровнены по своему низу, то строчный бокс будет иметь точно такую же высоту, как и самый высокий бокс. Если, однако, боксы выровнены по общей базовой линии, верх и низ строчного бокса могут не касаться верха и низа самого высокого бокса.
Поля страницы
Свойства полей ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin') применяются внутри контекста страницы. На следующей диаграмме показаны соотношения между листом, страничным боксом и полями страницы:
Вычисленное значение полей бокса вверху или внизу области страницы - '0'.
Контекст страницы не имеет никаких указаний о шрифте, так что единицы измерения 'em' и 'ex' не допускаются. Процентные значения свойств полей относительны к размерам страничного бокса; для левого и правого полей - они соотносятся с шириной страничного бокса, а для верхнего и нижнего полей - к высоте страничного бокса. Все другие единицы измерения, ассоциированные с соответствующими свойствами CSS2, являются допустимыми.
Из-за негативных значений полей (у страничного бокса или у элементов) или абсолютного позиционирования
содержимое может оканчиваться вне страничного бокса, но это содержимое может быть "вырезано" - ПАгентом, принтером или, наконец, бумажным ножом.
Полное имя шрифта
Это полное имя конкретного представителя семейства шрифтов. Оно обычно содержит много нестандартизованных текстовых квалификаторов или украшений, присоединённых к имени семейства шрифтов. Оно может также включать производственное имя или аббревиатуру, часто впереди имени шрифта. Оно используется для ссылок только на локально установленные шрифты, поскольку формат "украшенного" имени может варьироваться в зависимости от платформы. Имя должно быть заключено в кавычки.
Например, имена шрифта семейства TrueType и шрифта PostScript могут отличаться в использовании пробельных символов, пунктуации и аббревиатур некоторых слов (напр., чтобы соответствовать различным ограничениям систем или принтеров на размер имён). К примеру, пробелы не допускаются в именах PostScript, но являются обычными в полных именах шрифтов. Таблица имён TrueType может также содержать и имена PostScript, не имеющие пробелов.
Определение имени шрифта важно потому, что оно (имя) является ссылкой на локально установленный шрифт. Важно, чтобы имя было определённым, не зависящим от платформы и приложения. В связи с этим, имя не должно быть зависимым от приложения и языка.
Идеальным решением будет имя, которое уникально идентифицирует каждую коллекцию данных шрифтов. Это имя не должно существовать в текущей практике работы с данными шрифтов. Шрифты с одним базовым именем могут различаться с помощью нескольких дескрипторов. Некоторые из этих дескрипторов, таких как различные дополнения глифов в шрифте, могут быть незначащими, если нужные глифы имеются в шрифте. Другие дескрипторы, такие как различные метрики ширины, делают шрифты с одним именем несовместимыми. Похоже, что невозможно определить правило, по которому можно всегда определить несовместимость и предотвратить использование совершенно соответствующей локальной копии данных шрифта с этим именем. Следовательно, только диапазон символов ISO 10646 будет использоваться для квалификации совпадения имён разновидностей шрифтов.
Поскольку главная задача имени шрифта - дать возможность ПА определить, имеется ли локальная копия специфицированных данных шрифта, имя шрифта обязано быть именем, которое будет иметься во всех законных копиях данных шрифта. Иначе будет генерироваться нежелательный трафик Web из-за неправильных совпадений с локальной копией.
Поплавки/Floats
Поплавок это бокс, который "всплывает" (смещается) влево или вправо на текущей строке. Самое интересное в поведении поплавка (или "всплывающего", или "плавающего" бокса) то, что содержимое может обтекать его по сторонам (или это может быть запрещено свойством 'clear'). Содержимое обтекает справа бокс, всплывающий влево, и слева - бокс всплывающий вправо.
Далее следует введение в позиционирование поплавков и обтекание содержимого; точные правила, управляющие поведением поплавков, даны в описании свойства 'float'.
Всплывающий бокс обязан иметь явно установленную ширину (назначенную свойством 'width', или свою внутреннюю ширину - в случае замещаемых элементов). Любой всплывающий бокс становится боксом блока, который сдвигается влево или вправо, пока его внешний край не коснётся края содержащего блока или внешнего края другого поплавка. Верх всплывающего бокса выравнивается с верхом текущего строчного бокса (или низом предшествующего бокса блока, если отсутствует строчный бокс). Если для поплавка не хватает горизонтального пространства на текущей строке, он сдвигается вниз строка за строкой, пока строка не получит достаточно пространства для него.
Пока поплавок не всплыл, непозиционированные боксы блока, созданные до и после всплывающего бокса, всплывают вертикально, как будто поплавка не существует. Однако строчные боксы, созданные сразу после поплавка, уменьшаются, чтобы дать пространство для всплывающего бокса. Любое содержимое на текущей строке до всплывающего бокса перерисовывается на первой доступной строке с противоположной стороны поплавка.
Несколько поплавков могут быть смежными, и эта модель применяется также к смежным поплавкам на той же строке.
Пример(ы):
Следующее правило вызывает всплывание влево всех боксов IMG с class="icon" (и устанавливает левое поле в '0'):
IMG.icon { float: left; margin-left: 0; }
Рассмотрим следующие HTML и таблицу стилей:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Float example</TITLE> <STYLE type="text/css"> IMG { float: left } BODY, P, IMG { margin: 2em } </STYLE> </HEAD> <BODY> <P><IMG src=img.gif alt="This image will illustrate floats"> Some sample text that has no other... </BODY> </HTML>
IMG- бокс всплывает влево. Последующее содержимое форматируется справа от поплавка, начиная с той же строки, где находится поплавок. Строчные боксы справа от поплавка укорачиваются из-за присутствия поплавка, но имеют свою "нормальную" ширину (как в содержащем блоке, установленном элементом P) после поплавка. Этот документ может быть сформатирован так:
Форматирование могло бы быть точно таким же, если бы документ был следующим:
<BODY> <P>Some sample text <IMG src=img.gif alt="This image will illustrate floats"> that has no other... </BODY>
поскольку содержимое слева от поплавка замещается поплавком и обтекает его вниз по его правой стороне.
Поля всплывающих боксов никогда не сжимаются полями смежных боксов. Таким образом, в предыдущем примере вертикальные поля не сжимаются между боксом P и всплывающим IMG-боксом.
Поплавок может перекрывать другие боксы при нормальном позиционировании (например, когда нормально позиционированный бокс, следующий за поплавком, имеет отрицательные поля). Когда инлайн-бокс перекрывается поплавком, содержимое, фон и рамки инлайн-бокса отображаются впереди поплавка. Если блок бокса перекрывается, фон и рамки бокса блока отображаются позади поплавка и видны только там, где бокс прозрачен. Содержимое бокса блока отображается спереди от поплавка.
Пример(ы):
Вот другая иллюстрация, показывающая, что происходит, когда поплавок перекрывает рамки элемента с нормальным всплыванием.
Всплывающее изображение скрывает рамки перекрываемого бокса блока.
Следующий пример иллюстрирует использование свойства 'clear' для предотвращения всплывания содержимого после поплавка.
Пример(ы):
При таком правиле:
P { clear: left }
форматирование может выглядеть так:
Оба параграфа установлены в 'clear: left', что "выталкивает вниз" второй параграф в положение под поплавком - его верхнее поле растягивается, чтобы выполнить это (см. свойство 'clear').
Порядок каскадирования
Чтобы найти значение для комбинации элемент/свойство, ПА обязаны применять следующий порядок сортировки:
Найти все объявления, применяемые в запросе к элементу и свойству, для целевого типа носителя. Объявления применяются, если ассоциированный селектор подбирает элемент в запросе.
Сначала объявления сортируются по весу и источнику: для нормальных объявлений - авторские таблицы стилей переопределяют пользовательские, которые, в свою очередь, переопределяют таблицу стилей по умолчанию. Для объявлений "!important" - пользовательские таблицы стилей переопределяют авторские таблицы, которые, в свою очередь, переопределяют таблицу стилей по умолчанию. Объявления "!important" переопределяют нормальные объявления. Импортированная таблица стилей имеет тот же источник, что и таблица стилей, импортировавшая её.
Вторая сортировка производится по специфике
селектора: более специфические селекторы переопределяют более общие. Псевдоэлементы и псевдоклассы обсчитываются как нормальные элементы и классы соответственно.
Наконец, идёт сортировка по специфицированному порядку: если два правила имеют одинаковые вес, источник и специфику, выбирается специфицированное позже. Правила в импортируемых таблицах стилей рассматриваются перед любыми правилами имеющейся таблицы стилей.
Независимо от установок "!important" индивидуальных объявлений, эта стратегия даёт авторским таблицам стилей больший вес, чем таблицам читателя. Это тем более важно, поскольку ПА предоставляют пользователю возможность отключить влияние определённых таблиц стилей, например, в выпадающих меню.
Порт просмотра
ПА для непрерывных носителей
обычно предлагают пользователю порт просмотра (окно или другую область просмотра на экране), в котором пользователь видит документ. ПА могут изменять внешний вид документа, если порт просмотра изменил размеры (см. начальный содержащий блок). Если порт просмотра меньше, чем начальный содержащий блок документа, ПА должен предоставить механизм прокрутки. Имеется не менее одного порта просмотра в канве, но ПА могут отображать более чем одну канву (т.е. предоставлять различные виды того же самого документа).
Позиция и выравнивание заголовка
| Значение: | top | bottom | left | right | inherit |
| Начальное: | top |
| Применяется: | к элементам 'table-caption' |
| Наследуется: | да |
| Процентное: | N/A |
| Носитель: | визуальный |
Это свойство специфицирует позицию бокса заголовка относительно бокса таблицы.
Значения имеют следующий смысл:
top
Позиционирует бокс заголовка над боксом таблицы. bottom
Позиционирует бокс заголовка под боксом таблицы. left
Позиционирует бокс заголовка слева от бокса таблицы. right
Позиционирует бокс заголовка справа от бокса таблицы.
Заголовки сверху или снизу от элемента 'table' форматируются совершенно так же, как если бы они были элементами блока до и после таблицы, за исключением того, что (1) они наследуют наследуемые свойства таблицы и (2) они не рассматриваются как бокс блока для целей элементов 'compact' или 'run-in', которые могут предшествовать таблице.
Заголовок сверху или снизу от бокса таблицы ведёт себя подобно боксу блока и при расчётах ширины; ширина вычисляется относительно ширины бокса таблицы содержащего блока.
Для заголовков слева или справа от бокса таблицы значение, отличное от 'auto' для 'width', устанавливает ширину явно, но '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 }
Принимая, что ширина таблицы меньше доступной ширины, форматирование будет примерно таким:
Диаграмма показывает центрированную таблицу с заголовком, растянутую в левое поле как результат негативного значения свойства 'margin-left'.
Позиционирование и заполнение в боксе: 'top', 'right', 'bottom', 'left'
Элемент называется позиционированным, если его свойство 'position' имеет значение, отличное от 'static'. Позиционированные элементы генерируют позиционированные боксы, располагающиеся в соответствии с четырьмя свойствами:
| Значение: | <length> | <percentage> | auto | inherit |
| Начальное: | auto |
| Применяется: | к позиционируемым элементам |
| Наследуется: | нет |
| Процентное: | относительно высоты содержащего блока |
| Носитель: | визуальный |
Это свойство специфицирует, насколько смещён вниз верхний край содержимого бокса относительно верхнего края содержащего блока.
| Значение: | <length> | <percentage> | auto | inherit |
| Начальное: | auto |
| Применяется: | к позиционируемым элементам |
| Наследуется: | нет |
| Процентное: | относительно ширины содержащего блока |
| Носитель: | визуальный |
Это свойство специфицирует, насколько смещён влево правый край содержимого бокса относительно правого края содержащего блока.
| Значение: | <length> | <percentage> | auto | inherit |
| Начальное: | auto |
| Применяется: | к позиционируемым элементам |
| Наследуется: | нет |
| Процентное: | относительно высоты содержащего блока |
| Носитель: | визуальный |
Это свойство специфицирует, насколько смещён вверх нижний край содержимого бокса относительно низа содержащего блока.
| Значение: | <length> | <percentage> | auto | inherit |
| Начальное: | auto |
| Применяется: | к позиционируемым элементам |
| Наследуется: | нет |
| Процентное: | относительно ширины содержащего блока |
| Носитель: | визуальный |
Это свойство специфицирует, насколько смещён вправо левый край содержимого бокса относительно левого края содержащего блока.
Значения для этих четырёх свойств имеют следующий смысл:
<length>
Смещением является расстояние от соответствующего края.
<percentage>
Смещением является процент ширины содержащего блока (для 'left'
или 'right') или высоты содержащего блока (для 'top' и 'bottom'). Для 'top' и 'bottom', если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентное значение интерпретируется так же, как 'auto'. auto
Действие этого значения зависит от того, какое из соответствующих свойств также имеет значение 'auto'. См. также разделы ширина и высота
абсолютно позиционируемых, незамещаемых элементов.
Для абсолютно позиционируемых
боксов - смещения являются относительными к содержащему блоку бокса. Для относительно позиционируемых боксов - смещения являются относительными к внешним краям самого бокса (т.е. боксу задаётся нормальное расположение, а затем - смещение от этой позиции в соответствии с вышеуказанными свойствами).
