Для абсолютно позиционированных элементов вертикальные размеры должны удовлетворять следующему условию:
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = высота содержащего блока
(Если стиль рамки - 'none', '0' используется как значение ширины рамки.) Решение данного уравнения достигается путём проведения ряда замен в следующем порядке:
Если 'top' имеет значение 'auto', оно заменяется расстоянием от верхнего края содержащего блока до края верхнего поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position'
было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится сверху от содержащего блока.
Если и 'height' и 'bottom' - 'auto', 'bottom'
заменяется на '0'.
Если 'bottom'
или 'height' (ещё) имеют значение 'auto', любое 'auto' в 'margin-top'
или 'margin-bottom' заменяется на '0'.
Если в данной точке и 'margin-top', и 'margin-bottom' - всё ещё 'auto', уравнение решается с помощью дополнительного условия: что эти два поля обязаны получить одинаковые значения.
Если в данной точке имеется только одно значение 'auto', уравнение решается с этим значением.
Если в данной точке значения переограничены, игнорируется значение 'bottom', и уравнение решается с этим значением.
Ситуация напоминает предыдущую, за исключением того, что элемент имеет внутреннюю
ширину. Последовательность замен теперь:
Если 'width'
- 'auto', оно замещается внутренней шириной элемента.
Если 'left'
имеет значение 'auto' при 'direction' - 'ltr', 'auto' замещается расстоянием от левого края содержащего блока до края левого поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position'
было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится слева от содержащего блока.
Если 'right'
имеет значение 'auto' при 'direction'
- 'rtl', 'auto' заменяется расстоянием от правого края содержащего блока до края правого поля того же гипотетического бокса, что и выше. Значение является положительным, если гипотетический бокс находится слева от края содержащего блока.
Если 'left' или 'right' - 'auto', любое 'auto' для 'margin-left'
или 'margin-right' замещается на '0'.
Если в данной точке 'margin-left' и 'margin-right' всё ещё 'auto', уравнение решается с дополнительным условием: что эти два поля обязаны получить одинаковые значения.
Если в данной точке осталось только одно 'auto', уравнение решается с этим значением.
Если в данной точке значения переограниченны, игнорируется значение 'left' (если 'direction' - 'rtl') или 'right' (если 'direction' - 'ltr') и уравнение решается с этим значением.
В модели абсолютного позиционирования бокс смещается явно относительно своего содержащего блока. Он полностью удаляется из нормального позиционирования (не влияет на последующих родственников). Абсолютно позиционированный бокс устанавливает новый содержащий блок для нормально позиционируемых дочерних боксов и позиционируемых потомков. В то же время, содержимое абсолютно позиционированных элементов не всплывает вокруг других боксов. Эти элементы могут или могут не закрывать собой содержимое другого бокса, в зависимости от уровней в стэке у перекрываемых боксов.
Ссылки в данной спецификации на абсолютно позиционированный элемент (или его бокс) подразумевают, что свойство 'position' элемента имеет значение 'absolute' или 'fixed'.
Условие, определяющее вычисленные значения для этих элементов:
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ширина содержащего блока
(Если стиль рамки - 'none', используется '0' как значение ширины рамки.) Решение данного условия достигается серией замен в следующем порядке:
Если 'left' имеет значение 'auto' при 'direction' - 'ltr', 'auto' заменяется расстоянием от левого края содержащего блока до края левого поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position'
было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится слева от содержащего блока.
Если 'right'
имеет значение 'auto' при 'direction'
- 'rtl', 'auto' заменяется расстоянием от правого края содержащего блока до края правого поля того же гипотетического бокса, что и выше. Значение является положительным, если гипотетический бокс находится слева от края содержащего блока.
Если 'width'
- 'auto', любые оставшиеся 'auto' для 'left'
или 'right' заменяются на '0'.
Если 'left', 'right' или 'width' - (ещё) 'auto', 'auto' в 'margin-left'
или 'margin-right'
заменяются на '0'.
Если в данной точке 'margin-left' и 'margin-right' всё ещё 'auto', уравнение решается с дополнительным условием: что эти два поля обязаны получить одинаковые значения.
Если в данной точке осталось только одно 'auto', уравнение решается с этим значением.
Если в данной точке значения переограниченны, игнорируется значение 'left' (если 'direction' - 'rtl') или 'right' (если 'direction' - 'ltr') и уравнение решается с этим значением.
В этом (быстром) алгоритме горизонтальный вывод таблицы не зависит от содержимого ячеек; он зависит только от ширины таблицы, ширины столбцов и от рамок и заполнения ячеек.
Ширина таблицы может быть специфицирована явно свойством 'width'. Значение 'auto' (и для 'display: table', и для 'display: inline-table') означает использование алгоритма автоматического вывода таблицы.
В алгоритме фиксированного вывода ширина каждого столбца определяется так:
Элемент столбца со значением свойства 'width', отличным от 'auto', устанавливает ширину этого столбца.
Иначе, ячейка в первом ряду со значением свойства 'width', отличным от 'auto', устанавливает ширину этого столбца. Если ячейка занимает более одного столбца, ширина разделяется на эти столбцы.
Любые оставшиеся столбцы равномерно разделяют оставшееся горизонтальное пространство таблицы (минус рамки и заполнение ячеек).
Ширина таблицы будет тогда больше значения свойства 'width' для элемента таблицы и суммарной ширины столбцов (плюс заполнение ячеек или рамки). Если таблица шире, чем столбцы, оставшееся пространство должно быть равномерно распределено между столбцами.
При таком методе ПА может начать вывод таблицы сразу, как только будет получен весь первый ряд. Ячейки в последующих рядах не влияют на ширину таблицы. Любая ячейка, имеющая переполняющее содержимое, использует свойство 'overflow' для определения того, сжимать ли переполняющее содержимое.
Эта спецификация расширяет алгоритм, данный ранее в CSS1. Этот алгоритм редуцируется до алгоритма спецификации CSS1, если таблицы стилей не содержат правил @font-face.
Сопоставление дескрипторов со шрифтами должно выполняться тщательно.
Дескрипторы сопоставляются в определённом порядке, чтобы иметь уверенность в том, что результаты этого процесса сопоставления максимально корректны для всех ПА (в предположении, что такая же библиотека шрифтов и их описаний имеется в каждом ПА). Этот алгоритм может быть оптимизирован при условии, что реализация следует поведению алгоритма совершенно точно.
ПА создаёт БД (или получает к ней доступ) соответствующих дескрипторов всех шрифтов, известных ПА. Если имеется два шрифта с совершенно одинаковыми дескрипторами, то один из них игнорируется. ПА может "знать" о шрифте, если он:
установлен локально;
объявлен с использованием правила @font-face в одной из таблиц стилей, связанных с текущим документом или содержащихся в нём;
использован в таблице стилей по умолчанию в ПА, которая концептуально существует во всех ПА и имеет полные правила @font-face для всех шрифтов, используемых в ПА для представления по умолчанию, плюс правила @font-face для пяти специальных общих семейств шрифтов (см. 'font-family'), определённых в CSS2.
Для данного элемента и для каждого символа в данном элементе ПА подбирает свойства шрифтов, применимые к данному элементу. Используя полный набор свойств, ПА применяет дескриптор 'font-family' для выбора пробного семейства шрифтов. Таким образом, совпадение с именем семейства будет найдено до совпадения любого другого дескриптора. Остальные свойства тестируются относительно имени свойства в соответствии с критериями совпадения, описанными в каждом дескрипторе. Если имеются совпадения для всех оставшихся свойств, это означает, что для данного элемента найден совпадающий шрифт.
Если в шаге 2 не найдено совпадений шрифта с 'font-family', ПА, выполняющие смысловое совпадение, могут продолжить проверку других дескрипторов, таких как x-height, ширина глифов и Panose -1, для идентификации другого пробного семейства шрифтов. Если имеются совпадения для всех оставшихся дескрипторов, это означает, что для данного элемента найден совпадающий шрифт. Дескриптор 'font-family', отражающийся в свойства CSS2, является именем запрашиваемого семейства шрифтов, а не каким-либо именем совпавшего по смыслу шрифта. Подразумевается, что ПА, не поддерживающие поиск совпадений по смыслу, пропускают этот шаг.
CSS не определяет "оптимальный" вид таблицы, поскольку во многих случаях это дело вкуса. CSS не определяет ограничения того, как ПА обязан выводить таблицу. ПА могут использовать любой возможный алгоритм и свободны предпочесть скорость точности отображения, если только не выбран "алгоритм фиксированного вывода ".
Значение: | auto | fixed | inherit |
Начальное: | auto |
Применяется: | к элементам 'table' и 'inline-table' |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный |
Свойство 'table-layout'
контролирует алгоритм, используемый для вывода ячеек, рядов и столбцов таблицы.
Значения имеют следующий смысл:
fixed
Алгоритм фиксированного вывода таблицы; auto
Используется любой автоматический алгоритм вывода таблицы.
Эти два алгоритма описаны ниже.
Высота таблицы задаётся свойством 'height' элемента 'table' или 'inline-table'. Значение 'auto' устанавливает, что высота является суммой высоты рядов плюс заполнение ячеек или рамки. Любые другие значения специфицируют высоту явно; таблица, таким образом, может быть выше или короче, чем высота её рядов. CSS2 не специфицирует вывод в тех случаях, когда специфицированная высота таблицы отличается от высоты содержимого, особенно когда высота содержимого может перекрыть специфицированную высоту; или как излишнее пространство должно распределиться между рядами для заполнения высоты таблицы; или, если высота содержимого превосходит специфицированную высоту таблицы, должен ли ПА предоставить механизм прокрутки.
Примечание. Будущие версии CSS могут специфицировать это.
Высота бокса элемента 'table-row' вычисляется однократно сразу после получения ПАгентом всех ячеек ряда: это максимальная специфицированная рядом 'height'
и минимальная высота (MIN), затребованная ячейками. Значение 'height' - 'auto' для 'table-row' означает, что вычисленная высота ряда - MIN. MIN зависит от высоты боксов ячеек и выравнивания бокса ячейки (очень походит на вычисление высоты строчного бокса). CSS2 не определяет, к чему относятся процентные значения 'height', специфицированные для рядов и групп рядов таблицы.
В CSS2 высота бокса ячейки - это максимальное из свойств 'height' ячеек таблицы и минимальная высота, требуемая содержимым (MIN). Значение 'auto' для 'height' подразумевает вычисленное значение MIN. CSS2 не определяет, к чему относятся процентные значения 'height', когда они определены для ячеек таблицы.
CSS2 не специфицирует, как ячейки, захватывающие более одного ряда, влияют на вычисление высоты рядов, за исключением того, что суммарная высота рядов обязана быть достаточно большой, чтобы окружить ячейку, захватывающую ряды.
Свойство 'vertical-align'
каждой ячейки таблицы определяет её выравнивание в ряду. Содержимое каждой ячейки имеет baseline/базовую линию, top/верх, middle/середину и bottom/низ, как и сам ряд.
В этом документе:<DIV> Some text <P>More text </DIV>
(и приняв, что и DIV, и P оба имеют 'display: block'), DIV имеет содержимое и инлайн-уровня, и уровня блока. Чтобы легче было определить форматирование, мы примем, что вокруг "Some text" имеется анонимный бокс блока.
[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, но поля имеют значения 0.
В таком документе:<P>Некоторый <EM>выделенный</em> текст.</P>
элемент P генерирует бокс блока с несколькими инлайн-боксами внутри. Бокс для "выделенный" - это инлайн-бокс, сгенерированный инлайн-элементом (EM), но другие боксы ("Некоторый" и "текст") являются инлайн-боксами, сгенерированными элементом уровня блока (P). Последние называются анонимными инлайн-боксами, поскольку они не имеют ассоциированного инлайн-элемента.
Такие анонимные инлайн-боксы наследуют наследуемые свойства своего родительского бокса уровня блока. Ненаследуемые свойства получают свои начальные значения. В примере - цвет анонимных начальных боксов наследуется из P, но фон остаётся прозрачным.
Если из контекста ясно, какой тип анонимных боксов подразумевается, то и боксы инлайн, и боксы уровня блока называются в данной спецификации анонимными боксами.
Имеются и другие типы анонимных боксов, возникающие при форматировании таблиц.
Языки документов, кроме HTML, могут не иметь всех элементов табличной модели CSS2. В таких случаях "отсутствующие" элементы обязаны учитываться, для того чтобы табличная модель работала. Отсутствующие элементы генерируют анонимные объекты (например, анонимные боксы при визуальном выводе таблицы) в соответствии со следующими правилами:
Любой элемент таблицы автоматически будет генерировать вокруг себя необходимые объекты таблицы, состоящие не менее чем из трёх вложенных объектов, соответствующих элементу 'table'/'inline-table', элементу 'table-row' и элементу 'table-cell'.
Если родительский P в 'table-cell' элемента T - не 'table-row', объект, соответствующий 'table-row', будет генерироваться между P и T. Этот объект будет занимать все последовательные родственные (смежные) 'table-cell' (в дереве документа) в T.
Если родительский 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'.
Если родительский P в 'table-row-group' (или 'table-header-group', или 'table-footer-group') элемента T - не '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'.
Если дочерний T от 'table-row' элемента P - не элемент 'table-cell', объект, соответствующий элементу 'table-cell', будет генерироваться между P и T. Этот объект будет занимать всех последовательных родственников T, не являющихся элементами 'table-cell'.
Пример(ы):
At-правила начинаются at-ключевым словом, символом '@', сразу после которого следует идентификатор (например, '@import', '@page').
At-правило состоит из вышеназванного и последующей точки с запятой (;) или блока,
в зависимости от того, что идёт первым. ПА CSS, обнаруживающий нераспознаваемое at-правило, обязан игнорировать
всё это правило и продолжить разбор после него.
В CSS2 ПА обязан игнорировать любое правило '@import', которое появляется внутри блока или предшествует всем наборам правил.
Пример неверного использования:
Предположим, например, что разборщик 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 }
Автоматическая нумерация в CSS2 контролируется двумя свойствами, 'counter-increment'
и 'counter-reset'. Счётчики, определённые в этих свойствах, используются с функциями counter() и counters() свойства 'content'.
Значение: | [ <identifier> <integer>? ]+ | none | inherit |
Начальное: | none |
Применяется: | ко всем элементам |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | все |
Значение: | [ <identifier> <integer>? ]+ | none | inherit |
Начальное: | none |
Применяется: | ко всем элементам |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | все |
Свойство 'counter-increment' принимает одно или более имён счётчиков (идентификаторы), за каждым из которых может следовать целое число. Это число обозначает, насколько счётчик увеличивается при каждом появлении элемента. Увеличение по умолчанию - 1. Допустимы 0 и негативные значения.
Свойство 'counter-reset'
также содержит список из одного или более имён счётчиков, за каждым из которых может следовать целое число. Целое число задаёт значение, в которое счётчик сбрасывается при каждом появлении элемента. По умолчанию - 0.
Если 'counter-increment' относится к счётчику, который не находится в области видимости (см. ниже) какого-либо 'counter-reset', то принимается, что счётчик установлен в 0 корневым элементом.
Пример(ы):
Здесь показан способ нумерации глав и разделов: "Chapter 1", "1.1", "1.2" и т.д.:
H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Добавляет 1 к главе */ counter-reset: section; /* Устанавливает раздел в 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; }
Если элемент увеличивает/сбрасывает счётчик и использует его (в свойстве 'content' в псевдоэлементах :before или :after), то счётчик используется после того, как увеличен/сброшен.
Если элемент и увеличивает, и сбрасывает счётчик, то счётчик сначала сбрасывается, а затем увеличивается.
Свойство 'counter-reset'
следует правилам каскадирования. Таким образом, в соответствии с каскадированием, следующая таблица стилей:
H1 { counter-reset: section -1 } H1 { counter-reset: imagenum 99 }
сбросит только 'imagenum'. Чтобы сбросить оба счётчика, их нужно специфицировать вместе:
H1 { counter-reset: section -1 imagenum 99 }
В этом алгоритме (требующем обычно не более двух шагов), ширина таблицы определяется шириной её столбцов (и промежуточных рамок). Этот алгоритм отражает поведение некоторых популярных ПА HTML на момент написания данной спецификации. От ПА не требуется выполнять этот алгоритм для определения структуры таблицы в случае, если 'table-layout' - 'auto'. Они могут использовать любой другой алгоритм.
Этого алгоритма может оказаться недостаточно, поскольку он требует, чтобы ПА имел доступ ко всему содержимому таблицы до определения окончательной структуры, и может потребовать более одного шага.
Ширина столбцов определяется так:
Вычисляется минимальная ширина содержимого (MCW) каждой ячейки: форматированное содержимое может занимать любое количество строк, но не может переполнять бокс ячейки. Если специфицированная 'width' (W) ячейки больше, чем MCW, W является минимальной шириной ячейки. Значение 'auto' указывает, что MCW это минимальная ширина ячейки.
Так же вычисляется "максимальная" ширина каждой ячейки: затем содержимое форматируется без разрывов строк, за исключением тех разрывов строк, которые указаны явно.
Для каждого столбца определяется максимальная и минимальная ширина столбца из тех ячеек, которые занимают только этот столбец. Минимум - это та ширина, которая требуется для ячейки с самой большой минимальной шириной (или 'width' столбца, в зависимости от того, что больше). Максимум - это максимальная ширина, которая требуется для ячейки с самой большой максимальной шириной (или 'width' столбца, в зависимости от того, что больше).
Для каждой ячейки, занимающей более одного столбца, увеличивается минимальная ширина тех столбцов, которые она захватывает, так что вместе они не уже, чем ячейка. То же самое делается и для максимальной ширины. Если возможно, расширяются все захваченные ряды на приблизительно то же значение.
Это задаёт максимальную и минимальную ширину каждого столбца. Ширина столбцов влияет на окончательную ширину таблицы так:
Если свойство 'width' элементов 'table' или 'inline-table' имеет специфицированное значение (W), отличное от 'auto', вычисленное значение свойства будет больше W и минимальной ширины, требующейся для всех столбцов плюс заполнение и рамки ячеек (MIN). Если W больше, чем MIN, излишняя ширина должна быть распределена между столбцами.
Если элементы 'table' или 'inline-table' имеют 'width: auto', вычисленная ширина таблицы будет больше ширины самого большого из содержащих блоков таблицы и MIN. Однако, если максимальная ширина, требуемая для столбцов плюс заполнение ячеек или рамки (MAX) меньше, чем ширина содержащего блока, используется MAX.
Процентные значения ширины столбца являются относительными к ширине таблицы. Если таблица имеет 'width: auto', проценты дают ограничение ширины столбца, которое ПА должен попытаться выдержать. (Очевидно, это не всегда возможно: если ширина столбца '110%', ограничение не может быть выполнено.)
Примечание. В этом алгоритме ряды (и группы рядов) и столбцы (и группы столбцов) ограничивают и сами ограничены размерами содержащихся в них ячеек. Установка ширины столбца может неявно влиять на высоту ряда, и наоборот.
Copyright © 1997 World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). Все Права Зарезервированы.
Документы на сайте W3C предоставляются для копирования на основе следующей лицензии.
Получая, используя и/или копируя этот документ или документ W3C, на который в данном документе имеется ссылка, Вы согласны с тем, что Вы прочитали, поняли и согласны со следующими положениями и условиями:
Разрешение на использование, копирование и распространение содержания этого документа или документа W3C, на который в данном документе имеется ссылка, на любых носителях для любых целей и без оплаты или арендной платы даётся с условием, что Вы включите нижеследующую информацию во ВСЕ
копии документа или его части, которые Вы используете:
Ссылка URI на оригинальный документ W3C.
Уведомление о предшествующих авторских правах оригинального автора, если они отсутствуют, в форме: "Copyright © World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). Все Права Зарезервированы."
Если они указаны, СТАТУС документа W3C.
Если место позволяет, необходимо включать полный текст этого УВЕДОМЛЕНИЯ.
Дополнительно должны быть приписаны заверения для владельцев авторских прав на любое программное обеспечение, документы или другие объекты или продукты, которые Вы создали в соответствии с выполнением содержимого данного документа или любой его части.
Вы не имеете права, в соответствии с данной лицензией, создавать модификации или выдержки.
ЭТОТ ДОКУМЕНТ ДАЁТСЯ "AS IS\КАК ЕСТЬ" И ВЛАДЕЛЬЦЫ АВТОРСКИХ ПРАВ НЕ ДАЮТ НИКАКИХ УКАЗАНИЙ ИЛИ ГАРАНТИЙ, ЯВНЫХ ИЛИ КОСВЕННЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯ, ГАРАНТИИ РЕАЛИЗУЕМОСТИ, ПРИГОДНОСТИ ДЛЯ КОНКРЕТНЫХ ЦЕЛЕЙ, НЕНАРУШЕНИЕ ЗАКОНА ИЛИ ИМЕНОВАНИЕ, - ЧТО СОДЕРЖИМОЕ ДАННОГО ДОКУМЕНТА ПОДХОДИТ ДЛЯ ЛЮБЫХ ЦЕЛЕЙ, НИ ЧТО ВЫПОЛНЕНИЕ ТАКОГО СОДЕРЖИМОГО НЕ ВЫЗОВЕТ НАРУШЕНИЯ ПАТЕНТОВ КАКОЙ-ЛИБО ТРЕТЬЕЙ СТОРОНЫ, АВТОРСКИХ ПРАВ, ТОРГОВЫХ МАРОК И ДРУГИХ ПРАВ.
ВЛАДЕЛЬЦЫ АВТОРСКИХ ПРАВ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ЗА ЛЮБОЙ ПРЯМОЙ, КОСВЕННЫЙ, СПЕЦИАЛЬНЫЙ ИЛИ ВОЗМОЖНЫЙ ВРЕД, НАНЕСЁННЫЙ ИЗ-ЗА КАКОГО-ЛИБО ИСПОЛЬЗОВАНИЯ ДАННОГО ДОКУМЕНТА ИЛИ ВЫПОЛНЕНИЯ ИЛИ РЕАЛИЗАЦИИ ЕГО СОДЕРЖИМОГО.
Имена и торговые марки владельцев авторских прав НЕ могут использоваться для публичных целей и рекламы данного документа или его содержимого без специального письменного разрешения. Наименование авторских прав в данном документе всегда остаётся за их владельцами.
Данная спецификация является продуктом работы W3C Working Group над Cascading Style Sheets (Каскадными Таблицами Стилей) и Formatting Properties (Свойствами Форматирования).
Помимо редакторов данной спецификации, членами Working Group являются:
Brad Chase (Bitstream),
Chris Wilson (Microsoft),
Daniel Glazman (Electricité de France),
Dave Raggett (W3C/HP),
Ed Tecot (Microsoft),
Jared Sorensen (Novell),
Lauren Wood (SoftQuad),
Laurie Anna Kaplan (Microsoft),
Mike Wexler (Adobe),
Murray Maloney (Grif),
Powell Smith (IBM),
Robert Stevahn (HP),
Steve Byrne (JavaSoft),
Steven Pemberton (CWI),
Thom Phillabaum (Netscape),
Douglas Rand (Silicon Graphics),
Robert Pernett (Lotus),
Dwayne Dicks (SoftQuad) и
Sho Kuwamoto (Macromedia).
Мы благодарим их всех.
Свой вклад внесли приглашённые эксперты Working Group:
George Kersher, Glenn Rippel (Bitstream),
Jeff Veen (HotWired), Markku T. Hakkinen (The Productivity Works),
Martin Dürst (W3C, до этого - Universität Zürich),
Roy Platon (RAL),
Todd Fahrner (Verso),
Tim Boland (NIST),
Eric Meyer (Case Western Reserve University) и
Vincent Quint (W3C).
Раздел Web Fonts разрабатывали Brad Chase (Bitstream),
David Meltzer (Microsoft Typography) и
Steve Zilles (Adobe).
Следующие сотрудники в разной степени участвовали в разработке разделов, относящихся в шрифтам: Alex Beamon (Apple), Ashok Saxena (Adobe), Ben Bauermeister (HP), Dave Raggett (W3C/HP), David Opstad (Apple), David Goldsmith (Apple), Ed Tecot (Microsoft), Erik van Blokland (LettError), François Yergeau (Alis), Gavin Nicol (Inso), Herbert van Zijl (Elsevier), Liam Quin, Misha Wolf (Reuters), Paul Haeberli (SGI) и, наконец, Phil Karlton (Netscape).
Раздел Paged Media (Страничные Носители) в значительной части авторизовали Robert Stevahn (HP) и Stephen Waters (Microsoft).
Robert Stevahn (HP), Scott Furman (Netscape) и Scott Isaacs (Microsoft) являлись ключевыми сотрудниками при разработке CSS Positioning (Позиционирование CSS).
Mike Wexler (Adobe) был редактором рабочих проектов, описавшим многие из новых возможностей CSS2.
T.V. Raman (Adobe) сделал основные разработки, относящиеся к Aural Cascading Style Sheets (ACSS)/Звуковым Таблицам Стилей/ и к концепции звукового представления, на базе своей работы в AsTeR (Audio System For Technical Readings). Он участвовал в разработке начального проекта спецификации ACSS, которая содержится в данной спецификации. Значения звуковых свойств для примера таблицы стилей HTML 4.0
Блок начинается с левой фигурной скобки ({) и заканчивается парной правой скобкой (}). Между ними могут находиться любые символы, кроме скобок (()), квадратных скобок ([ ]) и фигурных скобок ({ }), которые обязаны всегда использоваться в паре и могут вкладываться. Одиночные (') и двойные (") кавычки также обязаны использоваться парами, а символы между ними разбираются как строка\string. См. выше определение строки в Лексическом разборе.
Пример неверного использования:
Это пример блока. Обратите внимание, что правая скобка между двойными кавычками не образует пары с открывающей скобкой блока, а вторая одиночная кавычка - это escape-символ, не образующий пары с первой одиночной кавычкой:
{ causta: "}" + ({7} * '\'') }
Заметьте, что это неверное правило CSS2, образующее, тем не менее, блок, как указано выше.
В CSS правила совпадения символов определяют, какое правило стиля применить к элементам дерева документа. Такие блоки символов (патэрн), называемые селекторами, могут иметь диапазон имён от простых имён элементов до сложных контекстуальных блоков. Если все условия в патэрн верны для конкретного элемента, селектор совпадает с элементом.
Чувствительность к регистру имён элементов в селекторах зависит от языка документа. Например, в HTML имена элементов нечувствительны к регистру, а в XML - чувствительны к регистру.
В этой таблице суммирован синтаксис селекторов CSS2:
* | Совпадает любой элемент. | Универсальный селектор |
E | Совпадает любой элемент E (т.е. элемент типа E). | Типы селекторов |
E F | Совпадает любой элемент F, являющийся потомком элемента E. | Селекторы-потомки |
E > F | Совпадает любой элемент F, являющийся дочерним относительно элемента E. | Дочерние селекторы |
E:first-child | Совпадает элемент E, если E является первым дочерним элементом своего родителя. | Псевдокласс :first-child |
E:link E:visited | Совпадает элемент E, если 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 | Совпадает любой ID элемента E, эквивалентный "myid". | Селекторы ID |
В дополнение к функциональности CSS1, CSS2 поддерживает:
Понятие типов носителя. Значение 'inherit' для всех свойств. Страничные носителиЗвуковые таблицы стилей
Несколько опций интернационализации, включая стили нумерации списков, поддержку двунаправленного текста
и чувствительных к языку знаков кавычек. Расширенный механизм выбора шрифта, включая смысловой подбор, синтез и загружаемые шрифты. Введены также понятие системных шрифтов и новое свойство 'font-size-adjust'.
Таблицы, включая новые значения 'display' и 'vertical-align'. Относительное и абсолютное позиционирование, включая фиксированное позиционирование. Новые типы боксов (наряду с блок- и инлайн-): compact и run-in. Возможность контролировать переполнение, сжатие и видимость содержимого в модели визуального форматирования. Возможность специфицировать максимальные и минимальные ширину и высоту в модели визуального форматирования.
Расширенный механизм селекторов, включая дочерние селекторы, смежные селекторы и селекторы атрибутов.
Генерируемое содержимое, счётчики и автоматическую нумерацию и маркёры.
Оттенение текста с помощью нового свойства 'text-shadow'.
Различные новые псевдоклассы, :first-child, :hover, :focus, :lang.
Системные цвета и шрифты. Курсоры. Динамические схемы.
Спецификация CSS1 была короче и компактнее. Данная спецификация намного объёмнее и более читабельна. Большая часть нового материала описывает новую функциональность, но описания из CSS1 также расширены. За исключением немногих случаев, описанных ниже, обновлённые описания не изменили ни синтаксис, ни семантику.
Бокс compact
ведёт себя так:
Если бокс блока (не поплавок и не позиционированный абсолютно) следует после бокса compact, то compact-бокс форматируется как однострочный инлайн-бокс. Ширина результирующего бокса сравнивается с одним из полей бокса блока. Выбор левого или правого поля определяется в 'direction', специфицируемом для элемента, производящего
содержащий блок для compact-бокса и следующего бокса. Если ширина инлайн-бокса меньше, чем/равна ширине поля, то инлайн-бокс позиционируется в поле, как описано далее.
В ином случае compact-бокс становится боксом блока.
Compact-бокс позиционируется в поле следующим образом: он находится вне (слева или справа от) первого строчного бокса блока, но влияет на расчёт высоты строчного бокса. Свойство 'vertical-align' compact-бокса определяет вертикальную позицию compact-бокса относительно строчного бокса. Позиция compact-бокса по горизонтали - всегда в поле бокса блока.
Элемент, который не может быть отформатирован в пределах одной строчки, не может размещаться в поле последующего блока. Например, элемент 'compact' в HTML, который содержит элемент BR, всегда будет форматироваться как бокс блока (принимая для BR стиль по умолчанию, когда вставляется новая строка). Для размещения многострочного текста в поле часто больше подойдёт свойство 'float'.
Следующий пример иллюстрирует compact-бокс:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>A compact box example</TITLE> <STYLE type="text/css"> DT { display: compact } DD { margin-left: 4em } </STYLE> </HEAD> <BODY> <DL> <DT>Short <DD><P>Description goes here. <DT>too long for the margin <DD><P>Description goes here. </DL> </BODY> </HTML>
Этот пример может выглядеть после форматирования так:
short Description goes here
too long for the margin
Description goes here
Свойство 'text-align' можно использовать для выравнивания compact-элемента внутри поля: у левого края поля ('left'), у правого края поля ('right') или по центру поля ('center'). Значение 'justify' не применяется и обрабатывается или как 'left', или как 'right', в зависимости от 'direction'/направления элемента блока, в поле которого форматируется compact-элемент ('left', если направление - 'ltr', 'right', если направление 'rtl').
Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе генерируемое содержимое.
Хотя все действительные таблицы стилей CSS1 являются таковыми и в CSS2, есть несколько случаев, когда таблицы стилей CSS1 будут иметь другие значения при интерпретации в качестве таблиц CSS2. Большинство изменений обусловлено опытом разработки, но есть также и корректировка некоторых ошибок.
Значение "!important" изменено. В CSS1 "!important" в таблице стилей автора имел преимущество перед "!important" таблицы стилей пользователя. В CSS2 сделано наоборот.
В CSS2 значения цвета
ужаты в соответствии с гаммой устройства, а не с гаммой sRGB, как в CSS1.
В CSS1 просто указано, что 'margin-right' игнорировалось, если 'margin-left' и 'width' были установлены. В CSS2 выбор между смягчением 'margin-right' или 'margin-left' зависит от направления письма.
В CSS1 некоторые свойства (например, 'padding') имели значения, ссылающиеся на ширину родительского элемента. Это было ошибкой; значение всегда должно ссылаться на ширину элемента уровня блока, и данная спецификация отражает это путём ввода термина "containing block/содержащий блок". Начальное значение 'display' - 'inline' в CSS2, а не '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.
Авторские утилиты должны позволять авторам таблиц стилей добавлять и редактировать дескрипторы шрифтов. В некоторых случаях авторские утилиты могут оказать помощь путём локальной проверки установленных шрифтов и автоматической генерации дескрипторов для шрифтов, на которые имеются ссылки в таблице стилей. Эта функция может выполняться также утилитами, подразделяющими или конвертирующими шрифты для готовности к динамической загрузке.
Данная таблица указывает, где может быть найдена такая информация для шрифтов обычных форматов.
Дескриптор | Type 1 | TrueType и OpenType | TrueType GX [TRUETYPEGX] |
'ascent' | 'Ascender' в файле AFM/PFM | 'Ascender' в таблице 'hhea' или (предпочтительнее) 'sTypoAscender' в таблице 'OS/2' | 'horizontalBefore'
в таблице 'fmtx |
'baseline' | таблица bsln, см. примечание
ниже | ||
'bbox' | FontBBox, словарь шрифтов | вхождения таблицы 'head' - 'xMin', 'xMax', 'yMin'
и 'yMax' |
|
'cap-height' | CapHeight в файле AFM/PFM | ||
'descent' | 'Descender' в файле AFM/PFM | ||
'mathline' | таблица bsln | ||
'font-family' | FamilyName, fontinfo-словарь | таблица name | |
'stemh' | StdHW, приватный словарь файла AFM/PFM | ||
'stemv' | /StdVW, приватный словарь | таблица cvt | |
'topline' | таблица bsln | ||
'unicode-range' | cmap file | таблица OS/2, см. Приложение С | |
'units-per-em' | FontMatrix, словарь шрифтов | unitsPerEm, таблица head | |
'widths' | таблица hmtx |
Внутри таблицы bsln, ideographic centered baseline может использоваться для растяжений преобладающих идеографических символов, а ideographic low baseline больше подходит для идеографических символов при прогоне преобладающих символов Latin, Greek или Cyrillic.
Значения некоторых типов могут принимать целые (обозначенные <integer>) или реальные числа (обозначенные <number>). Реальные и целые числа специфицируются только в десятеричной нотации. <integer> состоит из одной или более цифр от "0" до "9". <number> может быть <integer> или ноль или более цифр с точкой (.), после которой идут одна или более цифр. И целые, и реальные числа могут иметь впереди "-" или "+" для указания знака числа.
Заметьте, что многие свойства, допускающие целые и реальные числа в качестве значения, на практике ограничивают значение некоторым диапазоном, часто неотрицательным значением.
Задаёт позицию центральной базовой линии в em-квадрате. Центральная базовая линия используется в идеографическом письме для выравнивания, так же как нижняя базовая линия используется для выравнивания в латинице, греческом письме и кириллице.
Значения частот (обозначаемые в тексте <frequency>) используются со звуковыми каскадными таблицами стилей.
Их формат: <number>, сразу за которым идёт идентификатор единиц измерения частоты.
Идентификаторами единиц измерения частоты являются:
Hz: герцы kHz: килогерцы
Значения частоты не могут быть негативными.
Например, 200Hz (или 200hz) - это басовый звук, а 6kHz (или 6khz) - средний регистр.
Panose-1
это индустриальный стандарт классификации шрифтов TrueType и технологии подбора шрифтов. Система PANOSE состоит из набора десяти цифр, которые категоризируют ключевые атрибуты шрифта латиницы, процедуры классификации при создании этих чисел и программы Mapper, которая определяет ближайшее возможное совпадение в данном наборе шрифтов. Эта система может, с некоторыми изменениями, использоваться в греческом и кириллическом письме, но не подходит для однокамерного и идеографического письма (еврейского, армянского, арабского, китайского/японского/корейского).
DocLock™
Bitstream-технология DocLock™ гарантирует, что TrueDoc PFRs могут использоваться только на том сайте, где они опубликованы. TrueDoc PFR, перемещённый на другой сайт или имеющий на себя ссылку с другого сайта, работать не будет.
Digital Signature/Цифровая подпись
Часть технологии доверительного управления, используемая для предоставления подтверждения о ресурсе.
Font Caching/Кэширование шрифта
Кэширование шрифта позволяет временно копировать шрифты на клиентской системе. Шрифты часто хранятся на диске с другими кэшированными объектами, такими как графика, специфичными для пользовательского агента (ПА).
Font Face
"Разновидность", относится к определённой разновидности шрифта, за исключением его размера.
Font Matching/Совпадение шрифтов
Совпадение шрифтов - это процесс выбора похожего шрифта на базе одного или нескольких атрибутов основного шрифта. Обычные атрибуты: serif/с засечками, sans-serif/без засечек, вес, высота заглавных, x-высота, spacing/плотность, язык и posture/позиция. Совпадение шрифтов зависит от алгоритма и разнообразия шрифтов-кандидатов.
Glyph Representation Sub-setting/Подразделение Представления Глифов
Подразделение (поднабор) представления глифов это процесс, при котором ненужные глифы (вместе с их информацией об ориентации и кернинге) удаляются из основного шрифта, чтобы создать уменьшенный поднабор шрифта, покрывающий определённый документ или набор документов. Это обычный способ для документов, использующих идеографическое письмо, где дополнение глифами базового шрифта может быть очень обширным. Подразделение представления глифов для документов, использующих письмо с лигатурами, такое как арабское, представляет трудности при отсутствии сведений о правилах формирования лигатур на конечной системе вывода.
Intellifont
Intellifont-технология была разработана фирмой Agfa и является первичным форматом для Hewlett-Packard и других принтеров, использующих язык PCL5. Это также первичный формат шрифтов компьютеров Amiga.
Содержание
2.1 Краткое пособие CSS2 для HTML
2.2 Краткое пособие CSS2 для XML
2.3 Модель процесса CSS2
2.3.1 Канва
2.3.2 Модель адресации CSS2
2.4 Принципы дизайна CSS
Глифы шрифтов cursive, в терминах CSS, обычно имеют связывающие окончания или другие курсивные характеристики типа italic. Глифы частично или полностью соединяются, и результат больше напоминает письмо от руки или кистью, чем типографскую печать. Шрифты для некоторых видов письма, таких как арабское, почти всегда курсивные. 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 |
Значение: | <color> | inherit |
Начальное: | зависит от пользовательского агента (ПА) |
Применяется: | ко всем элементам |
Наследуется: | да |
Процентное: | N/A |
Носитель: | визуальный |
Это свойство описывает цвет переднего плана содержимого текста элемента. Можно по разному специфицировать красный цвет:
Пример(ы):
EM { color: red } /* предопределённое название цвета */ EM { color: rgb(255,0,0) } /* диапазон RGB 0-255 */
Эти свойства специфицируют цвет рамки бокса.
'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
Значение: | <color> | inherit |
Начальное: | значение свойства 'color' |
Применяется: | ко всем элементам |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный |
Значение: | <color>{1,4} | transparent | inherit |
Начальное: | см. индивидуальные свойства |
Применяется: | ко всем элементам |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный |
Свойство 'border-color'
устанавливает цвет рамки с четырёх сторон.
Значения имеют следующий смысл:
<color>
Специфицирует значение цвета. transparent
Рамка прозрачна (хотя и может иметь ширину).
Свойство 'border-color'
может иметь от одного до четырёх значений, и эти значения устанавливаются для четырёх сторон так же, как и в 'border-width'.
Если цвет рамки элемента не специфицирован в свойстве рамки, ПА обязаны использовать значение свойства 'color' элемента как вычисленное значение цвета рамки.
Пример(ы):
В этом примере рамка будет сплошной и чёрной: P { color: black; background: white; border: solid; }
это или предопределённое слово, или числовая спецификация 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 в 16-ричной записи - '#' за которым сразу идут три или шесть 16-ричных символов. Трёхсимвольная запись RGB (#rgb) конвертируется в шестисимвольную форму (#rrggbb) путём дублирования цифр, но не дополнением нулями. Например, #fb0 расширяется до #ffbb00. Это гарантирует, что белый (#ffffff) можно специфицировать сокращённой записью (#fff) и удалить зависимость от глубины цвета на дисплее.
Формат значения RGB в функциональной записи - 'rgb(' за которым идёт список разделённых запятыми трёх числовых значений (или трёх целых, или трёх процентных) с последующей ')'. Целое значение 255 соответствует 100% и F или FF в 16-ричной записи: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Пробельные символы допускаются вокруг числовых значений.
Все цвета RGB специфицированы в цветовом пространстве sRGB (см. [SRGB]). ПА могут различаться в том, насколько точно они представляют эти цвета, но использование sRGB предоставляет недвусмысленное и объективно измеряемое определение того, каким должен быть цвет, соответствующий международным стандартам (см. [COLORIMETRY]).
Соответствующие ПА могут ограничивать свои возможности вывода цвета для выполнения коррекции гаммы цветов. sRGB специфицирует гамму дисплея в 2.2 от специфицированных условий просмотра. ПА должны уточнить цвет, заданный в CSS, так чтобы в сочетании с 'натуральной' гаммой дисплея выводного устройства воспроизводилась эффективная гамма дисплея в 2.2. См. дополнительные детали в разделе коррекция гаммы. Обратите внимание, что воздействие производится только на цвета, специфицированные в CSS; например, от изображений ожидается сопровождающая их собственная цветовая информация.
Значения вне гаммы устройства должны усекаться: значения red, green и blue обязаны измениться, чтобы войти в рамки диапазона, поддерживаемого устройством. Для типичного CRT-монитора, чья гамма устройства - та же самая, что и 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; некоторые цвета вне диапазона 0..255 sRGB будут презентабельными (в пределах гаммы устройства), в то время как другие цвета в пределах диапазона 0..255 sRGB будут вне гаммы устройства и будут, таким образом, усечены.
Примечание. Хотя цвета могут добавить значительное количество информации в документы и сделать их более читабельными, необходимо учитывать, что определённые сочетания цветов могут вызвать проблемы у людей, страдающих нарушениями восприятия цвета. Если Вы используете фоновое изображение или устанавливаете цвет фона, подбирайте, пожалуйста, подходящий цвет переднего плана.
Содержание
14.1 Цвет переднего плана: свойство 'color'
14.2 Фон
14.2.1 Свойства фона: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' и 'background'
14.3 Коррекция цветовой гаммы
Свойства CSS позволяют авторам специфицировать цвет переднего плана и фона элементов. В качестве фона используется цвет или изображение. Свойства фона позволяют авторам позиционировать фоновое изображение, размножать его и объявлять как фиксированное относительно порта просмотра или прокручивать вместе с документом.
Синтаксис значений цвета см. в разделе единицы измерения цвета.
Имеется множество различных форматов шрифта для использования на разных платформах. Чтобы выбрать предпочтительный формат шрифта, используется свободная дискуссия (см. [NEGOT]). Всегда можно определить, когда ссылка на шрифт отсутствует, поскольку URI находится внутри описания шрифта. Данная конкретная реализация будет знать, какие форматы загружаемых шрифтов она поддерживает и может, соответственно, использовать подсказки формата для исключения загрузки шрифтов неподдерживаемых форматов.
Эта информация доступна в шрифте при просмотре битов 'ulUnicodeRange' в таблице 'OS/2' (если она ('OS/2') её имеет), которая (таблица) содержит битовые поля представления набора. Эта таблица определена в ревизии 1.66 спецификации TrueType от Microsoft. Можно рассматривать эту информацию как набор, где каждый элемент соответствует блоку символов Unicode 1.1, и присутствие этого элемента в наборе означает, что шрифт имеет один или более глифов-изображений для представления по меньшей мере одного символа этого блока. Набор содержит 128 элементов, как описано ниже. Порядок обычно следует порядку стандарта Unicode 1.1. Эта таблица может использоваться для конвертации информации в шрифте TrueType в дескриптор 'unicode-range' CSS.
0 | 1 | Basic Latin | U+0-7F |
1 | 2 | Latin-1 Supplement | U+80-FF |
2 | 4 | Latin-1 Extended-A | U+100-17F |
3 | 8 | Latin Extended-B | U+180-24F |
4 | 1 | IPA Extensions | U+250-2AF |
5 | 2 | Spacing Modifier Letters | U+2B0-2FF |
6 | 4 | Combining 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 | 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 | 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 | 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 - например, невозможно представить Tibetan или другие виды письма, введённые в Unicode 2.0 или более поздних ревизиях.
Числа Family, Serif Style и Proportion используются Windows95 для выбора и совпадений шрифтов.
Значения десяти чисел и допустимые значения (в скобках) даны ниже для самого общего случая, когда цифра "family" - 2, Text and Display. (Если первая цифра имеет другие значения, то остальные девять цифр имеют другой смысл (значение)). Детальную информацию о Panose-1 см. в [PANOSE].
Family
Any (0) No Fit (1) [PANOSE] Latin Text and Display (2) [PANOSE] Latin Script (3) [PANOSE] Latin Decorative (4) [PANOSE] Latin Pictorial (5)
Serif Style
Any (0) No Fit (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)
Weight Any (0) No Fit (1) Very Light (2)[100] Light (3) [200] Thin (4) [300] Book (5) [400] то же, что CSS1 'normal'
Medium (6) [500] Demi (7) [600] Bold (8) [700] то же, что CSS1 'bold'
Heavy (9) [800] Black (10) [900] Extra Black / Nord (11) [900] форсирует отображение в масштаб 100-900 CSS1
Proportion
Any (0) No Fit (1) Old Style (2) Modern (3) Even Width (4) Expanded (5) Condensed (6) Very Expanded (7) Very Condensed (8) Monospaced (9)
Contrast Any (0) No Fit (1) None (2) Very Low (3) Low (4) Medium Low (5) Medium (6) Medium High (7) High (8) Very High (9)
Stroke Variation Any (0) No Fit (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)
Arm Style Any (0) No Fit (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)
Letterform
Any (0) No Fit (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)
Этот дескриптор определяет количество "units/единиц измерения" на em; эти units могут использоваться другими дескрипторами для выражения различных размеров, следовательно, 'units-per-em' необходим, если другие дескрипторы зависят от него.
Значение: | <number> |
Начальное: | не определено |
Носитель: | визуальный |
Это дескриптор единиц измерения для координат прямоугольника em, размера решётки дизайна, на которую накладываются глифы.
Необходим для ссылки на данные шрифта, загружаемые или установленные локально.
Значение: | [ <uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri>
[format(<string> [, <string>]*)] | <font-face-name> ]* |
Начальное: | не определено |
Носитель: | визуальный |
Это выстроенный по приоритету список разделённых запятыми внешних ссылок и/или имён локально установленных файлов. Внешняя ссылка указывает на данные шрифта в Web. Это необходимо, если WebFont загружен. Ресурс шрифта может быть поднабором шрифта-источника, например, он может содержать только те глифы, которые необходимы для текущей страницы или для набора страниц.
Внешняя ссылка состоит из URI, за которым может идти подсказка, касающаяся формата ресурса шрифта, найденного по данному 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, включая TrueType Open | .ttf |
"truetype-gx" | TrueType с расширениями GX | |
"speedo" | Speedo | |
"intellifont" | Intellifont |
Как и с прочими URI в CSS, URI может быть неполным, и в этом случае он расширяется относительно расположения таблицы стилей, содержащей @font-face.
Установленное локально <font-face-name> это полное имя локально установленного шрифта. Full font name\полное имя шрифта
Следующий дескриптор не обязателен внутри определения шрифта, но используется для того, чтобы избежать проверки или загрузки шрифта, который не имеет достаточного количества глифов для вывода определённого символа.
Значение: | <urange> [, <urange>]* |
Начальное: | U+0-7FFFFFFF |
Носитель: | визуальный |
Это дескриптор диапазона символов ISO 10646, покрываемого данным шрифтом.
Значения <urange> выражаются с использованием 16-ричных значений с префиксом "U+", соответствующих кодовой позиции в ISO 10646 ([ISO10646]).
Например, U+05D1 это символ ISO 10646 'еврейская буква bet'. Для значений вне Basic Multilingual Plane/BMP (Базовый Многоязычный План) подставляются дополнительные ведущие цифры, соответствующие числу плана, и также 16-ричные, как этот U+A1234 символ Плана 10 с 16-ричной кодовой позицией 1234. Со времени написания, новые символы вне BMP не добавлялись. Ведущие нули (например, 0000004D) верны, но не требуются.
Начальное значение этого дескриптора покрывает не только весь Basic Multilingual Plane (BMP), в пределах U+0-FFFF, но также и весь репертуар ISO 10646. Таким образом, начальное значение говорит о том, что шрифт может содержать глифы любых символов ISO 10646. Спецификация значения 'unicode-range' предоставляет информацию для эффективного поиска, объявляя ограниченный диапазон, в пределах которого шрифт может иметь глифы символов. Шрифт не должен искаться вне указанного диапазона символов.
Значения могут записываться любым количеством цифр. Для единичной цифры символ '?' означает 'любое значение', которое создаёт диапазон
позиций символов. Таким образом, используя одиночное число:
unicode-range: U+20A7 нет маски - обозначение одиночной позиции символа (песета - символ испанской валюты)
unicode-range: U+215? одна маска, покрывает диапазон от 2150 до 215F (дроби)
unicode-range: U+00?? две маски, покрывает диапазон от 0000 до 00FF (Latin-1)
unicode-range: U+E?? две маски, покрывает от 0E00 до 0EFF (письмо Lao).
Следующие дескрипторы имеют те же имена, что и соответствующие свойства шрифта CSS2, и принимают одиночное значение или список разделённых запятыми значений.
Значения в таком списке (за исключением особо отмеченных) - те же самые, что и соответствующие свойства CSS2. Если это одиночное значение, оно должно совпадать. Если это список, любой элемент списка может образовать совпадение. Если в @font-face дескриптор отсутствует, используется начальное значение дескриптора.
Значение: | [ <family-name> | <generic-family> ] [, [<family-name> | <generic-family> ]]* |
Начальное: | зависит от ПА |
Носитель: | визуальный |
Это дескриптор имени семейства шрифтов для шрифта, принимающий то же значение, что и свойство 'font-family'.
Значение: | all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]* |
Начальное: | all |
Носитель: | визуальный |
Это дескриптор стиля шрифта, принимающий то же значение, что и свойство 'font-style', за исключением того, что использование списка запрещено.
Значение: | [normal | small-caps] [,[normal | small-caps]]* |
Начальное: | normal |
Носитель: | визуальный |
Это CSS-обозначение того, является ли этот шрифт вариантом "малые заглавные". Он принимает те же значения, что и свойство 'font-variant', за исключением того, что использование списка запрещено.
Примечание. Кириллические прямые шрифты могут быть помечены в 'font-variant' как "малые заглавные", что лучше совмещается с латиницей (а соответствующий курсив - помечен 'font-style' как italic с той же целью).
Значение: | 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', с тремя исключениями:
Значение: | 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 |
Носитель: | визуальный |
Значение: | all | <length> [, <length>]* |
Начальное: | all |
Носитель: | визуальный |
Синтезирование шрифта предполагает, как минимум, совпадение размеров ширины специфицированного шрифта. Следовательно, для синтеза данная метрическая информация должна быть доступна. Таким же образом и для прогрессивного представления необходимо наличие метрической информации о ширине, чтобы исключить перерисовку содержимого при загрузке основного шрифта. Хотя следующие дескрипторы не обязательны для определения CSS2, некоторые необходимы для синтезирования (или прогрессивного отображения без перерисовки), если этого хочет автор. Как только основной шрифт становится доступен, подставленный шрифт должен быть заменён. Любые из этих дескрипторов, если представлены, дают лучшее или более быстрое получение предполагаемого шрифта.
Самыми важными из этих дескрипторов являются 'widths' и 'bbox', которые используются для предотвращения перерисовки текста при получении доступа к основному шрифту. В дополнение к этому, дескрипторы из набора дескрипторов, используемых для подбора, могут использоваться для лучшего синтеза внешнего вида основного шрифта.
Значение: | [<urange> ]? [<number> ]+ [,[<urange> ]? <number> ]+] |
Начальное: | не определено |
Носитель: | визуальный |
Это дескриптор ширины глифов. Значением является список разделённых запятыми значений <urange>, за каждым из которых следует одно или более значений ширины глифов. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.
Если <urange> опущен, принимается диапазон U+0-7FFFFFFF, который покрывает все символы и их глифы. Если заданных значений ширины глифов не достаточно, то последнее в списке реплицируется для покрытия urange. Если задано слишком много значений ширины, то излишние игнорируются.
Например:
widths: U+4E00-4E1F 1736 1874 1692 widths: 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. Поскольку предоставлено недостаточное количество значений ширины, последняя ширина реплицируется для покрытия оставшегося диапазона значений. Во втором примере установлена одиночная ширина - 1490 для всего диапазона из 256 глифов, а затем - конкретные значения ширины для диапазона из 16 глифов.
Эти необязательные дескрипторы используются для выравнивания нескольких отрезков текста друг относительно друга.
Значение: | <number> |
Начальное: | 0 |
Носитель: | визуальный |
Это дескриптор нижней базовой линии
шрифта. Если этот дескриптор не установлен в значение по умолчанию (если не нулевое), должен использоваться также дескриптор 'units-per-em'.
Значение: | <number> |
Начальное: | не определено |
Носитель: | визуальный |
Это дескриптор центральной базовой линии шрифта. Если значение не определено, ПА может использовать эвристику: как midpoint/среднюю точку для значений восхождения и нисхождения (ascent и descent). Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.
Значение: | <number> |
Начальное: | не определено |
Носитель: | визуальный |
Это дескриптор математической базовой линии шрифта. Если не определен, ПА может использовать центральную базовую линию. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.
Значение: | <number> |
Начальное: | не определено |
Носитель: | визуальный |
Это дескриптор верхней базовой линии
шрифта. Если не определен, ПА может использовать приблизительное значение, такое как ascent. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.
Это грамматика LL(1) (но учтите, что большинство ПА не должны использовать её напрямую, поскольку она отражает не соглашения по разбору, а только синтаксис CSS2. Формат продуктов оптимизирован для удобства, и используются некоторые сокращения Yacc (см. [YACC]):
*: 0 или более +: 1 или более ?: 0 или 1 |: разделитель альтернатив []: группировка
Продуктами являются: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*
/* * Имеется ограничение: цвет обязан иметь * 3 или 6 16-ричных цифр (т.е., [0-9a-fA-F]) после "#", * например, "#000" это OK, но "#abcd" - нет. */ hexcolor : HASH S* ;
Обозначает репертуар глифов шрифта, относящийся к ISO 10646 (Unicode).Поскольку этот репертуар не сплошной (большинство шрифтов не покрывает весь ISO 10646), данный дескриптор содержит блоки диапазона, которые частично
покрывают диапазон (не даётся никаких гарантий полного покрытия), и используется для отказа от неподходящих шрифтов (тех, которые не имеют требуемых глифов). Он не указывает, что шрифт определённо имеет нужные глифы, а только что есть смысл загрузить шрифт и просмотреть его. См. детальную информацию о родственных документах в [ISO10646].
Этот метод может быть расширен в будущем для размещения символов Unicode без изменения синтаксиса и с сохранением существующего содержимого.
Шрифты тех форматов, которые не включают данную информацию прямо или косвенно, могут тем не менее использовать эту характеристику, но значение обязательно должно быть предоставлено автором документа или таблицы стилей.
Имеются другие классификации письма, такие как система Monotype (см. [MONOTYPE]) и предлагаемая система ISO. Эти системы плохо расширяются.
В связи с этим, в данной спецификации используется классификация репертуаров глифов в диапазоне символов ISO 10646, которые (символы) могут быть представлены определённым шрифтом. Эта система может расширяться для покрытия будущих дополнений.
Свойство 'visibility' принимает значение 'collapse' для элементов ряда, группы рядов, столбца и группы столбцов. Это значение вызывает удаление целого ряда или столбца с экрана, и пространство, нормально занимаемое этим рядом или столбцом, становится доступным для другого содержимого. Подавление ряда или столбца не влияет, однако, на структуру таблицы. Это позволяет динамически удалять столбцы или ряды таблицы без форсирования реструктурирования таблицы для того, чтобы учесть возможные изменения в столбцах.
Иногда авторам таблиц стилей может понадобиться создать контуры вокруг визуальных объектов, таких как кнопки, активные поля формы, карты изображений и т.п., чтобы выделить их. Контуры CSS2 отличаются от рамок в следующем:
Контуры не занимают пространство. Контуры могут не быть прямоугольными.
Свойства контуров управляют стилем этих динамических контуров.
Значение: | [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit |
Начальное: | см. конкретные свойства |
Применяется: | ко всем элементам |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный, интерактивный |
Значение: | <border-width> | inherit |
Начальное: | medium |
Применяется: | ко всем элементам |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный, интерактивный |
Значение: | <border-style> | inherit |
Начальное: | none |
Применяется: | ко всем элементам |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный, интерактивный |
Значение: | <color> | invert | inherit |
Начальное: | invert |
Применяется: | ко всем элементам |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный, интерактивный |
Контур, созданный свойствами контуров, прорисовывается "поверх" бокса, т.е. контур всегда сверху и не влияет на позицию и размер бокса или любых других боксов. Следовательно, отображение или подавление контуров не вызывает перерисовки.
Контур прорисовывается сразу за краем рамки.
Контуры могут быть непрямоугольными. Например, если элемент разбит на несколько строк, контур будет минимальным необходимым для включения всех боксов элемента. В противоположность рамкам, контур не открыт в начале или в конце строчного бокса, но всегда полностью замкнут.
Свойство 'outline-width'
принимает те же значения, что и 'border-width'.
Свойство 'outline-style'
принимает те же значения, что и 'border-style', за исключением 'hidden', который не является допустимым стилем контура.
Свойство 'outline-color'
Интерактивные ПА иногда изменяют представление в ответ на действия пользователя. CSS имеет три псевдокласса для общих случаев:
Псевдокласс :hover применяется, если указал на элемент (каким-либо указательным устройством), но не активировал его. Например, визуальный ПА может применить этот псевдокласс, когда курсор (указатель мыши) проходит над боксом, сгенерированным элементом. ПА, не поддерживающие интерактивные носители, не должны поддерживать этот псевдокласс. Некоторые соответствующие ПА, поддерживающие интерактивные носители, могут оказаться неспособными поддерживать этот псевдокласс (например, устройство "карандаш").
Псевдокласс :active применяется, если элемент активирован пользователем. Например, между нажатием и отпусканием пользователем клавиши мыши.
Псевдокласс :focus применяется, если элемент имеет фокус (принял событие от клавиатуры или другие формы ввода текста).
Эти псевдоклассы не являются взаимоисключающими. Элемент может совпадать с несколькими из них одновременно.
CSS не определяет, какие элементы могут быть в вышеуказанных состояниях и как осуществляется вход и выход из этих состояний. Сценарий может меняться в зависимости от того, реагирует элемент на действия пользователя или нет, и различные устройства и ПА могут иметь разные способы указания на элементы (их активации).
От ПА не требуется перерисовывать отображаемый в данный момент документ из-за переносов псевдоклассов. Например, таблица стилей может специфицировать, что 'font-size' гиперссылки :active должен быть больше, чем у неактивной гиперссылки, но поскольку это может вызвать изменение положения букв при выборе пользователем гиперссылки, ПА может проигнорировать соответствующее правило стиля.
Пример(ы):
A:link { color: red } /* непосещённые ссылки */ A:visited { color: blue } /* посещённые ссылки */ A:hover { color: yellow } /* пользователь провёл над */ A:active { color: lime } /* активные ссылки */
Заметьте, что A:hover обязан размещаться после правил A:link и A:visited, поскольку иначе правила каскадирования спрячут свойство 'color' правила A:hover. Аналогично, поскольку A:active размещено после A:hover, цвет активной ссылки (lime) будет применён, когда пользователь и активирует и проведёт над элементом A.
Пример(ы):
Пример комбинации динамических псевдоклассов:
A:focus { background: yellow } A:focus:hover { background: white }
Последний селектор совпадает с элементами A, которые входят в псевдоклассы :focus и :hover.
О представлении контуров фокуса см. раздел динамические контуры фокуса.
Примечание. В CSS1 псевдокласс ':active' взаимно исключался с ':link' и ':visited'. Сейчас это уже не так. Элемент может быть и ':visited', и ':active' (или ':link' и ':active'), и нормальные правила каскадирования определяют применение свойств.
Это сканер, написанный в нотации Flex (см. [FLEX]). Сканер является нечувствительным к регистру.
Два "\377" представляют наибольшее число символа, которое может быть обработано текущей версией Flex (десятеричное 255). Они должны читаться как "\4177777" (десятеричное 1114111), которое является наивысшей возможной кодовой точкой в 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;}
При нормальном обтекании разрывы страниц могут появляться в следующих местах:
На вертикальном поле между боксами блока. Если разрыв страницы появляется здесь, вычисленные значения соответствующих свойств 'margin-top'
и 'margin-bottom'
установлены в '0'. Между строчными боксами
внутри бокса блока.
Эти разрывы являются субъектами для следующих правил:
Правило A: Разрывы из пункта (1) допускаются, только если свойства 'page-break-after' и 'page-break-before' всех элементов, генерирующих боксы у данного поля, разрешают это, что имеет место, когда по меньшей мере одно из них (свойств) имеет значение 'always', 'left' или 'right', или когда все они - 'auto'.
Правило B: В то же время, если все они - 'auto' и ближайший общий предок всех элементов имеет значение свойства 'page-break-inside' - 'avoid', тогда разрыв здесь не разрешается.
Правило C: Разрывы из пункта (2) допускаются, только если количество строчных боксов между разрывом и началом закрывающего бокса блока имеет значение 'orphans' или более, а количество строчных боксов между разрывом и концом бокса имеет значение 'widows' или более.
Правило D: В дополнение, разрывы (2) допускаются, только если свойство 'page-break-inside' - 'auto'.
Если вышесказанное не обеспечивает достаточное количество точек разрывов для предотвращения выхода содержимого за пределы страничного бокса, тогда правила B и D исключаются для того, чтобы найти дополнительные точки разрывов.
Если это всё ещё не даёт достаточного количества точек разрывов, то правила A и C также исключаются, чтобы найти дополнительные точки разрывов.
Разрывы страниц не могут появляться внутри боксов, позиционированных абсолютно.