О спецификации CSS2 том 2

Абсолютно позиционированные незамещаемые элементы


10.6.4 Абсолютно позиционированные незамещаемые элементы

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


    • Абсолютно позиционированные замещаемые элементы


    10.3.8 Абсолютно позиционированные замещаемые элементы

    Ситуация напоминает предыдущую, за исключением того, что элемент имеет внутреннюю ширину. Последовательность замен теперь:
  • Если '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') и уравнение решается с этим значением.


    • 10.6.5 Абсолютно позиционированные замещаемые элементы

    Ситуация подобна предыдущей, за исключением того, что элемент имеет внутреннюю высоту. Последовательность замен теперь:
  • Если 'height' - 'auto', оно заменяется внутренней высотой элемента.
  • Если 'top' имеет значение 'auto', оно заменяется расстоянием от верхнего края содержащего блока до края верхнего поля гипотетического бокса,который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится сверху от содержащего блока.
  • Если 'bottom' - 'auto', 'auto' в 'margin-top' или 'margin-bottom' заменяется на '0'.
  • Если в данной точке и 'margin-top', и 'margin-bottom' - всё ещё 'auto', уравнение решается с помощью дополнительного условия: что эти два поля обязаны получить одинаковые значения.
  • Если в данной точке имеется только одно значение 'auto', уравнение решается с этим значением.
  • Если в данной точке значения переограничены, игнорируется значение 'bottom', и уравнение решается с этим значением.


    • Абсолютное позиционирование незамещаемые элементы


    10.3.7 Абсолютное позиционирование, незамещаемые элементы

    Условие, определяющее вычисленные значения для этих элементов:
    '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') и уравнение решается с этим значением.


    • Абсолютное позиционирование

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

    Абсолютное позиционирование

    9.8.4 Абсолютное позиционирование

    Наконец, мы рассмотрим действие абсолютного позиционирования. Вот объявления CSS для outer и inner:
    #outer { position: absolute; top: 200px; left: 200px; width: 200px; color: red; } #inner { color: blue } которые позиционируют верх бокса outer относительно его содержащего блока. Содержащий блок для позиционируемого бокса устанавливается ближайшим позиционированным предком (или, если таковой не существует, начальным содержащим блоком, как в нашем примере). Верхняя сторона бокса outer на '200px' ниже верха содержащего блока, а левая сторона - на '200px' от левой стороны. Дочерний бокс outer'а позиционирован нормально относительно родителя.

    Алгоритм фиксированного вывода

    Алгоритм фиксированного вывода

    В этом (быстром) алгоритме горизонтальный вывод таблицы не зависит от содержимого ячеек; он зависит только от ширины таблицы, ширины столбцов и от рамок и заполнения ячеек.
    Ширина таблицы может быть специфицирована явно свойством 'width'. Значение 'auto' (и для 'display: table', и для 'display: inline-table') означает использование алгоритма автоматического вывода таблицы.
    В алгоритме фиксированного вывода ширина каждого столбца определяется так:
  • Элемент столбца со значением свойства 'width', отличным от 'auto', устанавливает ширину этого столбца.
  • Иначе, ячейка в первом ряду со значением свойства 'width', отличным от 'auto', устанавливает ширину этого столбца. Если ячейка занимает более одного столбца, ширина разделяется на эти столбцы.
  • Любые оставшиеся столбцы равномерно разделяют оставшееся горизонтальное пространство таблицы (минус рамки и заполнение ячеек).
    • Ширина таблицы будет тогда больше значения свойства 'width' для элемента таблицы и суммарной ширины столбцов (плюс заполнение ячеек или рамки). Если таблица шире, чем столбцы, оставшееся пространство должно быть равномерно распределено между столбцами.
    При таком методе ПА может начать вывод таблицы сразу, как только будет получен весь первый ряд. Ячейки в последующих рядах не влияют на ширину таблицы. Любая ячейка, имеющая переполняющее содержимое, использует свойство 'overflow' для определения того, сжимать ли переполняющее содержимое.

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


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

    Эта спецификация расширяет алгоритм, данный ранее в 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, является именем запрашиваемого семейства шрифтов, а не каким-либо именем совпавшего по смыслу шрифта. Подразумевается, что ПА, не поддерживающие поиск совпадений по смыслу, пропускают этот шаг.
  • Если в шаге 3 не найдено совпадений шрифта с 'font-family', ПА, выполняющие загрузку шрифтов, могут продолжить проверку дескриптора 'src' пробного шрифта из шагов 2 или 3 для идентификации доступного сетевого ресурса и корректного формата. Если имеются совпадения для всех оставшихся дескрипторов, это означает, что для данного элемента найден совпадающий шрифт, и ПА может попытаться загрузить этот ресурс шрифта. ПА может выбрать вариант блокирования этой загрузки или перейти к выполнению следующего шага, пока шрифт грузится. Предполагается, что ПА, не выполняющие загрузку шрифтов, не подключённые к сети, имеющие отключённую загрузку шрифтов в установках пользователя, не имеющие доступа к запрошенному ресурсу по каким-либо причинам или не имеющие возможности по каким-либо причинам использовать загруженный шрифт, пропускают этот шаг.
  • Если в шаге 3 не найдено совпадений шрифта с 'font-family', ПА, выполняющие синтез шрифта, могут продолжить проверку других дескрипторов, таких как 'x-height', ширина глифов и Panose -1, для идентификации другого пробного семейства шрифтов для синтеза. Если имеются совпадения для всех оставшихся дескрипторов, это означает, что для данного элемента найден совпадающий шрифт и синтез шрифта может начаться. Предполагается, что ПА, не выполняющие синтез шрифта, пропускают этот шаг.
  • Если шаги 3, 4 и 5 потерпели неудачу и в наборе шрифтов имеется следующий альтернативный 'font-family', тогда для альтернативного 'font-family' повторяются шаги, начиная с шага 2.
  • Если это совпавший шрифт, но он не содержит глиф(ы) текущего символа(ов), и если в наборе шрифтов имеется альтернативный 'font-family', тогда для альтернативного 'font-family' повторяются шаги, начиная с шага 2. Дескриптор 'unicode-range предназначен для быстрого удаления из процесса обработки тех шрифтов, которые не имеют корректных глифов. Если дескриптор 'unicode-range' указывает, что шрифт содержит некоторые глифы в корректном диапазоне, этот шрифт может быть проверен ПА на наличие нужного (глифа).
  • Если в семействе, выбранном в шаге2, нет нужного шрифта, тогда используется наследуемое или зависящее от ПА значение 'font-family', и всё повторяется с шага 2 с использованием наилучшего совпадения, которое может быть получено в данном шрифте. Если конкретный символ не может быть выведен с использованием данного шрифта, ПА должен сообщить, что символ не выводится (например, используя глиф 'отсутствующий символ').
  • ПА, выполняющие прогрессивное отображение и ожидающие загрузки шрифтов, могут, после успешного завершения загрузки, использовать загруженный шрифт в качестве семейства шрифтов. Если в загруженном шрифте отсутствуют некоторые глифы, имеющиеся во временном шрифте, загруженный (новый) шрифт не используется, а продолжается использование временного шрифта.
    • Примечание. Вышеуказанный алгоритм можно оптимизировать для исключения необходимости повторных обращений к свойствам CSS2 для каждого символа.
    Правила совпадения для дескрипторов из вышеизложенного (2) таковы:
  • 'font-style' рассматривается первым. Принимается 'italic', если имеется шрифт в БД ПА, обозначенный ключевым словом CSS 'italic' (предпочтительно) или 'oblique'.
    Иначе значения должны подбираться точно, или font-style терпит неудачу.
  • 'font-variant' рассматривается следующим. 'normal' соответствует шрифту, не помеченному 'small-caps'; 'small-caps' соответствует (1) шрифту, помеченному как 'small-caps', (2) шрифту, в котором малые заглавные синтезируются, или (3) шрифту, в котором все буквы нижнего регистра заменяются на заглавные. Шрифт small-caps может быть синтезирован электронным обмером заглавных букв нормального шрифта.
  • 'font-weight' рассматривается следующим, он никогда не терпит неудачу. (См. ниже 'font-weight'.)
  • 'font-size' должен подбираться в пределах допустимых для данного ПА границ. (Обычно размеры измеряемых шрифтов округляются до ближайшего значения в пикселах, а допуск для растровых шрифтов может быть в пределах 20%.) Последующее вычисление, например, в значениях 'em' других свойств, базируется на используемом значении 'font-size', а не на том, которое специфицировано.


    • Алгоритмы ширины таблицы свойство 'tablelayout'

    17.5.2 Алгоритмы ширины таблицы: свойство 'table-layout'

    CSS не определяет "оптимальный" вид таблицы, поскольку во многих случаях это дело вкуса. CSS не определяет ограничения того, как ПА обязан выводить таблицу. ПА могут использовать любой возможный алгоритм и свободны предпочесть скорость точности отображения, если только не выбран "алгоритм фиксированного вывода ". 'table-layout'
    Значение:auto | fixed | inherit
    Начальное:auto
    Применяется:к элементам 'table' и 'inline-table'
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный

    Свойство 'table-layout' контролирует алгоритм, используемый для вывода ячеек, рядов и столбцов таблицы.
    Значения имеют следующий смысл:
    fixed Алгоритм фиксированного вывода таблицы; auto Используется любой автоматический алгоритм вывода таблицы. Эти два алгоритма описаны ниже.

    Алгоритмы высоты таблицы


    17.5.3 Алгоритмы высоты таблицы

    Высота таблицы задаётся свойством '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/низ, как и сам ряд.
    В контексте таблиц значения 'vertical-align' имеют следующий смысл:
    baseline Базовая линия ячейки помещена на той же высоте, что и базовая линия первого из рядов, которые она захватывает (см. ниже определение базовой линии ячейки и ряда). top Верх бокса ячейки выровнен с верхом первого из рядов, которые она захватывает. bottom Низ бокса ячейки выровнен с низом последнего из рядов, которые она захватывает. middle Центр ячейки выровнен с центром рядов, которые она захватывает. sub, super, text-top, text-bottom Эти значения не применяются к ячейкам; вместо этого ячейка выравнивается по базовой линии. Базовая линия ячейки это базовая линия первого строчного бокса в ячейке. Если никакого текста нет, базовая линия - это базовая линия какого-либо объекта, отображаемого в ячейке или, если такого объекта нет, - низ бокса ячейки. Максимальное расстояние между верхом бокса ячейки и базовой линией всех ячеек, имеющих 'vertical-align: baseline', используется для установки базовой линии ряда. Вот пример:

    Анонимные боксы блока

    Анонимные боксы блока

    В этом документе:
    Some text More text
    (и приняв, что и DIV, и P оба имеют 'display: block'), DIV имеет содержимое и инлайн-уровня, и уровня блока. Чтобы легче было определить форматирование, мы примем, что вокруг "Some text" имеется анонимный бокс блока.

    Анонимные инлайнбоксы

    Анонимные инлайн-боксы

    В таком документе:Некоторый выделенный текст.

    элемент P генерирует бокс блока с несколькими инлайн-боксами внутри. Бокс для "выделенный" - это инлайн-бокс, сгенерированный инлайн-элементом (EM), но другие боксы ("Некоторый" и "текст") являются инлайн-боксами, сгенерированными элементом уровня блока (P). Последние называются анонимными инлайн-боксами, поскольку они не имеют ассоциированного инлайн-элемента.
    Такие анонимные инлайн-боксы наследуют наследуемые свойства своего родительского бокса уровня блока. Ненаследуемые свойства получают свои начальные значения. В примере - цвет анонимных начальных боксов наследуется из P, но фон остаётся прозрачным.
    Если из контекста ясно, какой тип анонимных боксов подразумевается, то и боксы инлайн, и боксы уровня блока называются в данной спецификации анонимными боксами.
    Имеются и другие типы анонимных боксов, возникающие при форматировании таблиц.

    Анонимные объекты таблицы


    17.2.1 Анонимные объекты таблицы

    Языки документов, кроме 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'.
    • Пример(ы):
    В этом примере XML принимается, что элемент 'table' содержит элемент HBOX:
    George 4287 1998 поскольку ассоциированная таблица стилей:
    HBOX { display: table-row } VBOX { display: table-cell } Пример(ы):
    В этом примере три элемента 'table-cell' содержат текст в ROWs/рядах. Заметьте, что текст далее инкапсулируется в анонимные инлайн-боксы, как разъясняется в модели визуального форматирования:
    This is the top row. This is the middle row. This is the bottom row. Таблица стилей:
    STACK { display: inline-table } ROW { display: table-row } D { display: inline; font-weight: bolder } От ПА HTML не требуется создавать анонимные объекты в соответствии с вышеприведёнными правилами.

    Atправила (atrules)


    4.1.5 at-правила (at-rules)

    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 }

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


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

    Автоматическая нумерация в CSS2 контролируется двумя свойствами, 'counter-increment' и 'counter-reset'. Счётчики, определённые в этих свойствах, используются с функциями counter() и counters() свойства 'content'. 'counter-reset'
    Значение:[ ? ]+ | none | inherit
    Начальное:none
    Применяется:ко всем элементам
    Наследуется:нет
    Процентное:N/A
    Носитель:все
    'counter-increment'
    Значение:[ ? ]+ | 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%', ограничение не может быть выполнено.)
    Примечание. В этом алгоритме ряды (и группы рядов) и столбцы (и группы столбцов) ограничивают и сами ограничены размерами содержащихся в них ячеек. Установка ширины столбца может неявно влиять на высоту ряда, и наоборот.

    B Новая функциональность

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


    • B Обновлённые описания

    Спецификация CSS1 была короче и компактнее. Данная спецификация намного объёмнее и более читабельна. Большая часть нового материала описывает новую функциональность, но описания из CSS1 также расширены. За исключением немногих случаев, описанных ниже, обновлённые описания не изменили ни синтаксис, ни семантику.

    B Семантические изменения по сравнению с CSS

    Хотя все действительные таблицы стилей 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.


    • Блоки символов для подстановки


    5.1 Блоки символов для подстановки

    В 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


    Блоки

    4.1.6 Блоки

    Блок начинается с левой фигурной скобки ({) и заканчивается парной правой скобкой (}). Между ними могут находиться любые символы, кроме скобок (()), квадратных скобок ([ ]) и фигурных скобок ({ }), которые обязаны всегда использоваться в паре и могут вкладываться. Одиночные (') и двойные (") кавычки также обязаны использоваться парами, а символы между ними разбираются как строка\string. См. выше определение строки в Лексическом разборе.
    Пример неверного использования:
    Это пример блока. Обратите внимание, что правая скобка между двойными кавычками не образует пары с открывающей скобкой блока, а вторая одиночная кавычка - это escape-символ, не образующий пары с первой одиночной кавычкой: { causta: "}" + ({7} * '\'') }
    Заметьте, что это неверное правило CSS2, образующее, тем не менее, блок, как указано выше.

    Боксы compact/компактные


    9.2.3 Боксы compact/компактные

    Бокс compact ведёт себя так:
  • Если бокс блока (не поплавок и не позиционированный абсолютно) следует после бокса compact, то compact-бокс форматируется как однострочный инлайн-бокс. Ширина результирующего бокса сравнивается с одним из полей бокса блока. Выбор левого или правого поля определяется в 'direction', специфицируемом для элемента, производящего содержащий блок для compact-бокса и следующего бокса. Если ширина инлайн-бокса меньше, чем/равна ширине поля, то инлайн-бокс позиционируется в поле, как описано далее.
  • В ином случае compact-бокс становится боксом блока.
    • Compact-бокс позиционируется в поле следующим образом: он находится вне (слева или справа от) первого строчного бокса блока, но влияет на расчёт высоты строчного бокса. Свойство 'vertical-align' compact-бокса определяет вертикальную позицию compact-бокса относительно строчного бокса. Позиция compact-бокса по горизонтали - всегда в поле бокса блока.
    Элемент, который не может быть отформатирован в пределах одной строчки, не может размещаться в поле последующего блока. Например, элемент 'compact' в HTML, который содержит элемент BR, всегда будет форматироваться как бокс блока (принимая для BR стиль по умолчанию, когда вставляется новая строка). Для размещения многострочного текста в поле часто больше подойдёт свойство 'float'.
    Следующий пример иллюстрирует compact-бокс: A compact box example
    Short
    Description goes here.
    too long for the margin
    Description goes here.

    Этот пример может выглядеть после форматирования так: 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-боксы взаимодействуют с генерируемым содержимым, см. в разделе генерируемое содержимое.

    C Автоматическая генерация дескриптора


    C.5 Автоматическая генерация дескриптора

    Авторские утилиты должны позволять авторам таблиц стилей добавлять и редактировать дескрипторы шрифтов. В некоторых случаях авторские утилиты могут оказать помощь путём локальной проверки установленных шрифтов и автоматической генерации дескрипторов для шрифтов, на которые имеются ссылки в таблице стилей. Эта функция может выполняться также утилитами, подразделяющими или конвертирующими шрифты для готовности к динамической загрузке.
    Данная таблица указывает, где может быть найдена такая информация для шрифтов обычных форматов.
    ДескрипторType 1TrueType и OpenTypeTrueType 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.


    • C Справочник терминологии шрифтов

    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. Infinifont Техника синтезирования шрифтов, которая, задавая число Panose-1 (и, по выбору, дополнительные данные описания шрифта), может генерировать красивый шрифт без экстраполирования из одного мастер-контура или интерполяции между двумя или более контурами (см. [INFINIFONT]). Italic Класс форм букв латиницы, которые более курсивны, чем буквы roman-форм, но менее курсивны, чем формы ручного письма. Часто пары шрифтов разрабатываются и используются совместно; один - roman с засечками, а другой - italic. Другие термины для описания этого класса форм букв: cursive и, для кириллицы, kursiv. Для разновидностей sans-serif дополнительная разновидность - это часто наклонный вариант, а не другой класс форм букв.

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


    C.2 Выбор шрифта

    Имеется множество различных форматов шрифта для использования на разных платформах. Чтобы выбрать предпочтительный формат шрифта, используется свободная дискуссия (см. [NEGOT]). Всегда можно определить, когда ссылка на шрифт отсутствует, поскольку URI находится внутри описания шрифта. Данная конкретная реализация будет знать, какие форматы загружаемых шрифтов она поддерживает и может, соответственно, использовать подсказки формата для исключения загрузки шрифтов неподдерживаемых форматов.

    C Вычисление Диапазонов Unicode для TrueType


    C.4 Вычисление Диапазонов Unicode для TrueType

    Эта информация доступна в шрифте при просмотре битов 'ulUnicodeRange' в таблице 'OS/2' (если она ('OS/2') её имеет), которая (таблица) содержит битовые поля представления набора. Эта таблица определена в ревизии 1.66 спецификации TrueType от Microsoft. Можно рассматривать эту информацию как набор, где каждый элемент соответствует блоку символов Unicode 1.1, и присутствие этого элемента в наборе означает, что шрифт имеет один или более глифов-изображений для представления по меньшей мере одного символа этого блока. Набор содержит 128 элементов, как описано ниже. Порядок обычно следует порядку стандарта Unicode 1.1. Эта таблица может использоваться для конвертации информации в шрифте TrueType в дескриптор 'unicode-range' CSS. БлокAdd/ПрибавитьИмя блокаДиапазон Unicode
    01Basic LatinU+0-7F
    12Latin-1 SupplementU+80-FF
    24Latin-1 Extended-AU+100-17F
    38Latin Extended-BU+180-24F
    41IPA ExtensionsU+250-2AF
    52Spacing Modifier LettersU+2B0-2FF
    64Combining Diacritical MarksU+300-36F
    78GreekU+370-3CF
    81Greek Symbols and CopticU+3D0-3EF
    92CyrillicU+400-4FF
    104ArmenianU+530-58F
    118HebrewU+590-5FF
    121Hebrew Extended-A
    Hebrew Extended-B    		?? какие диапазоны ??
    132ArabicU+600-69F
    144Arabic ExtendedU+670-6FF
    158DevanagariU+900-97F
    161BengaliU+980-9FF
    172GurmukhiU+A00-A7F
    184GujaratiU+A80-AFF
    198OriyaU+B00-B7F
    201TamilU+B80-BFF
    212TeluguU+C00-C7F
    224KannadaU+C80-CFF
    238MalayalamU+D00-D7F
    241ThaiU+E00-E7F
    252LaoU+E80-EFF
    264GeorgianU+10A0-10EF
    278Georgian ExtendedU+10F0-10FF ??
    281Hangul JamoU+1100-11FF
    292Latin Extended Additional-
    304Greek ExtendedU+1F00-1FFF
    318General PunctuationU+2000-206F
    321Superscripts and Subscripts-
    332Currency SymbolsU+20A0-20CF
    344Combining Marks for SymbolsU+20D0-20FF
    358Letterlike SymbolsU+2100-214F
    361Number FormsU+2150-218F
    372ArrowsU+2190-21FF
    384Mathematical OperatorsU+2200-22FF
    398Miscellaneous TechnicalU+2300-23FF
    401Control PicturesU+2400-243F
    412Optical Character RecognitionU+2440-245F
    424Enclosed AlphanumericsU+2460-24FF
    438Box DrawingU+2500-257F
    441Block ElementsU+2580-259F
    452Geometric ShapesU+25A0-25FF
    464Miscellaneous SymbolsU+2600-26FF
    478DingbatsU+2700-27BF
    481CJK Symbols and PunctuationU+3000-303F
    492HiraganaU+3040-309F
    504KatakanaU+30A0-30FF
    518BopomofoU+3100-312F
    521Hangul Compatibility JamoU+3130-318F
    532CJK Miscellaneous??
    544Enclosed CJK Letters and MonthsU+3200-32FF
    558CJK compatibilityU+3300-33FF
    561HangulU+AC00-D7FF
    598CJK Unified IdeographsU+4E00-9FFF
    601Private Use AreaU+E000-F8FF
    612CJK Compatibility IdeographsU+F900-FAFF
    624Alphabetic Presentation FormsU+FB00-FB4F
    638Arabic Presentation Forms-AU+FB50-FDFF
    641Combining Half MarksU+FE20-FE2F
    652CJK compatibility FormsU+FE30-FE4F
    664Small Form VariantsU+FE50-FE6F
    678Arabic Presentation Forms-BU+FE70-FEFF
    681Halfwidth and Fullwidth FormsU+FF00-FFEF
    692SpecialsU+FFF0-FFFD

    В системе битовых полей TrueType есть проблема, заключающаяся в том, что эта система присоединена к Unicode 1.1 и не справляется с расширением Unicode - например, невозможно представить Tibetan или другие виды письма, введённые в Unicode 2.0 или более поздних ревизиях.

    C Значения Чисел Panose


    C.3 Значения Чисел Panose

    Целые и вещественные числа

    4.3.1 Целые и вещественные числа

    Значения некоторых типов могут принимать целые (обозначенные ) или реальные числа (обозначенные ). Реальные и целые числа специфицируются только в десятеричной нотации. состоит из одной или более цифр от "0" до "9". может быть или ноль или более цифр с точкой (.), после которой идут одна или более цифр. И целые, и реальные числа могут иметь впереди "-" или "+" для указания знака числа.
    Заметьте, что многие свойства, допускающие целые и реальные числа в качестве значения, на практике ограничивают значение некоторым диапазоном, часто неотрицательным значением.

    Центральная базовая линия/(Central Baseline)


    15.4.4 Центральная базовая линия/(Central Baseline)

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

    Частоты


    4.3.9 Частоты

    Значения частот (обозначаемые в тексте ) используются со звуковыми каскадными таблицами стилей.
    Их формат: , сразу за которым идёт идентификатор единиц измерения частоты.
    Идентификаторами единиц измерения частоты являются:
  • Hz: герцы
  • kHz: килогерцы
    • Значения частоты не могут быть негативными.
    Например, 200Hz (или 200hz) - это басовый звук, а 6kHz (или 6khz) - средний регистр.

    Число Panose


    15.4.16 Число Panose-1

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

    CSS Введение

    2. CSS2. Введение.

    Содержание
  • 2.1 Краткое пособие CSS2 для HTML
  • 2.2 Краткое пособие CSS2 для XML
  • 2.3 Модель процесса CSS2
  • 2.3.1 Канва
  • 2.3.2 Модель адресации CSS2
  • 2.4 Принципы дизайна CSS


    • Cursive

    cursive

    Глифы шрифтов 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'

    'color'
    Значение: | inherit
    Начальное:зависит от пользовательского агента (ПА)
    Применяется:ко всем элементам
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный
    Это свойство описывает цвет переднего плана содержимого текста элемента. Можно по разному специфицировать красный цвет:
    Пример(ы):
    EM { color: red } /* предопределённое название цвета */ EM { color: rgb(255,0,0) } /* диапазон RGB 0-255 */

    Цвет рамки 'bordertopcolor'

    8.5.2 Цвет рамки: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' и 'border-color'

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

    Свойство 'border-color' устанавливает цвет рамки с четырёх сторон.
    Значения имеют следующий смысл:
    Специфицирует значение цвета. transparent Рамка прозрачна (хотя и может иметь ширину). Свойство 'border-color' может иметь от одного до четырёх значений, и эти значения устанавливаются для четырёх сторон так же, как и в 'border-width'.
    Если цвет рамки элемента не специфицирован в свойстве рамки, ПА обязаны использовать значение свойства 'color' элемента как вычисленное значение цвета рамки.
    Пример(ы):
    В этом примере рамка будет сплошной и чёрной: P { color: black; background: white; border: solid; }

    Цвета и фон

    14. Цвета и фон

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

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

    Цвета


    4.3.6 Цвета

    это или предопределённое слово, или числовая спецификация RGB.Список названий цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white и yellow. Эти 16 цветов определены в HTML 4.0 ([HTML40]). Пользователь может дополнительно специфицировать ключевые слова, соответствующие цветам, используемым определёнными объектами в среде пользователя. Дополнительную информацию см. в системных цветах.
    Пример(ы):
    BODY {color: black; background: white } H1 { color: maroon } H2 { color: olive } Модель цветов RGB используется в числовых спецификациях цвета. Во всех данных примерах специфицируется один и тот же цвет:
    Пример(ы):
    EM { color: #f00 } /* #rgb */ EM { color: #ff0000 } /* #rrggbb */ EM { color: rgb(255,0,0) } /* диапазон целых чисел 0 - 255 */ EM { color: rgb(100%, 0%, 0%) } /* диапазон чисел с плавающей точкой 0.0% - 100.0% */ Формат значения RGB в 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 будут вне гаммы устройства и будут, таким образом, усечены.
    Примечание. Хотя цвета могут добавить значительное количество информации в документы и сделать их более читабельными, необходимо учитывать, что определённые сочетания цветов могут вызвать проблемы у людей, страдающих нарушениями восприятия цвета. Если Вы используете фоновое изображение или устанавливаете цвет фона, подбирайте, пожалуйста, подходящий цвет переднего плана.

    D Грамматика


    D.1 Грамматика

    Это грамматика 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* ;

    D Лексический сканер

    D.2 Лексический сканер

    Это сканер, написанный в нотации 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 CDC;} "~=" {return INCLUDES;} "|=" {return DASHMATCH;} {string} {return STRING;} {ident} {return IDENT;} "#"{name} {return HASH;} "@import" {return IMPORT_SYM;} "@page" {return PAGE_SYM;} "@media" {return MEDIA_SYM;} "@font-face" {return FONT_FACE_SYM;} "@charset" {return CHARSET_SYM;} "@"{ident} {return ATKEYWORD;} "!{w}important" {return IMPORTANT_SYM;} {num}em {return EMS;} {num}ex {return EXS;} {num}px {return LENGTH;} {num}cm {return LENGTH;} {num}mm {return LENGTH;} {num}in {return LENGTH;} {num}pt {return LENGTH;} {num}pc {return LENGTH;} {num}deg {return ANGLE;} {num}rad {return ANGLE;} {num}grad {return ANGLE;} {num}ms {return TIME;} {num}s {return TIME;} {num}Hz {return FREQ;} {num}kHz {return FREQ;} {num}{ident} {return DIMEN;} {num}% {return PERCENTAGE;} {num} {return NUMBER;} "url("{w}{string}{w}")" {return URI;} "url("{w}{url}{w}")" {return URI;} {ident}"(" {return FUNCTION;} U\+{range} {return UNICODERANGE;} U\+{h}{1,6}-{h}{1,6} {return UNICODERANGE;} . {return *yytext;}

    D Сравнение лексического разбора в CSS и в CSS

    D.3 Сравнение лексического разбора в CSS2 и в CSS1

    Имеются некоторые различия между вышеприведённым синтаксисом и синтаксисом, специфицированным в рекомендациях CSS1 ([CSS1]). Большинство этих отличий - из-за новых понятий в CSS2, которые отсутствовали в CSS1. Другие - из-за того, что грамматика была переписана, чтобы сделать её более читабельной. Однако есть и некоторые несовместимые изменения, которые вызвали бы ошибку в CSS1. Они разъяснены ниже.
  • Таблицы стилей CSS1 могут быть кодированы только 1-байт-на-символ, как ASCII и ISO-8859-1. CSS2 не имеет таких ограничений. На практике было мало трудностей с экстраполированием сканера CSS1, и некоторые ПА принимали 2-байтное кодирование.
  • CSS1 допускал только четыре 16-ричных числа после обратного слэша (\) для ссылок на символы Unicode, CSS2 допускает шесть. Кроме того, CSS2 допускает символы пробела в качестве разграничителей escape-последовательностей. Например, в соответствии с CSS1, строка "\abcdef" имеет 3 буквы (\abcd, e и f), а в соответствии с CSS2 - только одну (\abcdef).
  • Символ табуляции (ASCII 9) в строках не допускается. Однако, поскольку строки в CSS1 использовались только для имён шрифтов и для URL, единственное, что может привести к несовместимости между CSS1 и CSS2, это если таблица стилей содержит семейство шрифтов, имеющее символ табуляции в своём имени.
  • Также символы новой строки (escape-последовательность с обратным слэшем) не допускались в строках CSS1.
  • CSS2 разбирает число со следующим непосредственно за ним идентификатором как обозначение DIMEN (т.е. как неизвестный модуль). CSS1 разбирал его как число и как идентификатор. Это означает, что в CSS1 объявление 'font: 10pt/1.2serif' было корректным, а в 'font: 10pt/12pt serif'; в CSS2 требуется пробел перед "serif". (Некоторые ПА принимали первый пример, но не принимали второй.)
  • В CSS1 имя класса могло начинаться цифрой (".55ft"), если только оно не было размером (".55in").
    В CSS2 такие классы разбираются как неизвестные размеры (чтобы позволить в будущем дополнение новых модулей). Чтобы сделать ".55ft" действующим классом, CSS2 требует, чтобы первая цифра была escape (".\55ft")


    • Дескриптор числовых значений 'unitsperem'


    15.3.4 Дескриптор числовых значений: 'units-per-em'

    Этот дескриптор определяет количество "units/единиц измерения" на em; эти units могут использоваться другими дескрипторами для выражения различных размеров, следовательно, 'units-per-em' необходим, если другие дескрипторы зависят от него. 'units-per-em' (Дескриптор)
    Значение:
    Начальное: не определено
    Носитель: визуальный

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

    Дескриптор для ссылки 'src'


    15.3.5 Дескриптор для ссылки: 'src'

    Необходим для ссылки на данные шрифта, загружаемые или установленные локально. 'src' (Дескриптор)
    Значение:[ [format( [, ]*)] | ] [, [format( [, ]*)] | ]*
    Начальное: не определено
    Носитель: визуальный

    Это выстроенный по приоритету список разделённых запятыми внешних ссылок и/или имён локально установленных файлов. Внешняя ссылка указывает на данные шрифта в 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.
    Установленное локально это полное имя локально установленного шрифта. Full font name\полное имя шрифта - это имя шрифта, сообщённое операционной системой, и оно наиболее вероятно будет использоваться читающим таблицами стилей, таблицей стилей по умолчанию в браузере или возможными авторским таблицами стилей в intranet. Украшения, такие как bold, italic и underline, часто используются для дифференциации шрифтов внутри семейства шрифтов. Дополнительную информацию о полных именах шрифтов см. далее в Примечаниях.
    Обозначением для является полное имя шрифта, которое должно быть заключено в кавычки, поскольку может содержать любые символы, включая пробелы и знаки пунктуации, а также должно быть заключено в local(" и ").
    Пример(ы):
    src: url("http://foo/bar") полный URI без информации о формате(ах) шрифта, доступных здесь
    src: local("BT Century 751 No. 2 Semi Bold Italic") ссылается на определённый вид локально установленного шрифта
    src: url("../fonts/bar") format("truedoc-pfr") частичный URI шрифта, доступного в формате TrueDoc
    src: url("http://cgi-bin/bar?stuff") format("opentype", "intellifont") полный URI, в данном случае - скрипта, который может генерировать два разных формата шрифта - OpenType и Intellifont
    src: local("T-26 Typeka Mix"), url("http://site/magda-extra") format("type-1") два альтернативных варианта: первый - локально установленный шрифт, а второй - загружаемый шрифт в формате Type 1. Доступ к локально установленным шрифтам происходит через . Font face name (имя разновидности шрифта) не должно быть ни уникальным, ни независимым от формата платформы и шрифта, но в настоящее время это наилучший путь идентификации данных локально установленного шрифта. Использование имени разновидности шрифта (font face name) можно осуществить более точно путём предоставления указания на требуемое дополнение глифа. Это можно сделать, указав диапазон позиций символов ISO 10646, для которых шрифт предоставляет некоторые глифы (см. 'unicode-range').

    Дескрипторы для квалификации данных шрифта 'unicoderange'


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

    Следующий дескриптор не обязателен внутри определения шрифта, но используется для того, чтобы избежать проверки или загрузки шрифта, который не имеет достаточного количества глифов для вывода определённого символа. 'unicode-range' (Дескриптор)
    Значение: [, ]*
    Начальное: U+0-7FFFFFFF
    Носитель: визуальный

    Это дескриптор диапазона символов ISO 10646, покрываемого данным шрифтом.
    Значения выражаются с использованием 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). Пара чисел в данном формате в комбинации с дефисом обозначает более широкий диапазон. Например:
    unicode-range: U+AC00-D7FF это диапазон от AC00 до D7FF (область Hangul Syllables). Множественные конечные диапазоны могут быть специфицированы путём разделения запятыми. Как и в других списках CSS с разделением запятыми, любой пробел перед или после запятой игнорируется. Например:
    unicode-range: U+370-3FF, U+1F?? покрывает диапазон от 0370 до 03FF (Modern Greek) плюс от 1F00 до 1FFF (Ancient polytonic Greek). unicode-range: U+3000-303F, U+3100-312F, U+32??, U+33??, U+4E00-9FFF, U+F9000-FAFF, U+FE30-FE4F один из наихудших примеров в плане многозначности, очень определённо обозначает, что этот (очень объёмный) шрифт содержит только китайские символы из ISO 10646 без включения любых символов, уникальных для японского и корейского. Диапазон - от 3000 до 303F (CJK символы и пунктуация), плюс от 3100 до 312F (Bopomofo), плюс от 3200 до 32FF (включая CJK символы и месяцы), плюс от 3300 до 33FF (CJK зона совместимости), плюс от 4E00 до 9FFF (CJK унифицированные идеографы), плюс отF900 до FAFF (CJK идеографы совместимости), плюс от FE30 до FE4F (CJK формы совместимости). Более понятное представление типичного китайского шрифта:
    unicode-range: U+3000-33FF, U+4E00-9FFF
    unicode-range: U+11E00-121FF этот шрифт покрывает предлагаемую регистрацию пиктограмм Aztec в диапазоне от 1E00 до 21FF в плане 1. unicode-range: U+1A00-1A1F этот шрифт покрывает предлагаемую регистрацию Irish Ogham в диапазоне от1A00 до 1A1F.

    Дескрипторы для подбора


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

    Следующие дескрипторы имеют те же имена, что и соответствующие свойства шрифта CSS2, и принимают одиночное значение или список разделённых запятыми значений.
    Значения в таком списке (за исключением особо отмеченных) - те же самые, что и соответствующие свойства CSS2. Если это одиночное значение, оно должно совпадать. Если это список, любой элемент списка может образовать совпадение. Если в @font-face дескриптор отсутствует, используется начальное значение дескриптора. 'font-family' (Дескриптор)
    Значение: [ | ] [, [ | ]]*
    Начальное: зависит от ПА
    Носитель: визуальный

    Это дескриптор имени семейства шрифтов для шрифта, принимающий то же значение, что и свойство 'font-family'. 'font-style' (Дескриптор)
    Значение: all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]*
    Начальное: all
    Носитель: визуальный

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

    Это CSS-обозначение того, является ли этот шрифт вариантом "малые заглавные". Он принимает те же значения, что и свойство 'font-variant', за исключением того, что использование списка запрещено.
    Примечание. Кириллические прямые шрифты могут быть помечены в 'font-variant' как "малые заглавные", что лучше совмещается с латиницей (а соответствующий курсив - помечен 'font-style' как italic с той же целью). 'font-weight' (Дескриптор)
    Значение: all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]*
    Начальное: all
    Носитель: визуальный

    Это дескриптор веса шрифта относительно других шрифтов того же семейства. Принимает те же значения, что и свойство 'font-weight', с тремя исключениями:
  • относительные ключевые слова (bolder, lighter) не разрешаются;
  • список разделённых запятыми значений разрешён для шрифтов, содержащих несколько значений веса;
  • разрешено дополнительное ключевое слово 'all', означающее, что шрифт будет совпадать для всех возможных значений веса, или потому что он имеет несколько значений веса, или потому что этот шрифт имеет единичное значение веса.
    • 'font-stretch' (Дескриптор)
    Значение: all | [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded] ]*
    Начальное: normal
    Носитель: визуальный
    Это обозначение CSS для сжатия или расширения шрифта относительно других шрифтов того же семейства. Принимает те же значения, что и свойство 'font-stretch', за исключением того, что:
  • относительные ключевые слова (wider, narrower) не допускаются;
  • список разделённых запятыми значений разрешён;
  • разрешено ключевое слово 'all'.
    • 'font-size' (Дескриптор)
    Значение: all | [, ]*
    Начальное: all
    Носитель: визуальный
    Это дескриптор размера, предоставляемого для данного шрифта. Разрешены только абсолютные единицы измерения, в отличие от свойства 'font-size', которое разрешает относительные и абсолютные размеры. Разрешён список разделённых запятыми размеров.
    Начальное значение 'all' подходит для большинства имеющих вес шрифтов, поэтому данный дескриптор используется прежде всего в @font-face для растровых шрифтов или шрифтов, имеющих вес, которые разработаны для растрирования в ограниченных пределах размеров шрифта.

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

    Эти дескрипторы не обязательны для определения CSS2, но могут использоваться при смысловой подстановке шрифтов или уточнении размеров шрифтов, необходимых автору. 'panose-1' (Дескриптор)
    Значение: []{10}
    Начальное: 0 0 0 0 0 0 0 0 0 0
    Носитель: визуальный

    Это дескриптор числа Panose -1, состоящего из десяти десятеричных чисел, разделённых пробелами. Список значений, разделённых запятыми, не допускается для данного дескриптора, поскольку система Panose -1 может указывать, что диапазоны значений совпадают. Начальное значение - нуль, что означает "любое" для любой цифры PANOSE; все шрифты будут совпадать с числом Panose, если используется это значение. Использование дескриптора Panose -1 рекомендуется исключительно для латинских шрифтов. Дополнительно см. Приложение C. 'stemv' (Дескриптор)
    Значение:
    Начальное: не определено
    Носитель: визуальный

    Это дескриптор ширины вертикальной основы шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'. 'stemh' (Дескриптор)
    Значение:
    Начальное: не определено
    Носитель: визуальный

    Это дескриптор ширины горизонтальной основы шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'. 'slope' (Дескриптор)
    Значение:
    Начальное: 0
    Носитель: визуальный

    Это дескриптор угла вертикального закругления шрифта. 'cap-height' (Дескриптор)
    Значение:
    Начальное: не определено
    Носитель: визуальный

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

    Это дескриптор высоты глифов нижнего регистра шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'. Этот дескриптор может широко использоваться вместе со свойством 'font-size-adjust', поскольку вычисление значения z шрифтов-кандидатов требует наличия и font size, и x-height; следовательно, рекомендуется включать данный дескриптор. 'ascent' (Дескриптор)
    Значение:
    Начальное: не определено
    Носитель: визуальный

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

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

    Дескрипторы для синтеза 'widths' 'bbox' и 'definitionsrc'


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

    Синтезирование шрифта предполагает, как минимум, совпадение размеров ширины специфицированного шрифта. Следовательно, для синтеза данная метрическая информация должна быть доступна. Таким же образом и для прогрессивного представления необходимо наличие метрической информации о ширине, чтобы исключить перерисовку содержимого при загрузке основного шрифта. Хотя следующие дескрипторы не обязательны для определения CSS2, некоторые необходимы для синтезирования (или прогрессивного отображения без перерисовки), если этого хочет автор. Как только основной шрифт становится доступен, подставленный шрифт должен быть заменён. Любые из этих дескрипторов, если представлены, дают лучшее или более быстрое получение предполагаемого шрифта.
    Самыми важными из этих дескрипторов являются 'widths' и 'bbox', которые используются для предотвращения перерисовки текста при получении доступа к основному шрифту. В дополнение к этому, дескрипторы из набора дескрипторов, используемых для подбора, могут использоваться для лучшего синтеза внешнего вида основного шрифта. 'widths' (Дескриптор)
    Значение:[ ]? [ ]+ [,[ ]? ]+]
    Начальное: не определено
    Носитель: визуальный

    Это дескриптор ширины глифов. Значением является список разделённых запятыми значений , за каждым из которых следует одно или более значений ширины глифов. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.
    Если опущен, принимается диапазон 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 глифов.
    Этот дескриптор не может описывать множество глифов, соответствующих одиночному символу или лигатуры множества символов. Таким образом, этот дескриптор может использоваться только для тех видов письма, которые не имеют контекстуальных форм или мандатных лигатур. Тем не менее, это может применяться в подобных ситуациях. Виды письма, которые требуют отображения символов в глифы по принципу один-во-многие или многие-во-многие, не могут в настоящее время использовать этот дескриптор для синтеза шрифта, хотя и в состоянии использовать загрузку шрифтов или смысловое сопоставление. 'bbox' (Дескриптор)
    Значение: , , ,
    Начальное: не определено
    Носитель: визуальный

    Это дескриптор максимального ограничивающего бокса шрифта. Значением является разделённый запятыми список из четырех (обязательно) чисел, определяющих, в порядке нижний левый x, нижний левый y, верхний правый x и верхний правый y, ограничивающий бокс для полного шрифта. 'definition-src' (Дескриптор)
    Значение:
    Начальное: не определено
    Носитель: визуальный

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

    Дескрипторы выравнивания 'baseline' 'centerline' 'mathline' и 'topline'


    15.3.8 Дескрипторы выравнивания: 'baseline', 'centerline', 'mathline' и 'topline'

    Эти необязательные дескрипторы используются для выравнивания нескольких отрезков текста друг относительно друга. 'baseline' (Дескриптор)
    Значение:
    Начальное: 0
    Носитель: визуальный

    Это дескриптор нижней базовой линии шрифта. Если этот дескриптор не установлен в значение по умолчанию (если не нулевое), должен использоваться также дескриптор 'units-per-em'. 'centerline' (Дескриптор)
    Значение:
    Начальное: не определено
    Носитель: визуальный

    Это дескриптор центральной базовой линии шрифта. Если значение не определено, ПА может использовать эвристику: как midpoint/среднюю точку для значений восхождения и нисхождения (ascent и descent). Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'. 'mathline' (Дескриптор)
    Значение:
    Начальное: не определено
    Носитель: визуальный

    Это дескриптор математической базовой линии шрифта. Если не определен, ПА может использовать центральную базовую линию. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'. 'topline' (Дескриптор)
    Значение:
    Начальное: не определено
    Носитель: визуальный

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

    Диапазон символов ISO


    15.4.17 Диапазон символов ISO 10646

    Обозначает репертуар глифов шрифта, относящийся к ISO 10646 (Unicode).Поскольку этот репертуар не сплошной (большинство шрифтов не покрывает весь ISO 10646), данный дескриптор содержит блоки диапазона, которые частично покрывают диапазон (не даётся никаких гарантий полного покрытия), и используется для отказа от неподходящих шрифтов (тех, которые не имеют требуемых глифов). Он не указывает, что шрифт определённо имеет нужные глифы, а только что есть смысл загрузить шрифт и просмотреть его. См. детальную информацию о родственных документах в [ISO10646].
    Этот метод может быть расширен в будущем для размещения символов Unicode без изменения синтаксиса и с сохранением существующего содержимого.
    Шрифты тех форматов, которые не включают данную информацию прямо или косвенно, могут тем не менее использовать эту характеристику, но значение обязательно должно быть предоставлено автором документа или таблицы стилей.
    Имеются другие классификации письма, такие как система Monotype (см. [MONOTYPE]) и предлагаемая система ISO. Эти системы плохо расширяются.
    В связи с этим, в данной спецификации используется классификация репертуаров глифов в диапазоне символов ISO 10646, которые (символы) могут быть представлены определённым шрифтом. Эта система может расширяться для покрытия будущих дополнений.

    Динамические эффекты рядов и столбцов

    17.5.5 Динамические эффекты рядов и столбцов

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

    Динамические контуры свойство 'outline'


    18.4 Динамические контуры: свойство 'outline'

    Иногда авторам таблиц стилей может понадобиться создать контуры вокруг визуальных объектов, таких как кнопки, активные поля формы, карты изображений и т.п., чтобы выделить их. Контуры CSS2 отличаются от рамок в следующем:
  • Контуры не занимают пространство.
  • Контуры могут не быть прямоугольными.
    • Свойства контуров управляют стилем этих динамических контуров. 'outline'
    Значение:[ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
    Начальное:см. конкретные свойства
    Применяется:ко всем элементам
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный, интерактивный
    'outline-width'
    Значение: | inherit
    Начальное:medium
    Применяется: ко всем элементам
    Наследуется:нет
    Процентное: N/A
    Носитель:визуальный, интерактивный
    'outline-style'
    Значение: | inherit
    Начальное:none
    Применяется: ко всем элементам
    Наследуется:нет
    Процентное: N/A
    Носитель:визуальный, интерактивный
    'outline-color'
    Значение: | invert | inherit
    Начальное:invert
    Применяется: ко всем элементам
    Наследуется:нет
    Процентное: N/A
    Носитель:визуальный, интерактивный

    Контур, созданный свойствами контуров, прорисовывается "поверх" бокса, т.е. контур всегда сверху и не влияет на позицию и размер бокса или любых других боксов. Следовательно, отображение или подавление контуров не вызывает перерисовки.
    Контур прорисовывается сразу за краем рамки.
    Контуры могут быть непрямоугольными. Например, если элемент разбит на несколько строк, контур будет минимальным необходимым для включения всех боксов элемента. В противоположность рамкам, контур не открыт в начале или в конце строчного бокса, но всегда полностью замкнут.
    Свойство 'outline-width' принимает те же значения, что и 'border-width'.
    Свойство 'outline-style' принимает те же значения, что и 'border-style', за исключением 'hidden', который не является допустимым стилем контура.
    Свойство 'outline-color' принимает все цвета, как и ключевое слово 'invert'. 'Invert' должен производить инверсию цвета пикселов экрана. Это обычный приём для того, чтобы удостовериться, что рамка фокуса видна независимо от цвета фона.
    Свойство 'outline' это сокращённое свойство, устанавливающее все три: 'outline-style', 'outline-width' и 'outline-color'.
    Обратите внимание, что контур одинаков на всех сторонах. В отличие от рамок, свойства 'outline-top' или 'outline-left' отсутствуют.
    В этой спецификации не определено, как прорисовываются несколько перекрывающихся контуров, или как контуры прорисовываются для боксов, которые частично скрыты за другими элементами.
    Примечание. Поскольку контур фокуса не влияет на форматирование (т.е. для него не выделяется пространство в модели бокса), он может нормально перекрывать другие элементы на странице.
    Пример(ы):
    Прорисовка толстого контура вокруг элемента BUTTON: BUTTON { outline-width : thick }
    Для динамического изменения ширины контура могут использоваться скрипты, не вызывая при этом перерисовки.

    Динамические псевдоклассы hover active и focus


    5.11.3 Динамические псевдоклассы: :hover, :active и :focus

    Интерактивные ПА иногда изменяют представление в ответ на действия пользователя. 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'), и нормальные правила каскадирования определяют применение свойств.

    Допустимые разрывы страниц


    13.3.4 Допустимые разрывы страниц

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

    Доступные форматы


    Доступные форматы

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

    Доступные языки


    Доступные языки

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

    E Информативные ссылки

    [CHARSETS] Зарегистрированные значения наборов символов. Загрузите список зарегистрированных значений наборов символов с ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets. [DOM] "Document Object Model Specification", L. Wood, A. Le Hors, 9 октябрь 1997.
    Находится на http://www.w3.org/TR/WD-DOM/ [ISO10179] ISO/IEC 10179:1996 "Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL)"
    Находится на http://occam.sjf.novell.com:8080/dsssl/dsssl96. [GAMMA] "Gamma correction on the Macintosh Platform", C. A. Poynton.
    Находится на ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf. [HTML32] "HTML 3.2 Reference Specification", Dave Raggett, 14 январь 1997.
    Находится на http://www.w3.org/TR/REC-html32.html. [INFINIFONT] См. http://www.fonts.com/hp/infinifont/moredet.html. [ISO9899] ISO/IEC 9899:1990 Programming languages -- C. [MONOTYPE] См. http://www.monotype.com/html/oem/uni_scrmod.html. [NEGOT] "Transparent Content Negotiation in HTTP", K. Holtman, A. Mutz, 9 март, 1997.
    Находится на [OPENTYPE] См. http://www.microsoft.com/OpenType/OTSpec/tablist.htm. [PANOSE] Информацию о метриках классификации PANOSE см. на http://www.fonts.com/hp/panose/greybook и следующие главы: Latin Text, Latin Script, Latin Decorative и Latin Pictorial. Числа Panose для некоторых шрифтов доступны online и могут быть запрошены. [PANOSE2] См. http://www.w3.org/Fonts/Panose/pan2.html Panose-2 не ограничен латиницей. [POSTSCRIPT] "The PostScript Language Reference Manual", Second Edition, Adobe Systems, Inc., Addision-Wesley Publishing Co., декабрь 1990. [RFC1630] "Universal Resource Identifiers in WWW: A Unifying Syntax for the Expression of Names and Addresses of Objects on the Network as used in the World-Wide Web", T. Berners-Lee, июнь 1994.
    Находится на ftp://ftp.internic.net/rfc/rfc1630.txt. [RFC1766] "Tags for the Identification of Languages", H. Alvestrand, март 1995.
    Находится на ftp://ftp.internic.net/rfc/rfc1766.txt. [RFC1866] "HyperText Markup Language 2.0", T. Berners-Lee и D. Connolly, ноябрь 1995.
    Находится на ftp://ds.internic.net/rfc/rfc1866.txt. [RFC1942] "HTML Tables", Dave Raggett, май 1996.
    Находится на ftp://ds.internic.net/rfc/rfc1942.txt. [TRUETYPEGX] На http://fonts.apple.com/TTRefMan/index.html см. детальную информацию о TrueType GX от Apple Computer, включая описания добавленных таблиц и спецификации качества шрифта. [W3CSTYLE] W3C, страница ресурсов о таблицах стилей web.
    См. на http://www.w3.org/pub/WWW/Style. [WAI-PAGEAUTH] "WAI Accesibility Guidelines: Page Authoring" для дизайна доступны с:
    http://www.w3.org/TR/WD-WAI-PAGEAUTH.

    E Нормативные ссылки

    [COLORIMETRY] "Colorimetry, Second Edition", CIE Publication 15.2-1986, ISBN 3-900-734-00-3.
    Находится на http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html. [CSS1] "Cascading Style Sheets, level 1", H. W. Lie and B. Bos, 17 декабря 1996.
    Находится на http://www.w3.org/TR/REC-CSS1-961217.html. [FLEX] "Flex: The Lexical Scanner Generator", Версия 2.3.7, ISBN 1882114213. [HTML40] "HTML 4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs, 8 июля 1997.
    Находится на http://www.w3.org/TR/REC-html40/. В Рекомендациях находятся три Определения Типа Документу (ОТД): Strict/Строгое, Transitional/Переходное и Frameset/Набор Фрэймов, все доступны из Рекомендаций. [IANA] "Assigned Numbers", STD 2, RFC 1700, USC/ISI, J. Reynolds и J. Postel, октябрь 1994.
    Находится на ftp://ftp.internic.net/rfc/rfc1700.txt. [ICC32] "ICC Profile Format Specification, версия 3.2", 1995.
    Находится на ftp://sgigate.sgi.com/pub/icc/ICC32.pdf. [ISO8879] ISO 8879:1986 "Information Processing -- Text and Office Systems -- Standard Generalized Markup Language (SGML)", ISO 8879:1986.
    Список мнемоник SGML см. на ftp://ftp.ifi.uio.no/pub/SGML/ENTITIES/. [ISO10646] "Information Technology - Universal Multiple- Octet Coded Character Set (UCS) - Часть 1: Architecture and Basic Multilingual Plane", ISO/IEC 10646-1:1993. В текущей спецификации принято к рассмотрению также пять поправок к ISO/IEC 10646-1:1993. Полезные документы карта BMP и карта плана 1 указывают, какой скрипт в каких числовых диапазонах размещён. [PNG10] "PNG (Portable Network Graphics) Specification, Version 1.0 specification", T. Boutell ed., 1 октябрь 1996.
    Находится на http://www.w3.org/pub/WWW/TR/REC-png-multi.html. [RFC1808] "Relative Uniform Resource Locators", R. Fielding, июнь 1995.
    Находится на ftp://ds.internic.net/rfc/rfc1808.txt. [RFC2045] "Multipurpose Internet Mail Extensions (MIME) Part One: Format of Internet Message Bodies", N. Freed and N. Borenstein, ноябрь 1996.
    Находится на ftp://ftp.internic.net/rfc/rfc2045.txt. Обратите внимание, что этот RFC делает устаревшими RFC1521, RFC1522 и RFC1590. [RFC2068] "HTTP Version 1.1 ", R. Fielding, J. Gettys, J. Mogul, H. Frystyk Nielsen и T. Berners-Lee, январь 1997.
    Находится на ftp://ftp.internic.net/rfc/rfc2068.txt. [RFC2070] "Internationalization of the HyperText Markup Language", F. Yergeau, G. Nicol, G. Adams, и M. Durst, январь 1997.
    Находится на ftp://ds.internic.net/rfc/rfc2070.txt. [RFC2119] "Key words for use in RFCs to Indicate Requirement Levels", S. Bradner, март 1997.
    Находится на ftp://ds.internic.net/rfc/rfc2119.txt. [RFC2318] "The text/css Media Type", H. Lie, B. Bos, C. Lilley, март 1998.
    Находится на ftp://ds.internic.net/rfc/rfc2318.txt. [RFC1738] "Uniform Resource Locators", T. Berners-Lee, L. Masinter и M. McCahill, декабрь 1994.
    Находится на ftp://ds.internic.net/rfc/rfc1738.txt. [SRGB] "Proposal for a Standard Color Space for the Internet - sRGB", M. Anderson, R. Motta, S. Chandrasekar, M. Stokes.
    Находится на http://www.w3.org/Graphics/Color/sRGB.html. [UNICODE] "The Unicode Standard: Version 2.0", The Unicode Consortium, Addison-Wesley Developers Press, 1996. О двунаправленности см. также список на http://www.unicode.org/unicode/uni2errata/bidi.htm. См. дополнительную информацию на домашней странице Unicode Consortium http://www.unicode.org/. Это последняя версия Unicode. См. дополнительную информацию на домашней странице Unicode Consortium http://www.unicode.org/. [URI] "Uniform Resource Identifiers (URI): Generic Syntax and Semantics", T. Berners-Lee, R. Fielding, L. Masinter, 18 ноября 1997.
    Находится на http://www.ics.uci.edu/pub/ietf/uri/draft-fielding-uri-syntax-01.txt. Эта работа ещё продолжается и предположительно обновит [RFC1738] и [RFC1808]. [XML10] "Extensible Markup Language (XML) 1.0" T. Bray, J. Paoli, C.M. Sperberg-McQueen, редакторы, 10 февраля 1998.
    Находится на http://www.w3.org/TR/REC-xml/. [YACC] "YACC - Yet another compiler compiler", S. C. Johnson, Technical Report, Murray Hill, 1975.

    Единицы измерения emквадрата


    15.4.3 Единицы измерения em-квадрата

    Определённые значения, такие как метрики ширины, выражаются в единицах, относительных к абстрактному квадрату, чья высота подразумевается как расстояние между строками того же размера, что и размер типа. Этот квадрат называется em-квадрат и является дизайн-решёткой, на которой определяются контуры глифов. Значение этого дескриптора специфицирует, на сколько единиц делится EM-квадрат. Обычными значениями являются, например, 250 (Intellifont), 1000 (Type 1) и 2048 (TrueType, TrueType GX и OpenType).
    Если значение не специфицировано, то невозможно определить, что означает какая-либо метрика шрифта. Например, один шрифт имеет глифы нижнего регистра высотой 450, а меньший шрифт имеет высоту 890! Числа в действительности являются дробями; первый шрифт имеет 450/1000, а второй - 890/2048, что в и в самом деле меньше.

    Fantasy

    fantasy

    Фантазийные шрифты, как они используются в CSS, прежде всего декоративны, а уже потом содержат представление символов (в противоположность шрифтам Pi или Picture, не представляющим символы).
    Примеры:
    Латинские шрифты Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz


    Фиксированное позиционирование


    9.6.1 Фиксированное позиционирование

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

    Фон

    Авторы могут специфицировать фон элемента (т.е. его видимую поверхность) как цвет или как изображение. В терминах модели бокса, "background" относится к фону содержимого и области заполнения. Цвет и стиль обрамления устанавливаются в свойствах обрамления. Поля всегда прозрачны, поэтому фон бокса-предка всегда просвечивает.
    Свойства фона не наследуются, но фон бокса-предка будет по умолчанию просвечивать, поскольку начальное значение 'background-color' - 'transparent'.
    Фон бокса, генерируемый корневым элементом, покрывает всю канву.
    Для документов HTML, однако, мы рекомендуем, чтобы авторы специфицировали фон элемента BODY, а не элемента HTML.
    ПА должны учитывать следующие правила приоритета при заполнении фона: если значение свойства 'background' для элемента HTML отлично от 'transparent', тогда используйте его, в ином случае - используйте значение свойства 'background' элемента BODY. Если результирующее значение - 'transparent', то представление не определено.
    В соответствии с этими правилами, канва следующего документа HTML будет иметь фон "marble": Установка фона канвы Мой фон - marble.

    Форсированные разрывы страниц


    13.3.5 Форсированные разрывы страниц

    Разрыв страницы обязан возникнуть в (1), если среди свойств 'page-break-after' и 'page-break-before' всех элементов, генерирующих боксы у данного поля, имеется по меньшей мере одно со значением 'always', 'left' или 'right'.
    Разрыв страницы обязан появиться в (1), если последний строчный бокс выше этого поля и первый бокс - ниже него не имеют одинакового значения для 'page'.

    Габариты и полугабариты


    10.8.1 Габариты и полугабариты

    Поскольку высота инлайн-бокса может отличаться от размера шрифта текста бокса (например, 'line-height' > 1em), может иметься некоторое пространство сверху и снизу от выводимых глифов. Разница между размером шрифта и вычисленным значением 'line-height' называется leading\габарит. Половина габарита называется полугабарит.
    ПА центрирует глифы по вертикали в инлайн-боксе, добавляя полугабарит сверху и снизу. Например, если блок текста имеет высоту '12pt' и значение 'line-height' - '14pt', должно быть добавлено 2pts дополнительного пространства: 1pt сверху и 1pt снизу от букв. (Это применимо также и к пустым боксам, как если бы пустой бокс содержал бесконечно узкую букву.)
    Если значение 'line-height' меньше размера шрифта, окончательная высота инлайн-бокса будет меньше, чем размер шрифта, и выводимые глифы будут "просачиваться" за пределы бокса. Если такой бокс касается края строчного бокса, выводимые глифы будут также "просачиваться" в смежный строчный бокс.
    Хотя поля, рамки и заполнение незамещаемых элементов не учитываются при подсчёте высоты инлайн-бокса (и, следовательно, высоты строчного бокса), они всё же отображаются вокруг инлайн-боксов. Это значит, что если высота строчного бокса короче внешних краёв содержащихся в нём боксов, то фон и цвета заполнения и рамок могут "просачиваться" в смежные строчные боксы. Однако в этом случае некоторые ПА могут использовать строчный бокс для "обрезки" областей заполнения и рамок (т.е. - не выводить их). 'line-height'
    Значение:normal | | | | inherit
    Начальное:normal
    Применяется: ко всем элементам
    Наследуется:да
    Процентное:относительно размера шрифта самого элемента
    Носитель:визуальный

    Если это свойство установлено в элементе уровня блока, который (элемент) имеет содержимое, составленное из элементов инлайн-уровня, оно специфицирует минимальную высоту каждого генерируемого инлайн-бокса.
    Если это свойство установлено в элементе инлайн-уровня, оно специфицирует точную высоту каждого бокса, генерируемого элементом (за исключением замещаемых инлайн-элементов, когда высота бокса задаётся свойством 'height').
    Значения этого свойства имеют следующий смысл: normal Сообщает в ПА, что нужно установить вычисленное значение в "приемлемое" значение на базе размера шрифта элемента. Значение имеет тот же смысл, что и . Для 'normal' мы рекомендуем значения в пределах от 1.0 до 1.2. Высота бокса устанавливается в эту величину. Отрицательные значения недопустимы. Вычисленное значение свойства является числом, умноженным на размер шрифта элемента. Отрицательные значения недопустимы. В то же время, число, не являющееся вычисленным значением, наследуется. Вычисленное значение свойства является процентами от вычисленного размера шрифта элемента. Отрицательные значения недопустимы.
    Пример(ы):
    Эти три правила дают в результате одно значение высоты строки: DIV { line-height: 1.2; font-size: 10pt } /* число */ DIV { line-height: 1.2em; font-size: 10pt } /* размер */ DIV { line-height: 120%; font-size: 10pt } /* проценты */
    Если элемент содержит текст, выводимый с помощью нескольких шрифтов, ПА должен определить значение 'line-height' в соответствии с размером самого большого шрифта.
    Вообще, если имеется только одно значение 'line-height' для всех инлайн-боксов параграфа (и нет высоких изображений), вышесказанное гарантирует, что базовые линии последовательных строк точно отделены от 'line-height'. Это важно в тех случаях, когда столбцы текста с различными шрифтами должны быть выровнены, например, в таблице.
    Обратите внимание, что замещаемые элементы имеют свойства 'font-size' и 'line-height', даже если они (свойства) не используются непосредственно для определения высоты бокса. 'font-size', однако, используется для определения единиц измерения 'em' и 'ex', а 'line-height' задействовано в свойстве 'vertical-align'. 'vertical-align'
    Значение:baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit
    Начальное:baseline
    Применяется: к инлайн-элементам и элементам 'table-cell'
    Наследуется:нет
    Процентное:относительно 'line-height' самого элемента
    Носитель:визуальный

    Это свойство влияет на вертикальное позиционирование внутри боксов строчного бокса, генерируемых элементом инлайн-уровня. Следующие значения имеют смысл только относительно родительского элемента инлайн-уровня или родительского элемента уровня блока, если этот элемент генерирует анонимные инлайн-боксы; значения не действуют, если такой родитель не существует.
    Примечание. Значения этого свойства имеют несколько другой смысл в контексте таблиц. См. подробнее в разделе об алгоритме высоты таблиц. baseline Выравнивает базовую линию бокса с базовой линией бокса-родителя. Если бокс не имеет базовой линии, выравнивается низ бокса с базовой линией родителя. middle Выравнивает вертикальную среднюю точку бокса с базовой линией бокса-родителя плюс половина x-высоты родителя. sub Понижает базовую линию бокса до соответствующей позиции подиндексов родительского бокса. (Это значение не воздействует на размер шрифта текста элемента.) super Повышает базовую линию бокса до соответствующей позиции надиндексов родительского бокса. (Это значение не воздействует на размер шрифта текста элемента.) text-top Выравнивает верх бокса с верхом шрифта родительского элемента. text-bottom Выравнивает низ бокса с низом шрифта родительского элемента. Увеличивает (позитивное значение) или уменьшает (негативное значение) бокс на эту величину (процент значения 'line-height'). Значение '0%' это то же, что 'baseline'. Увеличивает (позитивное значение) или уменьшает (негативное значение) бокс на эту величину. Значение '0cm' это то же, что 'baseline'.
    Остальные значения относятся к строчному боксу, в котором появляется генерируемый бокс:
    top Выравнивает верх бокса с верхом строчного бокса. bottom Выравнивает низ бокса с низом строчного бокса.

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

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

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

    • В некоторых случаях бывает необходимо, чтобы пользовательские агенты (ПА) отображали содержимое не из дерева документа. Известный пример - нумерованный список: автор не хочет, чтобы нумерация выводилась явным образом, он или она хотят, чтобы ПА генерировал нумерацию автоматически. Также автор может пожелать, чтобы ПА вставлял слово "Figure" перед заглавием или фигурой или "Chapter 7" в начале 7 главы. В особенности для аудио и брайль-носителей, ПА должны иметь возможность вставить эти строки.
    В CSS2 содержимое может генерироваться с помощью различных механизмов:
  • Свойство 'content' в сочетании с псевдоэлементами :before и :after.
  • Звуковые свойства 'cue-before' и 'cue-after' (см. главу звуковые таблицы стилей). Если свойство 'content' комбинируется со звуковыми свойствами, то они выводятся в следующем порядке: :before, 'cue-before', ('pause-before'), содержимое элемента, ('pause-after'), 'cue-after' и :after.
  • Элементы со значением 'list-item' для свойства 'display'.
    • Ниже описаны механизмы, ассоциированные со свойством 'content'.

    Горизонтальное выравнивание в столбце


    17.5.4 Горизонтальное выравнивание в столбце

    Горизонтальное выравнивание содержимого ячейки в боксе ячейки специфицируется свойством 'text-align'.
    Если значение свойства 'text-align' для более чем одной ячейки в столбце установлено в, содержимое этих ячеек выравнивается вдоль вертикальной оси. Начало строки касается этой оси. Направление письма определяет, расположена строка слева или справа от оси.
    Выравнивание текста таким способом возможно только тогда, когда текст входит на одну строку. Результат не определён, если содержимое ячейки занимает более одной строки.
    Если значение 'text-align' ячейки таблицы это строка, но строка не появляется в содержимом ячейки, то конец содержимого ячейки соприкасается с вертикальной осью выравнивания.
    Заметьте, что строки не должны быть теми же самыми для каждой ячейки, хотя, как правило, это и так.
    CSS не предоставляет способа специфицировать смещение оси вертикального выравнивания относительно края бокса столбца.
    Пример(ы):
    Следующая таблица стилей:
    TD { text-align: "." } TD:before { content: "$" } создаст столбец знаков доллара в следующей таблице HTML:
    Long distance calls
    1.30
    2.50
    10.80
    111.01
    85.
    90
    .05
    .06
    для выравнивания десятичной точки. Шутки ради, мы использовали псевдоэлемент :before для того, чтобы вставить знак доллара перед каждым значением. Таблица может выглядеть так:
    Long distance calls $1.30 $2.50 $10.80 $111.01 $85. $90 $.05 $.06

    Говорящие заголовки свойство 'speakheader'


    17.7.1 Говорящие заголовки: свойство 'speak-header'

    'speak-header'
    Значение:once | always | inherit
    Начальное:once
    Применяется:к элементам. имеющим информацию "шапки" таблицы
    Наследуется:да
    Процентное:N/A
    Носитель:звуковой
    Это свойство специфицирует, произносятся ли заголовки перед каждой ячейкой (данных), или только перед той ячейкой, которая ассоциирована с другим заголовком.
    Значения имеют следующий смысл:
    once Заголовок произносится однократно перед серией ячеек. always Заголовок произносится перед каждой подходящей ячейкой. Каждый язык документов может иметь различные механизмы спецификации заголовков. Например, в HTML 4.0 ([HTML40]) можно специфицировать заголовочную информацию тремя различными атрибутами ("headers", "scope" и "axis"), и спецификация предоставляет алгоритм для определения заголовочной информации, когда эти атрибуты не специфицированы.

    Группирование


    5.2.1 Группирование

    Если несколько селекторов используют общие объявления, то они могут быть сгруппированы в список с разделением запятыми.
    Пример(ы):
    Здесь три правила с идентичными объявлениями собраны в одно. Таким образом, H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif }
    эквивалентно:
    H1, H2, H3 { font-family: sans-serif } CSS предлагает также другие механизмы "сокращений", включая множественные объявления и сокращённые свойства.

    Группы носителей/Media groups

    Группы носителей/Media groups

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

    Группы носителей


    7.3.1 Группы носителей

    Каждое определение свойства CSS специфицирует типы носителя, для которых свойство обязано выполняться на соответствующих ПА. Поскольку свойства обычно применяются для различных носителей, раздел "Применяется: " каждого определения свойства перечисляет группы носителей, а не отдельные типы носителей. Каждое свойство применяется ко всем типам носителя группы, указанной в определении свойства.
    CSS2 определяет следующие группы носителей:
  • непрерывные или страничные. "Оба" означает, что свойство применяется к обеим группам носителей.
  • визуальные, звуковые или осязательные.
  • решётка (для устройств с решётками символов) или растровые. "Оба" означает, что свойство применяется к обеим группам носителей.
  • интерактивные (для устройств, взаимодействующих с пользователем или статичные (для не взаимодействующих). "Оба" означает, что свойство применяется к носителям обеих групп.
  • все (включает все типы носителей).
    • В следующей таблице показаны соотношения между группами носителей и типами носителя:
    Соотношения между группами носителя и типами носителя Типы носителя Группы носителей непрерывный/
    страничный визуальный/звуковой/
    осязательный решётка/
    растровый интерактивный/
    статичныйзвуковойбрайль-устройствобрайль-принтерпортативныйпечатныйпроекторэкранttytv
    непрерывныйзвуковойN/Aоба
    непрерывныйосязательныйрешёткаоба
    страничныйосязательныйрешёткаоба
    обавизуальныйобаоба
    страничныйвизуальныйрастровыйстатичный
    страничныйвизуальныйрастровыйстатичный
    непрерывныйвизуальныйрастровыйоба
    непрерывныйвизуальныйрешёткаоба
    обавизуальный, звуковойрастровыйоба


    Long description of illustration of

    Иллюстрация 1

    Long description of illustration of
    [D] Поле, рамка и заполнение могут быть разорваны в левом, правом, верхнем или нижнем сегментах (например, на диаграмме, "LM" в левом поле, "RP" в правом заполнении, "TB" в верху рамки и т.д.).
    Периметр каждой из четырёх областей (содержимого, заполнения, рамки и поля) называется "край", соответственно - каждый бокс имеет четыре края:
    content edge/край содержимого или inner edge/внутренний край Край содержимого окружает отображаемое содержимое. padding edge/край заполнения Окружает заполнение бокса. Если заполнение имеет ширину 0, край заполнения - это то же, что и край содержимого. Край заполнения бокса определяет края содержащего блока, установленного боксом. border edge/край рамки Окружает рамку бокса. Если рамка имеет ширину 0, то край рамки - это то же, что и край заполнения. margin edge/край поля или outer edge/внешний край Окружает поле бокса. Если поле имеет ширину 0, то край поля - тот же, что и край рамки. Каждый край может быть разорван слева, справа, вверху и внизу.
    Размеры области содержимого бокса - ширина содержимого и высота содержимого - зависят от нескольких факторов: имеет ли элемент, генерирующий бокс, установленные свойства 'width' или 'height', содержит ли бокс текст или другие боксы, является ли бокс таблицей и т.д. Ширина и высота бокса обсуждаются в главе некоторые детали модели визуального форматирования.
    Ширина бокса выводится как сумма левого и правого поля, рамки, заполнения и ширины содержимого. Высота выводится как сумма верхнего и нижнего поля, рамки, заполнения и высоты содержимого.
    Стиль фона различных областей бокса определяется так:
  • Область содержимого: свойство 'background' генерирующего элемента.
  • Область заполнения: свойство 'background' генерирующего элемента.
  • Область рамки: свойства рамки генерирующего элемента.
  • Область поля: поля всегда прозрачны.


    • Иллюстрация 1

    Long description of illustration of [D] Единственная копия фонового изображения центрирована, а другие копии помещены выше и ниже, чтобы создать вертикальную ленту позади элемента. 'background-attachment'
    Значение:scroll | fixed | inherit
    Начальное:scroll
    Применяется: ко всем элементам
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный

    Если специфицировано изображение фона, то данное свойство определяет, является ли оно фиксированным относительно порта просмотра ('fixed'), или прокручивается вместе с документом ('scroll').
    Даже если изображение зафиксировано, оно будет видно только в том случае, если находится в области фона или заполнения элемента. Таким образом, пока изображение не размножено ('background-repeat: repeat'), оно может быть невидимым.
    Пример(ы):
    Здесь создаётся бесконечная вертикальная полоса, остающаяся "приклеенной" к порту просмотра при прокручивании элемента. BODY { background: red url("pendant.gif"); background-repeat: repeat-y; background-attachment: fixed; }
    ПА могут рассматривать 'fixed' как 'scroll'. Однако рекомендуется, чтобы они интерпретировали 'fixed' корректно, хотя бы для элементов HTML и BODY, поскольку у автора нет способа предоставлять изображение только для тех браузеров, которые поддерживают 'fixed'. См. детали в разделе соответствие. 'background-position'
    Значение:[ [ | ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
    Начальное:0% 0%
    Применяется: к элементам уровня блока и к замещаемым элементам
    Наследуется:нет
    Процентное:относится к размеру самого бокса
    Носитель:визуальный

    Если фоновое изображение специфицировано, то данное свойство определяет его (изображения) начальную позицию.
    Значения имеют следующий смысл:
    Если пара значений - '0% 0%', то верхний левый угол изображения выровнен с левым верхним углом кромки заполнения бокса. Пара значений '100% 100%' помещает нижний правый угол изображения в нижний правый угол области заполнения. Если пара значений - '14% 84%', точка изображения 14% поперёк и 84% вниз помещается в точку 14% поперёк и 84% вниз области заполнения. Если пара значений - '2cm 2cm', то верхний левый угол изображения помещается на 2cm вправо и на 2cm вниз от верхнего левого угла области заполнения. top left и left top То же, что '0% 0%'.top, top center и center top То же, что '50% 0%'.right top и top right То же, что '100% 0%'.left, left center и center left То же, что '0% 50%'.center и center center То же, что '50% 50%'.right, right center и center right То же, что '100% 50%'.bottom left и left bottom То же, что '0% 100%'.bottom, bottom center и center bottom То же, что '50% 100%'.bottom right и right bottom То же, что '100% 100%'. Если задано только одно значение, в процентах или единицах измерения, то оно устанавливает только горизонтальную позицию, вертикальная позиция будет 50%.
    Если заданы два значения, первое задаёт горизонтальную позицию.
    Допускаются комбинации значений в процентах и единицах измерения (например, '50% 2cm'). Допускаются негативные значения позиции. Ключевые слова не могут комбинироваться со значениями в процентах или единицах измерения (все возможные сочетания приведены выше).
    Пример(ы):
    BODY { background: url("banner.jpeg") right top } /* 100% 0% */ BODY { background: url("banner.jpeg") top center } /* 50% 0% */ BODY { background: url("banner.jpeg") center } /* 50% 50% */ BODY { background: url("banner.jpeg") bottom } /* 50% 100% */ Если фоновое изображение фиксировано в порте просмотра (см. свойство 'background-attachment'), то изображение размещается относительно порта просмотра, а не относительно области заполнения элемента. Например,
    Пример(ы):
    BODY { background-image: url("logo.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } В данном примере изображение (одиночное) размещается в правом верхнем углу порта просмотра. 'background'
    Значение:[<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
    Начальное:не определено для сокращённых свойств
    Применяется: ко всем элементам
    Наследуется:нет
    Процентное:разрешено для 'background-position'
    Носитель:визуальный

    Свойство 'background' это сокращённое свойство для установки индивидуальных свойств фона (т.е. 'background-color', 'background-image', 'background-repeat', 'background-attachment' и 'background-position') в одном месте в таблице стилей.
    Свойство 'background' сначала устанавливает все индивидуальные свойства фона в их начальные значения, а затем назначает явные значения, заданные в объявлении.
    Пример(ы):
    В первом правиле задано только значение 'background-color', а другие индивидуальные свойства установлены в свои начальные значения.
    Во втором правиле все индивидуальные свойства специфицированы. BODY { background: red } P { background: url("chess.png") gray 50% repeat fixed }


    Иллюстрация 1

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


    Иллюстрация 2

    Long description of illustration of


    Иллюстрация 1

    Long description of illustration of
    [D] Обратите внимание, что слово "flute" остаётся внутри параграфа, поскольку это содержимое инлайн-элемента INSTRUMENT.
    Тем не менее, текст ещё не выглядит так, как Вы могли бы ожидать. Например, шрифт заголовка должен быть крупнее, чем остальной текст, и Вам может понадобиться вывести имя автора курсивом:
    INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block } HEADLINE { font-size: 1.3em } AUTHOR { font-style: italic } ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em } Визуальный ПА может сформатировать этот пример так:


    Иллюстрация 2

    Long description of illustration of [D] Добавление других правил в таблицу стилей позволить Вам сделать представление документа ещё более интересным.


    Иллюстрация 2

    Long description of illustration of [D]
    Multiple Master Font/Множественный мастер-ширфт Множественный мастер- шрифт содержит два первичных шрифта, которые используются со специальными программами вывода для предоставления интерполированного результата. Adobe Systems предоставляет механизм, позволяющий использовать параметры для управления выводом или интерполированным вводом шрифта. Эти параметры обычно описывают характеристики оригинального шрифта, и множественный мастер-результат называется "синтезированный шрифт." Open Type Open Type это расширение шрифтового формата TrueType, которое содержит дополнительную информацию, расширяющую возможности шрифта в поддержке высококачественной международной печати. Open Type может ассоциировать один символ с несколькими глифами представления и комбинации символов - с одним глифом (словообразующая лигатура). Open Type содержит двухмерную информацию для поддержки свойств комплексного позиционирования и присоединения глифов. TrueType Open и OpenType содержат конкретную информацию о письме и языке, так что текстовые процессоры могут уточнять своё поведение соответственно (см. [OPENTYPE]). Server Font/Серверный шрифт Server Font это ресурс шрифта, размещённый на сервере и вызываемый определением WebFont. ПА может использовать этот ресурс для отображения страницы. Speedo Speedo -технология шрифтов была разработана Bitstream и является первичным форматом шрифта на компьютерах Atari ST и Falcon. Используется также в компьютерах с запущенной системой X window. TrueDoc TrueDoc -технология была разработана Bitstream для создания, переноса и прорисовки платформонезависимых масштабируемых объектов шрифта в web. Создание объектов шрифта выполняется в character shape recorder (CSR) TrueDoc, а вывод объектов шрифта - в character shape player (CSP) TrueDoc. Технология предназначена для просмотра и печати в web. TrueDoc Portable Font Resource/Переносимые Ресурсы Шрифта TrueDoc Portable font resource (или PFR) это платформонезависимый масштабируемый объект шрифта, вырабатываемый CSP. Ввод может быть TrueType или Type 1 любого ответвления Windows, Mac или Unix. TrueDoc Portable Font Resources предоставляют хорошие пропорции компрессии, платформонезависимы и, поскольку они не в первичном формате шрифта (TrueType или Type 1), не могут легко инсталироваться. TrueType TrueType это формат, разработанный Apple и лицензированный Microsoft. TrueType это первичный формат шрифта операционной системы для Windows и Macintosh. TrueType содержит иерархический набор таблиц и глифов-изображений. Символы могут выводиться на посимвольном базисе или на базе размера в пунктах, давая превосходное качество для данных разрешений экрана. Шрифты TrueType для Windows и Mac мало отличаются, хотя и могут быть достаточно различными для предотвращения межплатформенного использования. TrueType Collection/Коллекция TrueType TrueType Collection (или TTC) это расширение формата TrueType, включающее таблицы, позволяющие содержать много шрифтов TrueType в одном файле шрифта TrueType. Файлы TrueType collection встречаются теперь относительно редко. TrueType GX Fonts/TrueType Шрифты GX TrueType GX Fonts содержат расширения стандартного формата TrueType, допускающие изменяющиеся шрифты, подобные шрифтам Multiple Master. Может быть несколько мутаций параметров (осей), таких как вес, высота и наклон. Ось может определяться, что позволяет получить практически любой эффект. TrueType GX может поддерживать также альтернативные замещения представлений глифов для лигатур, контекстуальных форм, дробей и т.д. Для вычислений TrueType GX доступны только на Mac (см. [TRUETYPEGX]).Type 1 font/Шрифты Type 1 Шрифты Type 1, разработанные Adobe Systems, были одним из первых доступных масштабируемых форматов. Шрифты Type 1 обычно содержат 228 символов с глифами-изображениями, описанных с использованием кривых третьей степени bezier. Mac, Windows и X имеют схожие, но отдельные форматы; Adobe предоставляет Adobe Type Manager для всех трёх платформ. Type1c это более ранняя форма с компрессией без потерь для глифов-изображений Type 1. URI Binding/Связывание с URI Процесс подключения определённого ресурса шрифта к данному Web-сайту путём внедрения кодированного URI или цифрового подтверждения использования в ресурс шрифта.


    Иллюстрация 1

    Long description of illustration of
    [D] Последовательность фиктивных тэгов такова:
    T he first few words of an article in the Economist.
    Обратите внимание, что тэги псевдоэлемента :first-letter примыкают к содержимому (т.е. к начальному символу), поскольку начальный тэг псевдоэлемента :first-line вставлен справа после начального тэга элемента, к которому он присоединён.
    Чтобы выполнить форматирование традиционных зависающих заглавных букв, ПА могут выровнять размеры шрифта, например, по базовой линии. Также и контуры глифов могут быть приняты в расчёт при форматировании.
    Пунктуация (т.е. символы, определённые в Unicode [UNICODE] в классах пунктуации "open" (Ps), "close" (Pe) и "other" (Po)), которая предшествует первой букве, должна включаться, как в этом примере:


    Иллюстрация 2

    Long description of illustration of [D] Псевдоэлемент :first-letter совпадает только с частью элементов уровня блока.
    В некоторых языках могут быть специфические правила рассмотрения определённых сочетаний букв. В датском языке, например, если комбинация "ij" появляется в начале слова, обе буквы должны рассматриваться псевдоэлементом :first-letter.
    Пример(ы):
    Следующий пример иллюстрирует, как может действовать перекрывание псевдоэлементов. Первые буквы каждого элемента P будут зелёными и размером '24pt'. Остаток первой форматированной строки будет 'blue', а остаток параграфа - 'red'.
    P { color: red; font-size: 12pt } P:first-letter { color: green; font-size: 200% } P:first-line { color: blue } Какой-нибудь текст не менее двух строк.
    Если предположить, что разрыв строки появится перед словом "не", последовательность фиктивных тэгов для этого фрагмента может быть такой:
    К акой-нибудь текст не менее двух строк.
    Заметьте, что элемент :first-letter находится внутри элемента :first-line. Свойства, установленные в :first-line, наследуются в :first-letter, но переопределяются, если то же самое свойство установлено в :first-letter.


    Иллюстрация 1

    Long description of illustration of
    [D] Диаграмма таблицы с заголовком вверху; нижнее поле заголовка сжато вместе с верхним полем таблицы.


    Иллюстрация 1

    Long description of illustration of [D] На втором рисунке область 1px на 1px закрывается одной точкой устройства с низким разрешением (экран компьютера), и та же самая область покрывается 16-ю точками на устройстве с высоким разрешением (как лазерный принтер 400 dpi).
    Long description of illustration of [D]
    Дочерние элементы не наследуют относительные значения, специфицированные для из родителя; они (обычно) наследуют вычисленные значения.
    Пример(ы):
    В следующих правилах вычисленное значение 'text-indent' элементов H1 будет 36pt, а не 45pt, если H1 является дочерним относительно элемента BODY:BODY { font-size: 12pt; text-indent: 3em; /* т.е. 36pt */ } H1 { font-size: 15pt }
    Абсолютные единицы измерения используются только тогда, когда известны физические свойства выводного устройства.
    Абсолютными значениями являются:
  • in: inches/дюймы -- 1 дюйм равен 2.54 сантиметра.
  • cm: сантиметры
  • mm: миллиметры
  • pt: points/пункты - пункт, используемый в CSS2, равен 1/72 дюйма.
  • pc: picas/пики -- 1 пика равна 12 пунктам.

    • Пример(ы):
    H1 { margin: 0.5in } /* дюймы */ H2 { line-height: 3cm } /* сантиметры */ H3 { word-spacing: 4mm } /* миллиметры */ H4 { font-size: 12pt } /* пункты */ H4 { font-size: 1pc } /* пики */ В тех случаях, когда специфицированные размеры не могут поддерживаться, ПА обязаны давать значение, приближённое к реальному.

    Имя семейства шрифта


    15.4.6 Имя семейства шрифта

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

    Индекс дескрипторов

    Индекс дескрипторов

    НазваниеЗначенияНачальное значение
    'ascent' не определено
    'baseline' 0
    'bbox' , , , не определено
    'cap-height' не определено
    'centerline' не определено
    'definition-src' не определено
    'descent' не определено
    'font-family' [ | ] [, [ | ]]* зависит от пользовательского агента
    'font-size' all | [, ]* all
    'font-stretch' all | [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded] ]* normal
    'font-style' all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]* all
    'font-variant' [normal | small-caps] [,[normal | small-caps]]* normal
    'font-weight' all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]* all
    'mathline' не определено
    'panose-1' []{10} 0 0 0 0 0 0 0 0 0 0
    'slope' 0
    'src' [ [format( [, ]*)] | ] [, [format( [, ]*)] | ]* не определено
    'stemh' не определено
    'stemv' не определено
    'topline' не определено
    'unicode-range' [, ]* U+0-7FFFFFFF
    'units-per-em' не определено
    'widths' [ ]? [ ]+ [,[ ]? ]+] не определено
    'x-height' не определено


    Индекс свойств

    Индекс свойств

    НазваниеЗначения Начальное значениеПрименяется:
    (По умолчанию:
    ко всем)НаследуетсяПроцентное
    (По умолчанию: N/A)Группа носителей
    'azimuth' | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit center да звуковой
    'background' [ 'background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit XX визуальный нет допускается в 'background-position' визуальный
    'background-attachment' scroll | fixed | inherit scroll нет визуальный
    'background-color' | transparent | inherit transparent нет визуальный
    'background-image' | none | inherit none нет визуальный
    'background-position' [ [ | ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit 0% 0%к элементам уровня блока и к замещаемым элементамнет относительно размеров самого боксавизуальный
    'background-repeat' repeat | repeat-x | repeat-y | no-repeat | inherit repeat нет визуальный
    'border' [ 'border-width' || 'border-style' || ] | inherit см. индивидуальные свойства нет визуальный
    'border-collapse' collapse | separate | inherit collapseк элементам 'table' и 'inline-table' да визуальный
    'border-color' {1,4} | transparent | inherit см. индивидуальные свойства нет визуальный
    'border-spacing' ? | inherit 0к элементам 'table' и 'inline-table' да визуальный
    'border-style' {1,4} | inherit см. индивидуальные свойства нет визуальный
    'border-top' 'border-right' 'border-bottom' 'border-left' [ 'border-top-width' || 'border-style' || ] | inherit см. индивидуальные свойства нет визуальный
    'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color' | inherit значение свойства 'color' нет визуальный
    'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style' | inherit none нет визуальный
    'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' | inherit medium нет визуальный
    'border-width' {1,4} | inherit см. индивидуальные свойства нет визуальный
    'bottom' | | auto | inherit autoк позиционированным элементамнетотносительно высоты содержащего блокавизуальный
    'caption-side' top | bottom | left | right | inherit topк элементам 'table-caption'да визуальный
    'clear' none | left | right | both | inherit noneк элементам уровня блоканет визуальный
    'clip' | auto | inherit autoк элементам уровня блока и к замещаемым элементам нет визуальный
    'color' | inherit зависит от ПА да визуальный
    'content' [ | | | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit пустая строкак псевдоэлементам :before и :afterнет визуальный
    'counter-increment' [ ? ]+ | none | inherit none нет визуальный
    'counter-reset' [ ? ]+ | none | inherit none нет визуальный
    'cue' [ 'cue-before' || 'cue-after' ] | inherit XX нет звуковой
    'cue-after' | none | inherit none нет звуковой
    'cue-before' | none | inherit none нет звуковой
    'cursor' [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit auto да визуальный, интерактивный
    'direction' ltr | rtl | inherit ltr ко всем элементам, но см. др. информацию да визуальный
    'display' inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit inline нет все
    'elevation' | below | level | above | higher | lower | inherit level да звуковой
    'empty-cells' show | hide | inherit show к элементам 'table-cell' да визуальный
    'float' left | right | none | inherit none ко всем непозиционированным элементам и генерируемому содержимому нет визуальный
    'font' [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit см. индивидуальные свойства да допускается в 'font-size' и 'line-height' визуальный
    'font-family' [[ | ],]* [ | ] | inherit зависит от ПА (пользовательского агента) да визуальный
    'font-size' | | | | inherit medium да, вычисляемое значение наследуется относительно размера шрифта родительского элемента визуальный
    'font-size-adjust' | none | inherit none да визуальный
    'font-stretch' normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit normal да визуальный
    'font-style' normal | italic | oblique | inherit normal да визуальный
    'font-variant' normal | small-caps | inherit normal да визуальный
    'font-weight' normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal да визуальный
    'height' | | auto | inherit auto ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов таблиц и групп столбцов нет см. дополнительную информацию визуальный
    'left' | | auto | inherit auto к позиционированным элементам нет относительно ширины содержащего блока визуальный
    'letter-spacing' normal | | inherit normal да визуальный
    'line-height' normal | | | | inherit normal да относительно размера шрифта этого элемента визуальный
    'list-style' [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit XX к элементам с 'display: list-item' да визуальный
    'list-style-image' | none | inherit none к элементам с 'display: list-item' да визуальный
    'list-style-position' inside | outside | inherit outside к элементам с 'display: list-item' да визуальный
    'list-style-type' disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit disc к элементам с 'display: list-item' да визуальный
    'margin' {1,4} | inherit XX нет относительно ширины содержащего блока визуальный
    'margin-top' 'margin-right' 'margin-bottom' 'margin-left' | inherit 0 нет относительно ширины содержащего блока визуальный
    'marker-offset' | auto | inherit auto к элементам с 'display: marker' нет визуальный
    'marks' [ crop || cross ] | none | inherit none к контексту страницы N/A визуальный, страничный
    'max-height' | | none | inherit none ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы нет относительно высоты содержащего блока визуальный
    'max-width' | | none | inherit none ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы нет относительно ширины содержащего блока визуальный
    'min-height' | | inherit 0 ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы нет относительно высоты содержащего блока визуальный
    'min-width' | | inherit зависит от ПА ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы нет относительно ширины содержащего блока визуальный
    'orphans' | inherit 2 к элементам уровня блока да визуальный, страничный
    'outline' [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit см. индивидуальные свойства нет визуальный, интерактивный
    'outline-color' | invert | inherit invert нет визуальный, интерактивный
    'outline-style' | inherit none нет визуальный, интерактивный
    'outline-width' | inherit medium нет визуальный, интерактивный
    'overflow' visible | hidden | scroll | auto | inherit visible к элементам уровня блока и к замещаемым нет визуальный
    'padding' {1,4} | inherit XX нет относительно ширины содержащего блока визуальный
    'padding-top' 'padding-right' 'padding-bottom' 'padding-left' | inherit 0 нет относительно ширины содержащего блока визуальный
    'page' | auto auto к элементам уровня блока да визуальный, страничный
    'page-break-after' auto | always | avoid | left | right | inherit auto к элементам уровня блока нет визуальный, страничный
    'page-break-before' auto | always | avoid | left | right | inherit auto к элементам уровня блока нет визуальный, страничный
    'page-break-inside' avoid | auto | inherit auto к элементам уровня блока да визуальный, страничный
    'pause' [ [ | ]{1,2} ] | inherit зависит от ПА нет см. описание 'pause-before' и 'pause-after' звуковой
    'pause-after' | | inherit зависит от ПА нет см. дополнительную информацию звуковой
    'pause-before' | | inherit зависит от ПА нет см. дополнительную информацию звуковой
    'pitch' | x-low | low | medium | high | x-high | inherit medium да звуковой
    'pitch-range' | inherit 50 да звуковой
    'play-during' mix? repeat? | auto | none | inherit auto нет звуковой
    'position' static | relative | absolute | fixed | inherit static ко всем элементам, кроме тех, которые генерируют содержимое нет визуальный
    'quotes' [ ]+ | none | inherit зависит от ПА да визуальный
    'richness' | inherit 50 да звуковой
    'right' | | auto | inherit auto к позиционированным элементам нет относительно ширины содержащего блока визуальный
    'size' {1,2} | auto | portrait | landscape | inherit auto к контексту страницы N/A визуальный, страничный
    'speak' normal | none | spell-out | inherit normal да звуковой
    'speak-header' once | always | inherit once к элементам, имеющим информацию "шапки" да звуковой
    'speak-numeral' digits | continuous | inherit continuous да звуковой
    'speak-punctuation' code | none | inherit none да звуковой
    'speech-rate' | x-slow | slow | medium | fast | x-fast | faster | slower | inherit medium да звуковой
    'stress' | inherit 50 да звуковой
    'table-layout' auto | fixed | inherit auto к 'table' и 'inline-table' нет звуковой
    'text-align' left | right | center | justify | | inherit зависит от ПА и направления письма к элементам уровня блока да визуальный
    'text-decoration' none | [ underline || overline || line-through || blink ] | inherit none нет (см. дополнительную информацию) визуальный
    'text-indent' | | inherit 0 к элементам уровня блока да относительно ширины содержащего блока визуальный
    'text-shadow' none | [ || ? ,]* [ || ?] | inherit none нет (см. дополнительную информацию) визуальный
    'text-transform' capitalize | uppercase | lowercase | none | inherit none да визуальный
    'top' | | auto | inherit auto к позиционированным элементам нет относительно высоты содержащего блока визуальный
    'unicode-bidi' normal | embed | bidi-override | inherit normal ко всем элементам, но см. др. информацию нет визуальный
    'vertical-align' baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit baseline к элементам инлайн уровня и к 'table-cell' нет относительно 'line-height' самого элемента визуальный
    'visibility' visible | hidden | collapse | inherit inherit нет визуальный
    'voice-family' [[ | ],]* [ | ] | inherit зависит от ПА да звуковой
    'volume' | | silent | x-soft | soft | medium | loud | x-loud | inherit medium да относительно унаследованного значения звуковой
    'white-space' normal | pre | nowrap | inherit normal к элементам уровня блока да визуальный
    'widows' | inherit 2 к элементам уровня блока да визуальный, страничный
    'width' | | auto | inherit auto ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов таблиц и групп столбцов нет относительно ширины содержащего блока визуальный
    'word-spacing' normal | | inherit normal да визуальный
    'z-index' auto | | inherit auto к позиционированным элементам нет визуальный


    Инлайн незамещаемые элементы


    10.2 Ширина содержимого: свойство 'width' 'width'
    Значение: | | auto | inherit
    Начальное:auto
    Применяется:ко всем элементам, кроме незамещаемых инлайн-элементов, рядов таблиц и групп рядов
    Наследуется:нет
    Процентное:относительно ширины содержащего блока
    Носитель:визуальный
    Это свойство специфицирует ширину содержимого боксов, генерируемых элементами уровня блока и замещаемыми элементами.
    Это свойство не применяется к незамещаемым элементам инлайн-уровня. Ширина боксов незамещаемых инлайн-элементов, это ширина отображаемого внутри них содержимого (до любого относительного смещения дочерних элементов). Напоминаем, что инлайн-боксы всплывают внутри строчных боксов. Ширина строчных боксов задаётся их содержащим блоком, Но может быть уменьшена при наличии поплавков.
    Ширина бокса замещаемого элемента является внутренней и может масштабироваться ПА, если значение этого свойства отличается от 'auto'.
    Значения имеют следующий смысл: Специфицирует фиксированную ширину. Специфицирует ширину в процентах. Проценты вычисляются относительно ширины содержащего блока генерируемого бокса. auto Ширина зависит от значений других свойств. См. следующие разделы.
    Отрицательные значения для 'width' не допускаются.
    Пример(ы):
    Это правило фиксирует ширину содержимого параграфа в 100 пикселов:
    P { width: 100px }

    Инлайн замещаемые элементы


    10.6.2 Инлайн, замещаемые элементы уровня блока, замещаемые элементы при нормальном всплывании и всплывание, замещаемые элементы

    Если 'top', 'bottom', 'margin-top' или 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Если 'height' - 'auto', вычисленное значение будет внутренней высотой.

    Инлайнэлементы и инлайнбоксы


    9.2.2 Инлайн-элементы и инлайн-боксы

    Инлайн-элементы это те элементы документа-источника, которые не образуют новых блоков содержимого; содержимое определяется в строке (на месте) (например, выделенные участки текста внутри параграфа, инлайн-изображения и т.п.). Различные значения свойства 'display' делают элемент инлайн: 'inline', 'inline-table', 'compact' и 'run-in' (не всегда; см. компактные и втягивающиеся боксы). Элементы инлайн-уровня (встроенные) генерируют инлайн-боксы.
    Инлайн-боксы могут принимать участие в различных контекстах форматирования:
  • Внутри бокса блока инлайн-бокс участвует в инлайн-контексте форматирования.
  • Инлайн-бокс compact расположен в поле бокса блока.
  • Боксы-маркёры имеют позицию также вне бокса блока.


    • Интерфейс пользователя

    18. Интерфейс пользователя

    Содержание
  • 18.1 Курсоры: свойство 'cursor'
  • 18.2 Предпочтительные цвета пользователя
  • 18.3 Предпочтительные шрифты пользователя
  • 18.4 Динамические контуры: свойство 'outline'
  • 18.4.1 Контуры и фокус
  • 18.5 Увеличение


    • Использование именованных страниц 'page'


    13.3.2 Использование именованных страниц: 'page'

    'page'
    Значение: | auto
    Начальное:auto
    Применяется: к элементам уровня блока
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный, страничный
    Свойство 'page' можно использовать для спецификации определённого типа страницы, на которой элемент должен быть выведен.
    Пример(ы):
    Все таблицы будут размещены на правой стороне страницы с ориентацией landscape:
    @page rotated {size: landscape} TABLE {page: rotated; page-break-before: right} Свойство 'page' работает так: если бокс блока с инлайн-содержимым имеет свойство 'page', отличное от аналогичного свойства предшествующего бокса блока с инлайн-содержимым, тогда один или два разрыва страницы вставляются между ними, и боксы после разрыва отображаются в страничном боксе именованного типа. См. ниже "Форсированные разрывы страниц".
    Пример(ы):
    В этом примере две таблицы отображаются на landscape-страницах (или на одной странице, если входят), и тип страницы "narrow" вообще не используется, вопреки установкам в DIV:
    @page narrow {size: 9cm 18cm} @page rotated {size: landscape} DIV {page: narrow} TABLE {page: rotated} с этим документом:
    ...
    ...


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


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

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

    Язык документа элементы и атрибуты


    1.3.1 Язык документа: элементы и атрибуты

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


    • Элементы уровня блока и боксы блока


    9.2.1 Элементы уровня блока и боксы блока

    Элементы уровня блока это элементы документа-источника, визуально отформатированные как блоки (например, параграфы). Различные значения свойства 'display' создают элемент уровня блока: 'block', 'list-item', 'compact', 'run-in' (не всегда; см. компактные и втягивающиеся боксы) и 'table'.
    Элементы уровня блока генерируют основной бокс блока, и только он содержит боксы блоков. Основной бокс блока устанавливает содержащий блок для боксов-потомков и сгенерированного содержимого и является также боксом, участвующим в любой схеме позиционирования. Основные боксы блока действуют в контексте форматирования блока.
    Некоторые элементы уровня блока генерируют дополнительные боксы за пределами основного бокса: элементы 'list-item' и элементы с маркёрами. Эти дополнительные боксы размещаются относительно основного бокса.

    Как читать эту спецификацию


    1.1 Как читать эту спецификацию

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

    Как организована эта спецификация


    1.2 Как организована эта спецификация

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

    Канва


    2.3.1 Канва

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

    Капитализация свойство 'texttransform'

    'text-transform'
    Значение:capitalize | uppercase | lowercase | none | inherit
    Начальное:none
    Применяется:ко всем элементам
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный
    Это свойство управляет эффектами капитализации текста элемента.
    Значения имеют следующий смысл:
    capitalize Переводит первый символ каждого слова в верхний регистр. uppercase Переводит все символы каждого слова в верхний регистр. lowercase Переводит все символы каждого слова в нижний регистр. none Нет эффектов капитализации. Реальная трансформация зависит в каждом конкретном случае от языка письма. См. о способах определения языка элемента в RFC 2070 ([RFC2070]).
    Соответствующие ПА могут рассматривать значение 'text-transform' как 'none' для тех символов, которые не входят в репертуар Latin-1, и для элементов на тех языках, в которых трансформация отличается от трансформации, специфицированной таблицей конвертации регистров для ISO 10646 ([ISO10646]).
    Пример(ы):
    Здесь весь текст в элементе H1 переводится в верхний регистр. H1 { text-transform: uppercase }

    Каскад

    Таблицы стилей могут иметь три независимых источника: автор, пользователь и ПА.
  • Автор. Специфицирует таблицы стилей для документа-источника в соответствии с соглашениями о языке документа. К примеру, в HTML таблицы стилей могут быть включены в документ или иметь внешнюю связь.
  • Пользователь. Может иметь возможность специфицировать стилевую информацию для определённого документа. Например, пользователь может специфицировать файл, содержащий таблицу стилей, или ПА может предоставить интерфейс, генерирующий пользовательскую таблицу стилей (или вести себя так, как если бы предоставлял).
  • Пользовательский агент. Соответствующие ПА обязаны применять таблицу стилей по умолчанию (или вести себя так, как если бы применяли) до того, как применять к документу все другие таблицы стилей. Таблицы стилей по умолчанию в ПАгенте должны представить элементы языка документа теми способами, которые удовлетворяют общим ожиданиям для языка документа (например, для визуальных браузеров, элемент EM в HTML представляется шрифтом italic). См. "Образец таблицы стилей HTML 4.0" - рекомендуемую таблицу стилей по умолчанию для документов HTML 4.0.Учтите, что таблица стилей по умолчанию может быть изменена, если системные настройки изменены пользователем (например, системные цвета). Однако, из-за ограничений конкретной реализации ПА, может оказаться невозможным изменить значения в таблице стилей по умолчанию.
    • Области видимости таблиц стилей из этих трёх источников будут перекрываться и взаимодействовать в соответствии с каскадом.
    Каскад CSS назначает вес каждому правилу стиля. Если применяются несколько правил, одно, имеющее больший вес, будет иметь приоритет.
    По умолчанию правила авторской таблицы стилей имеют больший вес, чем правила таблицы стилей пользователя. Преимущество зарезервировано, однако, для правил "!important". Все правила пользователя и автора имеют больший вес, чем правила таблицы стилей по умолчанию в ПА.
    Импортируемы таблицы стилей также каскадируются, и их вес зависит от порядка импортирования. Правила, специфицированные в имеющейся таблице стилей, переопределяют правила, импортируемые из других таблиц. Импортированные таблицы стилей сами могут импортировать и переопределять другие таблицы стилей рекурсивно, и тогда применяются те же правила приоритета.

    Каскадирование в контексте страницы

    Объявления в контексте страницы подчиняются каскаду так же, как и нормальные объявления CSS2.
    Пример(ы):
    @page { margin-left: 3cm; } @page :left { margin-left: 4cm; } Из-за более высокой специфики селектора псевдокласса, левое поле левых страниц будет '4см', а все остальные страницы (т.е. правые) - левое поле '3см'.

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

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

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

    Ключевые слова


    4.1.2 Ключевые слова

    Ключевые слова имеют форму идентификаторов. Ключевые слова обязаны не размещаться между кавычками ("..." или '...'). Таким образом, red
    это ключевое слово, а "red" - нет (это строка). Другие неверные примеры:
    Примеры неверного использования:
    width: "auto"; border: "none"; font-family: "serif"; background: "red";

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


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

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

    в любом месте между лексемами,

    4.1.9 Комментарии

    Комментарии начинаются символом "/*" и заканчиваются символом "*/". Они могут появляться в любом месте между лексемами, и их содержимое не влияет на представление документа. Комментарии не могут вкладываться.
    CSS допускает также SGML-ограничители комментариев ("") в определённых местах, но это не комментарии CSS. Они разрешены для ввода правил стиля в документе-источнике HTML (в элементе STYLE), чтобы спрятать эти правила от до-HTML 3.2 ПАгентов. См. спецификацию HTML 4.0 ([HTML40]).

    Контекст форматирования блока


    9.4.1 Контекст форматирования блока

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

    Контекст инлайнформатирования


    9.4.2 Контекст инлайн-форматирования

    В контексте инлайн-форматирования боксы устанавливаются по горизонтали, один за другим, начиная от верха содержащего блока. Горизонтальные поля, рамки и заполнение рассматриваются как отношения между боксами. Боксы могут быть выровнены по вертикали несколькими способами: могут быть выровнены их нижние или верхние края или базовые линии текста внутри них. Прямоугольная область, содержащая боксы, которые образуют строку, называется строчный бокс.
    Ширина строчного бокса определяется содержащим блоком. Высота строчного бокса определяется правилами из раздела вычисление высоты строки. Строчный бокс всегда имеет высоту, достаточную для содержащихся в нём боксов. В то же время, он может быть выше, чем самый высокий из содержащихся в нём боксов (если, например, боксы выровнены так, что базовые линии выстроены). Если высота бокса В меньше, чем высота строчного бокса, содержащего его, то вертикальное выравнивание В внутри строчного бокса определяется свойством 'vertical-align'.
    Если несколько инлайн-боксов не входят по горизонтали в один строчный бокс, они распределяются на два или более вертикально упакованных строчных бокса. Таким образом, параграф будет вертикальным стеком из строчных боксов. Строчные боксы упакованы по вертикали без разделения и никогда не перекрываются.
    Вообще, левый край строчного бокса касается левого края его содержащего блока, и правый край касается правого края его содержащего блока. В то же время, боксы-поплавки могут появляться между краем содержащего блока и краем строчного блока. Таким образом, хотя строчные боксы в том же самом контексте инлайн-форматирования обычно имеют ту же самую ширину (что и содержащий блок), они могут иметь и другую ширину из-за поплавков, уменьшающих горизонтальное пространство. Строчные боксы в том же самом контексте инлайн-форматирования обычно различаются по высоте (например, одна строка может содержать высокое изображение, а другие строки - только текст).
    Если суммарная ширина инлайн-боксов в строке меньше, чем ширина строчного бокса, содержащего их, то их распределение по горизонтали внутри строчного бокса определяется свойством 'text-align'. Если это свойство имеет значение 'justify', ПА может уплотнить инлайн-боксы.
    Поскольку инлайн-бокс не может превысить ширину строчного бокса, длинные инлайн-боксы разделяются на несколько боксов, и эти боксы распределяются на несколько строчных боксов. Если инлайн-бокс разделён, то поля, рамки и заполнение не имеют визуального эффекта в тех местах, где происходит разделение. Форматирование полей, рамок и заполнения может не быть определено полностью, если разделение происходит внутри двунаправленного внедрения.
    Инлайн-боксы могут также быть разделены на несколько боксов внутри одного строчного бокса из-за двунаправленной обработки текста.
    Вот пример конструкции инлайн-боксов. Следующий параграф (созданный элементом Р уровня блока в HTML) содержит анонимный текст, распределённый между элементами EM и STRONG: Several emphasized words appear in this sentence, dear.

    Элемент P генерирует бокс блока, содержащий пять инлайн-боксов, три из которых - анонимные:
  • Anonymous: "Several"
  • EM: "emphasized words"
  • Anonymous: "appear"
  • STRONG: "in this"
  • Anonymous: "sentence, dear."
    • Чтобы сформатировать параграф, ПА вставляет пять боксов в строчный бокс. В этом примере бокс, генерируемый для элемента P, устанавливает содержащий блок для строчных боксов. Если содержащий блок достаточно широк, все инлайн-боксы войдут в один строчный бокс: Several emphasized words appear in this sentence, dear.
    если нет, инлайн-боксы будут разделены и распределены по нескольким строчным боксам. Предыдущий параграф может быть разделён так: Several emphasized words appear in this sentence, dear. или так: Several emphasized words appear in this sentence, dear.
    В предыдущем примере бокс EM был разделён на два бокса EM (назовём их "split1" и "split2"). Поля, рамки, заполнение или текстовый орнамент не имеют видимого эффекта после split1 или до split2.
    Рассмотри следующий пример: Example of inline flow on several lines Several emphasized words appear here.

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

    Контуры и фокус


    18.4.1 Контуры и фокус

    Графические интерфейсы пользователя могут использовать контуры вокруг элементов, чтобы сообщать пользователю, какой элемент страницы имеет фокус. Эти контуры дополняют рамки, и включение и выключение не должно вызывать перерисовки документа. Фокус является субъектом действий пользователя в документе (например, при вводе текста, выборе кнопки, и т.д.). ПА, поддерживающие группы интерактивных носителей, обязаны отслеживать, где находится фокус, и обязаны также отображать фокус. Это может быть сделано путём использования динамических контуров вместе с псевдоклассом :focus.
    Пример(ы):
    Чтобы прорисовать толстую чёрную линию вокруг элемента, когда он имеет фокус, толстую красную линию, когда он активен, можно использовать следующие правила: :focus { outline: thick solid black } :active { outline: thick solid red }

    Коррекция цветовой гаммы

    По вопросам цветовой гаммы проконсультируйтесь в Gamma Tutorial в спецификации PNG ([PNG10]).
    При вычислении коррекции цветовой гаммы, ПА, выводящие на CRT, могут принять идеальный CRT и игнорировать любые эффекты внедряемой гаммы. Это означает, что минимальная обработка, необходимая для текущей платформы - : PC, использующий MS-Windows none Unix, использующий X11 none Mac, использующий QuickDraw применяет гамму 1.45 [ICC32] (приложения ColorSync-savvy могут просто передавать профиль sRGB ICC в ColorSync для выполнения необходимой коррекции цвета) SGI, использующий X применяет значения гаммы из /etc/config/system.glGammaVal (значение по умолчанию - 1.70; приложения, запущенные на Irix 6.2 или выше могут просто передавать профиль sRGB ICC в систему управления цветом) NeXT, использующий NeXTStep применяется гамма 2.22
    "Применение гаммы" означает, что каждый из трёх - R, G и B - обязан быть конвертирован в R'=Rgamma, G'=Ggamma, B'=Bgamma, прежде чем быть обработанным ОС.
    Это можно быстро выполнить путём однократного создания 256-элементной просмотровой таблицы при вызове браузера таким вот образом: for i := 0 to 255 do raw := i / 255.0; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end
    что затем позволяет исключить необходимость чрезмерных вычислений для атрибута цвета, и ещё меньше - через пикселные значения.


    Краткое пособие CSS для HTML

    В этом пособии мы покажем, как можно быстро создать простые таблицы стилей.
    Для использования этого пособия необходимо немного знать HTML (см. [HTML40]) и некоторые базовые термины настольных публикаций.
    Вот небольшой документ HTML:
    Bach's home page

    Bach's home page

    Johann Sebastian Bach was a prolific composer. Чтобы установить голубой цвет текста элемента H1, можно написать такое правило CSS:
    H1 { color: blue } Правило CSS состоит из двух главных частей: селектора ('H1') и объявления ('color: blue'). Объявление имеет две части: свойство ('color') и значение ('blue'). Поскольку в предыдущем примере делается попытка использовать только одно из свойств, необходимое для отображения документа HTML, он может быть квалифицирован как таблица стилей. В комбинации с другими таблицами стилей (возможность комбинировать таблицы стилей является одним из фундаментальных свойств CSS) оно (свойство) определит конечный вид документа.
    Спецификация HTML 4.0 определяет, как правила таблиц стилей могут быть специфицированы для документов HTML: или внутри документа HTML, или в таблицах стилей. Чтобы поместить в документ таблицу стилей, используйте элемент STYLE:
    Bach's home page

    Bach's home page

    Johann Sebastian Bach was a prolific composer. Для максимальной гибкости мы рекомендуем, чтобы авторы специфицировали внешние таблицы стилей; они могут быть изменены без модификации документа-источника HTML, а также могут раздельно использоваться несколькими документами. Чтобы сослаться на внешнюю таблицу стилей, Вы можете использовать элемент LINK:
    Bach's home page

    Bach's home page

    Johann Sebastian Bach was a prolific composer. Элемент LINK специфицирует:
  • тип гиперссылки: "stylesheet";
  • размещение таблицы стилей: в атрибуте "ref";
  • тип таблицы стилей, на которую ссылаются: "text/css".
    • Чтобы продемонстрировать тесную взаимосвязь между таблицей стилей и структурной разметкой, мы продолжим использовать элемент STYLE в этом пособии. Давайте добавим больше цветов: Bach's home page

    Bach's home page

    Johann Sebastian Bach was a prolific composer.
    Таблица стилей теперь содержит два правила: первое устанавливает цвет элемента BODY в 'red', а второе - цвет элемента H1 в 'blue'. Поскольку для элемента P не специфицирован цвет, он будет наследовать цвет от своего элемента-предка, а именно - от BODY. Элемент H1 является также дочерним элементом элемента BODY, но второе правило переопределяет наследуемое значение. В CSS часто возникают такие конфликты между различными значениями, и данная спецификация описывает, как их разрешить.
    В CSS2 имеется более 100 различных свойств, в том числе - 'color'.
    Рассмотри некоторые другие: Bach's home page

    Bach's home page

    Johann Sebastian Bach was a prolific composer.
    Первое, что нужно отметить, это несколько объявлений, сгруппированных внутри блока, заключённого в фигурные скобки ({...}) и разделённых знаком точка с запятой, хотя последнее объявление может также заканчиваться точкой с запятой.
    Первое объявление элемента BODY устанавливает семейство шрифтов "Gill Sans". Если этот шрифт недоступен, ПА (часто называемый "браузер") будет использовать семейство шрифтов 'sans-serif', которое является одним из пяти семейств шрифтов, известных всем ПА. Дочерние элементы элемента BODY унаследуют значение свойства 'font-family'.
    Второе объявление устанавливает размер шрифта элемента BODY в 12 пунктов. Единица измерения "пункт" используется обычно в типографской печати для обозначения размеров шрифта и других размеров. Это пример абсолютных единиц измерения, которые не определяются относительно окружения.
    Третье объявление использует относительные единицы измерения, которые определяются относительно своего окружения. Единица "em" относится к размеру шрифта элемента. В нашем случае поля вокруг элемента BODY шире размера шрифта в три раза.

    Краткое пособие CSS для XML

    CSS может использоваться с любым структурированным форматом документа, например, с приложениями eXtensible Markup Language [XML10]. На самом деле XML намного больше зависит от таблиц стилей, чем HTML, поскольку авторы могут создавать свои собственные элементы, которые не известны ПА и не могут ими выводиться.
    Вот простой фрагмент XML:
    Fredrick the Great meets Bach Johann Nikolaus Forkel One evening, just as he was getting his flute ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived.

    Чтобы вывести данный фрагмент в виде документа, мы обязаны сначала объявить, какие элементы являются элементами инлайн-уровня (т.е. не вызывают разрывов строк) и какие - уровня блока (т.е. вызывают разрывы строк). INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
    Первое правило объявляет INSTRUMENT как инлайн, а второе правило с его списком разделённых запятыми селекторов объявляет все другие элементы как элементы уровня блока.
    Одним из вариантов связи таблицы стилей с документом XML является использование инструкций процесса:
    Fredrick the Great meets Bach Johann Nikolaus Forkel One evening, just as he was getting his flute ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived.

    Визуальный ПА может отформатировать вышеприведённый пример так:

    Курсоры свойство 'cursor'

    'cursor'
    Значение:[ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit
    Начальное:auto
    Применяется:ко всем элементам
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный, интерактивный
    Это свойство специфицирует тип курсора указательного устройства.
    Значения имеют следующий смысл: auto пользовательский агент (ПА) определяет курсор на базе текущего контекста. crosshair простой крест (например, увеличение знака "+" с помощью коротких отрезков). default курсор по умолчанию, зависящий от платформы. Часто отображается стрелкой. pointer курсор - указатель на ссылку. move обозначает то, что перемещается. e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize обозначают перемещение какого-либо края. Например, курсор 'se-resize' используется, если передвижение начинается в юго-восточном углу бокса. text обозначает текст, который может быть выделен. Часто отображается как вертикальная черта I. wait обозначает, что программа занята и пользователь должен подождать. Часто отображается как (песочные) часы. help для объекта под курсором имеется вспомогательная информация. Часто отображается как знак вопроса или воздушный шар. ПА получает курсор из ресурса, обозначенного в URI. Если ПА не может обработать первый курсор из списка курсоров, он должен попытаться обработать второй, и т.д. Если ПА не может обработать ни один курсор, определённый пользователем, он обязан использовать общий курсор в конце списка.
    Пример(ы):
    P { cursor : url("mything.cur"), url("second.csr"), text; }

    Лексический разбор


    4.1.1 Лексический разбор

    Все уровни CSS - уровень 1, уровень 2 и любые будущие уровни - используют одно ядро синтаксиса. Это позволяет пользовательским агентам (ПА) разбирать (хотя и не полностью понимать) таблицы стилей, написанные в уровнях CSS, ещё не существовавших в момент создания ПА. Дизайнеры могут использовать это свойство для создания таблиц стилей, работающих со старыми ПА, применяя также возможности позднейших уровней CSS.
    На лексическом уровне таблицы стилей CSS состоят из последовательности лексем (грамматических единиц). Список лексем CSS2 приведён ниже. Определения используют общепринятые выражения в стиле Lex. Восьмеричные коды относятся к ISO 10646 ([ISO10646]). Как и в Lex, в случае нескольких одновременных совпадений, самое длинное совпадение определяет лексему.

    Лексема
    Определение IDENT {ident} ATKEYWORD @{ident} STRING {string} HASH #{name} NUMBER {num} PERCENTAGE {num}% DIMENSION {num}{ident} URI url\({w}{string}{w}\)
    |url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\) UNICODE-RANGE U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})? CDO ; ; { \{ } \} ( \( ) \) [ \[ ] \] S [ \t\r\n\f]+ COMMENT \/\*[^*]*\*+([^/][^*]*\*+)*\/ FUNCTION {ident}\( INCLUDES ~= DASHMATCH |= DELIM любой другой символ, не совпавший с вышеприведёнными правилами Вышеприведённые макросы в фигурных скобках ({}) определены так:
    Макрос Определение
    ident {nmstart}{nmchar}*
    name {nmchar}+
    nmstart [a-zA-Z]|{nonascii}|{escape}
    nonascii[^\0-\177]
    unicode \\[0-9a-f]{1,6}[ \n\r\t\f]?
    escape {unicode}|\\[ -~\200-\4177777]
    nmchar [a-z0-9-]|{nonascii}|{escape}
    num [0-9]+|[0-9]*\.[0-9]+
    string {string1}|{string2}
    string1 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
    string2 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
    nl \n|\r\n|\r|\f
    w [ \t\r\n\f]*

    Ниже дан синтаксис ядра CSS. В последующих разделах описывается, как этот синтаксис использовать. Приложение D описывает более ограниченный набор грамматических правил исключительно для уровня 2 языка CSS. stylesheet : [ CDO | CDC | S | statement ]*; statement : ruleset | at-rule; at-rule : ATKEYWORD S* any* [ block | ';' S* ]; block : '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*; ruleset : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*; selector : any+; declaration : property ':' S* value; property : IDENT S*; value : [ any | block | ATKEYWORD S* ]+; any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES | FUNCTION | DASHMATCH | '(' any* ')' | '[' any* ']' ] S*;
    Лексемы КОММЕНТАРИЕВ в грамматике отсутствуют (для сохранения читабельности), но некоторое количество этих лексем может появляться где-либо среди других лексем.
    Лексема S в вышеприведённой грамматике стоит вместо пробела. Только символы "space" (Unicode code 32), "tab" (9), "line feed" (10), "carriage return" (13) и "form feed" (12) могут служить пробелами. Другие "пробелоподобные" символы, такие как "em-space" (8195) и "ideographic space" (12288), никогда не могут быть пробелами.

    Левая правая и первая страницы


    13.2.4 Левая, правая и первая страницы

    При печати двухсторонних документов страничные боксы левой и правой страниц должны различаться. Это можно обозначить с помощью двух псевдоклассов CSS, которые могут быть определены в контексте страницы.
    Все страницы автоматически классифицируются ПАгентами на псевдоклассы :left или :right.
    Пример(ы):
    @page :left { margin-left: 4cm; margin-right: 3cm; } @page :right { margin-left: 3cm; margin-right: 4cm; } Если даны разные объявления для левых и правых страниц, ПА обязан использовать эти объявления, даже если ПА не переносит страничные боксы на левый и правый листы (например, для принтера, имеющего только одностороннюю печать).
    Авторы могут специфицировать также стиль для первой страницы документа псевдоклассом :first:
    Пример(ы):
    @page { margin: 2cm } /* Все поля установлены в 2см */ @page :first { margin-top: 10cm /* Верхнее поле на первой странице - 10см */ } Является ли первая страница документа :left или :right, зависит от направления письма в документе и находится вне пределов рассмотрения данного документа. Однако, чтобы форсировать первую страницу в :left или :right, авторы могут вставить разрыв страницы перед первым генерируемым боксом (например, в HTML, специфицировать это для элемента BODY).
    Свойства, специфицированные в :left (или :right) в правилах @page, переопределяют те же свойства, специфицированные в правиле @page и не имеющие специфицированного псевдокласса. Свойства, специфицированные в :first в правиле @page, переопределяют те же свойства, специфицированные в :left (или :right) в правилах @page.
    Примечание. Добавление объявлений в псевдоклассы :left или :right не указывает, выходит ли документ на принтер одно- или двухсторонним (это находится вне рамок данной спецификации).
    Примечание. В будущих версиях CSS возможно появление других псевдоклассов страницы.

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


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

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

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


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

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

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


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

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

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


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

    Большинство элементов уровня блока в CSS генерируют один основной бокс блока.
    В этом разделе мы обсуждаем два механизма CSS, которые заставляют элемент генерировать два бокса: один основной бокс блока (для содержимого элемента) и отдельный бокс маркёра (для элемента оформления, такого как кружок, изображение или номер). Бокс маркёра может быть позиционирован внутри или вне основного бокса. В отличие от содержимого :before и :after, бокс маркёра не влияет на позицию основного бокса, какой бы ни была схема позиционирования.
    Самым общим из этих двух механизмов является новый для CSS2 механизм, называемый маркёры. Механизм с более ограниченными возможностями привлекает свойства списков CSS1. Свойства списков дают авторам быстрый результат для многих сценариев упорядоченных и неупорядоченных списков. Однако маркёры дают авторам точный контроль над содержимым и позицией маркёров. Маркёры можно использовать вместе со счётчиками для создания новых стилей списков, нумерации примечаний на полях и многого другого.
    Например, следующий пример иллюстрирует, как маркёры могут использоваться для того, чтобы добавлять точку после каждого элемента нумерованного списка.
    Эта программа HTML и таблица стилей:
    Создание списка с маркёрами
  • Это первый элемент списка.
  • Это второй элемент списка.
  • Это третий элемент списка. должны дать на выходе примерно следующее:
    i. Это первый элемент списка. ii. Это второй элемент списка. iii. Это третий элемент списка. С помощью селекторов потомков и дочерних селекторов можно специфицировать маркёры различных типов в зависимости от глубины вложения списков.

    Маркировка свойство 'markeroffset'


    12.6.1 Маркировка: свойство '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', замещает нормальный маркёр элемента списка.
    В следующем примере содержимое центрируется в боксе маркёра фиксированной ширины.
    Этот документ:
    Выравнивание содержимого в боксе маркёра
  • Это первый элемент списка.
  • Это второй элемент списка.
  • Это третий элемент списка. должен дать примерно такой вывод:
    (1) Это первый элемент списка. (2) Это второй элемент списка. (3) Это третий элемент списка. В следующем примере создаются маркёры до и после элементов списка.
    Этот документ:
    Маркёры до и после элементов списка
  • первый элемент списка появляется первым
  • второй элемент списка появляется вторым должен дать примерно такой вывод (здесь используется рисунок ascii вместо изображения gif улыбки):
    :-) первый элемент списка появляется первым :-( :-) второй элемент списка появляется вторым :-( В следующем примере маркёры используются для нумерации примечаний (параграфов).
    Данный документ:
    Маркёры для создания нумерованных примечаний 4 Это первый параграф данного документа.

    Это очень короткий документ.
    Это конец.
    должен дать примерно такой вывод:
    Это первый параграф данного документа. Примечание 1: Это очень короткий документ. Это конец. 'marker-offset'

    Значение: | auto | inherit
    Начальное:auto
    Применяется:к элементам с 'display: marker'
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный
    Это свойство специфицирует расстояние между ближайшим краем рамки бокса маркёра и ассоциированным с ним основным боксом. Смещение может или специфицироваться пользователем (), или выбираться ПА ('auto'). Значения размеров могут быть отрицательными, но могут существовать ограничения, в зависимости от специфики реализации.
    В следующем примере показано, как маркёры могут использоваться для добавления точек после каждого элемента нумерованного списка.
    Эта программа HTML и таблица стилей:
    Пример маркёров 5 Это большой предшествующий параграф ...
  • Это первый элемент списка.
  • Это второй элемент списка.
  • Это третий элемент списка. Это большой последующий параграф ... должен дать примерно такой вывод:
    Это большой предшествующий параграф ... i. Это первый элемент списка. ii. Это второй элемент списка. iii. Это третий элемент списка. Это большой последующий параграф ...

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


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

    Задаёт позицию математической базовой линии в em-квадрате. Математическая базовая линия используется в математических символах для выравнивания, так же как нижняя базовая линия используется для выравнивания в латинском, греческом и кириллическом письме.

    Минимальная и максимальная ширина 'minwidth' и 'maxwidth'

    'min-width'
    Значение: | | inherit
    Начальное:зависит от ПА
    Применяется:ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы
    Наследуется:нет
    Процентное:относительно ширины содержащего блока
    Носитель:визуальный
    'max-width'
    Значение: | | none | inherit
    Начальное:none
    Применяется: ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы
    Наследуется:нет
    Процентное: относительно ширины содержащего блока
    Носитель:визуальный
    Эти два свойства позволяют авторам ограничить ширину бокса определёнными рамками.
    Значения имеют следующий смысл:
    Специфицирует фиксированную минимальную и максимальную вычисленную ширину. Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно ширины содержащего блока генерируемого бокса. 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' и вышеприведённые правила сделают его слишком маленьким, ПА может использовать минимальное значение как вычисленное значение.

    Минимальная и максимальная высота 'minheight' и 'maxheight'

    Иногда необходимо ограничить высоту элементов определёнными рамками. Два свойства выполняют эту функцию: 'min-height'
    Значение: | | inherit
    Начальное:0
    Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы
    Наследуется:нет
    Процентное:относительно высоты содержащего блока
    Носитель:визуальный
    'max-height'
    Значение: | | none | inherit
    Начальное:none
    Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы
    Наследуется:нет
    Процентное:относительно высоты содержащего блока
    Носитель:визуальный

    Эти два свойства позволяют авторам ограничить высоту боксов определённым диапазоном. Значения имеют следующий смысл:
    Специфицирует фиксированный минимум и максимум вычисленной высоты. Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентные значения интерпретируются так же, как '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'.


    • Мнемоники символов не представленных в кодировке символов


    4.4.1 Мнемоники символов, не представленных в кодировке символов

    Таблице стилей может понадобиться обратиться к символам, которые невозможно представить в текущей кодировке символов. Эти символы обязаны быть записаны как 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. Например, мы рекомендуем:
    ... вместо:
    ...

    Модель адресации CSS


    2.3.2 Модель адресации CSS2

    Селекторы и свойства CSS2 позволяют обращаться из таблиц стилей к следующим частям документа или ПАгента:
  • Элементам дерева документа и определённым их взаимоотношениям (см. раздел селекторы).
  • Атрибутам элементов дерева документа и значениям этих атрибутов (см. раздел селекторы атрибутов).
  • Некоторым частям содержимого элемента (см. псевдоэлементы :first-line и :first-letter.
  • Элементам дерева документа, находящимся в определённом состоянии (см. раздел псевдоклассы).
  • Некоторым аспектам канвы при выводе документа.
  • Некоторой системной информации (см. раздел интерфейс пользователя).


    • Модель бокса

    8. Модель бокса

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

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

    Модель процесса CSS

    Этот раздел представляет одну из возможных моделей того, как работают ПА, поддерживающие CSS. Это лишь концептуальная модель; конкретные реализации могут варьироваться.
    ПА в этой модели обрабатывает источник, выполняя следующие шаги:
  • Разбирает документ-источник и создаёт дерево документа.
  • Идентифицирует тип носителя.
  • Запрашивает все таблицы стилей, ассоциированные с документом, которые специфицированы для целевого типа носителя.
  • Помечает каждый элемент дерева документа назначением одиночного значения каждому свойству, которое может быть применено к целевому типу носителя. Значения свойств устанавливаются в соответствии с механизмами, описанными в разделе каскадирование и наследование.Частично расчёт значений зависит от алгоритма форматирования, соответствующего целевому типу носителя. Например, если целевой носитель - это экран, то ПА применяют модель визуального форматирования. Если целевой носитель - это страница для печати, то ПА применяют страничную модель. Если целевой носитель - это устройство звукового вывода (например, речевой синтезатор), то ПА применяют модель звукового представления.
  • На базе размеченного дерева документа генерирует структуру форматирования. Часто структура форматирования напоминает дерево документа, но может также и слегка отличаться, особенно если авторы используют псевдоэлементы и генерируемое содержимое. Во-первых, структура форматирования вообще не должна иметь "очертания дерева" - природа структуры зависит от реализации. Во-вторых, структура форматирования может содержать информации больше или меньше, чем дерево документа. Например, если элемент дерева документа имеет значение 'none' для свойства 'display', то этот элемент не будет ничего генерировать в структуре форматирования. Элемент list, с другой стороны, может генерировать больше информации в структуре форматирования: содержимое элемента list и стилевую информацию (например, изображение для маркёра).Обратите внимание, что ПА CSS не изменяет дерево документа на этом этапе. И особенно, что содержимое, генерируемое в связи с таблицы стилей, не возвращается процессору языка документа (например, для повторного разбора).
  • Переносит структуру форматирования на целевой носитель (например, печатает результат, отображает его на экране, представляет в виде речевого потока и т.д.).
    • Шаг 1 находится вне пределов действия данной спецификации (см., например, [DOM]).
    Шаги 2-5 адресуются основным объёмом данной спецификации.
    Шаг 6 находится вне пределов действия данной спецификации.

    Модель раздельных рамок


    17.6.1 Модель раздельных рамок

    'border-spacing'
    Значение: ? | 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 } /* Верхняя левая ячейка */

    Модель сжимающихся рамок

    17.6.2 Модель сжимающихся рамок

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

    Модель визуального форматирования Детали

    10. Модель визуального форматирования. Детали.

    Содержание
  • 10.1 Определение "содержащего блока"
  • 10.2 Ширина содержимого: свойство 'width'
  • 10.3 Вычисление ширины и полей
  • 10.3.1 Инлайн, незамещаемые элементы
  • 10.3.2 Инлайн, замещаемые элементы
  • 10.3.3 Уровень блока, незамещаемые элементы при нормальном всплывании
  • 10.3.4 Уровень блока, замещаемые элементы при нормальном всплывании
  • 10.3.5 Всплывание, незамещаемые элементы
  • 10.3.6 Всплывание, замещаемые элементы
  • 10.3.7 Абсолютно позиционированные незамещаемые элементы
  • 10.3.8 Абсолютно позиционированные замещаемые элементы
  • 10.4 Минимальная и максимальная ширина: 'min-width' и 'max-width'
  • 10.5 Высота содержимого: свойство 'height'
  • 10.6 Вычисление высоты и полей
  • 10.6.1 Инлайн, незамещаемые элементы
  • 10.6.2 Инлайн, замещаемые элементы уровня блока, замещаемые элементы при нормальном всплывании и всплывание, замещаемые элементы
  • 10.6.3 Уровень блока, незамещаемые элементы при нормальном всплывании и всплывание, незамещаемые элементы
  • 10.6.4 Абсолютно позиционированные незамещаемые элементы
  • 10.6.5 Абсолютно позиционированные замещаемые элементы
  • 10.7 Минимальная и максимальная высота: 'min-height' и 'max-height'
  • 10.8 Подсчёт высоты строк: свойства 'line-height' и 'vertical-align'
  • 10.8.1 Габариты и полугабариты


    • Модель визуального форматирования

    9. Модель визуального форматирования

    Содержание
  • 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'


    • Monospace

    monospace

    Единственным критерием для моноширинных шрифтов служит то, что все глифы имеют одну и ту же фиксированную ширину. (Некоторые виды письма, такие как арабское, выглядят при этом необычно). Вид напоминает шрифт пишущей машинки, и эточасто используется для выделения образцов компьютерного кода. Примеры моноширинных шрифтов:
    Латинские Courier, MS Courier New, Prestige, Everson Mono
    Греческие MS Courier New, Everson Mono
    Кириллические ER Kurier, Everson Mono
    Японские Osaka Monospaced
    Чероки Everson Mono


    Наборы правил блоки объявлений и селекторы


    4.1.7 Наборы правил, блоки объявлений и селекторы

    Набор правил (называемый также "правило") состоит из селектора с последующим блоком объявлений.
    Блок объявлений (называемый также в последующем тексте {}-блоком) начинается с левой фигурной скобки ({) и заканчивается парной правой скобкой (}). Между ними может находиться список из 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

    Начальное/Initial

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

    "Наилучшие" разрывы страниц


    13.3.6 "Наилучшие" разрывы страниц

    CSS2 не определяет, какой из наборов допустимых разрывов страниц обязан использоваться; CSS2 не запрещает ПАгенту делать разрыв в любой возможной точке разрыва или не делать разрывов вообще. Но CSS2 рекомендует, чтобы ПА следовали следующей эвристике (признавая наличие некоторых противоречий):
  • Делать разрывы как можно реже.
  • Делать все страницы, не оканчивающиеся форсированным разрывом, одинаковой высоты.
  • Исключить разрывы внутри блока, имеющего рамку.
  • Исключить разрывы внутри таблицы.
  • Исключить разрывы внутри всплывающего элемента.
    • Пример(ы):
    Предположим, например, что таблица стилей содержит 'orphans : 4', 'widows : 2', и имеется 20 свободных строк (строчных боксов) внизу текущей страницы:
  • Если параграф в конце текущей страницы содержит 20 строк или менее, он должен быть размещён на текущей странице.
  • Если параграф содержит 21 или 22 строк, вторая часть параграфа обязана не нарушать работы 'widows', и, следовательно, вторая часть обязана содержать точно две строки.
  • Если параграф содержит 23 строки или более, первая часть должна содержать 20 строк, а вторая часть - остальные строки.
    • Теперь предположим, что 'orphans' - '10', 'widows' - '20', и имеется 8 свободных строк внизу текущей страницы:
  • Ели параграф в конце текущей страницы содержит 8 строк или менее, он должен быть размещён на текущей странице.
  • Если параграф содержит 9 строки или более, он не может быть разделён (что могло бы нарушить работу orphans), следовательно, он должен быть перемещён как блок на следующую страницу.


    • Направление текста свойства 'direction' и 'unicodebidi'


    9.10 Направление текста: свойства '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
    Носитель:визуальный

    Это свойство специфицирует базовое направление письма блоков и направление внедрений и переопределений (см. 'unicode-bidi') для двунаправленного алгоритма Unicode. Дополнительно оно специфицирует направление для столбца таблицы, направление горизонтального переполнения и позицию неполной последней строки блока в том случае, если '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 языка и ОТД.
    Пример(ы):
    Здесь буквы нижнего регистра присущи символам слева-направо, а буквы верхнего регистра - символам справа-налево: HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5 HEBREW6 HEBREW7 HEBREW8 english9 english10 english11 HEBREW12 HEBREW13 english14 english15 english16 english17 HEBREW18 english19 HEBREW20
    Поскольку это - 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) внутри:

    The headline is important!

    Если цвет элементу EM не назначен, выделенное "is" будет наследовать цвет элемента-предка, и, поскольку H1 имеет голубой цвет, элемент EM будет, соответственно, голубым.
    Чтобы установить свойство стиля "по умолчанию" в документе, авторы могут установить это свойство в корне дерева документа. В HTML, например, эту функцию могут выполнить элементы HTML или BODY. Заметьте, что это будет работать, даже если автор опустит тэг BODY в тексте HTML, поскольку разборщик HTML вставит отсутствующие тэги.
    Пример(ы):
    Например, поскольку свойство 'color' наследуется, все потомки элемента BODY будут наследовать цвет 'black': BODY { color: black; }
    Специфицированные процентные значения не наследуются, а вычисленные значения - наследуются.
    Пример(ы):
    В данной таблице:
    BODY { font-size: 10pt } H1 { font-size: 120% } и в этом фрагменте документа:

    A large heading


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

    Наследуется/Inherited

    Наследуется/Inherited

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

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

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

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

    Нормальное расположение

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

    9.8.1 Нормальное расположение

    Рассмотрим следующие объявления CSS для outer и inner, которые не изменяют нормального расположения боксов:
    #outer { color: red } #inner { color: blue } Элемент P содержит всё инлайн-содержимое: анонимный инлайн-текст и два элемента SPAN. Следовательно, всё содержимое будет расположено вне инлайн-контекста форматирования внутри содержащего блока, устанавливаемого элементом P, и получится что-то подобное:

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

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

    Содержание
  • 1.1 Как читать эту спецификацию
  • 1.2 Как организована эта спецификация
  • 1.3 Соглашения
  • 1.3.1 Язык документа: элементы и атрибуты
  • 1.3.2 Определения свойств CSS
  • Значение
  • Начальное
  • Применяется к
  • Наследуется
  • Процентные значения
  • Группы носителей
  • 1.3.3 Сокращённые свойства
  • 1.3.4 Замечания и примеры
  • 1.3.5 Изображения и полные описания
  • 1.4 Благодарности
  • 1.5 Авторские права


    • Объявления и свойства

    4.1.8 Объявления и свойства

    Объявление может быть пустым или состоять из свойства с последующими двоеточием (:) и значением. Вокруг каждого из них могут быть пробелы.
    В зависимости от способа работы селектора, несколько объявлений для одного селектора могут быть упорядочены точкой с запятой (;), разделяющей группы.
    Пример(ы):
    Таким образом, следующие правила:
    H1 { font-weight: bold } H1 { font-size: 12pt } H1 { line-height: 14pt } H1 { font-family: Helvetica } H1 { font-variant: normal } H1 { font-style: normal } эквивалентны:
    H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal } Свойства это идентификаторы. Между ними могут находиться любые символы, кроме скобок (()), квадратных скобок ([ ]) и фигурных скобок ({ }), которые обязаны всегда использоваться в паре, а точка с запятой вне строки обязана вводиться с использованием 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 }

    Обрамление пустых ячеек свойство 'emptycells'

    Обрамление пустых ячеек: свойство 'empty-cells'

    '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 }

    Общие (родовые) семейства шрифтов

    15.2.6 Общие (родовые) семейства шрифтов

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

    Обтекание бокса


    9.8.3 Обтекание бокса

    Теперь рассмотрим эффект от всплывания текста элемента inner вправо при использовании следующих правил: #outer { color: red } #inner { float: right; width: 130px; color: blue }
    Текст нормально расположен до бокса inner, который вытолкнут из расположения и всплыл к правому полю (его 'width' установлено явно). Строчные боксы слева от поплавка укорочены, и оставшийся текст документа всплывает в них.

    Опечатки и ошибки


    Опечатки и ошибки

    Список ошибок и опечаток, найденных в этой спецификации (в английской версии), находится в 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 ), Все Права Зарезервированы.

    Операторы


    4.1.4 Операторы

    Таблица стилей любой версии CSS состоит из списка операторов (см. грамматику выше). Есть два вида операторов: at-правила и наборы правил. Вокруг операторов могут быть пробелы.
    В данной спецификации выражения "непосредственно перед" или "сразу после" означают отсутствие пробелов или комментариев.

    Описание шрифта и @fontface


    15.3.1 Описание шрифта и @font-face

    Описание шрифта является мостом между авторской спецификацией шрифта и данными шрифта, которые представляют собой данные, необходимые для форматирования текста и для представления абстрактных глифов, для которых карта символов в действительности является упорядоченным контуром или растром. Шрифты имеют ссылку из свойств таблицы стилей.
    Описания шрифтов добавляются к БД шрифтов и используются затем для выбора соответствующих данных шрифта. Описание шрифта содержит дескрипторы, такие как размещение данных шрифта в Web, и описание этих данных шрифта. Дескрипторы шрифта необходимы также при выборе свойств шрифта из таблицы стилей для определённых данных шрифта. Степень детализации описания шрифта может варьироваться от имени шрифта до списка ширины глифов.
    Дескрипторы шрифта можно классифицировать по трём типам:
  • служащие связкой между использованием шрифта в CSS и описанием шрифта (эти дескрипторы имеют те же имена, что и соответствующие свойства шрифта CSS),
  • URI для локализации данных шрифта,
  • для характеристики шрифта, являющиеся связкой между описанием шрифта и данными шрифта.
    • Все описания шрифта специфицируются at-правилом @font-face.
    Общая форма такая:
    @font-face { }
    где имеет форму: дескриптор: значение; дескриптор: значение; [...] дескриптор: значение;
    Одно правило @font-face специфицирует значение для одного дескриптора шрифта, явно или неявно. Дескрипторы, не получившие явных значений в правиле, берут их из списка для каждого дескриптора в этой спецификации. Эти дескрипторы применяются только в контексте того правила @font-face, в котором они определены, и не применяются к элементам языка документа. Таким образом, отсутствует указание на то, для каких элементов применяются дескрипторы, или на то, наследуются ли значения дочерними элементами.
    Доступные дескрипторы шрифта описываются далее в разделах этой спецификации.
    Например, это шрифт 'Robson Celtic', определённый и имеющий ссылку в таблице стилей, содержащейся в документе HTML: Font test

    Этот заголовок выводится с использованием Robson Celtic


    Таблица стилей (в элементе 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', верхний и правый края содержащего блока являются верхним и правым краями первого бокса, генерируемого предком, а нижний и левый края являются нижним и левым краями содержимого последнего бокса предка.
    • Если такого предка нет, край содержимого бокса корневого элемента устанавливает содержащий блок.
    Пример(ы):
    Содержащие блоки (СБ) без позиционирования в этом документе:
    Illustration of containing blocks

    This is text in the first paragraph...

    This is text in the second paragraph.

    устанавливаются так:
    Для бокса, генерируемого
    СБ устанавливается
    bodyначальным СБ (зависит от ПА)
    div1body
    p1div1
    p2div1
    em1p2
    strong1p2
    Если позиция "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начальным СБ
    p1div1
    p2div1
    em1div1
    strong1em1
    При позиционировании "em1", его содержащим блоком становится ближайший позиционированный бокс предка (т.е. тот, который сгенерирован "div1").

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


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

    Каждое определение свойства CSS начинается общей ключевой информацией:
    'property-name'
    Значение:действительные значения & синтаксис
    Начальное:начальное значение
    Применяется:к соответствующим элементам
    Наследуется: если свойство наследуется
    Процентное:интерпретация процентных значений
    Носитель:к каким группам носителей применяется свойство


    Определения

    В этом разделе мы начинаем формальную спецификацию 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: My home page

    My home page

    Welcome to my home page! Let me tell you about my favorite composers:
  • Elvis Costello
  • Johannes Brahms
  • Georges Brassens
    Это дерево данного документа:

    Ошибочные условия

    3.3 Ошибочные условия

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

    Относительное позиционирование


    9.4.3 Относительное позиционирование

    После того, как бокс расположен в соответствии с нормальным расположением, он может быть сдвинут относительно этой позиции. Это называется относительным позиционированием. Смещение бокса (B1) таким способом не окажет воздействия на бокс (B2), следующий за ним: B2 получит такую позицию, как будто B1 не смещён и B2 не перемещается после применения смещения B1. Это предполагает, что относительное позиционирование может вызывать взаимное перекрытие боксов.
    Относительно позиционированные боксы сохраняют свои нормальные размеры и прорисовку, включая разрывы строк и заполнение, первоначально зарезервированные за ними. Относительно позиционированный бокс устанавливает новый содержащий блок для нормальной прорисовки дочерних и позиционированных потомков.
    Относительно позиционированный бокс генерируется, когда свойство 'position' элемента имеет значение 'relative'. Смещение специфицируется свойствами 'top', 'bottom', 'left' и 'right'.
    Динамическое перемещение боксов, позиционированных относительно, может создавать эффекты анимации в среде скриптов (см. также свойство 'visibility'). Относительное позиционирование можно использовать также как общую форму под- и надиндексов, за исключением того, что высота строки не устанавливается автоматически при рассмотрении позиционирования. См. дополнительно описание вычисления высоты строки.
    Примеры относительного позиционирования есть в разделе Сравнение нормального позиционирования, поплавков и абсолютного позиционирования.


    9.8.2 Относительное позиционирование

    Чтобы увидеть действие относительного позиционирования, мы специфицируем:
    #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 не влияет.

    Отображение значений ширины шрифтов в имена шрифтов


    15.5.1 Отображение значений ширины шрифтов в имена шрифтов

    Значения свойства '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, Medium, Bold, Heavy, Black, ExtraBlack. Заметьте, что в этом примере ПА решает не назначать цифровое значение для "Example2 ExtraBlack".
    Второй пример отображения весов Доступные разновидности Назначения Заполнение дыр
    "Ice Prawn Book" 400 100, 200, 300
    "Ice Prawn Medium" 500
    "Ice Prawn Bold" 700 600
    "Ice Prawn Heavy" 800
    "Ice Prawn Black" 900
    "Ice Prawn ExtraBlack" (none)


    Отступы свойство 'textindent'

    'text-indent'
    Значение: | | inherit
    Начальное:0
    Применяется:к элементам уровня блока
    Наследуется:да
    Процентное:относительно ширины содержащего блока
    Носитель:визуальный
    Это свойство специфицирует отступ первой строки текста в блоке. Точнее, оно специфицирует отступ первого бокса, всплывающего в первый строчный бокс блока. Бокс получает отступ относительно левого (или правого, для вывода справа-налево) края строчного бокса. Пользовательские агенты (ПА) должны отображать этот отступ как пробел.
    Значения имеют следующий смысл:
    Отступ имеет фиксированный размер. Процент от ширины содержащего блока. Значение 'text-indent' может быть отрицательным, но могут быть ограничения, зависящие от реализации.
    Пример(ы):
    Отступ размером '3em' для текста. P { text-indent: 3em }

    Оттенение текста свойство 'textshadow'

    16.3.2 Оттенение текста: свойство 'text-shadow'

    'text-shadow'
    Значение:none | [ || ? ,]* [ || ?] | inherit
    Начальное:none
    Применяется: ко всем элементам
    Наследуется:нет (см. текст)
    Процентное:N/A
    Носитель:визуальный
    Это свойство принимает список разделённых запятыми эффектов оттенения, применяемых к тексту элемента. Эффекты оттенения применяются в том порядке, в котором они специфицированы, и могут, таким образом, перекрываться один другим, но они никогда не перекрывают сам текст. Эффекты оттенения не изменяют размеры бокса, но могут выходить за его пределы. Уровень стэка эффекта оттенения - тот же самый, что и самого элемента.
    Каждый эффект оттенения обязан специфицировать смещение оттенения и может по выбору специфицировать радиус рассеяния и цвет тени.
    Смещение оттенения специфицируется двумя значениями , указывающими расстояние от текста. Первое значение специфицирует расстояние по горизонтали справа от текста. Отрицательное значение по горизонтали помещает тень слева от текста. Второе значение специфицирует вертикальное расстояние под текстом. Отрицательное значение по вертикали помещает тень сверху от текста.
    Радиус рассеяния может быть по выбору специфицирован после смещения оттенения. Радиус рассеяния это значение, обозначающее границы эффекта рассеяния. Точный алгоритм вычисления эффекта рассеяния не специфицирован.
    Значение цвета может быть по выбору специфицировано до или после значений 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' используется для создания эффекта "солнечного затмения":

    Переполнение и сжатие

    Обычно содержимое бокса блока ограничено краями бокса. В определённых случаях бокс может переполняться, то есть его содержимое частично или полностью находится за пределами бокса, например:
  • Строка не может быть разорвана, и строчный бокс оказывается шире, чем бокс блока.
  • Бокс уровня блока слишком широк для содержащего блока. Это случается, если свойство 'width' элемента имеет такое значение, которое вызывает растекание генерируемого бокса блока за пределы содержащего блока.
  • Высота элемента превосходит явно установленную высоту содержащего блока (т.е. высота содержащего блока определяется свойством 'height', а не высотой содержимого).
  • Бокс позиционирован абсолютно.
  • Бокс имеет отрицательные значения полей.
    • Когда возникает переполнение, свойство 'overflow' специфицирует, как сжимается бокс ( и сжимается ли). Свойство 'clip' специфицирует размер и форму сжимаемой области. Спецификация маленькой области для сжатия может вызвать сжатие другого видимого содержимого.

    Переполнение свойство 'overflow'


    11.1.1 Переполнение: свойство 'overflow'

    'overflow'
    Значение:visible | hidden | scroll | auto | inherit
    Начальное:visible
    Применяется:к элементам уровня блока и к замещаемым элементам
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный
    Это свойство специфицирует, сжимается ли содержимое элемента уровня блока, если оно переполняет бокс элемента (который действует как содержащий блок для содержимого).
    Значения имеют следующий смысл:
    visible Указывает, что содержимое не сжимается, т.е. может отображаться за пределами бокса блока. hidden Указывает, что содержимое сжимается и что механизм прокрутки не должен предоставляться для просмотра содержимого вне сжимаемой области; пользователь не получит доступа к сжатому содержимому. Размер и форма сжимаемой области специфицируются свойством 'clip'. scroll Означает, что содержимое сжимается и что если ПА использует механизм прокрутки, видимый на экране (такой как полоса прокрутки или паннер), этот механизм должен отображаться для бокса, независимо от того, сжимается его содержимое или нет. Это устраняет возможные проблемы с появлением и скрытием полосы прокрутки в динамическом окружении. Если это значение специфицировано и целевой носитель - 'print' или 'projection', переполняющее содержимое должно быть напечатано. auto Поведение значения 'auto' зависит от ПА, но должно вызывать предоставление механизма прокрутки для переполняемых боксов. Даже если 'overflow' установлено в 'visible', содержимое может быть обрезано до размеров окна документа ПА средой окружения.
    Пример(ы):
    Рассмотрим следующий пример блока кавычек (BLOCKQUOTE), который слишком велик для своего содержащего блока (установленного DIV). Вот документ-источник:
    I didn't like the play, but then I saw it under adverse conditions - the curtain was up.
    - Groucho Marx
    Это таблица стилей, управляющая размерами и стилем генерируемых боксов: 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 может быть сформатирован без сжатия примерно так:

    Подчёркивание надчёркивание перечёркивание и мигание свойство 'textdecoration'

    16.3.1 Подчёркивание, надчёркивание, перечёркивание и мигание: свойство 'text-decoration'

    '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 }

    Подсчёт высоты строк свойства 'lineheight' и 'verticalalign'

    Как описано в разделе о контекстах инлайн-форматирования, ПА заполняют инлайн-боксами вертикальный стэк строчных боксов. Высота инлайн-бокса определяется так:
  • Вычисляется высота каждого инлайн-бокса в строчном боксе (см. "Вычисление высоты и полей" и свойство 'line-height').
  • Инлайн-боксы выравниваются по вертикали в соответствии с их свойствами 'vertical-align'.
  • Высота строчного бокса - это расстояние между верхом самого верхнего бокса и низом самого нижнего бокса.
    • Пустые инлайн-элементы генерируют пустые инлайн-боксы, но эти боксы всё же имеют поля, заполнение, рамки и высоту строки и, таким образом, вычисления выполняются как с элементами, имеющими содержимое.
    Заметьте, что если все боксы в строчном боксе выровнены по своему низу, то строчный бокс будет иметь точно такую же высоту, как и самый высокий бокс. Если, однако, боксы выровнены по общей базовой линии, верх и низ строчного бокса могут не касаться верха и низа самого высокого бокса.

    Поля страницы


    13.2.1 Поля страницы

    Свойства полей ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin') применяются внутри контекста страницы. На следующей диаграмме показаны соотношения между листом, страничным боксом и полями страницы:

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


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

    Это полное имя конкретного представителя семейства шрифтов. Оно обычно содержит много нестандартизованных текстовых квалификаторов или украшений, присоединённых к имени семейства шрифтов. Оно может также включать производственное имя или аббревиатуру, часто впереди имени шрифта. Оно используется для ссылок только на локально установленные шрифты, поскольку формат "украшенного" имени может варьироваться в зависимости от платформы. Имя должно быть заключено в кавычки.
    Например, имена шрифта семейства TrueType и шрифта PostScript могут отличаться в использовании пробельных символов, пунктуации и аббревиатур некоторых слов (напр., чтобы соответствовать различным ограничениям систем или принтеров на размер имён). К примеру, пробелы не допускаются в именах PostScript, но являются обычными в полных именах шрифтов. Таблица имён TrueType может также содержать и имена PostScript, не имеющие пробелов.
    Определение имени шрифта важно потому, что оно (имя) является ссылкой на локально установленный шрифт. Важно, чтобы имя было определённым, не зависящим от платформы и приложения. В связи с этим, имя не должно быть зависимым от приложения и языка.
    Идеальным решением будет имя, которое уникально идентифицирует каждую коллекцию данных шрифтов. Это имя не должно существовать в текущей практике работы с данными шрифтов. Шрифты с одним базовым именем могут различаться с помощью нескольких дескрипторов. Некоторые из этих дескрипторов, таких как различные дополнения глифов в шрифте, могут быть незначащими, если нужные глифы имеются в шрифте. Другие дескрипторы, такие как различные метрики ширины, делают шрифты с одним именем несовместимыми. Похоже, что невозможно определить правило, по которому можно всегда определить несовместимость и предотвратить использование совершенно соответствующей локальной копии данных шрифта с этим именем. Следовательно, только диапазон символов ISO 10646 будет использоваться для квалификации совпадения имён разновидностей шрифтов.
    Поскольку главная задача имени шрифта - дать возможность ПА определить, имеется ли локальная копия специфицированных данных шрифта, имя шрифта обязано быть именем, которое будет иметься во всех законных копиях данных шрифта. Иначе будет генерироваться нежелательный трафик Web из-за неправильных совпадений с локальной копией.

    Поплавки/Floats

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

    Далее следует введение в позиционирование поплавков и обтекание содержимого; точные правила, управляющие поведением поплавков, даны в описании свойства 'float'.
    Всплывающий бокс обязан иметь явно установленную ширину (назначенную свойством 'width', или свою внутреннюю ширину - в случае замещаемых элементов). Любой всплывающий бокс становится боксом блока, который сдвигается влево или вправо, пока его внешний край не коснётся края содержащего блока или внешнего края другого поплавка. Верх всплывающего бокса выравнивается с верхом текущего строчного бокса (или низом предшествующего бокса блока, если отсутствует строчный бокс). Если для поплавка не хватает горизонтального пространства на текущей строке, он сдвигается вниз строка за строкой, пока строка не получит достаточно пространства для него.
    Пока поплавок не всплыл, непозиционированные боксы блока, созданные до и после всплывающего бокса, всплывают вертикально, как будто поплавка не существует. Однако строчные боксы, созданные сразу после поплавка, уменьшаются, чтобы дать пространство для всплывающего бокса. Любое содержимое на текущей строке до всплывающего бокса перерисовывается на первой доступной строке с противоположной стороны поплавка.
    Несколько поплавков могут быть смежными, и эта модель применяется также к смежным поплавкам на той же строке.
    Пример(ы):
    Следующее правило вызывает всплывание влево всех боксов IMG с class="icon" (и устанавливает левое поле в '0'):
    IMG.icon { float: left; margin-left: 0; } Рассмотрим следующие HTML и таблицу стилей:
    Float example This image will illustrate floats Some sample text that has no other... IMG-бокс всплывает влево. Последующее содержимое форматируется справа от поплавка, начиная с той же строки, где находится поплавок. Строчные боксы справа от поплавка укорачиваются из-за присутствия поплавка, но имеют свою "нормальную" ширину (как в содержащем блоке, установленном элементом P) после поплавка. Этот документ может быть сформатирован так:

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


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

    Чтобы найти значение для комбинации элемент/свойство, ПА обязаны применять следующий порядок сортировки:
  • Найти все объявления, применяемые в запросе к элементу и свойству, для целевого типа носителя. Объявления применяются, если ассоциированный селектор подбирает элемент в запросе.
  • Сначала объявления сортируются по весу и источнику: для нормальных объявлений - авторские таблицы стилей переопределяют пользовательские, которые, в свою очередь, переопределяют таблицу стилей по умолчанию. Для объявлений "!important" - пользовательские таблицы стилей переопределяют авторские таблицы, которые, в свою очередь, переопределяют таблицу стилей по умолчанию. Объявления "!important" переопределяют нормальные объявления. Импортированная таблица стилей имеет тот же источник, что и таблица стилей, импортировавшая её.
  • Вторая сортировка производится по специфике селектора: более специфические селекторы переопределяют более общие. Псевдоэлементы и псевдоклассы обсчитываются как нормальные элементы и классы соответственно.
  • Наконец, идёт сортировка по специфицированному порядку: если два правила имеют одинаковые вес, источник и специфику, выбирается специфицированное позже. Правила в импортируемых таблицах стилей рассматриваются перед любыми правилами имеющейся таблицы стилей.
    • Независимо от установок "!important" индивидуальных объявлений, эта стратегия даёт авторским таблицам стилей больший вес, чем таблицам читателя. Это тем более важно, поскольку ПА предоставляют пользователю возможность отключить влияние определённых таблиц стилей, например, в выпадающих меню.

    Порт просмотра


    9.1.1 Порт просмотра

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

    Позиция и выравнивание заголовка

    17.4.1 Позиция и выравнивание заголовка

    'caption-side'
    Значение:top | bottom | left | right | inherit
    Начальное:top
    Применяется: к элементам 'table-caption'
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный
    Это свойство специфицирует позицию бокса заголовка относительно бокса таблицы.
    Значения имеют следующий смысл:
    top Позиционирует бокс заголовка над боксом таблицы. bottom Позиционирует бокс заголовка под боксом таблицы. left Позиционирует бокс заголовка слева от бокса таблицы. right Позиционирует бокс заголовка справа от бокса таблицы. Заголовки сверху или снизу от элемента 'table' форматируются совершенно так же, как если бы они были элементами блока до и после таблицы, за исключением того, что (1) они наследуют наследуемые свойства таблицы и (2) они не рассматриваются как бокс блока для целей элементов 'compact' или 'run-in', которые могут предшествовать таблице.
    Заголовок сверху или снизу от бокса таблицы ведёт себя подобно боксу блока и при расчётах ширины; ширина вычисляется относительно ширины бокса таблицы содержащего блока.
    Для заголовков слева или справа от бокса таблицы значение, отличное от '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 }
    Принимая, что ширина таблицы меньше доступной ширины, форматирование будет примерно таким:

    Позиционирование и заполнение в боксе 'top' 'right' 'bottom' 'left'

    9.3.2 Позиционирование и заполнение в боксе: 'top', 'right', 'bottom', 'left'

    Элемент называется позиционированным, если его свойство 'position' имеет значение, отличное от 'static'. Позиционированные элементы генерируют позиционированные боксы, располагающиеся в соответствии с четырьмя свойствами:
    'top'
    Значение: | | auto | inherit
    Начальное:auto
    Применяется: к позиционируемым элементам
    Наследуется:нет
    Процентное:относительно высоты содержащего блока
    Носитель:визуальный
    Это свойство специфицирует, насколько смещён вниз верхний край содержимого бокса относительно верхнего края содержащего блока. 'right'
    Значение: | | auto | inherit
    Начальное:auto
    Применяется: к позиционируемым элементам
    Наследуется:нет
    Процентное:относительно ширины содержащего блока
    Носитель:визуальный

    Это свойство специфицирует, насколько смещён влево правый край содержимого бокса относительно правого края содержащего блока. 'bottom'
    Значение: | | auto | inherit
    Начальное:auto
    Применяется: к позиционируемым элементам
    Наследуется:нет
    Процентное:относительно высоты содержащего блока
    Носитель:визуальный

    Это свойство специфицирует, насколько смещён вверх нижний край содержимого бокса относительно низа содержащего блока. 'left'
    Значение: | | auto | inherit
    Начальное:auto
    Применяется: к позиционируемым элементам
    Наследуется:нет
    Процентное:относительно ширины содержащего блока
    Носитель:визуальный

    Это свойство специфицирует, насколько смещён вправо левый край содержимого бокса относительно левого края содержащего блока.
    Значения для этих четырёх свойств имеют следующий смысл:
    Смещением является расстояние от соответствующего края. Смещением является процент ширины содержащего блока (для 'left' или 'right') или высоты содержащего блока (для 'top' и 'bottom'). Для 'top' и 'bottom', если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентное значение интерпретируется так же, как 'auto'. auto Действие этого значения зависит от того, какое из соответствующих свойств также имеет значение 'auto'. См. также разделы ширина и высота абсолютно позиционируемых, незамещаемых элементов. Для абсолютно позиционируемых боксов - смещения являются относительными к содержащему блоку бокса. Для относительно позиционируемых боксов - смещения являются относительными к внешним краям самого бокса (т.е. боксу задаётся нормальное расположение, а затем - смещение от этой позиции в соответствии с вышеуказанными свойствами).

    Позиционирование поплавка свойство 'float'

    9.5.1 Позиционирование поплавка: свойство 'float'

    'float'
    Значение:left | right | none | inherit
    Начальное:none
    Применяется: ко всему, кроме позиционированных элементов и генерируемого содержимого
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный
    Это свойство специфицирует, должен ли бокс всплывать влево, вправо или не всплывать вообще. Оно может быть установлено для элементов, генерирующих боксы, которые не позиционированы абсолютно.
    Значения этого свойства имеют следующий смысл:
    left Элемент генерирует бокс блока, всплывающий влево. Содержимое обтекает по правой стороне бокса, начиная от верха (субъект свойства 'clear'). 'display' игнорируется, если только оно не имеет значения 'none'. right То же, что 'left', но содержимое обтекает по левой стороне бокса, начиная от верха. none Бокс не всплывает. Вот точные правила, управляющие поведением поплавка:
  • Левый внешний край всплывающего влево бокса не может быть слева от левого края его содержащего блока. Аналогичное правило действует для элементов, всплывающих вправо.
  • Если текущий бокс всплывает влево и имеются другие всплывающие влево боксы, сгенерированные элементами в документе-источнике ранее, тогда для каждого такого предшествующего бокса или левый внешний край текущего бокса обязан быть справа от правого внешнего края предшествующего бокса, или его верх обязан быть ниже, чем низ предшествующего бокса. Аналогичное правило действует для боксов, всплывающих вправо.
  • Правый внешний край всплывающего влево бокса не может быть справа от левого внешнего края какого-либо всплывающего вправо бокса, находящегося справа от него. Аналогичные правила действуют для элементов, всплывающих вправо.
  • Верхний внешний край всплывающего бокса не может быть выше, чем верх его содержащего блока.
  • Верхний внешний край всплывающего бокса не может быть выше, чем верхний внешний край любого всплывающего бокса блока, сгенерированного элементом ранее в документе-источнике.
  • Верхний внешний край всплывающего бокса элемента не может быть выше, чем верх любого строчного бокса, содержащего бокс, сгенерированный элементом ранее в документе-источнике.
  • Всплывающий влево бокс, имеющий слева от себя другой всплывающий влево бокс, не может иметь свой правый внешний край справа от правого края своего содержащего блока. (Говоря шире: левый поплавок не может находиться у правого края, если только он уже не находится слева так далеко, насколько это возможно.) Аналогичное правило действует для элементов, всплывающих вправо.
  • Всплывающий бокс должен быть размещён так высоко, насколько это возможно.
  • Всплывающий влево бокс обязан быть размещён так далеко влево, насколько это возможно, а всплывающий вправо бокс обязан быть размещён так далеко вправо, насколько это возможно. Более высока позиция имеет преимущество перед позицией, идущей далее влево/вправо.


    • Позиционирование страничного бокса на листе

    Позиционирование страничного бокса на листе

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

    Правила !important


    6.4.2 Правила !important

    CSS пытается создать баланс между авторскими и пользовательскими таблицами стилей. По умолчанию правила авторской таблицы стилей переопределяют правила пользовательской таблицы (см. каскадное правило 3).
    Однако, для баланса, объявление "!important" (ключевое слово "!" и "important" следуют за объявлением) имеет преимущество перед нормальной декларацией. И авторские, и пользовательские таблицы стилей могут содержать объявление "!important", и пользовательские правила "!important" переопределяют авторские "!important". Это свойство CSS улучшает доступность документов путём предоставления пользователям со специфическими требованиями (крупные шрифты, комбинации цветов и т.п.) контроля над представлением.
    Примечание. Это семантическое изменение в сравнении с CSS1. В CSS1 авторские правила "!important" имели приоритет перед пользовательскими правилами "!important".
    Объявление сокращённого свойства (например, 'background') как "!important" эквивалентно объявлению всех его подсвойств как "!important".
    Пример(ы):
    Первое правило пользовательской таблицы стилей в данном примере содержит объявление "!important", которое переопределяет соответствующее объявление в авторской таблице стилей. Второе объявление также будет иметь приоритет как помеченное "!important". Однако третье правило пользовательской таблицы стилей - не "!important" - и поэтому будет отброшено в пользу второго правила авторской таблицы стилей (которое устанавливает стиль сокращённого свойства). Таким образом, третье авторское правило будет отброшено в пользу второго авторского правила, поскольку второе правило - "!important". Это показывает, что объявления "!important" имеют действие также и внутри авторских таблиц стилей. /* Из пользовательской таблицы стилей */ P { text-indent: 1em ! important } P { font-style: italic ! important } P { font-size: 18pt } /* Из авторской таблицы стилей */ P { text-indent: 1.5em !important } P { font: 12pt sans-serif !important } P { font-size: 24pt }

    Правила обработки ошибок грамматического разбора

    В некоторых случаях ПА обязан игнорировать часть неверной таблицы стилей. В этой спецификации игнорирует означает, что ПА разбирает неверную часть (чтобы определить её начало и конец), но действует так, как будто её нет.
    Для гарантий того, что новые свойства и новые значения для существующих свойств смогут быть добавлены в будущем, от ПА требуется соблюдение следующих правил при обработке следующих сценариев:
  • Неизвестные свойства. ПА обязан игнорировать объявление с неизвестным свойством. Например, если в таблице стилей указано: H1 { color: red; rotation: 70minutes } ПА будет рассматривать это, как если бы в таблице было: H1 { color: red }
  • Неверные значения. ПА обязан игнорировать объявление с неверным значением. Например:IMG { float: left } /* корректно в CSS2 */ IMG { float: left here } /* "here" это неверное значение для 'float' */ IMG { background: "red" } /* ключевые слова CSS2 не могут вводиться в кавычках */ IMG { border-width: 3 } /* для размеров должны быть указаны единицы измерения */ Разборщик CSS2 примет первое правило и проигнорирует остальные, как если бы таблица была такой: IMG { float: left } IMG { } IMG { } IMG { } ПА, соответствующий будущим спецификациям CSS, может учитывать также одно или более из следующих правил.
  • Неверные at-ключевые слова. ПА обязаны игнорировать неверные ключевые слова at- вместе с тем, что следует после них до (;) включительно или до блока ({...}), в зависимости от того, что идёт первым. Например, рассмотрим: @three-dee { @background-lighting { azimuth: 30deg; elevation: 190deg; } H1 { color: red } } H1 { color: blue } Правило от- '@three-dee' не входит в CSS2. Следовательно, всё at-правило (до третьей правой фигурной скобки включительно) игнорируется. ПА CSS2 игнорирует его, уменьшая таблицу до:
    H1 { color: blue }


    • Правило @import

    Правило '@import' даёт пользователям возможность импортировать правила стиля из других таблиц стилей. Любое правило @import обязано предшествовать всем наборам правил в таблице стилей. После ключевого слова '@import' обязан следовать URI подключаемой таблицы стилей. Допустима также строка; она будет интерпретироваться так, как будто имеет вокруг себя url(...).
    Пример(ы):
    Следующие строки эквивалентны по значению и обе иллюстрируют синтаксис '@import' (одно с "url()", а другое - с простой строкой):
    @import "mystyle.css"; @import url("mystyle.css"); Поскольку ПА могут исключать запрос ресурсов неподдерживаемых типов носителя, авторы могут специфицировать медиа-зависимые правила @import. Эти условные @import специфицируют список разделённых запятыми типов носителя после URI.
    Пример(ы):
    Следующие правила имеют такой же эффект, как если бы импортированная таблица стилей была перенесена в правило @media для того же типа, но данные правила позволят исключить бесполезную нагрузку на ПА. @import url("fineprint.css") print; @import url("bluish.css") projection, tv;
    При отсутствии любых типов носителя, импорт является безусловным. Спецификация 'all' для носителя имеет тот же эффект.

    Правило @media


    7.2.1 Правило @media

    Правило @media специфицирует целевые типы носителя (разделённые запятыми) в наборе правил (ограниченных фигурными скобками). Конструкция @media допускает присутствие правил таблиц стилей для различных носителей в одной таблице стилей:
    @media print { BODY { font-size: 10pt } } @media screen { BODY { font-size: 12pt } } @media screen, print { BODY { line-height: 1.2 } }

    Предпочтительные цвета пользователя

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

    • Набор значений, определённых для системных цветов, представляется исчерпывающим. Для систем, не имеющих соответствующих значений, специфицированное значение должно отображаться в ближайший системный атрибут или в цвет по умолчанию.
    Далее дан список дополнительных значений для относящихся к цвету атрибутов CSS и их основной смысл. Любое свойство цвета (например, 'color' или 'background-color') может иметь одно из следующих названий. Хотя они и нечувствительны к регистру, рекомендуется использовать смешанную капитализацию, как показано ниже, чтобы сделать названия более понятными.
    ActiveBorder Рамка активного окна. ActiveCaption Заголовок активного окна. AppWorkspace Цвет фона многодокументного интерфейса. Background Фон рабочего стола. ButtonFace Цвет переднего плана 3-мерных элементов. ButtonHighlight Тёмная тень для 3-мерных элементов (для краёв, выступающих из светлой основы). ButtonShadow Цвет тени для 3-мерных элементов. ButtonText Текст кнопки. CaptionText Текст заголовка, бокса и в боксе прокручиваемого списка. GrayText Серый ("недоступен") текст. Это цвет установлен в #000 на тот случай, если текущий дисплей не поддерживает сплошной серый цвет. Highlight Объект(ы), выделенный в элементе управления. HighlightText Текст объекта(ов), выделенного в элементе управления. InactiveBorder Рамка неактивного окна. InactiveCaption Заголовок неактивного окна. InactiveCaptionText Цвет текста неактивного заголовка. InfoBackground Цвет фона элементов подсказки. InfoText Цвет текста элементов подсказки. Menu Фон меню. MenuText Текст меню. Scrollbar Серая область прокрутки. ThreeDDarkShadow Тёмная тень для 3-мерных элементов дисплея. ThreeDFace Цвет переднего плана для 3-мерных элементов дисплея. ThreeDHighlight Цвет подсветки для 3-мерных элементов дисплея. ThreeDLightShadow Светлый цвет для 3-мерных элементов дисплея (для краёв, выступающих из светлой основы). ThreeDShadow Тёмная тень для 3-мерных элементов дисплея. Window Фон окна. WindowFrame Кадр окна. WindowText Текст в окнах. Пример(ы):
    Например, чтобы установить цвета фона и переднего плана в параграфе в те же значения, что и у окна пользователя, напишите так: P { color: WindowText; background-color: Window }

    Предпочтительные шрифты пользователя

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

    Представление документа CSS

    Таблица стилей CSS это последовательность символов из Universal Character Set/Универсального Набора Символов (см. [ISO10646]). Для передачи и хранения эти символы обязаны кодироваться в кодировке символов, поддерживающей набор символов, доступных в US-ASCII (например, ISO 8859-x, SHIFT JIS и т.д.). Чтобы хорошенько разобраться в наборах символов и кодировке, см. спецификацию HTML 4.0 ([HTML40], главу 5). См. также спецификацию XML 1.0 ([XML10], разделы 2.2 и 4.3.3, и Приложение F.
    Если таблица стилей встроена в другой документ, например, элемент STYLE или атрибут "style" в HTML, таблица стилей разделяет использование кодировки символов с этим документов.
    Если таблица стилей находится в отдельном файле, ПА обязаны учитывать следующий приоритет при определении кодировки символов документа (от высшего приоритета к низшему):
  • Параметр HTTP "charset" в поле "Content-Type".
  • At-правило @charset.
  • Механизмы языка обращающегося документа (например, в HTML атрибут "charset" элемента LINK).
    • Не более одного правила @charset может появляться во внешней таблице стилей - оно обязано не появляться во внедрённой таблице стилей - и оно должно появляться в самом начале документа, до появления любых символов. После "@charset" авторы специфицируют имя кодировки символов. Имя обязано быть названием набора символов, как описано в регистре IANA (см. [IANA]. См. также в [CHARSETS] полный список наборов символов). Например:
    Пример(ы):
    @charset "ISO-8859-1";
    В данной спецификации не определено, какие кодировки символов ПА обязан поддерживать.
    Обратите внимание, что опора на конструкцию @charset теоретически создаёт проблему, поскольку отсутствует a priori информация о том, как она кодирована. На практике, однако, широко используемые кодировки в Internet базируются или на ASCII, UTF-16, UCS-4, или (редко) на EBCDIC. В общем, это означает, что значения начальных байтов документа дают ПАгенту возможность определить семейство кодировки, что даёт достаточно информации для декодирования правила @charset, которое, в свою очередь, определяет точную кодировку.

    А Образец таблицы стиля для HTML

    Приложение А: Образец таблицы стиля для HTML 4.0

    Данное приложение является информативным, но не нормативным.
    Эта таблица стилей описывает типичное форматирование для всех элементов HTML 4.0 ([HTML40]), базирующееся на обширных исследованиях текущей практики работы пользовательских агентов (ПА). Разработчикам предлагается использовать её как таблицу стилей по умолчанию.
    Полное представление некоторых элементов HTML невозможно в CSS2, в том числе - заменяемых элементов (IMG, OBJECT), элементов скриптинга (SCRIPT, APPLET), элементов формы и элементов фрэймов. ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER, DIR, HR, MENU, PRE { display: block } LI { display: list-item } HEAD { display: none } TABLE { display: table } TR { display: table-row } THEAD { display: table-header-group } TBODY { display: table-row-group } TFOOT { display: table-footer-group } COL { display: table-column } COLGROUP { display: table-column-group } TD, TH { display: table-cell } CAPTION { display: table-caption } TH { font-weight: bolder; text-align: center } CAPTION { text-align: center } BODY { padding: 8px; line-height: 1.33 } H1 { font-size: 2em; margin: .67em 0 } H2 { font-size: 1.5em; margin: .83em 0 } H3 { font-size: 1.17em; margin: 1em 0 } H4, P, BLOCKQUOTE, UL, FIELDSET, FORM, OL, DL, DIR, MENU { margin: 1.33em 0 } H5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 } H6 { font-size: .67em; margin: 2.33em 0 } H1, H2, H3, H4, H5, H6, B, STRONG { font-weight: bolder } BLOCKQUOTE { margin-left: 40px; margin-right: 40px } I, CITE, EM, VAR, ADDRESS { font-style: italic } PRE, TT, CODE, KBD, SAMP { font-family: monospace } PRE { white-space: pre } BIG { font-size: 1.17em } SMALL, SUB, SUP { font-size: .83em } SUB { vertical-align: sub } SUP { vertical-align: super } S, STRIKE, DEL { text-decoration: line-through } HR { border: 1px inset } OL, UL, DIR, MENU, DD { margin-left: 40px } OL { list-style-type: decimal } OL UL, UL OL, UL UL, OL OL { margin-top: 0; margin-bottom: 0 } U, INS { text-decoration: underline } CENTER { text-align: center } BR:before { content: "\A" } /* Пример стиля для элементов HTML 4.0 ABBR/ACRONYM */ ABBR, ACRONYM { font-variant: small-caps; letter-spacing: 0.1em } A[href] { text-decoration: underline } :focus { outline: thin dotted invert } /* Начало установок двунаправленности (не изменять) */ BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } *[DIR="ltr"] { direction: ltr; unicode-bidi: embed } *[DIR="rtl"] { direction: rtl; unicode-bidi: embed } /* Элементы уровня блока в HTML4 */ ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME, NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER, DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT, COL, COLGROUP, TD, TH, CAPTION { unicode-bidi: embed } /* Конец установок bidi */ @media print { @page { margin: 10% } H1, H2, H3, H4, H5, H6 { page-break-after: avoid; page-break-inside: avoid } BLOCKQUOTE, PRE { page-break-inside: avoid } UL, OL, DL { page-break-before: avoid } } @media speech { H1, H2, H3, H4, H5, H6 { voice-family: paul, male; stress: 20; richness: 90 } H1 { pitch: x-low; pitch-range: 90 } H2 { pitch: x-low; pitch-range: 80 } H3 { pitch: low; pitch-range: 70 } H4 { pitch: medium; pitch-range: 60 } H5 { pitch: medium; pitch-range: 50 } H6 { pitch: medium; pitch-range: 40 } LI, DT, DD { pitch: medium; richness: 60 } DT { stress: 80 } PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 } EM { pitch: medium; pitch-range: 60; stress: 60; richness: 50 } STRONG { pitch: medium; pitch-range: 60; stress: 90; richness: 90 } DFN { pitch: high; pitch-range: 60; stress: 60 } S, STRIKE { richness: 0 } I { pitch: medium; pitch-range: 60; stress: 60; richness: 50 } B { pitch: medium; pitch-range: 60; stress: 90; richness: 90 } U { richness: 0 } A:link { voice-family: harry, male } A:visited { voice-family: betty, female } A:active { voice-family: betty, female; pitch-range: 80; pitch: x-high } }

    D Грамматика CSS

    Приложение D. Грамматика CSS2

    Содержание
  • D.1 Грамматика
  • D.2 Лексический сканер
  • D.3 Сравнение лексического разбора в CSS2 и в CSS1

    • Это приложение является нормативным.
    Грамматика определяет синтаксис CSS2. В некотором смысле она является наднабором CSS2, так как в этой спецификации вводятся дополнительные семантические ограничения, не указанные в грамматике. Соответствующие пользовательские агенты (ПА) также обязаны придерживаться правил вперёд-совместимого разбора, нотации свойств и значений и нотации модуля. В дополнение к этому, язык документа может вводить ограничения, например, HTML вводит ограничения на возможные значения атрибута "class".

    С Замечания по реализации и выполнению для шрифтов

    Приложение С: Замечания по реализации и выполнению для шрифтов

    Содержание
  • C.1 Справочник терминологии шрифтов
  • C.2 Выбор шрифта
  • C.3 Значения Чисел Panose
  • C.4 Вычисление Диапазонов Unicode для TrueType
  • C.5 Автоматическая генерация дескриптора

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

    В Изменения по сравнению с CSS

    Приложение В: Изменения по сравнению с CSS1

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

    • Это приложение является информативным, но не нормативным.
    CSS2 построен на основе CSS1, и все действительные таблицы стилей CSS1 являются действительными таблицами стилей CSS2. Изменения между спецификацией CSS1 (см. [CSS1]) и данной спецификацией делятся на три группы: новая функциональность, обновлённые описания функциональности CSS1 и изменения по сравнению с CSS1.

    Применяется к/ Applies to

    Применяется к/ Applies to

    Перечисляет элементы, к которым применяется данное свойство. Предполагается, что все элементы имеют все свойства, но некоторые свойства не имеют действия на представление элементов определённых типов. Например, 'white-space' действует только на элементы уровня блока (block-level elements).

    Пример полей заполнения и рамок

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

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


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

    Пример(ы):
    В следующем примере определена специфическая разновидность шрифта - Alabama Italic. Описание шрифта panose и URI-источник для запроса шрифта на сервере truetype также предоставлены. Дескрипторы font-weight и font-style предоставлены для описания шрифта. Объявление также сообщает, что вес совпадёт с любым запросом в диапазоне от 300 до 500. Семейство шрифтов - Alabama, а имя украшенного шрифта - Alabama Italic.
    @font-face { src: local("Alabama Italic"), url(http://www.fonts.org/A/alabama-italic) format("truetype"); panose-1: 2 4 5 2 5 4 5 9 3 3; font-family: Alabama, serif; font-weight: 300, 400, 500; font-style: italic, oblique; } Пример(ы):
    В следующем примере определено семейство шрифтов. Предоставлен единственный URI для запроса данных шрифта. Этот файл данных будет содержать несколько стилей и весов именованного шрифта. Как только одно из этих определений @font-face будет разыменовано, данные окажутся в кэше ПА для использования другими разновидностями с тем же URI.
    @font-face { src: local("Helvetica Medium"), url(http://www.fonts.org/sans/Helvetica_family) format("truedoc"); font-family: "Helvetica"; font-style: normal } @font-face { src: local("Helvetica Oblique"), url("http://www.fonts.org/sans/Helvetica_family") format("truedoc"); font-family: "Helvetica"; font-style: oblique; slope: -18 } Пример(ы):
    В следующем примере три физических шрифта группируются в один виртуальный шрифт с расширенным диапазоном. В каждом случае имя украшенного шрифта дано в дескрипторе src, и это позволяет предпочтительно использовать локально установленные версии, если они имеются. Четвёртое правило указывает на шрифт с тем же диапазоном, но содержащийся в отдельном ресурсе. @font-face { font-family: Excelsior; src: local("Excelsior Roman"), url("http://site/er") format("intellifont"); unicode-range: U+??; /* Latin-1 */ } @font-face { font-family: Excelsior; src: local("Excelsior EastA Roman"), url("http://site/ear") format("intellifont"); unicode-range: U+100-220; /* Latin Extended A и B */ } @font-face { font-family: Excelsior; src: local("Excelsior Cyrillic Upright"), url("http://site/ecr") format("intellifont"); unicode-range: U+4??; /* Cyrillic */ } @font-face { font-family: Excelsior; src: url("http://site/excels") format("truedoc"); unicode-range: U+??,U+100-220,U+4??; }
    Пример(ы):
    Этот пример можно найти в ПА в таблице стилей по умолчанию. Здесь берётся общее семейство CSS2 serif и отображается в большое количество шрифтов serif, которые могут существовать на различных платформах. Не даются метрики, поскольку они варьируются среди возможных альтернатив. @font-face { src: local("Palatino"), local("Times New Roman"), local("New York"), local("Utopia"), url("http://somewhere/free/font"); font-family: serif; font-weight: 100, 200, 300, 400, 500; font-style: normal; font-variant: normal; font-size: all }

    могут быть использованы следующие описания


    15.3.9 Примеры

    Пример(ы):
    Для данного списка шрифтов:
    Swiss 721 light light & light italic
    Swiss 721 roman, bold, italic, bold italic
    Swiss 721 medium medium & medium italic
    Swiss 721 heavy heavy & heavy italic
    Swiss 721 black black, black italic, & black #2
    Swiss 721 Condensed roman, bold, italic, bold italic
    Swiss 721 Expanded roman, bold, italic, bold italic

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

    Принципы дизайна CSS

    CSS2, а до них - CSS1, базируются на наборе принципов дизайна:
  • Совместимость вперёд и обратная. ПА CSS2 понимают таблицы стилей CSS1. ПА CSS1 могут читать таблицы стилей CSS2 и отбрасывать те части, которые они не понимают. Также ПА, не поддерживающие CSS, могут отображать документы со стилями. Конечно, стилистические приёмы, возможные в CSS, не будут выводиться, но всё содержимое будет представлено.
  • Дополнение структурированных документов. Таблицы стилей дополняют структурированные документы (например, приложения HTML и XML), предоставляя стилистическую информацию для размеченного текста. Должна иметься возможность легко изменять таблицы стилей без или с минимальным влиянием на разметку.
  • Независимость от изготовителя, платформы и устройства. Таблицы стилей делают возможным создание документов, не зависящих от изготовителя, платформы и устройства. Таблицы стилей сами по себе также не зависят от изготовителя, платформы и устройства, но CSS2 позволяют Вам назначить таблицу стилей группе устройств (например, принтеров).
  • Удобство обслуживания. Ссылаясь из документа на таблицы стилей, web-мастера могут упростить обслуживание сайта и добиться целостного вида и содержания всего сайта. Например, если изменяется цвет фона сайта организации, нужно будет изменить лишь один файл.
  • Простота. CSS2 сложнее, чем CSS1, но остаётся простым языком стилей, доступным для чтения и понимания человеком. Свойства CSS не зависят одно от другого, чтобы иметь в будущем возможности для расширения, и поэтому обычно имеется лишь один способ для достижения определённого эффекта.
  • Скорость работы сети. CSS предоставляют компактные способы представления содержимого. По сравнению с файлами изображений или аудиофайлами, которые часто используются авторами для получения определённых эффектов представления, таблицы стилей чаще всего уменьшают объёмы содержимого. Требуется также меньше сетевых соединений, что увеличивает пропускную способность сети.
  • Гибкость. CSS может применяться в содержимом разными способами. Ключевым является возможность каскадирования стилевой информации, специфицированной в таблице стилей по умолчанию(в ПА), пользовательских таблицах стилей, связанных таблицах стилей, шапке документа и атрибутах элементов, формирующих тело документа.
  • Богатство возможностей. Предоставление авторам большого набора эффектов отображения увеличивает разнообразие Web. Дизайнерам была необходима функциональность, которая уже использовалась в настольных приложениях и слайд-презентациях. Некоторые из требуемых эффектов конфликтуют с независимостью от конкретных устройств, но CSS2 явился дальнейшим шагом на пути удовлетворения запросов дизайнеров.
  • Связи с другими языками. Набор свойств CSS, описанный в этой спецификации, образует последовательную модель форматирования для визуального и звукового представления. Эта модель форматирования может быть доступна из языка CSS, но возможны также связи с другими языками. Например, программа JavaScript может динамически изменить значение свойства 'color' определённого элемента.
  • Доступность. Некоторые возможности CSS сделают Web более доступным для пользователей с физическими проблемами:
  • Свойства для управления выводом шрифта позволяют авторам исключить недоступность растрированных текстовых изображений.
  • Свойства позиционирования позволяют авторам исключить трюки с разметкой (например, невидимые изображения) для целей изменения вывода.
  • Семантика правил !important означает, что пользователи с особыми требованиями к представлению могут переопределять установки авторских таблиц стилей.
  • Новое значение 'inherit' для всех свойств улучшает каскадирование и даёт возможность более лёгкой и точной настройки стиля.
  • Улучшенная поддержка носителей, включая группы носителей и брайль-носители, рельефные и tty типы носителей, позволит пользователям и авторам создавать страницы для данных устройств.
  • Звуковые свойства дают возможность управлять речевым и аудиовыводом.
  • Селекторы атрибутов, функция 'attr()' function и свойство 'content' дают возможность доступа к альтернативному содержимому.
  • Счётчики и нумерация разделов/параграфов может улучшить навигацию по документам и сохранить пространство отступов (важно для байль-устройств). Свойства 'word-spacing' и 'text-indent' исключают надобность в излишнем свободном пространстве в документе.
    • Примечание. За дополнительной информацией о разработке доступных документов с использованием CSS и HTML обратитесь, пожалуйста, на [WAI-PAGEAUTH].

    Пробел свойство 'whitespace'

    'white-space'
    Значение:normal | pre | nowrap | inherit
    Начальное:normal
    Применяется: к элементам уровня блока
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный
    Это свойство объявляет, как обрабатываются пробелы внутри элемента.
    Значения имеют следующий смысл:
    normal Это значение указывает ПАгентам, что нужно сжимать последовательности пробелов и что нужны разрывы строк для заполнения строк бокса. Дополнительные разрывы строк могут создаваться с помощью ввода "\A" в генерируемом содержимом (например, для элемента BR в HTML). pre Это значение предотвращает сжатие ПАгентами последовательностей пробелов. Строки переносятся только в коде документа или при появлениях "\A" в генерируемом содержимом. nowrap Это значение сжимает пробелы, как 'normal', но подавляет разрывы строк в тексте, за исключением тех, которые создаются "\A" в генерируемом содержимом (например, для элемента BR в HTML). Пример(ы):
    Следующие примеры демонстрируют ожидаемое поведение пробелов в элементах PRE и P и атрибута "nowrap" HTML. PRE { white-space: pre } P { white-space: normal } TD[nowrap] { white-space: nowrap }
    Соответствующие ПА могут игнорировать свойство 'white-space' в авторских и пользовательских таблицах стилей, но обязаны специфицировать для них значение в таблице стилей по умолчанию.

    Процентные значения/Percentage values

    Процентные значения/Percentage values

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

    Процентные значения


    4.3.3 Процентные значения

    Формат процентного значения (обозначаемого в этой спецификации ) - это необязательный знак ('+' или '-', с '+' по умолчанию), сразу за которым следует , за которым сразу следует '%'.
    Процентные значения всегда относительны к другому значению, например, размеру. Каждое свойство, допускающее процентные значения, определяет также значение, на которое ссылается процентное. Значение может быть взято из другого свойства того же элемента, свойства элемента-предка или значения контекста форматирования (например, ширины содержащего блока). Если процентное значение установлено для свойства корневого элемента и проценты определены как относительные к наследуемому значению какого-либо свойства, то результирующее значение - это начальное значение этого свойства, взятое кратным количеству процентов.
    Пример(ы):
    Поскольку дочерние элементы (обычно) наследуют вычисленные значения своих родителей, в следующем примере дочерние от P элементы унаследуют значение в 12pt для 'line-height', а не процентное значение (120%): P { font-size: 10pt } P { line-height: 120% } /* 120% от 'font-size' */

    Пространственные свойства 'azimuth' и 'elevation'

    Пространственное аудио является важным стилистическим свойством звукового представления. Оно предоставляет естественный способ реализации звучания нескольких независимых голосов, как в реальной жизни (источники звука редко находятся в одной точке помещения). Стереодинамики создают пространственный эффект. Стереонаушники или становящиеся всё более популярными установки с пятью колонками в домашнем театре могут генерировать объёмное звучание, а многополосные установки могут производит трёхмерное звучание. VRML 2.0 также включает пространственное аудио в предположении, что доступные по цене для потребителей аудиоустройства с пространственными эффектами со временем станут широко распространёнными.
    'azimuth'
    Значение: | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit
    Начальное:center
    Применяется: ко всем элементам
    Наследуется:да
    Процентное:N/A
    Носитель:звуковой
    Значения имеют следующий смысл:
    Позиция в угловых терминах от '-360deg' до '360deg'. Значение '0deg' означает впереди и в центре звукового пространства. '90deg' это справа, '180deg' - сзади, '270deg' (или более подходящий эквивалент, '-90deg') - слева. left-side То же, что '270deg'. С 'behind' - '270deg'. far-left То же, что '300deg'. С 'behind' - '240deg'. left То же, что '320deg'. С 'behind' - '220deg'. center-left То же, что '340deg'. С 'behind' - '200deg'. center То же, что '0deg'. С 'behind' - '180deg'. center-right То же, что '20deg'. С 'behind' - '160deg'. right То же, что '40deg'. С 'behind' - '140deg'. far-right То же, что '60deg'. С 'behind' - '120deg'. right-side То же, что '90deg'. С 'behind' - '90deg'. leftwards Сдвигает звучание влево относительно текущего угла. Точнее, вычитает 20 градусов. Арифметически выполняется modulo 360 градусов. Заметьте, что 'leftwards' точнее описать как "повёрнуто против часовой стрелки," поскольку оно всегда вычитает 20 градусов, даже если наследуемый azimuth уже позади слушателя (в этом случае звучание на самом деле перемещено вправо). rightwards Сдвигает звучание вправо относительно текущего угла. Точнее, прибавляет 20 градусов. См. 'leftwards' в арифметике. Данное свойство может быть более точно реализовано микшированием одного сигнала в разных каналах с разным уровнем. Оно может также использовать фазовое смещение, цифровую задержку и другие аналогичные приёмы для того, чтобы создать иллюзию сцены. Точные значения, используемые для выполнения этого эффекта, и количество динамиков зависят от ПА; это свойство лишь идентифицирует желаемый результат.
    Пример(ы):
    H1 { azimuth: 30deg } TD.a { azimuth: far-right } /* 60deg */ #12 { azimuth: behind far-right } /* 120deg */ P.comment { azimuth: behind } /* 180deg */ Если пространственный азимут специфицирован и выводящее устройство не способно производить звук позади слушателя, ПА должны конвертировать значения задней полусферы в значения передней полусферы. Метод может быть такой:
  • если 90deg < x <= 180deg, тогда x := 180deg - x
  • если 180deg < x <= 270deg, тогда x := 540deg - x
    • 'elevation'
    Значение: | below | level | above | higher | lower | inherit
    Начальное:level
    Применяется: ко всем элементам
    Наследуется:да
    Процентное:N/A
    Носитель:звуковой
    Значения имеют следующий смысл:
    Специфицирует возвышение как угол между '-90deg' и '90deg'. '0deg' означает передний горизонт, что означает уровень слушателя. '90deg' означает прямо сверху, а '-90deg' - прямо внизу. below То же, что '-90deg'. level То же, что '0deg'. above То же, что '90deg'. higher Прибавляет 10 градусов к текущему возвышению. lower Вычитает 10 градусов из текущего возвышения. Точные значения, используемые для получения этого эффекта, и количество динамиков не определены. Это свойство лишь идентифицирует желаемый результат.
    Пример(ы):
    H1 { elevation: above } TR.a { elevation: 60deg } TR.b { elevation: 30deg } TR.c { elevation: level }

    Псевдоэлемент firstletter


    5.12.2 Псевдоэлемент :first-letter

    Псевдоэлемент :first-letter можно использовать для "начальных заглавных" и "зависающих заглавных", которые являются распространёнными типографскими эффектами. Этот тип начальных букв похож на инлайн-элемент, если его свойство 'float' - 'none', иначе он похож на всплывающий элемент.
    Вот свойства, применимые к псевдоэлементу :first-letter: свойства шрифта, свойства цвета, свойства фона, 'text-decoration', 'vertical-align' (только если 'float' установлен в 'none'), 'text-transform', 'line-height', свойства полей, свойства заполнения, свойства рамок, 'float', 'text-shadow' и 'clear'.
    Следующий CSS2 сделает начальную заглавную зависающую букву, захватывающую две строки:
    Drop cap initial letter The first few words of an article in The Economist.
    Этот пример может быть сформатирован так:

    Псевдоэлемент firstline

    5.12.1 Псевдоэлемент :first-line

    Псевдоэлемент :first-line применяет специальный стиль к первой форматированной строке параграфа. К примеру:
    P:first-line { text-transform: uppercase } Это правило говорит: "Перевести буквы первой строки каждого параграфа в верхний регистр". Однако селектор "P:first-line" не совпадёт ни с каким реальным элементом HTML. Он совпадёт с псевдоэлементом, который соответствующие ПА будут вставлять в начале каждого параграфа.
    Заметьте, что длина первой строки зависит от нескольких факторов, включая ширину страницы, размер шрифта и т.д. Таким образом, обычный параграф HTML:
    This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.
    строки которого могут быть разбиты так: THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph. может быть "переписан" ПАгентами с включением последовательности фиктивных тэгов для :first-line. Эта фиктивная последовательность тэгов поможет продемонстрировать, как наследуются свойства: This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.
    Если псевдоэлемент разрывает реальный элемент, то желаемый эффект может часто быть описан последовательностью фиктивных тэгов, которая закрывает и затем снова открывает элемент. Таким образом, если мы разметим предыдущий параграф с использованием элемента SPAN:
    This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.
    ПА сможет сгенерировать соответствующие начальный и конечный тэги для SPAN при вставке последовательности фиктивных тэгов для :first-line. This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.
    Псевдоэлемент :first-line может быть присоединён только к элементу уровня блока.
    Псевдоэлемент :first-line подобен инлайн-элементу, но с некоторыми ограничениями. К псевдоэлементу :first-line применяются только следующие свойства : свойства шрифта, свойства цвета, свойства фона, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' и 'clear'.

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


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

    Авторы специфицируют стиль и размещение генерируемого содержимого с помощью псевдоэлементов :before и :after. Как видно из их имён, псевдоэлементы :before и :after специфицируют размещение содержимого до и после содержимого дерева документа элемента. Свойство 'content' в соединении с этими псевдоэлементами специфицирует, что же будет вставлено.
    Пример(ы):
    Следующее правило вставляет строку "Note: " перед содержимым каждого элемента P, чей атрибут "class" имеет значение "note":
    P.note:before { content: "Note: " } Форматирующие объекты (напр., боксы), генерируемые элементом, включают генерируемое содержимое. Так, например, изменение вышеприведённой таблицы стилей:
    P.note:before { content: "Note: " } P.note { border: solid green } вызовет появление сплошной зелёной рамки вокруг параграфа, включая начальную строку.
    Псевдоэлементы :before и :after наследуют любые наследуемые свойства из тех элементов дерева документа, к которым они присоединены.
    Пример(ы):
    Следующие правила вставляют открывающий знак кавычек перед каждым элементом Q. Цвет знака кавычки - красный, но шрифт будет тот же, что и шрифт остальной части элемента Q:
    Q:before { content: open-quote; color: red } В объявлениях псевдоэлементов :before или :after ненаследуемые свойства получают свои начальные значения.
    Пример(ы):
    Так, например, поскольку начальное значение свойства 'display' - 'inline', кавычка в предыдущем примере вставляется как инлайн-бокс (т.е. на той же самой строке, что и содержимое начального текста элемента). В следующем примере свойство 'display' явно устанавливается в 'block', так что вставленный текст становится блоком:
    BODY:after { content: "The End"; display: block; margin-top: 2em; text-align: center; } Обратите внимание, что пользователи аудио-ПА услышат слова "The End" после вывода оставшейся части содержимого BODY.
    ПА обязаны игнорировать следующие свойства при наличии псевдоэлементов :before и :after:
    'position'    , 'float', свойства списков и таблиц.
    Псевдоэлементы :before и :after допускают значения свойства 'display':
  • Если субъект селектора является элементом уровня блока, допустимыми значениями будут 'none', 'inline', 'block' и 'marker'.
    Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'block'.
  • Если субъект селектора является инлайн-элементом, допустимыми значениями будут 'none' и 'inline'.
    Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'inline'.

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

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

    Псевдоэлементы ':before' и ':after' можно использовать для вставки генерируемого содержимого до или после содержимого элемента. Они разъясняются в разделе генерируемый текст.
    Пример(ы):
    H1:before {content: counter(chapno, upper-roman) ". "} Если псевдоэлементы :first-letter и :first-line сочетаются с :before и :after, то они применяются к первой букве или строке элемента, включая вставленный текст.
    Пример(ы):
    P.special:before {content: "Special! "} P.special:first-letter {color: #ffd800} Это выведет "S" в слове "Special!" золотом.

    Псевдоэлементы и псевдоклассы


    5.10 Псевдоэлементы и псевдоклассы

    В CSS2 стиль обычно присоединяется к элементу на базе его позиции в дереве документа. Этой простой модели во многих случаях достаточно, но некоторые обычные сценарии могут оказаться недоступными из-за структуры дерева документа. Например, в HTML 4.0 (см. [HTML40]) нет элементов, относящихся к первой строке параграфа, и, следовательно, простой селектор CSS не может с ним соотноситься.
    CSS вводит псевдоэлементы и псевдоклассы, чтобы разрешить форматирование на базе информации, находящейся вне дерева документа.
  • Псевдоэлементы создают абстракции дерева документа наряду с абстракциями, специфицированными языком документа. Например, языки документа не имеют механизмов для доступа к первой букве или первой строке содержимого элемента . Псевдоэлементы CSS позволяют дизайнерам таблиц стилей получить доступ к информации, иначе не доступной. Псевдоэлементы могут также предоставить способ назначить стиль содержимому, которое не существует в документе-источнике (например, псевдоэлементы :before и :after дают доступ к генерируемому содержимому).
  • Псевдоклассы классифицируют элементы не по их именам, атрибутам или содержимому, а по другим характеристикам ; по характеристикам, которые в принципе не могут быть получены из дерева документа. Псевдоклассы могут быть динамическими в предположении, что элемент может получить или потерять псевдокласс, пока пользователь взаимодействует с документом. Исключением является ':first-child', который может быть вычислен из дерева документа.
    • Ни псевдоэлементы, ни псевдоклассы не появляются в документе-источнике или в дереве документа.
    Псевдоклассы допустимы в селекторах везде, в то время как псевдоэлементы могут появляться только после субъекта селектора.
    Имена псевдоэлементов и псевдоклассов нечувствительны к регистру.
    Некоторые псевдоклассы взаимоисключающи, а другие могут применяться одновременно в одном и том же элементе. В случае конфликта правил, нормальный порядок каскадирования определяет выход.
    ПА, соответствующие HTML могут игнорировать все правила с селекторами :first-line или :first-letter или, альтернативно, могут поддерживать только поднаборы свойств этих псевдоэлементов.

    Псевдоэлементы


    5.12 Псевдоэлементы

    Псевдокласс firstchild

    5.11.1 Псевдокласс :first-child

    Псевдокласс :first-child совпадает с элементом, являющимся первым дочерним элементом какого-либо другого элемента.
    Пример(ы):
    Здесь селектор совпадает с любым элементом P, являющимся первым дочерним элементом элемента DIV. Правило подавляет отступ для первого параграфа DIV:
    DIV > P:first-child { text-indent: 0 } Следующий селектор может совпасть с элементом P внутри DIV в следующем фрагменте: Последний P перед note.
    Первый P внутри note.
    но не совпадёт со вторым P в следующем фрагменте: Последний P перед note.

    Note

    Первый P внутри note.
    Пример(ы):
    Следующее правило устанавливает вес шрифта 'bold' для любого элемента EM, являющегося каким-либо потомком элемента P, который, в свою очередь, является первым дочерним элементом:
    P:first-child EM { font-weight : bold } Заметьте, что анонимные боксы не являются частью дерева документа, они не учитываются при вычислении первого дочернего элемента.
    Например, EM в:
    abc default является первым дочерним элементом от P. Следующие два раздела эквивалентны:
    * > A:first-child /* первый дочерний элемент любого элемента */ A:first-child /* То же самое */

    Псевдокласс языка lang


    5.11.4 Псевдокласс языка :lang

    Если язык документа специфицирует, как определяется человеческий язык, то становится возможным записывать селекторы CSS, которые совпадают с элементом, на базе его языка. Например, в HTML [HTML40] язык определяется комбинацией атрибута "lang", элемента META и, возможно, информацией из протокола (такой как в "шапках" HTTP). XML использует атрибут, называемый XML:LANG, и могут быть также и другие методы определения языка, зависящие от языковой специфики.
    Псевдокласс ':lang(C)' совпадает, если документ написан на языке C. Здесь C - это код языка, как специфицировано в HTML 4.0 [HTML40] и RFC 1766 [RFC1766]. Он совпадает тем же способом, что и для оператора '|='.
    Пример(ы):
    Следующие правила устанавливают знаки кавычек для документа HTML на французском или немецком языке:
    HTML:lang(fr) { quotes: '« ' ' »' } HTML:lang(de) { quotes: '»' '«' '\2039' '\203A' } :lang(fr) > Q { quotes: '« ' ' »' } :lang(de) > Q { quotes: '»' '«' '\2039' '\203A' } Вторая пара правил в действительности устанавливает свойство 'quotes' элементов Q в соответствии с языком его предка. Так делается, потому что выбор знаков кавычек обычно базируется на языке элемента, окружающего кавычки, а не самих кавычек, и кусок французского текста “à l'improviste” в середине английского текста использует английские знаки кавычек.

    Псевдоклассы гиперссылки link и visited

    5.11.2 Псевдоклассы гиперссылки: :link и :visited

    ПА обычно отображают непосещённые гиперссылки иначе, чем посещённые. CSS имеет псевдоклассы ':link' и ':visited' для этих случаев:
  • Псевдокласс :link применяется к ссылкам, которые ещё не посещены.
  • Псевдокласс :visited применяется после того, как пользователь посетил ссылку.
    • Примечание. По истечении некоторого времени ПА могут вернуть посещённую гиперссылку к первоначальному состоянию (непосещённому) ':link'.
    Эти два состояния взаимоисключающи.
    Язык документа определяет, какие элементы являются якорями ссылки на ресурс. Например, в HTML4.0 псевдоклассы гиперссылки применяются к элементам A с атрибутом "href". Таким образом, следующие два объявления CSS2 имеют один эффект:
    A:link { color: red } :link { color: red } Пример(ы):
    Если следующая ссылка:
    external link будет посещена, то данное правило: A.external:visited { color: blue } сделает её голубой.

    Псевдоклассы


    5.11 Псевдоклассы

    Рамки


    17.6 Рамки

    Имеются две различные модели установки рамок ячейки таблицы в CSS. Одна больше подходит для так называемых раздельных рамок вокруг отдельных ячеек, другая подходит для рамок, которые протянулись от одного конца таблицы до другого. Многие стили рамок могут получены с помощью такой модели, поэтому чаще всего - дело вкуса, какую модель использовать. 'border-collapse'
    Значение:collapse | separate | inherit
    Начальное:collapse
    Применяется:к элементам 'table' и 'inline-table'
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный

    Это свойство выбирает модель рамки таблицы. Значение 'separate' выбирает модель раздельных рамок. Значение 'collapse' выбирает модель сжимающихся рамок. Эти модели описаны ниже.

    Распознаваемые типы носителя

    Тип носителя CSS именует набор свойств CSS. ПА, заявляющий о поддержке типа носителя по имени, обязан поддерживать все свойства, применимые к данному типу носителя.
    Имена для типов носителя в CSS отражают целевое устройство, на которое соответствующие свойства оказывают действие. В следующем списке типов носителя CSS описания в скобках не являются нормативными. Они лишь дают представление о том, к каким устройствам относится данный тип носителя. все Для всех устройств. звуковой Предполагается для использования в речевых синтезаторах. См. детали в разделе звуковые таблицы стилей. брайль-устройство Для брайль-устройств.брайль-принтер Для страничных брайль-принтеров. портативный Для портативных устройств (обычно с маленьким экраном, монохромных, с ограниченной пропускной способностью). печатный Предполагается для страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра для печати. Информацию о вопросах форматирования, специфичных для страничных носителей, см. в разделе Страничные носители. проектор Предполагается для проецируемых презентаций, например, проекторов или печати на прозрачные носители. Информацию о вопросах форматирования, специфичных для страничных носителей, см. в разделе Страничные носители. экран Прежде всего - для компьютерного цветного экрана. tty Для носителей, использующих решётку символов фиксированного размера, таких как телетайп, терминал или портативные устройства с ограниченными возможностями дисплея. Авторы не должны использовать пикселы с типом носителя "tty". tv Для устройств типа телевизора (низкое разрешение, цвет, ограниченная возможность прокрутки экрана, звуковые возможности).
    Названия типов носителя нечувствительны к регистру.
    Из-за быстрых изменений технологий, CSS2 не специфицирует определительный список типов носителя, которые могут быть значениями для @media.
    Примечание. Будущие версии CSS могут расширить этот список. Авторы не должны ссылаться на названия типов носителя, ещё не определённых в спецификации CSS.

    Расстояния между буквами и словами свойства 'letterspacing' и 'wordspacing'

    'letter-spacing'
    Значение:normal | | inherit
    Начальное:normal
    Применяется: ко всем элементам
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный
    Это свойство специфицирует расстояние между символами текста.
    Значения имеют следующий смысл:
    normal Нормальное расстояние для текущего шрифта. Это значение позволяет ПА изменять расстояние между символами при выравнивании и распределении текста. Обозначает межсимвольное пространство, дополнительное к значению по умолчанию. Значения могут быть отрицательными, но могут иметься ограничения в конкретных реализациях. ПА могут не иметь возможности после этого возможности изменять межсимвольное пространство для распределения и выравнивания текста. Алгоритмы межсимвольного пространства независимы от ПА. Межсимвольное пространство может также устанавливаться при выравнивании по формату (см. свойство 'text-align').
    Пример(ы):
    В этом примере пространство между символами в элементах BLOCKQUOTE увеличено на '0.1em'. BLOCKQUOTE { letter-spacing: 0.1em }
    В следующем примере ПАгенту не разрешено изменять межсимвольное пространство:
    BLOCKQUOTE { letter-spacing: 0cm } /* То же, что '0' */ Если расстояние-результат между двумя символами отличается от расстояния по умолчанию, ПА не должны использовать лигатуры.
    Соответствующие ПА могут рассматривать значение свойства 'letter-spacing' как 'normal'. 'word-spacing'
    Значение:normal | | inherit
    Начальное:normal
    Применяется: ко всем элементам
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный

    Это свойство специфицирует расстояние между словами.
    Значения имеют следующий смысл:
    normal Нормальное межсловное пространство, как определено текущим шрифтом и/или ПА. Это значение указывает межсловное пространство, дополняющее значение по умолчанию. Значения могут быть отрицательными, но могут существовать ограничения, в зависимости от конкретной реализацией. Алгоритмы межсловного пространства зависят от ПА. Межсловное пространство устанавливается также при выравнивании по формату (см. свойство 'text-align').
    Пример(ы):
    Здесь пространство между словами в элементах H1 увеличено на '1em'. H1 { word-spacing: 1em }
    Соответствующие ПА могут рассматривать значение свойство 'letter-spacing' как 'normal'.

    Размер шрифта свойства 'fontsize' и 'fontsizeadjust'


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

    'font-size'
    Значение: | | | | inherit
    Начальное:medium
    Применяется:ко всем элементам
    Наследуется:да, вычисленное значение наследуется
    Процентное:ссылается на размер шрифта родительского элемента
    Носитель:визуальный
    Это свойство описывает размер шрифта, установленного в solid. Значения имеют следующий смысл:
    Ключевое слово ссылается на вход в таблице размеров шрифта, вычисленной и хранимой пользовательским агентом. Возможные значения: [ xx-small | x-small | small | medium | large | x-large | xx-large ]
    На экране компьютера между смежными индексами применяется масштаб 1.2: если шрифт 'medium' - 12pt, то шрифт 'large' будет 14.4pt. Другие носители могут требовать других значений масштаба. Таким образом, ПА должен учитывать качество и доступность шрифтов при обсчёте таблицы размеров. Таблица может отличаться для разных семейств шрифтов.
    Примечание. В CSS1 масштаб между смежными индексами принимался в 1.5 и, по опыту пользователей, оказался слишком большим.
    /относительный размер Ключевое слово интерпретируется относительно таблицы размеров шрифта и размера шрифта родительского элемента. Возможные значения: [ larger | smaller ]
    Например, если родительский элемент имеет размер шрифта 'medium', значение 'larger' сделает размер шрифта текущего элемента 'large'. Если размер родительского элемента не вмещается в диапазон таблицы, ПА свободен в интерполяции значений таблицы или округлении до ближайшего. ПАгенту может потребоваться экстраполировать значения таблицы, если цифровое значение находится вне ключевых слов. Значение length специфицирует абсолютный размер шрифта (т.е. независимый от таблицы шрифтов ПА). Негативные значения недопустимы. Процентное значение специфицирует абсолютный размер шрифта относительно размера шрифта родительского элемента. Использование процентных значений или значений в 'em' даёт более надёжные и каскадируемые таблицы стилей.
    Текущее значение данного свойства может отличаться от обсчитанного свойства при наличии цифрового значения 'font-size-adjust' и недоступности некоторых размеров шрифта.
    Дочерние элементы наследуют обсчитанное значение 'font-size' (в то же время, эффект 'font-size-adjust' может усложниться).
    Пример(ы):
    P { font-size: 12pt; } BLOCKQUOTE { font-size: larger } EM { font-size: 150% } EM { font-size: 1.5em } 'font-size-adjust'
    Значение: | none | inherit
    Начальное:none
    Применяется: ко всем элементам
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный
    В двухкамерном написании субъективно очевидный размер и разборчивость шрифта меньше зависят от своих значений 'font-size', нежели от значений 'x-height', или, более доступно, от пропорции этих двух значений, называемой значением аспекта (font size, разделённый на x-height). Чем выше значение аспекта, тем более вероятно, что шрифт меньшего размера будет разборчивым. В противоположность этому, шрифты с меньшим значением аспекта скорее окажутся неразборчивыми ниже порогового значения, чем шрифты с более высоким значением аспекта. Прямая замена шрифтов в связи с размером шрифта может привести к появлению нечитаемых символов.
    Например, популярный шрифт Verdana имеет значение аспекта 0.58; если измерение размера шрифта Verdana - 100 единиц, то его x-height - 58 единиц. Для сравнения, Times New Roman имеет значение аспекта 0.46. Verdana, следовательно, имеет тенденцию остаться разборчивым при меньших размерах, чем Times New Roman. И наоборот, Verdana чаще окажется слишком большим при замещении шрифта Times New Roman.
    Это свойство позволяет авторам специфицировать значение аспекта, сохраняющее x-height первого шрифта в подставляемом шрифте. Значения имеют следующий смысл: none Не сохраняет x-height шрифта. Специфицирует значение аспекта. Число относится к значению аспекта первого шрифта. Значение масштаба доступных шрифтов обсчитывается в соответствии со следующей формулой: y(a/a') = c
    где:
    y = 'font-size' первого шрифта a' = значение аспекта доступного шрифта c = 'font-size' для применения к доступному шрифту Пример(ы):
    Например, если 14px Verdana (со значением аспекта 0.58) окажется недоступным, а доступный шрифта имеет значение аспекта 0.46, font-size замещающего будет 14 * (0.58/0.46) = 17.65px.
    Уточнение размера шрифта имеет место при обсчёте текущего значения 'font-size'. Поскольку наследование базируется на обсчитанном значении, дочерние элементы будут наследовать неуточнённые значения.
    Первый рисунок показывает различные типы шрифтов, растрированные в обычный размер (11pt. от 72 ppi), вместе с их значениями аспекта. Обратите внимание, что шрифты с большим значением аспекта оказываются больше, чем шрифты с низким значением аспекта. Шрифты со слишком низким значением аспекта оказываются нечитаемыми в данных размерах.

    Размер страницы свойство 'size'


    13.2.2 Размер страницы: свойство 'size'

    'size'
    Значение:{1,2} | auto | portrait | landscape | inherit
    Начальное:auto
    Применяется: к контексту страницы
    Наследуется:N/A
    Процентное:N/A
    Носитель:визуальный, страничный
    Это свойство специфицирует размер и ориентацию страничного бокса.
    Размер страничного бокса может быть или "absolute/абсолютным" (фиксированный размер), или "relative/относительным" (масштабируемым, т.е. соответствующим имеющимся размерам листа). Относительные страничные боксы позволяют ПА масштабировать документ и оптимально использовать целевые размеры.
    Три значения свойства 'size' создают относительный страничный бокс:
    auto Страничный бокс будет установлен в соответствии с размерами и ориентацией целевого листа. landscape Переопределяет целевую ориентацию. Страничный бокс будет тех же размеров, что и целевой, и по горизонтали будут расположены длинные стороны. portrait Переопределяет целевую ориентацию. Страничный бокс будет тех же размеров, что и целевой, и по горизонтали будут расположены короткие стороны. Пример(ы):
    Здесь внешний край страничного бокса будет выровнен с целевым. Процентные значения свойства 'margin' - относительны к целевым размерам, поэтому, если целевые размеры - 21.0см x 29.7см (т.е. A4), поля будут 2.10см и 2.97см. @page { size: auto; /* auto это начальное значение */ margin: 10%; }
    Измеряемые значения свойства 'size' создают абсолютный страничный бокс. Если специфицировано только одно значение, оно устанавливает и ширину, и высоту страничного бокса (т.е. квадратный бокс). Поскольку страничный бокс является начальным содержащим блоком, процентные значения для свойства 'size' не допускаются.
    Пример(ы):
    @page { size: 8.5in 11in; /* ширина - высота */ } В этом примере устанавливаются: ширина страничного бокса - 8.5 дюймов и высота - 11 дюймов. Такой страничный бокс требует размеров целевого листа 8.5"x11" или больше.
    ПА могут позволять пользователям контролировать перенос страничного бокса на лист (например, поворачивать абсолютный страничный бокс при печати).

    Размеры бокса

    Каждый бокс имеет область содержимого (например, текст, изображение и т.п.) и необязательное окружение - области заполнения, рамки и поля; размер каждой области специфицируется свойствами, определёнными ниже. На диаграмме показано соотношение этих областей и терминология, используемая для ссылок на разные участки поля/margin, рамки/border и заполнения/padding:

    Размеры


    4.3.2 Размеры

    Размеры имеют отношение к горизонтальным и вертикальным измерениям.
    Формат значения размера (обозначаемого в этой спецификации ) - это необязательный символ знака ('+' или '-', с '+' по умолчанию), после которого сразу идёт (с или без десятичной точки), после которого сразу идёт идентификатор единиц измерения (например, px, deg и т.п.). После размера '0' единицы измерения не обязательны.
    Некоторые свойства допускают негативные значения размеров, но это может усложнять модель форматирования и могут иметься ограничения, обусловленные конкретной реализацией. Если негативное значение размера не поддерживается, оно должно быть конвертировано до ближайшего поддерживаемого значения.
    Есть два типа единиц измерения: относительные и абсолютные. Относительные размеры специфицируют значение размера относительно какого-либо исходного свойства размера. Таблицы стилей, использующие относительные единицы измерения, легче масштабируются при переносе на различные носители (например, с дисплея компьютера на лазерный принтер).
    Относительными единицами измерения являются:
  • em: 'font-size' соответствующего шрифта;
  • ex: 'x-height' соответствующего шрифта;
  • px: пикселы, относительно устройства просмотра.

    • Пример(ы):
    H1 { margin: 0.5em } /* em */ H1 { margin: 1ex } /* ex */ P { font-size: 12px } /* px */ Единицы измерения 'em' эквивалентны вычисленному значению свойства 'font-size' того элемента, в котором оно используется. Исключением является тот случай, когда 'em' появляется в самом значении свойства 'font-size', тогда оно относится к размеру шрифта родительского элемента. Может использоваться для вертикального или горизонтального измерения. (Эта единица измерения иногда называется quad-width/квад-ширина в типографском тексте.)
    Единицы 'ex' определяются 'x-height' шрифта. x-height называется так, потому что она часто равна высоте "x" нижнего регистра. Однако 'ex' определены даже для тех шрифтов, которые не содержат "x".
    Пример(ы):
    Правило: H1 { line-height: 1.2em }
    означает, что высота строки элементов H1 будет на 20% больше, чем размер шрифта элементов H1. С другой стороны: H1 { font-size: 1.2em }
    означает, что размер шрифта элементов H1 будет на 20% больше, чем размер шрифта, наследуемый из элементов H1.
    Если они специфицированы для корня дерева документа (например, "HTML" в HTML), 'em' и 'ex' относятся к начальному значению свойства.
    Пикселы относительны к разрешению устройства просмотра, т.е. чаще всего - дисплея компьютера. Если плотность пикселов выводного устройства сильно отличается от плотности типичного компьютерного дисплея, ПА должен перемасштабировать пикселные значения. Рекомендуется, чтобы пиксел в качестве точки отсчёта был визуальным углом одного пиксела на устройстве с плотностью пикселов 90dpi на расстоянии вытянутой руки от читателя. При нормальной длине руки 28 дюймов визуальный угол будет примерно 0.0227 градусов.
    При чтении с расстояния вытянутой руки 1px соответствует примерно 0.28 мм (1/90 дюйма). При печати на лазерном принтере, рассчитанном на чтение с несколько меньшего расстояния, чем вытянутая рука, (55 см, 21 дюймов), 1px составляет около 0.21 мм. На принтере с разрешением 300 точек на дюйм (dpi) это можно округлить до 3 точек (0.25 мм); на принтере с 600 dpi это можно округлить до 5 точек.
    Два нижеследующих изображения иллюстрируют эффект при просмотре размера пиксела с расстояния и эффект разрешения устройства. На первом рисунке расстояние чтения 71 см (28 дюймов) даёт пиксел 0.28 мм, а с расстояния 3.5 м (12 футов) требуется пиксел 1.4 мм.

    Размещение страничных боксов не помещающихся на листе

    Размещение страничных боксов, не помещающихся на листе

    Если страничный бокс не вмещается в размеры целевого листа, ПА может:
  • Повернуть страничный бокс на 90°, если это поможет разместить его.
  • Масштабировать бокс, чтобы вместить в целевые размеры.
    • ПА должен запрашивать у пользователя подтверждение на эти операции.

    Разрешение конфликтов рамок


    Разрешение конфликтов рамок

    В модели сжимающихся рамок, рамки каждого края каждой ячейки могут быть специфицированы свойствами рамки различных элементов, находящихся у этого края (ячеек, рядов, групп рядов, столбцов, групп столбцов и самой таблицы), и эти рамки могут различаться по ширине, стилю и цвету. Основным правилом является то, что у каждого края выбирается самая "примечательная" рамка, за исключением тех случаев, когда появление стиля 'hidden' безусловно отключает вывод рамки.
    Следующие правила определяют, какой стиль рамки "побеждает" в случае конфликта:
  • Рамки с 'border-style' - 'hidden' имеют преимущество перед всеми другими конфликтующими рамками. Любая рамка с этим значением подавляет все рамки в этом месте.
  • Рамки со стилем 'none' имеют самый низкий приоритет. Только если свойства рамки всех элементов, встречающихся у данного края, - 'none', тогда рамка будет отсутствовать (но заметьте, что 'none' - это значение по умолчанию для стиля рамки).
  • Если ни один из стилей не 'hidden' и минимум один из них - не 'none', тогда узкие рамки отбрасываются в пользу более широких. Если несколько рамок имеют одну 'border-width', тогда стили имеют приоритет в следующем порядке: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove' и, самый низший, 'inset'.
  • Если стили рамок отличаются только цветом, тогда стиль, установленный в ячейке имеет преимущество перед стилем ряда, который имеет преимущество перед стилем группы рядов, столбца, группы столбцов и, наконец, таблицы.
    • Пример(ы):
    Следующий пример иллюстрирует приложение с такими правилами приоритета. Данная таблица стилей:
    TABLE { border-collapse: collapse; border: 5px solid yellow; } *#col1 { border: 3px solid black; } TD { border: 1px solid red; padding: 1em; } TD.solid-blue { border: 5px dashed blue; } TD.solid-green { border: 5px solid green; } с этим HTML:
    1 2 3
    4 5 6
    7 8 9
    10 11 12
    13 14 15
    даст в результате что-либо подобное:

    Разрывы перед/после элементов 'pagebreakbefore' 'pagebreakafter' 'pagebreakinside'


    13.3.1 Разрывы перед/после элементов: 'page-break-before', 'page-break-after', 'page-break-inside'

    'page-break-before'
    Значение:auto | always | avoid | left | right | inherit
    Начальное:auto
    Применяется:к элементам уровня блока
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный, страничный
    'page-break-after'
    Значение:auto | always | avoid | left | right | inherit
    Начальное:auto
    Применяется: к элементам уровня блока
    Наследуется:нет
    Процентное:N/A
    Media: визуальный, страничный
    'page-break-inside'
    Значение:avoid | auto | inherit
    Начальное:auto
    Применяется: к элементам уровня блока
    Наследуется:да
    Процентное:N/A
    Media: визуальный, страничный
    Значения этих свойств имеют следующий смысл:
    auto Ни форсирует, ни запрещает разрыв страницы перед (после, внутри) генерируемого бокса. always Всегда форсирует разрыв страницы перед (после, внутри) генерируемого бокса. avoid Исключает разрыв страницы перед (после, внутри) генерируемого бокса. left Форсирует один или два разрыва страницы перед (после, внутри) генерируемого бокса, так что следующая страница форматируется как левая страница. right Форсирует один или два разрыва страницы перед (после, внутри) генерируемого бокса, так что следующая страница форматируется как правая страница. Потенциально размещение разрыва страницы находится под влиянием свойства 'page-break-inside' родительского элемента, свойства 'page-break-after' предыдущего элемента и свойства 'page-break-before' последующего элемента. Если эти свойства имеют значения, отличные от 'auto', то значения 'always', 'left' и 'right' получают преимущество перед 'avoid'.
    См. в разделе о допустимых разрывах страниц точные правила того, как эти свойства могут форсировать или подавлять разрыв страницы.

    Разрывы страниц

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

    Разрывы внутри элементов 'orphans' 'widows'

    13.3.3 Разрывы внутри элементов: 'orphans', 'widows'

    'orphans'
    Значение: | inherit
    Начальное:2
    Применяется:к элементам уровня блока
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный, страничный
    'widows'
    Значение: | inherit
    Начальное:2
    Применяется: к элементам уровня блока
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный, страничный
    Свойство 'orphans' специфицирует минимальное количество строк параграфа, которые должны оставаться внизу страницы. Свойство 'widows' специфицирует минимальное количество строк параграфа, которые должны оставаться вверху страницы. Примеры того, как они используются для управления разрывами страниц, даны ниже.
    Информацию о форматировании параграфов см. в разделе Строчные боксы.

    Реальные значения


    6.1.3 Реальные значения

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

    Эта спецификация определяет Каскадные таблицы


    Резюме

    Эта спецификация определяет Каскадные таблицы Стилей, уровень 2 (CSS2). CSS2 - это язык таблиц стилей, позволяющий авторам и пользователям подключать стили (например, шрифты, пробелы и звуковые сигналы) в структурированные документы (например, документы HTML и приложения XML). CSS2 упрощает создание и обслуживание Web-сайта путём разделения структуры и стиля представления документов.
    CSS2 построен на основе CSS1 (см. [CSS1]), и, с очень небольшими исключениями, все таблицы стилей CSS1 остаются действующими в CSS2. CSS2 поддерживает таблицы для конкретных носителей, так что авторы могут создавать представление своих документов для визуальных браузеров, звуковых устройств, принтеров, брайль-устройств, ручных портативных устройств и т.д. Данная спецификация поддерживает также позиционирование содержимого, загружаемые шрифты, отображение таблиц, возможности интернационализации, автоматические счётчики и нумерацию и некоторые свойства, относящиеся к пользовательскому интерфейсу.

    Sansserif

    sans-serif

    Глифы шрифтов sans-serif, в терминах CSS, имеют закруглённые ровные окончания - без засечек и каких-либо других орнаментаций. Шрифты Sans-serif обычно пропорциональны. Они часто имеют отклонения между тонкими и толстыми закруглениями, сравнимые со шрифтами семейства 'serif'. CSS использует термин 'sans-serif' для применения со шрифтом любого письма, хотя для некоторых видов письма могут применяться другие наименования, как Gothic (японский), Kai (китайский) или Pathang (корейский). Любой шрифт, описанный таким образом, может использоваться для представления общего семейства 'sans-serif'.
    Примеры шрифтов, удовлетворяющих этому описанию:
    Латинские шрифты MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
    Греческие Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
    Кириллические Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
    Еврейские Arial Hebrew, MS Tahoma
    Японские Shin Go, Heisei Kaku Gothic W5
    Арабские MS Tahoma


    Счётчики в элементах с 'display none'

    12.5.3 Счётчики в элементах с 'display: none'

    Элемент, который не отображается ('display' установлено в 'none'), не может установить или сбросить счётчик.
    Пример(ы):
    С помощью следующей таблицы стилей элементы H2 с классом "secret" не увеличивают 'count2'. H2.secret {counter-increment: count2; display: none}
    В то же время, элементы с 'visibility', установленной в 'hidden', увеличивают счётчики.

    Счётчики


    4.3.5 Счётчики

    Счётчики обозначаются идентификаторами (см. свойства 'counter-increment' и 'counter-reset'). Чтобы обратиться к значению счётчика, используется обозначение 'counter()' или 'counter(, )'. Стиль по умолчанию - 'decimal'.
    Чтобы обратиться к последовательности вложенных счётчиков с одним именем, обозначение будет: 'counters(, )' или 'counters(, , )'. См. "Вложенные счётчики и область видимости" в главе о генерируемом содержимом.
    В CSS2 к значениям счётчиков можно обратиться только из свойства 'content'. Заметьте, что 'none', это возможный : 'counter(x, none)' рассматривается как пустая строка.
    Пример(ы):
    Вот таблица стилей, нумерующая параграфы (P) для каждой главы (H1). Параграфы нумеруются римскими цифрами с последующими точкой и пробелом: P {counter-increment: par-num} H1 {counter-reset: par-num} P:before {content: counter(par-num, upper-roman) ". "}
    Счётчики вне области видимости какого-либо 'counter-reset', считаются сброшенными в 0 в 'counter-reset' корневого элемента.

    Селекторы атрибутов

    5.8 Селекторы атрибутов

    CSS2 позволяет авторам специфицировать правила, которые определяют совпадение атрибутов, определённых в документе-источнике.

    Селекторы дочерних элементов

    5.6 Селекторы дочерних элементов

    Селектор дочерних элементов совпадает, если элемент является дочерним относительно другого элемента. Селектор дочерних элементов состоит из двух или более селекторов, разделённых символом ">".
    Пример(ы):
    Это правило устанавливает стиль всех элементов P, являющихся дочерними относительно BODY:
    BODY > P { line-height: 1.3 } Пример(ы):
    Здесь сочетаются селекторы потомков и селекторы дочерних элементов:
    DIV OL>LI P Здесь селектор совпадает с элементом P, являющимся потомком LI; элемент LI обязан быть дочерним относительно элемента OL; элемент OL обязан быть потомком DIV.
    Обратите внимание, что необязательные пробелы вокруг комбинатора ">" опущены.
    Информацию о выборе первого дочернего элемента данного элемента см. ниже в разделе о псевдоклассе :first-child.

    Селекторы ID


    5.9 Селекторы ID

    Языки документов могут содержать атрибуты, которые объявлены как имеющие тип ID. Особенностью атрибутов типа ID является то, что они могут иметь одно значение; независимо от языка документа, атрибут ID может использоваться для уникальной идентификации элемента. В HTML все атрибуты ID именуются "id"; приложения XML могут именовать атрибуты ID по-разному, но с применением одинаковых ограничений.
    Атрибут ID языка документа позволяет авторам назначать идентификатор объекту элемента в дереве документа. В CSS ID-селекторы совпадают с объектом элемента на базе идентификатора. ID-селектор CSS содержит "#" непосредственно перед значением ID.
    Пример(ы):
    Следующий ID-селектор совпадает с элементом H1, чей атрибут ID имеет значение "chapter1":
    H1#chapter1 { text-align: center } В следующем пример правило таблицы стилей устанавливает совпадение элементом, чьё значение ID - "z98y". Правило, таким образом, совпадает для элемента P:
    Match P

    Wide text
    В следующем пример, однако, правило стиля совпадает только с тем элементом H1, который имеет значение ID - "z98y". Правило в этом примере не совпадает с элементом P:
    Match H1 only

    Wide text
    ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML селектор #p123 более специфичен, чем [ID=p123], в терминах каскада.
    Примечание. В XML 1.0 [XML10] информация о том, какой атрибут содержит ID-ы элемента, находится в ОТД. При разборе XML, ПА не всегда читают ОТД и поэтому могут не знать, какой ID у элемента. Если дизайнер таблицы стилей знает или предполагает, что это именно данный случай, он должен использовать нормальные селекторы атрибутов: [name=p371] вместо #p371. Однако каскадный порядок нормальных селекторов атрибутов отличается от ID-селекторов. Может понадобиться добавить приоритет "!important" в объявления: [name=p371] {color: red ! important}. Конечно, элементы в документах XML 1.без ОТД не имеют ID-ов вообще.

    Селекторы класса


    5.8.3 Селекторы класса

    В таблицах стилей, используемых в HTML, авторы могут употреблять точку (.) как альтернативу "~=" при совпадении с атрибутом "class". Таким образом, в HTML "DIV.value" и "DIV[class~=value]" имеют одно значение. Значение атрибута обязано следовать сразу за ".".
    Пример(ы):
    Мы можем назначить стилевую информацию всем элементам class~="pastoral" следующим образом:
    *.pastoral { color: green } /* все элементы с class~=pastoral */ или просто .pastoral { color: green } /* все элементы с class~=pastoral */ Следующее - назначает стиль только элементам H1 с class~="pastoral":
    H1.pastoral { color: green } /* элементы H1 с class~=pastoral */ При назначении эти правил первое вхождение H1 ниже не имеет зелёного цвета текста, а второе - имеет:

    Not green

    Very green

    Чтобы совпасть с поднабором значений "class", каждое значение обязано иметь предшествующую ".".
    Пример(ы):
    Следующее правило совпадает с любым элементом P, чей атрибут "class" сопоставлен списку разделённых пробелами значений "pastoral" и "marine":
    P.pastoral.marine { color: green } Правило совпадает, если class="pastoral blue aqua marine", но не совпадает class="pastoral blue".
    Примечание. CSS даёт такую мощь атрибуту "class", что авторы могут создавать свои собственные "языки документа" на базе элементов с почти не ассоциированным представлением (таких как DIV и SPAN в HTML) и назначать стилевую информацию через атрибут "class". Авторам следует избегать такой практики, поскольку структурные элементы языка документа часто имеют распознаваемые и принимаемые значения, а классы, определённые авторами - не могут.

    Селекторы потомков

    5.5 Селекторы потомков

    Авторам может понадобиться, чтобы селекторы совпадали с элементом, который является потомком другого элемента в дереве документа (например, "Совпадать с теми элементами EM, которые содержаться в элементе H1"). Селекторы потомков выражают следующие взаимоотношения в патэрн. Селектор потомков состоит из двух или более селекторов, разделённых пробелами. Селектор потомков "A B" совпадает, если элемент B является произвольным потомком некоторого элемента-предка A.
    Пример(ы):
    Рассмотрим следующие правила:
    H1 { color: red } EM { color: red } Хотя смысл этих правил в том, чтобы выделять текст путём изменения его цвета, в следующем случае эффект не будет достигнут:

    This headline is very important

    В этом случае мы дополняем предыдущие правила правилом, которое устанавливает голубой цвет текста, если EM появляется где-либо внутри H1:
    H1 { color: red } EM { color: red } H1 EM { color: blue } Третье правило совпадёт с элементом EM в следующем фрагменте:

    This headline is very important

    Пример(ы):
    Следующий селектор:
    DIV * P совпадает с элементом P, который является внуком, или позднейшим потомком, элемента DIV. Обратите внимание на пробелы с каждой стороны от "*".
    Пример(ы):
    Селектор в следующем правиле, сочетающий селекторы потомка и атрибута, совпадает с любым элементом, имеющим (1) установленный атрибут "href" и (2) находящимся внутри P, который сам находится внутри DIV:
    DIV P *[href]

    Селекторы столбцов


    17.3 Селекторы столбцов

    Ячейки таблиц могут принадлежать к двум контекстам: рядам и столбцам. Однако в документе-источнике ячейки являются потомками рядов и никогда - столбцов. Несмотря на это, некоторые аспекты ячеек могут вводиться установкой свойств столбцов.
    Следующие свойства применяются к элементам столбцов и групп столбцов: 'border' Различные свойства рамки применяются к столбцам только тогда, когда 'border-collapse' в элементе таблицы установлен в 'collapse'. В таком случае, рамки, установленные для столбца и группы столбцов, являются источником алгоритма разрешения конфликтов, который выбирает стили рамки для каждого края ячейки. 'background' Свойства фона устанавливают фон для ячеек в столбце, но только если и ячейка, и ряд имеют прозрачный фон. См. Слои и прозрачность таблицы. 'width' Свойство 'width' задаёт минимальную ширину столбца. 'visibility' Если 'visibility' столбца установлено в 'collapse', ни одна из ячеек столбца не отображается, и ячейки, захватывающие другие столбцы, усекаются. В дополнение к этому, ширина таблицы уменьшается до ширины столбца, содержащегося в ней. См. ниже Динамические эффекты. Другие значения 'visibility' не оказывают никакого действия.
    Пример(ы):
    Вот примеры некоторых правил таблиц стилей, устанавливающих свойства столбцов.
    Первые два правила вместе выполняют атрибут "rules" HTML 4.0 со значением "cols". Третье правило делает столбец "totals" голубым, а последние два правила показывают, как установить для столбца фиксированный размер, используя фиксированный алгоритм вывода. COL { border-style: none solid } TABLE { border-style: hidden } COL.totals { background: blue } TABLE { table-layout: fixed } COL.totals { width: 5em }

    Селекторы типа


    5.4 Селекторы типа

    Селектор типа совпадает с именем типа элемента языка документа. Селектор типа совпадает с каждым вхождением типа элемента в дереве документа.
    Пример(ы):
    Следующее правило совпадает со всеми элементами H1 в дереве документа:
    H1 { font-family: sans-serif }

    Селекторы

    5. Селекторы

    Содержание
  • 5.1 Блоки символов для подстановки
  • 5.2 Синтаксис селектора
  • 5.2.1 Группирование
  • 5.3 Универсальный селектор
  • 5.4 Селекторы типа
  • 5.5 Селекторы потомков
  • 5.6 Селекторы дочерних элементов
  • 5.7 Смежные селекторы родственники
  • 5.8 Селекторы атрибутов
  • 5.8.1 Совпадение атрибутов и их значений
  • 5.8.2 Значения по умолчанию для атрибутов в ОТД
  • 5.8.3 Селекторы класса
  • 5.9 Селекторы ID
  • 5.10 Псевдоэлементы и псевдоклассы
  • 5.11 Псевдоклассы
  • 5.11.1 Псевдокласс :first-child
  • 5.11.2 Псевдоклассы гиперссылки :link и :visited
  • 5.11.3 Динамические псевдоклассы :hover, :active и :focus
  • 5.11.4 Псевдокласс языка :lang
  • 5.12 Псевдоэлементы
  • 5.12.1 Псевдоэлемент :first-line
  • 5.12.2 Псевдоэлемент :first-letter
  • 5.12.3 Псевдоэлементы :before и :after


    • Семейство шрифтов свойство 'fontfamily'


    15.2.2 Семейство шрифтов: свойство 'font-family'

    'font-family'
    Значение:[[ | ],]* [ | ] | inherit
    Начальное: зависит от ПА
    Применяется: ко всем элементам
    Наследуется:да
    Процентное: N/A
    Носитель: визуальный
    Это свойство специфицирует приоритетный список имён семейств шрифтов и/или названий родовых семейств. Для решения проблем отсутствия в одном конкретном шрифте глифов для отображения всех символов документа или недоступности конкретных шрифтов в конкретной системе, данное свойство позволяет авторам специфицировать список шрифтов одного и того же стиля и размера, которые (шрифты) рассматриваются последовательно, чтобы определить, содержат ли они глиф конкретного символа. Это называется набор шрифтов.
    Пример(ы):
    Например, для отображения текста, содержащего смесь английских и математических символов, может потребоваться набор из двух шрифтов: один с латинскими символами и цифрами, другой - с математическими символами. Вот пример набора шрифтов, подходящих для отображения текста, содержащего латинские, японские и математические символы: BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
    Латинские символы будут взяты из шрифта "Baskerville", японские глифы - из "Heisi Mincho W3", а глифы математических символов - из "Symbol". Все другие будут браться из общего семейства шрифтов 'serif'.
    Общие семейства шрифтов используются, если один или более шрифтов из набора шрифтов недоступны. Хотя во многих шрифтах есть глиф "отсутствующий символ", обычно это пустой квадрат, он как правило не выводится, если только это не последний шрифт набора шрифтов.
    Есть два типа имён семейств шрифтов:
    /Имя семейства Имя семейства шрифтов по выбору. В предыдущем примере "Baskerville", "Heisi Mincho W3" и "Symbol" являются семействами шрифтов. Имена семейств шрифтов, содержащие пробелы, должны заключаться в кавычки. Если кавычки отсутствуют, любые символы пробела до и после имени шрифта игнорируются, а любая последовательность пробелов внутри имени шрифта конвертируется в одиночный пробел. /Родовое (общее) семейство Определены следующие родовые семейства: 'serif', 'sans-serif', 'cursive', 'fantasy' и 'monospace'. См. описание этих семейств в разделе родовые семейства шрифтов. Имена родовых семейств являются ключевыми словами и не обязательно должны заключаться в кавычки.Авторам рекомендуется предлагать родовое семейство шрифтов в качестве последней альтернативы, для надёжности.
    Например: Font test

    Test

    What's up, Doc?
    Пример(ы):
    Обогащённый синтаксис выбора в CSS2 можно использовать для создания печати, чувствительной к языку. Например, некоторые китайские и японские символы унифицированы для того, чтобы использовать одну и ту же точку кода в Unicode, хотя абстрактные глифы - разные в этих двух языках. *:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif } *:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif }
    Здесь выбирается любой элемент соответствующего языка - японского или традиционного китайского - и запрашивается соответствующий шрифт.

    Serif

    serif

    Глифы шрифтов serif, в терминах CSS, имеют изгибы на концах, зауженные концы или засечки на концах (включая выгнутые засечки). Шрифты Serif обычно пропорциональны. Они обычно отображают бoльшие отличия между тонкими и толстыми штрихами, нежели шрифты общего семейства 'sans-serif'. CSS использует термин 'serif' для применения со шрифтом любого письма, хотя для некоторых видов письма могут применяться другие наименования, как Mincho (японский), Sung или Song (китайский), Totum или Kodig (корейский). Любой шрифт, описанный таким образом, может использоваться для представления общего семейства 'serif'.
    Вот примеры шрифтов, удовлетворяющих этому описанию:
    Латинские шрифты Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
    Греческие Bitstream Cyberbit
    Кириллические Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
    Еврейские New Peninim, Raanana, Bitstream Cyberbit
    Японские Ryumin Light-KL, Kyokasho ICA, Futo Min A101
    Арабские Bitstream Cyberbit
    Шрифты Чероки Lo Cicero Cherokee


    Схемы позиционирования


    9.3 Схемы позиционирования

    В CSS2 бокс может находиться в разных слоях в соответствии со схемами позиционирования:
  • Normal flow/Нормальное расположение. В CSS2 нормальное расположение включает форматирование блока для боксов блока, инлайн-форматирование для инлайн-боксов, относительное позиционирование боксов блока или инлайн и позиционирование compact и run-in боксов.
  • Floats/Поплавки. В модели поплавка бокс сначала накладывается в соответствии с нормальным расположением, затем изымается из расположения и сдвигается влево или вправо, насколько возможно. Содержимое может обтекать по стороне "всплывания" поплавка.
  • Абсолютное позиционирование. В модели абсолютного позиционирования бокс удаляется из нормального расположения полностью (это не действует на последующие родственные элементы) и получает позиционирование относительно содержащего блока.
    • Примечание. Схемы позиционирования CSS2 помогают авторам сделать документы более доступными, позволяя избегать трюков разметки (например, невидимых изображений), используемых для создания эффектов отображения.

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


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

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

    Ширина горизонтальной основы


    15.4.8 Ширина горизонтальной основы

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

    Ширина рамки 'bordertopwidth'


    8.5.1 Ширина рамки: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' и 'border-width'

    Свойства ширины рамки специфицируют ширину области рамки. Свойства, определённые в этом разделе, относятся к типу значений , который может устанавливаться в:
    thin Тонкая рамка. medium Средняя рамка. thick Толстая рамка. Толщина рамки имеет точное значение. Это значение не может быть негативным. Интерпретация первых трёх значений зависит от ПА. Следующие соотношения, однако, обязаны выдерживаться:
    'thin' <='medium' <= 'thick'.
    К тому же эти значения ширины обязаны быть константными в пределах документа. 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
    Значение: | inherit
    Начальное:medium
    Применяется:ко всем элементам
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный

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

    Это сокращённое свойство для установки 'border-top-width', 'border-right-width', 'border-bottom-width' и 'border-left-width' в одном месте в таблице стилей.
    Если имеется одно значение, то оно применяется ко всем сторонам. Если дано два значения, верхняя и нижняя линии рамки устанавливаются в первое, а правая и левая линии рамки - во второе значение. Если дано три значения, верхняя линия рамки устанавливается в первое, левая и правая - во второе, а нижняя линия рамки - в третье значение. Если задано четыре значения, они применяются к верхней, правой, нижней и левой линиям рамки соответственно.
    Пример(ы):
    Комментарии в данном примере поясняют результаты установки ширины верхней, правой, нижней и левой линий рамки: H1 { border-width: thin } /* thin thin thin thin */ H1 { border-width: thin thick } /* thin thick thin thick */ H1 { border-width: thin thick medium } /* thin thick medium thick */

    Ширина содержимого свойство 'width'

    'width'
    Значение: | | auto | inherit
    Начальное:auto
    Применяется:ко всем элементам, кроме незамещаемых инлайн-элементов, рядов таблиц и групп рядов
    Наследуется:нет
    Процентное:относительно ширины содержащего блока
    Носитель:визуальный
    Это свойство специфицирует ширину содержимого боксов, генерируемых элементами уровня блока и замещаемыми элементами.
    Это свойство не применяется к незамещаемым элементам инлайн-уровня. Ширина боксов незамещаемых инлайн-элементов, это ширина отображаемого внутри них содержимого (до любого относительного смещения дочерних элементов). Напоминаем, что инлайн-боксы всплывают внутри строчных боксов. Ширина строчных боксов задаётся их содержащим блоком, Но может быть уменьшена при наличии поплавков.
    Ширина бокса замещаемого элемента является внутренней и может масштабироваться ПА, если значение этого свойства отличается от 'auto'.
    Значения имеют следующий смысл: Специфицирует фиксированную ширину. Специфицирует ширину в процентах. Проценты вычисляются относительно ширины содержащего блока генерируемого бокса. auto Ширина зависит от значений других свойств. См. следующие разделы.
    Отрицательные значения для 'width' не допускаются.
    Пример(ы):
    Это правило фиксирует ширину содержимого параграфа в 100 пикселов:
    P { width: 100px }

    Ширина вертикальной основы


    15.4.19 Ширина вертикальной основы

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

    Шрифты

    15. Шрифты

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


    • Символы и регистр

    4.1.3 Символы и регистр

    Следующие правила всегда соблюдаются:
  • Все таблицы стилей CSS нечувствительны к регистру, за исключением тех частей, которые не контролируются CSS. Например, чувствительность к регистру значений атрибутов "id" и "class", имён шрифтов и URI в HTML находится вне пределов действия этой спецификации. Особо отметьте, что имена элементов нечувствительны к регистру в HTML, но чувствительны в XML.
  • В CSS2 идентификаторы (включая имена элементов, классы и ID в селекторах) могут содержать только символы [A-Za-z0-9] и символы ISO 10646 от 161 и выше и дефис (-); они не могут начинаться с дефиса или цифры. Они могут также содержать escape-последовательности и любые символы и цифровые коды ISO 10646 (см. далее). Например, идентификатор "B&W?" можно записать как "B\&W\?" или "B\26 W\3F". Заметьте, что Unicode это покодовый эквивалент ISO 10646 (см. [UNICODE] и [ISO10646]).
  • В CSS2 символ обратного слэша (\) обозначает три типа символов - escape-последовательностей.1. В строке обратный слэш, после которого идёт новая строка, игнорируется (т.е. считается, что строка не содержит ни обратных слэшей, ни переводов строки).
    2. Отменяет значение специальных символов CSS. Любой символ (исключая 16-ричные числа) может войти в escape-последовательность с помощью обратного слэша для отмены своего специального значения. Например, "\"" это строка. состоящая из одной двойной кавычки. Препроцессоры таблиц стилей обязаны не удалять эти слэши из таблиц стилей до тех пор, пока они не изменят значения таблицы стилей.
    3. Escape-последовательности с обратным слэшем позволяют авторам обращаться к символам, которые не могут быть напрямую помещены в документ. В таких случаях используется обратный слэш, после которого идут не более шести 16-ричных цифр (0..9A..F), что соответствует символам ISO 10646 ([ISO10646]) с этим числом. Если после 16-ричного числа идёт цифра или буква, то конец числа должен быть очищен. Есть два способа сделать это:
  • пробел (или иной символ пробела): "\26 B" ("&B")
  • предоставление точного 16-ричного числа из шести цифр: "\000026B" ("&B") Фактически эти два метода можно комбинировать. Только один символ пробела игнорируется после 16-ричной escape-последовательности. Заметьте, что это означает, что "реальный" пробел после escape-последовательности обязан или сам быть выражен с использованием escape-последовательности, или удвоен.
  • Escape-последовательности с обратным слэшем всегда рассматриваются как часть идентификатора или строки (т.е. "\7B" это не пунктуация, а "{" - она, и "\32" допускается в начале имени класса, а "2" - нет).


    • Синтаксис CSS и базовые типы данных

    4. Синтаксис CSS2 и базовые типы данных

    Содержание
  • 4.1 Синтаксис
  • 4.1.1 Лексический разбор
  • 4.1.2 Ключевые слова
  • 4.1.3 Символы и регистр
  • 4.1.4 Операторы
  • 4.1.5 at-правила (at-rules)
  • 4.1.6 Блоки
  • 4.1.7 Наборы правил, блоки объявлений и селекторы
  • 4.1.8 Объявления и свойства
  • 4.1.9 Комментарии
  • 4.2 Правила обработки ошибок грамматического разбора
  • 4.3 Значения
  • 4.3.1 Целые и вещественные числа
  • 4.3.2 Размеры
  • 4.3.3 Процентные
  • 4.3.4 URL + URN = URI
  • 4.3.5 Счётчики
  • 4.3.6 Цвета
  • 4.3.7 Угловые значения
  • 4.3.8 Время
  • 4.3.9 Частоты
  • 4.3.10 Строки
  • 4.4 Представление документа CSS
  • 4.4.1 Мнемоники символов, не представленных в кодировке


    • Синтаксис селектора


    5.2 Синтаксис селектора

    Простой селектор - селектор типа или универсальный селектор, непосредственно после которого идёт ноль или более селекторов атрибутов, селекторов ID или псевдоклассов в любом порядке. Простой селектор совпадает, если совпадают все его компоненты.
    Селектор это цепь из одного или более простых селекторов, разделённых комбинаторами. Комбинаторами являются: пробелы, ">" и "+". Пробелы могут появляться между комбинатором и простыми селекторами вокруг него.
    Элементы дерева документов, совпадающие с селектором, называются субъектами селектора. Селектор, состоящий из одного простого селектора, совпадает с любым элементом, удовлетворяющим его условиям. Предопределённость простого селектора и комбинатора в цепи вызывает дополнительные ограничения для совпадения, так что субъекты селектора всегда являются поднабором элементов, совпадающим с самым правым простым селектором.
    Один псевдоэлемент может быть присоединён к последнему простому селектору в цепи, и в этом случае информация стиля применяется к подразделу каждого субъекта.

    В этом разделе описывается грамматика

    В этом разделе описывается грамматика (и правила вперёд-совместимого разбора), общие для любой версии CSS (включая CSS2). Будущие версии CSS будут придерживаться этого ядра синтаксиса, хотя и могут ввести дополнительные синтаксические ограничения.
    Эти описания являются нормативными. Они также дополняются нормативными грамматическими правилами в Приложении D.

    Слои и прозрачность таблицы

    17.5.1 Слои и прозрачность таблицы

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

    Слои

    В последующих разделах выражение "спереди от" означает ближе к пользователю, смотрящему на экран.
    В CSS2 каждый бокс имеет позицию в трёх измерениях. В дополнение к позиции относительно вертикали и горизонтали, боксы расположены вдоль "z-axis/оси z" и форматируются один над другим. Позиции по оси z обычно рассматриваются, когда боксы перекрываются визуально. В этом разделе обсуждается, как боксы можно позиционировать относительно оси z.
    Каждый бокс принадлежит к контексту стэка. Каждый бокс в данном контексте стэка имеет целочисленный уровень стэка, являющийся позицией бокса по оси z относительно других боксов того же самого контекста стэка. Боксы с большим уровнем стэка всегда форматируются перед боксами с меньшим уровнями стэка. Боксы могут иметь отрицательные значения уровня стэка. Боксы, имеющие тот же уровень в контексте стэка, упакованы снизу-вверх в соответствии с порядком дерева документа.
    Корневой элемент создаёт корневой контекст стэка, но другие элементы могут устанавливать локальные контексты стэка. Контексты стэка наследуются. Локальный контекст стэка первичен; боксы других контекстов стэка не могут появляться между его боксами.
    Элемент, устанавливающий локальный контекст стэка, генерирует бокс, который имеет два уровня стэка: один для контекста создаваемого стэка (всегда '0') и второй для контекста стэка, к которому он (бокс) принадлежит (задаваемый свойством 'z-index').
    Бокс элемента имеет тот же уровень стэка, что и его бокс-родитель, если только не задан другой уровень стэка свойством 'z-index'.

    Смежные селекторыродственники


    5.7 Смежные селекторы-родственники

    Смежные селекторы-родственники имеют следующий синтаксис: E1 + E2, где E2 является субъектом селектора. Селектор совпадает, если E1 и E2 имеют одного общего предка в дереве документа и E1 непосредственно предшествует E2.
    В определённых контекстах смежные элементы генерируют форматированные объекты, чьё представление обрабатывается автоматически (например, сжатие вертикальных полей между смежными боксами). Селектор "+" позволяет авторам специфицировать дополнительный стиль для смежных элементов.
    Пример(ы):
    Так, следующее правило указывает, что если элемент P следует непосредственно за элементом MATH, то он не должен учитываться:
    MATH + P { text-indent: 0 } Следующий пример уменьшает вертикальное пространство, разделяющее H1 и H2:
    H1 + H2 { margin-top: -5mm } Пример(ы):
    Следующее правило аналогично одному из вышеприведённых примеров, за исключением того, что оно добавляет селектор атрибута. Таким образом, специальное форматирование возникает только тогда, когда H1 имеет class="opener":
    H1.opener + H2 { margin-top: -5mm }

    Содержащие блоки


    9.1.2 Содержащие блоки

    В CSS2 многие варианты позиционирования и размеры вычисляются относительно кромки прямоугольного бокса, называемого содержащий блок. Обычно генерируемые боксы действуют как содержащие блоки для боксов-потомков; мы говорим, что бокс "устанавливает" содержащий блок для своих потомков. Фраза "блок, содержащий бокс" означает "блок, в котором бокс находится", а не блок, генерирующий бокс.
    Каждый бокс имеет позицию относительно содержащего блока, но не ограничен этим блоком и может вызвать переполнение.
    Корневой элемент дерева документа генерирует бокс, который служит начальным содержащим блоком для последующего вывода.
    Ширина начального содержащего блока может быть специфицирована свойством 'width' корневого элемента. Если это свойство имеет значение 'auto', ПА предоставляет начальное значение ширины (например, ПА использует текущую ширину порта просмотра).
    Высота начального содержащего блока может быть специфицирована свойством 'height' корневого элемента. Если это свойство имеет значение 'auto', высота содержащего блока увеличивается, чтобы приспособиться к содержимому документа.
    Начальный содержащий блок не может быть позиционирован или всплывать (т.е. ПА игнорируют свойства 'position' и 'float' корневого элемента).
    Детали того, как высчитываются размеры содержащего блока, описаны в следующей главе.

    Содержимое вне страничного бокса


    13.2.5 Содержимое вне страничного бокса

    При форматировании содержимого модели страницы, часть содержимого может выйти за границы страничного бокса. Например, элемент, чьё свойство 'white-space' имеет значение 'pre', может генерировать бокс, который окажется шире страничного бокса. Также, если боксы позиционированы абсолютно, они могут оканчиваться в "несогласованном" месте. Например, изображения могут быть размещены у края страничного бокса или на 100,000 дюймов ниже страничного бокса.
    Спецификация точного форматирования таких элементов находится вне пределов рассмотрения данного документа. Однако мы рекомендуем, чтобы авторы и ПА учитывали следующие общие принципы, касающиеся содержимого вне страничного бокса:
  • Содержимое должно допускаться немного позади страничного бокса, чтобы страницы слегка "сочились".
  • ПА должны исключить генерирование большого количества пустых страничных боксов для позиционирования элементов (например, Вы не захотите печатать 100 пустых страниц). Заметьте, однако, что генерирование небольшого количества пустых страничных боксов может понадобиться для значений 'left' и 'right' в 'page-break-before' и 'page-break-after'.
  • Авторы не должны позиционировать элементы в несогласованных местах в целях исключения их вывода. Вместо этого нужно:
  • Чтобы в целом уменьшить генерацию боксов, установить свойство 'display' в 'none'.
  • Чтобы сделать бокс невидимым, использовать свойство 'visibility'.
  • ПА могут обрабатывать боксы, расположенные вне страничного бокса, разными способами, в том числе - отбрасывая их или создавая для них страничные боксы в конце документа.


    • Сокращение для свойств шрифта свойство 'font'


    15.2.5 Сокращение для свойств шрифта: свойство 'font'

    'font'
    Значение:[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
    Начальное:см. конкретные свойства
    Применяется:ко всем элементам
    Наследуется:да
    Процентное:допускается в 'font-size' и 'line-height'
    Носитель:визуальный
    Свойство 'font', за исключением случаев, описанных ниже, является сокращённым значением свойств установок 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' и 'font-family' в том же месте таблицы стилей. Синтаксис этого свойства базируется на традиционной типографской нотации сокращений для установки нескольких свойств шрифта.
    Все свойства, относящиеся к шрифтам, сначала устанавливаются в свои начальные значения, включая перечисленные в предыдущих параграфах, плюс 'font-stretch' и 'font-size-adjust'. Затем свойства, для которых заданы явные значения в 'font', устанавливаются в эти значения. Для определения допустимых и начальных значений см. ранее определённые свойства. Для обеспечения обратной совместимости нельзя устанавливать 'font-stretch' и 'font-size-adjust' в иные, нежели начальные, значения, используя свойство 'font'; вместо этого установите индивидуальные свойства.
    Пример(ы):
    P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "new century schoolbook", serif } P { font: bold italic large Palatino, serif } P { font: normal small-caps 120%/120% fantasy } P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed } Во втором правиле процентное значение размера шрифта ('80%') относится к размеру шрифта родительского элемента. В третьем правиле высота строки в процентах ('110%') относится к размеру шрифта самого элемента.
    Первые три правила не специфицируют 'font-variant' и 'font-weight' явно, поэтому эти свойства получают свои начальные значения ('normal'). Обратите внимание, что имя семейства шрифтов "new century schoolbook", содержащее пробелы, заключено в кавычки. Четвёртое правило устанавливает 'font-weight' в 'bold', 'font-style' - в 'italic' и неявно устанавливает 'font-variant' в 'normal'.
    Пятое правило устанавливает 'font-variant' ('small-caps'), 'font-size' (120% размера шрифта предка), 'line-height' (120% размера шрифта) и 'font-family' ('fantasy'). Из этого следует, что ключевое слово 'normal' применяется к двум оставшимся свойствам: 'font-style' и 'font-weight'.
    Шестое правило устанавливает 'font-style', 'font-size' и 'font-family', другие свойства шрифта в свои начальные значения. Оно затем устанавливает 'font-stretch' в 'condensed', поскольку это свойство не может быть установлено в это значение путём использования сокращённого свойства 'font'.
    Следующие значения относятся к системным шрифтам:
    caption Шрифт используется для именования элементов управления (ЭУ) (напр., кнопок, выпадающих боксов и меню и т.п.). icon Шрифт используется для лэйблов иконок. menu Шрифт используется в меню (напр., выпадающих меню и списках). message-box Шрифт используется в диалоговых боксах. small-caption Шрифт используется для лэйблов небольших ЭУ. status-bar Шрифт используется для строки состояния окна. Системные шрифты могут устанавливаться только полностью, то есть: семейство шрифта, размер, вес, стиль и т.д. - все устанавливаются одновременно. Эти значения могут быть затем установлены индивидуально, если это необходимо. Если шрифт с указанными характеристиками отсутствует на данной платформе, ПА или должен правильно заменить шрифт (напр., уменьшенная версия шрифта 'caption' может использоваться для шрифта 'smallcaption'), или подставить шрифт ПА по умолчанию. Как и для обычных шрифтов, если любые свойства системного шрифта не являются частью доступных операционной системе установок пользователя, то эти свойства должны быть установлены в свои начальные значения.
    Это является причиной того, почему это свойство - "почти" сокращённое свойство: системные шрифты могут быть специфицированы только этим свойством, но не самим 'font-family', так что 'font' позволяет авторам сделать больше, чем вся сумма его подсвойств. В то же время, индивидуальные свойства, такие как 'font-weight', получают свои значения из системного шрифта, и (свойства) могут независимо варьироваться.
    Примеры(ы):
    BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif } BUTTON P { font: menu } BUTTON P EM { font-weight: bolder } Если шрифт для использования в выпадающих меню в конкретной системе установлен, к примеру, 9-пунктовый Charcoal с весом 600, тогда элементы P - потомки BUTTON будут отображаться так, как если бы действовало правило: BUTTON P { font: 600 9pt Charcoal }
    Поскольку сокращение 'font' устанавливает в начальное значение любое свойство, не получившее явно своего значения, это действие будет равносильно такому объявлению: BUTTON P { font-style: normal; font-variant: normal; font-weight: 600; font-size: 9pt; line-height: normal; font-family: Charcoal }

    Сокращённые формы свойств


    1.3.3 Сокращённые формы свойств

    Некоторые свойства являются сокращёнными свойствами, что означает, что они позволяют авторам специфицировать значения нескольких свойств в одном свойстве.
    Например, свойство 'font' является сокращением для одновременной установки 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' и 'font-family'.
    Если в сокращённом свойстве значения опущены (отсутствуют), каждое "отсутствующее" свойство устанавливается в своё начальное значение (см. раздел Каскад).
    Пример(ы):
    Несколько правил стиля в этом примере:
    H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none } можно записать с помощью одного сокращённого свойства:
    H1 { font: bold 12pt/14pt Helvetica } В этом примере 'font-variant', 'font-stretch', 'font-size-adjust' и 'font-style' получают свои начальные значения.

    Сокращённые свойства рамок 'bordertop' 'borderbottom' 'borderright' 'borderleft' и 'border'


    8.5.4 Сокращённые свойства рамок: 'border-top', 'border-bottom', 'border-right', 'border-left' и 'border'

    'border-top', 'border-right', 'border-bottom', 'border-left'
    Значение:[ <'border-top-width'> || <'border-style'> || ] | inherit
    Начальное:см. индивидуальные свойства
    Применяется: ко всем элементам
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный
    Это сокращённое свойство для установки ширины, стиля и цвета верхней, правой, нижней и левой сторон рамки.
    Пример(ы):
    H1 { border-bottom: thick solid red } Это правило устанавливает ширину, стиль и цвет рамки после элемента H1. Опущенные значения установлены в свои начальные значения. Поскольку нижеследующее правило не специфицирует цвет рамки, рамка будет иметь цвет, определённый свойством 'color': H1 { border-bottom: thick solid } 'border'
    Значение:[ <'border-width'> || <'border-style'> || ] | inherit
    Начальное:см. индивидуальные свойства
    Применяется: ко всем элементам
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный

    Свойство 'border' - это сокращённое свойство для установки одинаковых значений ширины, цвета и стиля для всех четырёх сторон рамки бокса. В отличие от сокращённых свойств 'margin' и 'padding', свойство 'border' не может устанавливать разные значения для четырёх сторон. Для этого придётся использовать одно или более других свойств.
    Пример(ы):
    Первое правило эквивалентно установке четырёх последующих значений: P { border: solid red } P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red }
    Поскольку, в некоторой степени, свойства могут перекрываться, порядок, в котором правила специфицированы, имеет важное значение.
    Пример(ы):
    BLOCKQUOTE { border-color: red; border-left: double; color: black } В приведённом примере цвет левой линии рамки - чёрный, а других линий - красный. Это потому, что в 'border-left' установлены ширина, стиль и цвет. Поскольку значение цвета в свойстве 'border-left' не установлено, оно будет взято из свойства 'color'. Фактически свойство 'color', установленное после свойства 'border-left', не имеет к этому никакого отношения.

    Соотношение между 'display' 'position' и 'float'

    9.7 Соотношение между 'display', 'position' и 'float'

    Три свойства, влияющие на генерацию и структуру бокса -- 'display', 'position' и 'float' -- взаимодействуют так:
  • Если 'display' имеет значение 'none', ПА обязаны игнорировать 'position' и 'float'. В этом случае элемент не генерирует бокса.
  • Иначе, если 'position' имеет значение 'absolute' или 'fixed', 'display' установлен в 'block', а 'float' установлен в 'none'. Позиция бокса будет определяться свойствами 'top', 'right', 'bottom' и 'left' и содержащим блоком бокса.
  • Иначе, если 'float' имеет значение не 'none', 'display' установлен в 'block', и бокс всплывает.
  • Иначе, оставшиеся свойства 'display' применяются так, как специфицированы.
    • Примечание. CSS2 не специфицирует поведение структуры, если значения этих свойств изменяются скриптами. Например, что произойдёт, если элемент, имеющий 'width: auto' изменит позицию? Будет ли перерисовано содержимое или форматирование останется первоначальным? Ответ находится за пределами данного документа, и похоже, что такое поведение отличалось для ранних реализаций CSS2.

    Соответствие Требования и Рекомендации

    3. Соответствие: Требования и Рекомендации

    Содержание
  • 3.1 Определения
  • 3.2 Соответствие
  • 3.3 Ошибочные условия
  • 3.4 Тип содержимого text/css


    • Соответствие


    3.2 Соответствие

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

    Совпадение атрибутов и их значений


    5.8.1 Совпадение атрибутов и их значений

    Селекторы атрибутов могут совпадать четырьмя способами:
    [att] Если элемент устанавливает атрибут "att" с каким-либо значением атрибута. [att=val] Если значение атрибута "att" элемента - точно "val". [att~=val] Если значение атрибута "att" элемента - список разделённых пробелами "слов", одно из которых - "val". Если используется данный селектор, то слова в значении обязаны не содержать пробелов (поскольку они сами разделяются пробелами). [att|=val] Если значения атрибута "att" элемента - список разделённых дефисами "слов", начинающийся с "val". Совпадение всегда стартует от начала значения атрибута. Это принимается во внимание прежде всего для того, чтобы позволить совпасть субкоду языка (например, атрибут "lang" в HTML), как описано в RFC 1766 ([RFC1766]). Значением атрибута обязана быть строка или идентификатор. Чувствительность к регистру имён атрибутов и значений в селекторах зависит от языка документа.
    Пример(ы):
    Следующий селектор атрибута совпадает со всеми элементами H1, которые специфицировали атрибут "title" с любым значением:
    H1[title] { color: blue; } Пример(ы):
    Здесь селектор совпадает со всеми элементами SPAN, чей атрибут "class" имеет значение "example":
    SPAN[class=example] { color: blue; } Несколько селекторов атрибута могут использовать для обращения к различным атрибутам элемента, или даже несколько раз к одному и тому же атрибуту.
    Пример(ы):
    Здесь селектор совпадает со всеми элементами SPAN, чей атрибут "hello" имеет значение "Cleveland" и чей атрибут "goodbye" имеет значение "Columbus":
    SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; } Пример(ы):
    Следующие селекторы иллюстрируют разницу между "=" и "~=". первый селектор совпадает, к примеру, со значением "copyright copyleft copyeditor" атрибута "rel". Второй селектор совпадает только тогда, когда атрибут "href" имеет значение "http://www.w3.org/".
    A[rel~="copyright"] A[href="http://www.w3.org/"] Пример(ы):
    Следующее правило скрывает все элементы, у которых атрибут "lang" имеет значение "fr" (т.е. язык - французский). *[LANG=fr] { display : none }
    Пример(ы):
    Следующее правило совпадает для значений атрибута "lang", начинающихся с "en", включая "en", "en-US" и "en-cockney":
    *[LANG|="en"] { color : red } Пример(ы):
    Таким же образом, следующие правила звуковой таблицы стилей позволяют громко читать скрипт различными для каждой роли голосами:
    DIALOGUE[character=romeo] { voice-family: "Lawrence Olivier", charles, male } DIALOGUE[character=juliet] { voice-family: "Vivien Leigh", victoria, female }

    Специфицированные вычисленные и текущие значения

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

    Специфицированные значения


    6.1.1 Специфицированные значения

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

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

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

    'quotes'
    Значение:[ ]+ | none | inherit
    Начальное:зависит от ПА
    Применяется:ко всем элементам
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный
    Это свойство специфицирует знаки кавычек для любого количества внедрённых закавычиваний. Значения имеют следующий смысл:
    none Значения 'open-quote' и 'close-quote' свойства 'content' не производят знаков кавычек. [ ]+ Значения для 'open-quote' и 'close-quote' свойства 'content' берутся из данного списка пар знаков кавычек (закрывающих и открывающих). Первая (самая левая) пара представляет самый внешний уровень закавычивания, вторая пара - первый уровень внедрения и т.д.
    ПА обязан применять подходящие пары знаков кавычек в соответствии с уровнем внедрения. Пример(ы):
    Применение следующей таблицы стилей:
    /* Специфицируются пары кавычек двух уровней для двух языков */ Q:lang(en) { quotes: '"' '"' "'" "'" } Q:lang(no) { quotes: "«" "»" "<" ">" } /* Вставляются кавычки до и после содержимого элемента Q */ Q:before { content: open-quote } Q:after { content: close-quote } к данному фрагменту HTML:
    Quotes Quote me! позволит ПАгенту выдать:
    "Quote me!" а данный фрагмент HTML:
    Quotes Trøndere gråter når Vinsjan på kaia blir deklamert. выдаст:
    «Trøndere gråter når blir deklamert.» Примечание. Хотя знаки кавычек, специфицированные в 'quotes' предыдущего примера, по соглашению находятся на клавиатурах компьютера, установки для высококачественного вывода потребуют других символов ISO 10646.
    В следующей информативной таблице приведён список некоторых символов кавычек ISO 10646:

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

    код ISO 10646 (hex)

    Описание

    "0022КАВЫЧКА [двойная кавычка ASCII]
    '0027АПОСТРОФ [одиночная кавычка ASCII]
    <2039ОДИНОЧНАЯ ЛЕВАЯ УГЛОВАЯ КАВЫЧКА
    >203AОДИНОЧНАЯ ПРАВАЯ УГЛОВАЯ КАВЫЧКА
    «00ABЛЕВАЯ ДВОЙНАЯ УГЛОВАЯ КАВЫЧКА
    »00BBПРАВАЯ ДВОЙНАЯ УГЛОВАЯ КАВЫЧКА
    `2018ЛЕВАЯ ОДИНОЧНАЯ КАВЫЧКА [single high-6]
    '2019ПРАВАЯ ОДИНОЧНАЯ КАВЫЧКА [single high-9]
    ``201CЛЕВАЯ ДВОЙНАЯ КАВЫЧКА [double high-6]
    ''201DПРАВАЯ ДВОЙНАЯ КАВЫЧКА [double high-9]
    ,,201EДВОЙНАЯ КАВЫЧКА LOW-9 [double low-9]


    Спецификация шрифта

    Первая фаза механизма шрифтов CSS рассматривает, как авторы таблиц стилей специфицируют, какие шрифты должны использоваться ПА. Во-первых очевидно, что можно специфицировать шрифт по имени - строке, разделённой на части, например, "BT Swiss 721 Heavy Italic".
    К сожалению, не существует общепринятой хорошо проработанной и универсальной системы классификации шрифтов по их именам, и терминология, применимая к именам одного семейства шрифтов, может не подходить для других. Например, термин 'italic' обычно используется для обозначения наклонного текста, но наклонный текст может также обозначаться Oblique, Slanted, Incline, Cursive или Kursiv.
    Имена шрифтов обычно содержат термины, описывающие "вес" шрифта. Главной задачей этих имён является различение шрифтов одного семейства по толщине. По этим именам не существует общепринятых значений для указания толщины, и использование этих значений может очень различаться. Например, утолщённый шрифт может описываться как Regular, Roman, Book, Medium, Semi- или Demi-Bold, Bold или Black, в зависимости от того, насколько чёрным является "нормальный" шрифт.
    Этот недостаток систематизации имён делает невозможным, в общем случае, генерацию модифицированного имени шрифта, отличающегося определёнными признаками, такими как "жирность".
    В связи с этим CSS использует другую модель. Шрифты запрашиваются не по имени, а по серии установленных свойств шрифта. Значения этих свойств формируют базис для механизма выбора шрифта в ПА. Свойства шрифта могут модифицироваться по отдельности, например, для увеличения толщины, и новый набор значений свойств шрифта используется затем для выбора из БД шрифтов. В результате повышается надёжность работы авторов и разработчиков таблиц стилей.

    Спецификация таблиц стилей зависимых от типа носителя

    В настоящее время есть два способа специфицировать зависимость от типа носителя в таблицах стилей:
  • Специфицировать целевой носитель из таблицы стилей с помощью at-правил @media или @import. Пример(ы):
    @import url("loudvoice.css") aural; @media print { /* здесь идёт таблица стилей для печати */ }
  • Специфицировать целевой носитель в языке документа. Например, в HTML 4.0 ([HTML40]) атрибут "media" элемента LINK специфицирует целевой носитель для внешней таблицы стилей: Link to a target medium Тело документа...
    • Правило @import определено в главе о каскадах.

    Спецификация уровня в пакете слоёв свойство 'zindex'


    9.9.1 Спецификация уровня в пакете слоёв: свойство 'z-index'

    'z-index'
    Значение:auto | | inherit
    Начальное:auto
    Применяется:к позиционированным элементам
    Наследуется:нет
    Процентное:N/A
    Носитель:визуальный
    Для позиционированных боксов свойство 'z-index' специфицирует:
  • Уровень стэка бокса в текущем контексте стэка.
  • Устанавливает ли бокс локальный контекст стэка.

    • Значения имеют следующий смысл:
    Это целое число - уровень стэка сгенерированного бокса в текущем контексте стэка. Бокс также устанавливает локальный контекст стэка со своим уровнем в стэке '0'. auto Уровень стэка сгенерированного бокса в текущем контексте стэка тот же, что и у бокса-родителя. Бокс не устанавливает новый локальный контекст стэка. В следующем примере уровни стэка боксов (именованных своими атрибутами "id"): "text2"=0, "image"=1, "text3"=2 и "text1"=3. Уровень стэка для "text2" наследуется от корневого бокса. Остальные - специфицируются свойством 'z-index'. Z-позиционирование A butterfly image
    This text will overlay the butterfly image.
    This text will be beneath everything.
    This text will underlay text1, but overlay the butterfly image

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

    Списки свойства 'liststyletype' 'liststyleimage' 'liststyleposition' и 'liststyle'

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

    Свойства списков создают базовое визуальное форматирование списков. Как и с более общими маркёрами, элемент с 'display: list-item' генерирует основной для содержимого элемента и необязательный бокс маркёра. Другие свойства списка позволяют авторам специфицировать тип маркёра (изображение, глиф или цифра) и его позицию относительно основного бокса (вне или внутри него перед содержимым). Они не позволяют авторам специфицировать другие стили (цвет, шрифт, выравнивание и т.п.) для маркёра списка или уточнять его позицию относительно основного бокса.
    Следовательно, если маркёр M (созданный в 'display: marker') используется с элементом списка, созданным в свойстве списка, M замещает стандартный маркёр элемента списка.
    Вместе со свойствами списка свойства фона применяются только к основному боксу; бокс маркёра 'outside' прозрачен. Маркёры дают больший контроль над стилем бокса маркёра.
    'list-style-type'
    Значение:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit
    Начальное:disc
    Применяется: к элементам с 'display: list-item'
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный

    Это свойство специфицирует вид маркёра элемента списка, если 'list-style-image' имеет значение 'none' или если изображение, на которое указывает URI, не может быть отображено. Значение 'none' специфицирует отсутствие маркёров, для других случаев имеются три типа маркёров: глифы, системы нумерации и алфавитные системы. Примечание. Нумерованные списки улучшают доступность документа, т.к. делают списки более удобными для навигации.
    Глифы специфицируются с помощью disc, circle и square. Их точное представление зависит от ПА.
    Системы нумерации специфицируются с помощью:
    decimalДесятеричных чисел, начинающихся с 1. decimal-leading-zero Десятеричных чисел, дополненных начальными нулями (например, 01, 02, 03, ..., 98, 99). lower-roman Римских цифр в нижнем регистре (i, ii, iii, iv, v и т.д.). upper-roman Римских цифр в верхнем регистре (I, II, III, IV, V и т.д.). hebrew Традиционной еврейской нумерации. georgian Традиционной грузинской нумерации (an, ban, gan, ..., he, tan, in, in-an, ...). armenian Традиционной армянской нумерации. cjk-ideographic Простых идеографических чисел. hiragana a, i, u, e, o, ka, ki, ... katakana A, I, U, E, O, KA, KI, ... hiragana-iroha i, ro, ha, ni, ho, he, to, ... katakana-iroha I, RO, HA, NI, HO, HE, TO, ... ПА, не распознающий системы нумерации, должен использовать 'decimal'.
    Примечание. Этот документ не специфицирует точный механизм действия каждой системы нумерации (например, как вычисляются римские цифры). В будущих Примечаниях W3C могут быть даны дальнейшие разъяснения.
    Алфавитные системы специфицируются с помощью:
    lower-latin или lower-alphaБукв ascii нижнего регистра (a, b, c, ... z). upper-latin или upper-alphaБукв ascii верхнего регистра (A, B, C, ... Z). lower-greek Классических греческих букв нижнего регистра альфа, бета, гамма, ... (?, ?, ?, ...) Эта спецификация не определяет то, как происходит перенос алфавитной системы в конце алфавита. Например, после 26 элементов списка представление 'lower-latin' не определено. Поэтому для длинных списков мы рекомендуем, чтобы авторы специфицировали точные числа.
    Например, следующий документ HTML: Нумерация латинскими буквами нижнего регистра
  • Это первый элемент списка.
  • Это второй элемент списка.
  • Это третий элемент списка.
    может дать на выходе: i Это первый элемент списка. ii Это второй элемент списка. iii Это третий элемент списка.
    Обратите внимание, что выравнивание маркёров списка (здесь - по правому краю) зависит от ПА.
    Примечание. Следующие версии CSS могут предоставить более совершенные механизмы международных стилей нумерации. 'list-style-image'
    Значение: | none | inherit
    Начальное:none
    Применяется: к элементам с 'display: list-item'
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный

    Это свойство определяет изображение, которое будет использоваться как маркёр элемента списка. Если изображение доступно, оно замещает маркёр, установленный 'list-style-type'.
    Пример(ы):
    В следующем примере устанавливается маркёр - изображение "ellipse.png" - в начале каждого элемента списка . UL { list-style-image: url("http://png.com/ellipse.png") } 'list-style-position'
    Значение:inside | outside | inherit
    Начальное:outside
    Применяется: к элементам с 'display: list-item'
    Наследуется:да
    Процентное:N/A
    Носитель:визуальный

    Это свойство специфицирует позицию бокса маркёра в основном боксе блока.
    Значения имеют следующий смысл:
    outsideБокс маркёра находится вне основного бокса блока. Примечание. CSS1 не специфицировал точное размещение бокса маркёра из соображений совместимости, и в CSS2 осталась такая же двусмысленность. Для более точного управления боксами маркёров используйте маркёры. inside Бокс маркёра это первый инлайн-бокс в боксе основного блока, после которого всплывает содержимое элемента. Например: Сравнение позиций inside/outside
  • first list item comes first
  • second list item comes second
    • first list item comes first
    • second list item comes second
      Этот пример отображается так:

      Сравнение нормального расположения поплавков и абсолютного позиционирования

      Чтобы проиллюстрировать разницу между нормальным и относительным позиционированием, поплавками и абсолютным позиционированием, мы предлагаем серию примеров на базе следующего фрагмента HTML: Сравнение схем позиционирования Beginning of body contents. Start of outer contents. Inner contents. End of outer contents. End of body contents.

      Для этого документа мы принимаем следующие правила:
      BODY { display: block; line-height: 200%; width: 400px; height: 400px } P { display: block } SPAN { display: inline } Окончательные позиции боксов, генерируемых внешними и внутренними элементами, различны в каждом примере. В каждой иллюстрации числа слева от иллюстрации обозначают позицию нормального позиционирования строк. (Примечание: иллюстрации используют различные горизонтальные и вертикальные масштабы.)

      Ссылки

      Ссылки

      Содержание
    • E.1 Нормативные ссылки
    • E.2 Информативные ссылки


      • Старшинство неCSS подсказок


      6.4.4 Старшинство не-CSS подсказок

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

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


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

      Этот документ был просмотрен Членами W3C и другими заинтересованными сторонами и одобрен Директором как Рекомендации W3C. Это неизменяемый документ, он может использоваться как справочный материал или цитироваться в других документах. Задачей W3C является привлечение внимания к Рекомендациям и этой спецификации и её широкое распространение. Это расширит функциональные возможности Web.
      Список текущих Рекомендаций W3C и другую техническую документацию можно найти на: http://www.w3.org/TR.
      Публичная дискуссия о возможностях CSS проходит на: www-style@w3.org.

      Стиль рамки 'bordertopstyle'

      8.5.3 Стиль рамки: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' и 'border-style'

      Свойства стиля рамки специфицируют стиль линии рамки бокса (solid, double, dashed и т.д.). Свойства, определённые в этом разделе, относятся к типу значений , который может устанавливаться в:
      none Нет рамки. Форсирует вычисленное значение 'border-width' в '0'. hidden То же, что и 'none', за исключением разрешения конфликтов рамок для элементов таблицы. dotted Рамка из точек. dashed Рамка из пунктирных линий. solid Рамка из сплошной линии. double Двойная сплошная линия. Сумма двух линий и пространства между ними равна значению 'border-width'. groove Рамка выглядит как вырезанная в канве. ridge Противоположно 'groove': рамка выглядит как выступающая над канвой. inset Весь бокс выглядит вдавленным в канву. outset Противоположно 'inset': выпуклый бокс. Все рамки прорисовываются на поверхности фона бокса. Цвет рамок со значениями 'groove', 'ridge', 'inset' и 'outset' зависит от свойства 'color' элемента.
      Соответствующие пользовательские агенты (ПА) HTML могут интерпретировать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как 'solid'. 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
      Значение: | inherit
      Начальное:none
      Применяется:ко всем элементам
      Наследуется:нет
      Процентное:N/A
      Носитель:визуальный
      'border-style'
      Значение:{1,4} | inherit
      Начальное:см. индивидуальные свойства
      Применяется: ко всем элементам
      Наследуется:нет
      Процентное:N/A
      Носитель:визуальный

      Свойство 'border-style' устанавливает стиль для четырёх сторон рамки. Может иметь от одного до четырёх значений, и значения устанавливаются для разных сторон, как для 'border-width' выше.
      Пример(ы):
      #xy34 { border-style: solid dotted } В этом примере горизонтальные линии рамки будут 'solid', а вертикальные - 'dotted'.
      Поскольку начальное значение стиля рамки - 'none', рамка будет видна только после установки значения стиля.

      Стили рамок

      17.6.3 Стили рамок

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

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

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

      По умолчанию счётчики форматируются десятичными числами, а все стили, доступные для свойства 'list-style-type', доступны также для счётчиков.
      Обозначение будет такое:
      counter(name) для таблицы стилей по умолчанию, или:
      counter(name, 'list-style-type') Допустимы все стили, включая 'disc', 'circle', 'square' и 'none'.
      Пример(ы):
      H1:before { content: counter(chno, upper-latin) ". " } H2:before { content: counter(section, upper-roman) " - " } BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" } DIV.note:before { content: counter(notecntr, disc) " " } P:before { content: counter(p, none) }

      Стилизация шрифта свойства 'fontstyle' 'fontvariant' 'fontweight' и 'fontstretch'


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

      'font-style'
      Значение: normal | italic | oblique | inherit
      Начальное:normal
      Применяется: ко всем элементам
      Наследуется:да
      Процентное:N/A (не установлено)
      Носитель:визуальный
      Свойство 'font-style' запрашивает стили normal (иногда называемый "roman" или "upright"), italic и oblique в семействе шрифтов. Значения имеют следующий смысл:
      normal Определяет шрифт, который классифицирован как 'normal' в БД шрифтов ПА. oblique Определяет шрифт, который классифицирован как 'oblique' в БД шрифтов в ПА. Шрифты со словами Oblique, Slanted или Incline в своих названиях обычно помечаются в БД шрифтов как 'oblique'. Шрифт, помеченный в БД шрифтов ПА как 'oblique', может в действительности генерироваться электронным наклоном нормального шрифта. italic Определяет шрифт, который классифицирован как 'italic' в БД шрифтов ПА, или, если это недоступно, шрифт, помеченный 'oblique'. Шрифты со словами Italic, Cursive или Kursiv в своих названиях обычно помечаются как 'italic'. Пример(ы):
      В этом примере текст normal в элементах H1, H2 или H3 будет отображаться шрифтом italic. Однако, выделенный текст (EM) в элементе H1 будет выведен как normal. H1, H2, H3 { font-style: italic } H1 EM { font-style: normal } 'font-variant'
      Значение: normal | small-caps | inherit
      Начальное:normal
      Применяется:ко всем элементам
      Наследуется:да
      Процентное:N/A
      Носитель:визуальный

      В шрифтах малых заглавных букв глифы символов нижнего регистра походят на символы верхнего регистра, но меньшего размера и слегка других пропорций. Свойство 'font-variant' запрашивает двухкамерный шрифт (имеющий два регистра, как в латинице). Это свойство не имеет видимого эффекта для однокамерного написания (когда имеется только один регистр, как в большинстве систем написания). Значения имеют следующий смысл:
      normal Специфицирует шрифт, который не помечен как шрифт малых заглавных букв. small-capsСпецифицирует шрифт, который помечен как шрифт малых заглавных букв. Если конкретный шрифт малых заглавных букв недоступен, ПА должны симулировать такой шрифт, например, замещением букв нижнего регистра обычного шрифта пересчитанными символами верхнего регистра. В крайнем случае, глифы непересчитанных букв верхнего регистра шрифта normal могут замещать глифы шрифта малых заглавных букв, и весь текст выводится символами верхнего регистра. Пример(ы):
      Результатом следующего примера будет элемент H3 с малыми заглавными буквами, с выделенными словами (EM) из наклонённых малых заглавных: H3 { font-variant: small-caps } EM { font-style: oblique }
      Поскольку это свойство переводит символы текста в верхний регистр, применяется тот же подход, что и в text-transform'. 'font-weight'
      Значение:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
      Начальное:normal
      Применяется: ко всем элементам
      Наследуется:да
      Процентное:N/A
      Носитель:визуальный

      Свойство 'font-weight' специфицирует вес шрифта. Значения имеют следующий смысл:
      от 100 до 900 Эти значения формируют упорядоченную последовательность, где каждый номер обозначает вес, который темнее своего предшественника. normal То же, что '400'. bold То же, что '700'. bolder Определяет вес шрифта, более тёмный, чем наследуемый. Если такого веса нет, результатом будет более "тёмное" числовое значение (а шрифт не изменяется), если только наследуемое значение не '900', в этом случае результат будет также '900'. lighter Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более "светлое" числовое значение (а шрифт не изменяется), если только наследуемое значение не '100', в этом случае результат будет также '100'. Пример(ы):
      P { font-weight: normal } /* 400 */ H1 { font-weight: 700 } /* bold */ BODY { font-weight: 400 } STRONG { font-weight: bolder } /* 500 возможно */ Дочерние элементы наследуют вычисленное значение веса. 'font-stretch'
      Значение:normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
      Начальное:normal
      Применяется: ко всем элементам
      Наследуется:да
      Процентное:N/A
      Носитель:визуальный

      Свойство 'font-stretch' выбирает стиль normal, condensed или extended из семейства. Абсолютные значения ключевых слов имеют следующий порядок, от самого узкого до самого широкого :
    • ultra-condensed
    • extra-condensed
    • condensed
    • semi-condensed
    • normal
    • semi-expanded
    • expanded
    • extra-expanded
    • ultra-expanded
      • Относительное ключевое слово 'wider' устанавливает значение в следующее более "широкое" по сравнению с наследуемым значение (не выше 'ultra-expanded'); относительное ключевое слово 'narrower' устанавливает значение в следующее более "сжатое" значение ниже наследуемого значения (не ниже 'ultra-condensed').

      Страничные боксы правило @page

      Страничный бокс это прямоугольный регион, содержащий две области:
    • Область страницы. Включает боксы, расположенные на этой странице. Края области страницы работают как начальный содержащий блок планировки и расположены между разрывами страниц.
    • Область полей, окружающих область страницы.
      • Примечание. В CSS2 свойства рамки и заполнения не применяются к страницам; это возможно в будущем.
      Авторы специфицируют размеры, ориентацию, поля и т.п. страничного бокса в правиле @page. Правило @page состоит из ключевого слова "@page", селектора станицы (и, без пробелов, возможного псевдокласса страницы) и блока объявлений (находящихся в т.н. контексте страницы).
      Селектор страницы специфицирует, для каких страниц объявления применяются. В CSS2 селекторы страницы могут означать первую страницу, все левые страницы, все правые страницы или страницу с определённым именем.
      Размеры страничного бокса устанавливаются свойством 'size'.
      Размеры области страницы - это размеры страничного бокса минус область полей.
      Пример(ы):
      Следующее правило @page устанавливает размер страничного бокса в 8.5 x 11 дюймов и создаёт поле '2см' со всех сторон между краем страничного бокса и областью листа:
      @page { size 8.5in 11in; margin: 2cm } Свойство 'marks' в правиле @page специфицирует знаки обрезки и крестика для страничного бокса.

      Страничные носители

      13. Страничные носители

      Содержание
    • 13.1 Введение
    • 13.2 Страничные боксы: правило @page
    • 13.2.1 Поля страниц
    • 13.2.2 Размер страницы: свойство 'size'
    • Размещение страничных боксов, не помещающихся на листе
    • Позиционирование страничного бокса на листе
    • 13.2.3 Знаки обрезки: свойство 'marks'
    • 13.2.4 Левая, правая и первая страницы
    • 13.2.5 Содержимое вне страничного бокса
    • 13.3 Разрывы страниц
    • 13.3.1 Разрывы перед/после элементов: 'page-break-before', 'page-break-after', 'page-break-inside'
    • 13.3.2 Использование именованных страниц: 'page'
    • 13.3.3 Разрывы внутри элементов: 'orphans', 'widows'
    • 13.3.4 Допустимые разрывы страниц
    • 13.3.5 Форсированные разрывы страниц
    • 13.3.6 "Наилучшие" разрывы страниц
    • 13.4 Каскадирование в контексте страницы


      • Строки


      4.3.10 Строки

      Строки могут записываться в двойных или одинарных кавычках. Двойные кавычки не могут появляться внутри двойных кавычек, если только они не вводятся с помощью escape-последовательности ( '\"' или '\22'). Аналогично для одинарной кавычки ("\'" или "\27").
      Пример(ы):
      "this is a 'string'" "this is a \"string\"" 'this is a "string"' 'this is a \'string\'' Строка не может непосредственно содержать переход на новую строку. Чтобы вставить переход на новую строку, используйте escape-последовательность "\A" (16-ричная A - это символ прогона строки в Unicode, но в CSS представляет общее обозначение для "новой строки"). См., например, свойство 'content'.
      Можно разбивать строки на несколько строк, по эстетическим и другим соображениям, но в таком случае новая строка сама escape'ируется обратным слэшем (\). Например, следующие два селектора совершенно одинаковы:
      Пример(ы):
      A[TITLE="a not s\ o very long title"] {/*...*/} A[TITLE="a not so very long title"] {/*...*/}

      Свойства фона 'backgroundcolor'

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

      'background-color'
      Значение: | transparent | inherit
      Начальное:transparent
      Применяется:ко всем элементам
      Наследуется:нет
      Процентное:N/A
      Носитель:визуальный
      Это свойство устанавливает цвет фона элемента значением или ключевым словом 'transparent' (чтобы сделать фон подложки просвечивающим).
      Пример(ы):
      H1 { background-color: #F00 } 'background-image'
      Значение: | none | inherit
      Начальное:none
      Применяется: ко всем элементам
      Наследуется:нет
      Процентное: N/A
      Носитель:визуальный
      Это свойство устанавливает изображение-фон элемента. При установке изображения для фона авторам необходимо также специфицировать цвет фона, который будет использоваться, если изображение окажется недоступным. Если изображение доступно, оно выводится поверх цвета фона. (Таким образом, цвет фона будет виден в прозрачных участках изображения).
      Значениями данного свойства являются , для спецификации изображения, или 'none', если изображение не используется.
      Пример(ы):
      BODY { background-image: url("marble.gif") } P { background-image: none } 'background-repeat'
      Значение:repeat | repeat-x | repeat-y | no-repeat | inherit
      Начальное:repeat
      Применяется:ко всем элементам
      Наследуется:нет
      Процентное: N/A
      Носитель:визуальный
      Если специфицировано изображение фона, то данное свойство определяет, повторяется ли данное изображение (размножается ли), и как. Размноженное изображение покрывает области содержимого и заполнения бокса.
      Значения имеют следующий смысл:
      repeat Изображение размножается горизонтально и вертикально. repeat-x Изображение размножается только горизонтально . repeat-y Изображение размножается только вертикально. no-repeat Изображение не размножается: выводится только одна копия изображения. Пример(ы):
      BODY { background: white url("pendant.gif"); background-repeat: repeat-y; background-position: center; }

      Свойства характеристик голоса

      'speech-rate'
      Значение: | x-slow | slow | medium | fast | x-fast | faster | slower | inherit
      Начальное:medium
      Применяется:ко всем элементам
      Наследуется:да
      Процентное:N/A
      Носитель:звуковой
      Специфицирует темп речи. Обратите внимание, что допустимы и абсолютные, и относительные значения ключевых слов (сравните с 'font-size').
      Значения имеют следующий смысл:
      Специфицирует темп речи - слов в минуту, количество которых варьируется в зависимости от языка и широко поддерживается речевыми синтезаторами. x-slow То же, что 80 слов в минуту. slow То же, что 120 слов в минуту medium То же, что 180 - 200 слов в минуту. fast То же, что 300 слов в минуту. x-fast То же, что 500 слов в минуту. faster Прибавляет 40 слов в минуту к текущему темпу. slower Вычитает 40 слов в минуту из текущего темпа. 'voice-family'
      Значение:[[ | ],]* [ | ] | inherit
      Начальное:зависит от ПА
      Применяется: ко всем элементам
      Наследуется:да
      Процентное:N/A
      Носитель:звуковой
      Значением является приоритетный список разделённых запятыми имён семейств голосов (сравните с 'font-family').
      Значения имеют следующий смысл:
      Значениями являются семейства голосов. Возможные значения: 'male', 'female' и 'child'. Значения являются специфическими объектами (напр., comedian, trinoids, carlos, lani). Пример(ы):
      H1 { voice-family: announcer, male } P.part.romeo { voice-family: romeo, male } P.part.juliet { voice-family: juliet, female } Имена могут быть в кавычках и обязаны быть закавычены, если какое-либо слово в имени не соответствует правилам синтаксиса для идентификаторов. Рекомендуется также закавычивать голоса с именем, состоящим из более чем одного слова. Если кавычки отсутствуют, любые символы пробела до и после имени голоса игнорируются и любая последовательность пробельных символов внутри имени голоса конвертируется в одиночный символ пробела. 'pitch'
      Значение: | x-low | low | medium | high | x-high | inherit
      Начальное:medium
      Применяется: ко всем элементам
      Наследуется:да
      Процентное:N/A
      Носитель:звуковой

      Специфицирует среднюю высоту (частоту) говорящего голоса. Средняя высота голоса зависит от семейства голосов. Например, средняя высота стандартного мужского голоса - около 120Hz, а женского - около 210Hz.
      Значения имеют следующий смысл:
      Специфицирует среднюю высоту голоса (Hz). x-low, low, medium, high, x-high Эти значения не отображаются в абсолютные значения частоты, поскольку зависят от семейства голосов. ПА должны отображать эти значения в соответствующие частоты, базируясь на семействе голосов и установках ПА. В то же время, ПА обязаны отображать эти значения упорядоченно (т.е. 'x-low' ниже, чем 'low', и т.д.). 'pitch-range'
      Значение: | inherit
      Начальное:50
      Применяется: ко всем элементам
      Наследуется:да
      Процентное:N/A
      Носитель:звуковой
      Специфицирует вариации средней высоты. Воспринимаемая высота человеческого голоса определяется фундаментальной частотой и обычно имеет значения: 120Hz для мужского и 210Hz для женского голоса. На человеческих языках говорят с различной инфлексией и частотой; эти вариации выражают дополнительные значения и смысл. Так, оживлённая речь, т.е. с сильной инфлексией, имеет высокий диапазон. Это свойство специфицирует диапазон, вне которого появляется вариация, т.е., как сильно фундаментальная частота может отклоняться от средней частоты.
      Значения имеют следующий смысл:
      Значение - между '0' и '100'. '0' производит плоский монотонный голос. 50 даёт нормальную инфлексию. Выше 50 - оживлённая речь. 'stress'
      Значение: | inherit
      Начальное:50
      Применяется: ко всем элементам
      Наследуется:да
      Процентное:N/A
      Носитель:звуковой
      Специфицирует "локальные пики" интонационного контура голоса. Например, английский является акцентированным языком, и различные части предложения имеют первичное, вторичное и третичное выделение. Значение свойства 'stress' управляет величиной инфлексии, которая является результатом действия этих маркёров выделения. Это свойство действует вместе с 'pitch-range' и служит для того, чтобы разработчики могли использовать высококачественные воспроизводящие устройства.
      Значения имеют следующий смысл:
      Значения - от '0' до '100'. Смысл значения зависит от языка. Например, уровень '50' - для стандартного мужского голоса, говорящего по-английски (средняя частота = 122Hz) с нормальной интонацией и выделением будет отличаться от голоса со значением '50', говорящего по-итальянски. 'richness'
      Значение: | inherit
      Начальное:50
      Применяется: ко всем элементам
      Наследуется:да
      Процентное:N/A
      Носитель:звуковой
      Специфицирует полётность голоса. Полётный голос будет слышен в большом помещении, а вкрадчивый - нет. (Термин "вкрадчивый" относится к форме синусоиды.)
      Значения имеют следующий смысл:
      Значения - от '0' до '100'. Чем выше значение, тем более полётный голос. Более низкие значения дают мягкий, медоточивый голос.

      Свойства микширования 'playduring'

      'play-during'
      Значение: mix? repeat? | auto | none | inherit
      Начальное:auto
      Применяется:ко всем элементам
      Наследуется:нет
      Процентное:N/A
      Носитель:звуковой
      Сходное со свойствами 'cue-before' и 'cue-after', данное свойство специфицирует звук, проигрываемое как фон в то время, когда проговаривается содержимое элемента.
      Значения имеют следующий смысл:
      Звук, обозначенный этим , проигрывается как фон в то время, когда проговаривается содержимое элемента. mixДанное ключевое слово, если установлено, означает, что звук, наследуемый из свойства 'play-during' родительского элемента, продолжает проигрываться, а звучание, указанное в , смешивается с ним. Если 'mix' не специфицировано, фоновое звучание элемента замещает звучание из родительского элемента.repeat Данное ключевое слово, если установлено, означает, что звук будет повторяться, если окажется слишком короток для заполнения всей длительности элемента. В ином случае звучание проигрывается однократно и останавливается. Это подобно действию свойства 'background-repeat'. Если звучание слишком долгое для элемента, оно обрывается сразу, как только элемент произнесён.auto Звучание родительского элемента продолжает проигрываться (без рестарта, что могло бы иметь место, если бы свойство наследовалось).none Это ключевое слово обозначает тишину. Звучание родительского элемента не слышно (если имеется) в течение данного элемента и продолжается после данного элемента. Пример(ы):
      BLOCKQUOTE.sad { play-during: url("violins.aiff") } BLOCKQUOTE Q { play-during: url("harp.wav") mix } SPAN.quiet { play-during: none }

      Свойства объёма звука 'volume'

      'volume'
      Значение: | | silent | x-soft | soft | medium | loud | x-loud | inherit
      Начальное:medium
      Применяется:ко всем элементам
      Наследуется:да
      Процентное:относительно наследуемого значения
      Носитель:звуковой
      Объём означает величину размаха синусоиды. Другими словами, сильно изогнутая синусоида голоса при объёме 50 может давать пики выше данного значения. Полные значения, вероятно, будут более комфортными для человека, например, при физическом управлении объёмом звука (что будет пропорционально увеличивать значения и 0, и 100); единственное, что делает данное свойство, это определяет динамический диапазон.
      Значения имеют следующий смысл:
      Любое число от '0' до '100'. '0' - это минимальный слышимый уровень громкости, а 100 соответствует максимальному комфортному уровню. Процентные значения вычисляются относительно наследуемого значения и затем выравниваются в диапазоне от '0' до '100'. silentВообще нет звука. Значение '0' не означает то же самое, что 'silent'. x-softТо же, что '0'.softТо же, что '25'. mediumТо же, что '50'.loudТо же, что '75'. x-loudТо же, что '100'. ПА должны позволять слушателю устанавливать значения, соответствующие '0' и '100'. Ни одно значение не является универсально применимым; подходящие значения зависят от используемой аппаратуры (громкоговорителей, наушников), обстановки (автомобиль, домашний театр, библиотека) и личных предпочтений.
      Вот некоторые примеры:
    • Браузер для использования в автомобиле имеет установки с учётом сильных посторонних шумов. '0' будет довольно высоким уровнем, а '100' - очень высоким. Речь будет хорошо прослушиваться сквозь уличный шум, но общий динамический диапазон будет ограничен. Автомобили с улучшенной звукоизоляцией могут обеспечить более широкий динамический диапазон.
    • Другой браузер используется в квартире поздно ночью или в учебной аудитории. '0' - установлено на очень низкий уровень, а '100' - тоже на довольно низкий. Как и в первом примере, динамический диапазон довольно ограничен. Реальный объём звука здесь небольшой, а в первом примере - слишком высокий.
    • В тихом изолированном помещении установлен домашний театр hi-fi. '0' - установлен довольно низко и '100' - довольно высоко; динамический диапазон весьма широк.
      • Одна и та же авторская таблица стилей может использоваться во всех случаях, просто отображая значения '0' и '100' соответствующим образом на стороне клиента.

      Свойства паузы 'pausebefore' 'pauseafter' и 'pause'

      'pause-before'
      Значение: | | inherit
      Начальное:зависит от ПА
      Применяется:ко всем элементам
      Наследуется:нет
      Процентное:см. текст
      Носитель:звуковой
      'pause-after'
      Значение: | | inherit
      Начальное:зависит от ПА
      Применяется: ко всем элементам
      Наследуется:нет
      Процентное:см. текст
      Носитель:звуковой
      Это свойство специфицирует паузу до (или после) произнесения содержимого элемента.
      Значения имеют следующий смысл:
      Выражает паузу в абсолютных единицах времени (секундах и миллисекундах). Относится к инверсии значения свойства 'speech-rate'. Например, если speech-rate - 120 слов в минуту (т.е. одно слово в полсекунды, или 500ms), тогда 'pause-before' в 100% означает паузу в 500ms, а 'pause-before' в 20% означает 100ms. Пауза вставляется между содержимым элементов и любым содержимым 'cue-before' или 'cue-after'.
      Авторы должны использовать относительные значения, чтобы создавать более надёжные таблицы стилей с учётом возможной разницы в реальных значениях устанавливаемого объёма.
      'pause'
      Значение:[ [ | ]{1,2} ] | inherit
      Начальное:зависит от ПА
      Применяется: ко всем элементам
      Наследуется:нет
      Процентное:см. описания 'pause-before' и 'pause-after'
      Носитель:звуковой
      Свойство 'pause' это сокращение для 'pause-before' и 'pause-after'. Если заданы два значения, то первое является 'pause-before', а второе - 'pause-after'. Если задано только одно значение, оно применяется для обоих свойств.
      Пример(ы):
      H1 { pause: 20ms } /* pause-before: 20ms; pause-after: 20ms */ H2 { pause: 30ms 40ms } /* pause-before: 30ms; pause-after: 40ms */ H3 { pause-after: 10ms } /* pause-before: ?; pause-after: 10ms */

      Свойства поля 'margintop' 'marginright' 'marginbottom' 'marginleft' и 'margin'

      Свойства поля специфицируют область полей бокса. Сокращённое свойство 'margin' устанавливает поле для всех четырёх сторон, в то время как другие свойства устанавливают только соответствующие стороны.
      Свойства, определённые в этом разделе, относятся к типу значений , который может устанавливаться в: Специфицирует фиксированную ширину. Процентное значение высчитывается относительно ширины содержащего блока сгенерированного бокса. Это верно для 'margin-top' и 'margin-bottom' везде, кроме контекста страницы, где процентные значения относятся к высоте бокса страницы. auto См. расчёт ширины и полей.
      Негативные значения свойств полей допускаются, но могут существовать ограничения, специфичные для конкретных реализаций. 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
      Значение: | inherit
      Начальное:0
      Применяется: ко всем элементам
      Наследуется:нет
      Процентное:относительно ширины содержащего блока
      Носитель:визуальный

      Это свойство устанавливает верхнее, нижнее, правое и левое поля бокса.
      Пример(ы):
      H1 { margin-top: 2em } 'margin'
      Значение:{1,4} | inherit
      Начальное:не определено для сокращённого свойства
      Применяется: ко всем элементам
      Наследуется:нет
      Процентное:относительно ширины содержащего блока
      Носитель:визуальный
      'margin' - это сокращённое свойство для установки значений 'margin-top', 'margin-right', 'margin-bottom' и 'margin-left' в одном месте в таблице стилей.
      Если имеется одно значение, то оно применяется ко всем сторонам. Если дано два значения, верхнее и нижнее поля устанавливаются в первое, а правое и левое поля - во второе значение. Если дано три значения, верхнее поле устанавливается в первое, левое и правое - во второе, а нижнее поле - в третье значение. Если задано четыре значения, они применяются к верхнему, правому, нижнему и левому полям соответственно.
      Пример(ы):
      BODY { margin: 2em } /* все поля установлены в 2em */ BODY { margin: 1em 2em } /* верхнее и нижнее = 1em, правое и левое = 2em */ BODY { margin: 1em 2em 3em } /* верхнее=1em, правое=2em, нижнее=3em, левое=2em */ Последнее правило эквивалентно следующему:BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* копируется из противоположной стороны (из правой) */ }

      Свойства рамки

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

      Свойства разговора 'speak'

      'speak'
      Значение:normal | none | spell-out | inherit
      Начальное:normal
      Применяется: ко всем элементам
      Наследуется:да
      Процентное:N/A
      Носитель:визуальный
      Это свойство специфицирует, будет ли текст представляться в звуке и - если да - в какой манере (примерно как свойство 'display').
      Возможные значения: none Вырезает звуковое представление, так что элемент не требует времени для представления. Обратите внимание, что потомки могут переопределять это значение и будут звучать. (Для того, чтобы точно отменить представление элемента и его потомков, используйте свойство 'display'). normalИспользует зависимые от языка правила произношения для представления элемента и его потомков. spell-outТекст произносится побуквенно (используется для акронимов и аббревиатур).
      Заметьте разницу между элементом, чьё свойство 'volume' имеет значение 'silent', и элементом, чьё свойство 'speak' установлено в 'none'. Первый отнимает столько же времени, как если бы он произносился, включая паузы до и после элемента, но звук не будет генерироваться. Второй не отнимает времени и не представляется (хотя его потомки - могут).

      Свойства речи 'speakpunctuation' и 'speaknumeral'

      H2>
      19.9 Свойства речи: 'speak-punctuation' и 'speak-numeral'

      Дополнительное свойство речи, speak-header, описано в главе о таблицах. 'speak-punctuation'
      Значение:code | none | inherit
      Начальное:none
      Применяется: ко всем элементам
      Наследуется:да
      Процентное:N/A
      Носитель:звуковой

      Специфицирует, как произносится пунктуация.
      Значения имеют следующий смысл:
      code Такие знаки препинания, как точка с запятой, скобки и так далее, произносятся буквально. none Знаки не произносятся, а представляются естественно, как различные паузы. 'speak-numeral'
      Значение:digits | continuous | inherit
      Начальное:continuous
      Применяется: ко всем элементам
      Наследуется:да
      Процентное:N/A
      Носитель:звуковой
      Управляет произношением чисел. Значения имеют следующий смысл:
      digits Произносит числа отдельными цифрами. Например, "237" произносится "два три семь". continuous Числа произносятся полностью. Например, "237" произносится "двести тридцать семь". Словесное представление зависит от языка.

      Свойства реплики 'cuebefore' 'cueafter' и 'cue'

      'cue-before'
      Значение: | none | inherit
      Начальное:none
      Применяется: ко всем элементам
      Наследуется:нет
      Процентное:N/A
      Носитель:звуковой
      'cue-after'
      Значение: | none | inherit
      Начальное:none
      Применяется: ко всем элементам
      Наследуется:нет
      Процентное:N/A
      Носитель:звуковой
      Звуковые иконки (реплики) являются способом различения семантических элементов. Звуки могут проигрываться до и/или после элемента, чтобы обозначить его границы.
      Значения имеют следующий смысл:
      URI обязан указывать на ресурс звуковой иконки. Если URI указывает не на аудио-файл, а, например, на изображение, ресурс должен игнорироваться, а свойство - рассматриваться так, как если бы оно имело значение 'none'. none Звуковая иконка не специфицирована. Пример(ы):
      A {cue-before: url("bell.aiff"); cue-after: url("dong.wav") } H1 {cue-before: url("pop.au"); cue-after: url("pop.au") } 'cue'
      Значение:[ <'cue-before'> || <'cue-after'> ] | inherit
      Начальное:не определено для сокращённого свойства
      Применяется: ко всем элементам
      Наследуется:нет
      Процентное:N/A
      Носитель:звуковой
      Свойство 'cue' является сокращением для установок 'cue-before' и 'cue-after'. Если заданы два значения, первое является 'cue-before', а второе - 'cue-after'. Если задано только одно значение, оно применяется к обоим свойствам.
      Пример(ы):
      Следующие два правила эквивалентны: H1 {cue-before: url("pop.au"); cue-after: url("pop.au") } H1 {cue: url("pop.au") }
      Если ПА не может вывести звуковую иконку (напр., установки ПА не позволяют это сделать), мы рекомендуем, чтобы он воспроизводил альтернативную подсказку (напр., выводил предупреждающее сообщение, издавал предупреждающий звук и т.п.).
      Информацию о других видах техники генерации содержимого см. в псевдоэлементах :before и :after.

      Свойства спецификации шрифта


      15.2.1 Свойства спецификации шрифта

      CSS2 специфицирует шрифты в соответствии со следующими характеристиками:
      Семейство шрифта/Font Family Свойство Семейство шрифта специфицирует, какое семейство шрифтов используется для вывода текста. Семейство это группа шрифтов, созданных с использованием сходных принципов дизайна и внешнего вида. Один член семейства может быть italic, другой bold, третий - сжатый или использующий малые заглавные. Имена семейств включают "Helvetica", "New Century Schoolbook", и "Kyokasho ICA L". Имена семейств не ограничены латиницей. Имена семейств могут быть сгруппированы по различным категориям: без или с засечками, с непропорциональными символами, симулирующие письмо от руки, фантазийные шрифты и т.д.Стиль шрифта/Font style Специфицирует, отображается ли текст нормальным, italic или наклонным. Italic - это более курсивный шрифт, чем normal, но не такой курсивный, чтобы отображать письмо от руки. Oblique - это наклонная форма шрифта normal, и обычно используется вместе со шрифтами sans-serif. Такое определение устраняет путаницу, когда слегка наклонённые шрифты normal обозначают как oblique, а normal Greek - как italic.Вариант шрифта/Font variant Обозначает, выводится ли текст нормальными или малыми заглавными глифами для символов нижнего регистра. Обычно шрифт содержит только normal, только малые заглавные или глифы обоих типов; это свойство используется для запроса соответствующего шрифта и, если шрифт содержит оба варианта, подходящего глифа.Вес шрифта/Font weight Вес шрифта имеет отношение к толщине глифов, используемых для вывода текста, относительно других шрифтов того же семейства.Сжатие/Font stretch Обозначает величину сжатия или расширения глифов, используемых для вывода текста, относительно других шрифтов того же семейства.Размер/Font size Относится к размеру шрифта от базовой линии, когда установлен в solid (в терминах CSS это тогда, когда свойства 'font-size' и 'line-height' имеют одно значение). Для всех свойств, за исключением 'font-size', значения размеров 'em' и 'ex' относятся к размеру шрифта текущего элемента. Для 'font-size' эти единицы измерения ссылаются на размер шрифта-предка. См. также раздел единицы измерения.
      Свойства шрифта в CSS используются для описания желаемого вида текста документа. Дескрипторы шрифта, напротив, используются для описания характеристик шрифта, чтобы мог быть выбран походящий шрифт для создания нужного представления.
      О классификации шрифтов см. раздел дескрипторы шрифта.

      Свойства заполнения 'paddingtop' 'paddingright' 'paddingbottom' 'paddingleft' и 'padding'

      Свойства обтекания специфицируют ширину области заполнения бокса. Сокращённое свойство 'padding' устанавливает заполнение для всех четырёх сторон, а другие свойства заполнения устанавливают соответствующие стороны.
      Свойства, определённые в этом разделе, относятся к типу значений , который может устанавливаться в:
      Специфицирует фиксированную ширину. Процентное, высчитывается относительно ширины содержащего блока, генерирующего бокс, в том числе и для 'padding-top' и 'padding-bottom'. В отличие от свойств полей, значения заполнения не могут быть негативными. Как и в свойствах полей, процентные значения свойств заполнения относятся к ширине бокса, сгенерированного содержащим блоком. 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
      Значение: | inherit
      Начальное:0
      Применяется:ко всем элементам
      Наследуется:нет
      Процентное:относительно ширины содержащего блока
      Носитель:визуальный

      Эти свойства устанавливают верхнее, правое, нижнее и левое заполнение для бокса.
      Пример(ы):
      BLOCKQUOTE { padding-top: 0.3em } 'padding'
      Значение:{1,4} | inherit
      Начальное:не определено для сокращённого свойства
      Применяется: ко всем элементам
      Наследуется: нет
      Процентное:относительно ширины содержащего блока
      Носитель:визуальный
      Свойство 'padding' - это сокращённое свойство для установки 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left' в одном месте в таблице стилей.
      Если имеется одно значение, то оно применяется ко всем сторонам. Если дано два значения, верхнее и нижнее заполнение устанавливаются в первое, а правое и левое заполнения - во второе значение. Если дано три значения, верхнее заполнение устанавливается в первое, левое и правое - во второе, а нижнее заполнение - в третье значение. Если задано четыре значения, они применяются к верхнему, правому, нижнему и левому заполнениям соответственно.

      Цвет поверхности области заполнения специфицируется через свойство 'background':
      Пример(ы):
      H1 { background: white; padding: 1em 2em; } Вышеприведённый пример специфицирует вертикальное заполнение '1em' ('padding-top' и 'padding-bottom') и горизонтальное заполнение '2em' ('padding-right' и 'padding-left'). Единицы измерения 'em' относительны к размеру шрифта элемента: '1em' эквивалентно размеру используемого шрифта.

      Свойство 'content'


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

      'content'
      Значение:[ | | | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
      Начальное:пустая строка
      Применяется:к псевдоэлементам :before и :after
      Наследуется:нет
      Процентное:N/A
      Носитель:все
      Это свойство используется с псевдоэлементами :before и :after для генерации содержимого документа.
      Значения имеют следующий смысл:
      Содержимое текста (см. раздел строки). Значением является URI, обозначающий внешний ресурс. Если ПА не может поддержать данный ресурс (в связи с типами носителя), он может игнорировать данный ресурс. Примечание.CSS2 не предлагает механизмов для изменения размеров внедрённого объекта или для предоставления его текстуального описания, подобных атрибутам "alt" или "longdesc" для изображений HTML. Это может быть изменено в будущих уровнях CSS. Счётчики/Counters могут быть специфицированы двумя различными функциями: 'counter()' или 'counters()'. Первая имеет две формы: 'counter(name)' или 'counter(name, style)'. Генерируемый текст является значением именованного счётчика от этой точки в структуре форматирования; он форматируется в указанном стиле (по умолчанию - 'decimal'). Вторая функция имеет также две формы: 'counters(name, string)' или 'counters(name, string, style)'. Генерируемый текст является значениями всех счётчиков с данным именем от этой точки в структуре форматирования, разделёнными специфицированной строкой. Счётчики выводятся в указанном стиле(по умолчанию - 'decimal'). См. раздел автоматические счётчики и нумерация. open-quote и close-quote Эти значения замещаются подходящей строкой свойства 'quotes'. no-open-quote и no-close-quote Ничего не вставляют (пустая строка), но увеличивают (уменьшают) уровень вложения кавычек. attr(X) Эта функция возвращает строковое значение X для субъекта селектора. Строка не разбирается процессором CSS. Если субъект селектора не имеет атрибута X, возвращается пустая строка. Чувствительность к регистру имён атрибутов зависит от языка документа. Примечание. В CSS2 невозможно обращаться к значениям атрибутов других элементов селектора. Свойство 'display' регулирует, куда помещается содержимое, в блок, инлайн- или маркированный бокс.
      Авторы должны поместить объявление 'content' в правила @media, если содержимое является медиа-чувствительным. Например, буквенный текст может использоваться для любой группы носителей, но изображения применяются только к медиа-группам visual + bitmap, а звуковые файлы применяются только к звуковым медиа-группам.
      Примеры(ы):
      Следующее правило вызывает проигрывание звукового файла в конце отрезка с кавычками (см. дополнительные механизмы в разделе "звуковые таблицы стилей"):
      @media aural { BLOCKQUOTE:after { content: url("beautiful-music.wav") } } Примеры(ы):
      Следующее правило вставляет текст атрибута "alt" HTML перед изображением. Если изображение не выводится, пользователь увидит текст "alt". IMG:before { content: attr(alt)}
      Авторы могут включать новые строки в генерируемое содержимое путём ввода escape-последовательности "\A" в одной из строк после свойства 'content'. Это вставляет форсированный обрыв строки, подобно элементу BR в HTML. См. дополнительную информацию об escape-последовательности "\A" в разделах "Строки" и "Символы и регистр".
      Примеры(ы):
      H1:before { display: block; text-align: center; content: "chapter\A hoofdstuk\A chapitre" } Генерируемое содержимое не изменяет дерево документа. Обычно оно не передаётся обратно процессору языка документа (например, для повторного разбора).
      Примечание. В будущих уровнях CSS свойство 'content' сможет принимать дополнительные значения, позволяя варьировать стиль участков генерируемого содержимого, но в CSS2 всё содержимое псевдоэлементов :before или :after имеет один стиль.

      Свойство 'display'


      9.2.5 Свойство 'display'

      'display'
      Значение:inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
      Начальное:inline
      Применяется:все элементы
      Наследуется:нет
      Процентное:N/A
      Носитель:все
      Значения этого свойства имеют следующий смысл:
      block Элемент генерирует основной бокс блока. inline Элемент генерирует один или более инлайн-боксов. list-item Элемент (например, LI в HTML) генерирует основной бокс блока и инлайн-бокс элемента списка. О списках и примерах форматирования списков см. раздел списки. marker Объявляет генерируемое содержимое до или после бокса-маркёра. Это значение должно использоваться только вместе с псевдоэлементами :before и :after, присоединёнными к элементам уровня блока. В других случаях это значение интерпретируется как 'inline'. См. также раздел Маркёры. none Элемент не генерирует боксы в структуре форматирования (т.е. элемент не влияет на вид документа). Элементы-потомки не генерируют никаких боксов; это поведение не может быть переопределено установкой у потомков свойства 'display'.Обратите внимание, что отображение 'none' не создаёт невидимый бокс; боксы вообще не создаются. CSS содержит механизмы, делающие возможным генерацию элементом бокса в структуре форматирования, который влияет на структуру форматирования, но невидим. См. детали в разделе Видимость.run-in и compact Эти значения создают боксы блока и инлайн, в зависимости от контекста. Свойства, применяемые к боксам run-in и compact, базируются на окончательном статусе боксов (уровень инлайн или блока). Например, свойство 'white-space' применяется только тогда, когда бокс получает уровень блока.table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption При установке этих значений, элемент ведёт себя как элемент таблицы (ограничения описаны в главе Таблицы).
      Заметьте, что, хотя начальное значение 'display' - 'inline', правила в таблицах по умолчанию в ПА могут переопределить это значение. См. пример таблицы стилей для HTML 4.0 в приложении.
      Пример(ы):
      Несколько примеров свойства 'display': P { display: block } EM { display: inline } LI { display: list-item } IMG { display: none } /* Не выводить изображения */
      Соответствующие ПА HTML могут игнорировать свойство 'display'.

      Сжатие полей

      8.3.1 Сжатие полей

      В этой спецификации выражение сжатие полей означает, что смежные поля (не разделённые заполнением и рамками) двух или более боксов (которые могут быть последовательными или вложенными) образуют единое поле.
      В CSS2 вертикальные поля никогда не сжимаются.
      Горизонтальные поля могут сжиматься между определёнными боксами:
    • Два или более смежных горизонтальных поля боксов блока при нормальном расположении сжимаются. Результирующая ширина поля - это максимальная ширина из смежных полей. В случае негативных значений полей, абсолютный максимум негативных смежных полей отсчитывается от максимума позитивных смежных полей. Если нет позитивных полей, абсолютный максимум негативных смежных полей отсчитывается от нуля.
    • Вертикальные поля между обтекаемым боксом и любым другим боксом не сжимаются.
    • Поля абсолютно и относительно позиционированных боксов не сжимаются.
      • См. иллюстрацию сжимаемых полей в примере полей, заполнения и рамок.

      Сжатие свойство 'clip'


      11.1.2 Сжатие: свойство 'clip'

      Сжимаемая область определяет, какая часть выводимого содержимого элемента видна. По умолчанию сжатая область имеет тот же размер и форму, что и бокс(ы) элемента. В то же время сжимаемая область может быть модифицирована свойством 'clip'. 'clip'
      Значение: | auto | inherit
      Начальное:auto
      Применяется: к элементам уровня блока и к замещаемым элементам
      Наследуется:нет
      Процентное:N/A
      Носитель:визуальный

      Свойство 'clip' применяется к элементам, имеющим свойство 'overflow' со значением, отличным от 'visible'.
      Значения имеют следующий смысл:
      auto Сжимаемая область имеет тот же размер и размещение, что и бокс(ы) элемента. В CSS2 верными значениями для являются: rect ( ) где , , а специфицирует смещение относительно соответствующих сторон бокса., , и могут иметь или значение , или 'auto'. Отрицательные значения разрешены. Значение 'auto' указывает, что данный край сжимаемой области будет тем же, что и край генерируемого бокса элемента (т.е. 'auto' означает то же, что '0'.)
      Если координаты округляются до пикселных значений, необходимо следить, чтобы не осталось видимых пикселов, когда + равно ширине элемента (или + равно высоте элемента), и наоборот, чтобы не оставалось невидимых пикселов, когда эти значения равны 0.
      Предки элемента могут также иметь сжатые области (в тех случаях, когда их свойство 'overflow' - 'visible'); то, что отображается, находится на пересечении различных сжатых областей.
      Если сжатая область выходит за пределы окна документа ПА, содержимое может быть сжато до размеров окна среды окружения.
      Пример(ы):
      Эти два правила:
      P { clip: rect(5px, 10px, 10px, 5px); } P { clip: rect(5px, -5px, 10px, 5px); } создадут прямоугольную сжимаемую область, ограниченную пунктирной линией:

      Табличная модель CSS

      Табличная модель CSS базируется на табличной модели HTML 4.0, структура таблиц которой почти параллельна визуальному представлению. В данной модели таблица состоит из необязательного заголовка и любого числа рядов столбцов. О табличной модели говорится, что в ней "ряды первичны", поскольку авторы явно специфицируют ряды, а не столбцы, в языке документа. Столбцы определяются после того, как будут специфицированы все ряды - первая ячейка каждого ряда принадлежит первому столбцу, вторая - второму столбцу и т.д.). Ряды и столбцы могут быть сгруппированы структурно, и это группирование отражается при представлении (например, рамка может быть прорисована вокруг группы рядов).
      Таким образом, табличная модель состоит из таблиц, заголовков, рядов, групп рядов, столбцов, групп столбцов и ячеек.
      Модель CSS не требует, чтобы язык документа содержал элементы, соответствующие каждому из этих компонентов. Для языков документов (таких как приложения XML), не имеющих предопределённых табличных элементов, авторы обязаны отображать элементы языка документа в элементы таблицы; это делается с помощью свойства 'display'. Следующие значения 'display' назначают семантику таблицы произвольному элементу:
      table (в HTML: TABLE) Специфицирует, что элемент определяет таблицу уровня блока: это прямоугольный блок, участвующий в контексте форматирования блока.inline-table (в HTML: TABLE) Специфицирует, что элемент определяет таблицу инлайн-уровня: это прямоугольный блок, участвующий в инлайн-контексте форматирования).table-row (в HTML: TR) Специфицирует, что элемент - это ряд ячеек.table-row-group (в HTML: TBODY) Специфицирует, что элемент группирует один или более рядов.table-header-group (в HTML: THEAD) Похож на 'table-row-group', но для визуального форматирования; группа рядов всегда отображается до всех других рядов и групп рядов и после любого верхнего заголовка. Печатающие пользовательские агенты (ПА) могут повторять ряды футера на каждой странице, занимаемой таблицей.table-footer-group (в HTML: TFOOT) Похож на 'table-row-group', но для визуального форматирования; группа рядов всегда отображается после всех других рядов и групп рядов и перед любым нижним заголовком. Печатающие ПА могут повторять ряды футера на каждой странице, занимаемой таблицей.table-column (в HTML: COL) Специфицирует, что элемент описывает столбец ячеек.table-column-group (в HTML: COLGROUP) Специфицирует, что элемент группирует один или более столбцов.table-cell (в HTML: TD, TH) Специфицирует, что элемент представляет ячейку таблицы.table-caption (в HTML: CAPTION) Специфицирует заголовок таблицы. Элементы с 'display', установленным в 'table-column' или 'table-column-group', не выводятся (в точности так, как если бы они имели 'display: none'), но используются, поскольку могут иметь атрибуты, вводящие определённый стиль для представляемых ими столбцов.
      Таблица стилей по умолчанию для HTML 4.0 в приложении иллюстрирует использование этих значений в HTML 4.0:
      TABLE { display: table } TR { display: table-row } THEAD { display: table-header-group } TBODY { display: table-row-group } TFOOT { display: table-footer-group } COL { display: table-column } COLGROUP { display: table-column-group } TD, TH { display: table-cell } CAPTION { display: table-caption } ПА могут игнорировать эти значения свойства 'display' для документов HTML, поскольку авторы не должны изменять ожидаемое поведение элемента.

      Таблицы в модели визуального форматирования

      17.4 Таблицы в модели визуального форматирования

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

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

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


      Типы носителя

      7. Типы носителя

      Содержание
    • 7.1 Введение
    • 7.2 Спецификация таблиц стилей, зависимых от типа носителя
    • 7.2.1 Правило @media
    • 7.3 Распознаваемые типы носителя
    • 7.3.1 Группы носителей


      • Угловые значения


      4.3.7 Угловые значения

      Угловые значения (обозначаемые в тексте ) используются со звуковыми таблицами стилей.
      Их формат - необязательный знак ('+' или '-', с '+' по умолчанию), сразу за которым следует , за которым сразу следует идентификатор единиц измерения углов.
      Единицами измерения углов являются:
    • deg: градусы
    • grad: грады
    • rad: радианы
      • Угловые значения могут быть негативными. Они должны быть нормализованы ПАгентом до диапазона 0-360deg. Например, -10deg и 350deg эквивалентны.
      Для примера, правый угол - '90deg' или '100grad', или '1.570796326794897rad'.

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


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

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

      Универсальный селектор


      5.3 Универсальный селектор

      Универсальный селектор, записываемый "*", совпадает с именем любого типа элемента. Он совпадает с любым простым элементом в дереве документа.
      Универсальный селектор не является единственным компонентом простого селектора, символ "*" может быть опущен. Например:
    • *[LANG=fr] и [LANG=fr] эквивалентны.
    • *.warning и .warning эквивалентны.
    • *#myid и #myid эквивалентны.


      • Управление генерацией боксов

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

      Управление положением после поплавка свойство 'clear'


      9.5.2 Управление положением после поплавка: свойство 'clear'

      'clear'
      Значение:none | left | right | both | inherit
      Начальное:none
      Применяется:к элементам уровня блока
      Наследуется:нет
      Процентное:N/A
      Носитель:визуальный
      Это свойство указывает, какие стороны бокса(ов) элемента не могут быть смежными с ранее всплывшим боксом. (Может быть такое, что элемент сам имеет всплывающих потомков; свойство 'clear' не оказывает на них воздействия.)
      Это свойство может быть специфицировано только для элементов уровня блока (включая поплавки). Для компактных и втягивающихся боксов это свойство применяется к окончательному боксу блока, к которому компактный или втягивающийся бокс принадлежит.
      Значения имеют следующий смысл при применении к невсплывающим боксам блока:
      left Верхнее поле генерируемого бокса увеличивается настолько, чтобы верхний край рамки был ниже нижнего внешнего края любого всплывающего влево бокса, являющегося результатом действия предыдущих элементов в документе-источнике. right Верхнее поле генерируемого бокса увеличивается настолько, чтобы верхний край рамки был ниже нижнего внешнего края любого всплывающего вправо бокса, являющегося результатом действия предыдущих элементов в документе-источнике. both Генерируемый бокс перемещается ниже всех всплывающих боксов элементов, появившихся ранее в документе-источнике. none Нет ограничений на позицию бокса относительно поплавков. Если свойство установлено на всплывающие элементы, результатом будет модификация правил позиционирования поплавка. Прибавляется дополнительное условие (#10):
    • Верхний внешний край поплавка обязан быть ниже нижнего внешнего края всех ранее всплывающих влево боксов (если 'clear: left'), или всех ранее всплывающих вправо боксов (если 'clear: right'), или обоих ('clear: both').


      • URL + URN = URI

      4.3.4 URL + URN = URI

      URL (Uniform Resource Locator, см. [RFC1738] и [RFC1808]), предоставляет адрес ресурса Web. Ожидается появление нового способа идентификации ресурсов, называемого URN (Uniform Resource Name). Вместе они называются URI (Uniform Resource Identifiers, см. [URI]). В этой спецификации используется термин URI.
      Значения URI в этой спецификации обозначаются . Функциональное обозначение URI в значениях свойств - "url()", как здесь:
      Пример(ы):
      BODY { background: url("http://www.bg.com/pinkish.gif") } Формат значения URI таков: 'url(' с последующим необязательным пробелом, с последующей необязательной одинарной кавычкой (') или двойной кавычкой ("), с последующим собственно URI, с последующей необязательной одинарной кавычкой (') или двойной кавычкой ("), с последующим необязательным пробелом с последующей ')'. Знаки кавычек должны быть одинаковыми (двойными или одинарными).
      Пример(ы):
      Пример без кавычек: LI { list-style: url(http://www.redballs.com/redball.png) disc }
      Скобки, запятые, пробельные символы, одинарные (') и двойные (") кавычки в URI обязаны вводиться с помощью escape-последовательностей с обратным слэшем: '\(', '\)', '\,'.
      В зависимости от типа URI, может иметься возможность также записывать вышеуказанные символы как URI-escape-последовательности (где "(" = %28, ")" = %29 и т.д.), как описано в [URI].
      Для того, чтобы создать модульные таблицы стилей, не зависящие от абсолютного размещения ресурса, авторы могут использовать относительные URI. Относительные URI (как определено в [RFC1808]) расширяются до полного URI с использованием базового URI. RFC1808, раздел 3 определяет нормативный алгоритм этого процесса. В таблицах стилей CSS базовый URI это URI таблицы стилей, а не документа-источника.
      Пример(ы):
      Предположим, имеется такое правило:
      BODY { background: url("yellow") } размещённое в таблице стилей с URI:
      http://www.myorg.org/style/basic.css Фон элемента BODY в документе-источнике будет заполнен каким-нибудь изображением, обозначенный ресурсом URI: http://www.myorg.org/style/yellow
      ПА могут по-разному обрабатывать URI, обозначающие несуществующий или необрабатываемый ресурс

      Уровень блока незамещаемые элементы при нормальном всплывании


      10.3.3 Уровень блока, незамещаемые элементы при нормальном всплывании

      Если 'left' или 'right' заданы как 'auto', их вычисленное значение - '0'. Следующее условие обязано соблюдаться между свойствами:
      'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = ширина содержащего блока
      (Если стиль рамки - 'none', используйте '0' как ширину рамки.) Если все вышеуказанные имеют специфицированные значения, отличные от 'auto', то говорят, что значения "переограниченны", и одно из вычисленных значений должно будет получить значение, отличное от своего специфицированного. Если свойство 'direction' имеет значение 'ltr', специфицированное значение 'margin-right' игнорируется и новое значение вычисляется так, чтобы сделать равенство верным. Если значение 'direction' - 'rtl', то же самое выполняется для 'margin-left'.
      Если имеется только одно значение, специфицированное как 'auto', его вычисленное значение является результатом уравнения.
      Если 'width' установлено в 'auto', любые другие значения 'auto' становятся '0', и 'width' является результатом уравнения.
      Если и 'margin-left', и 'margin-right' - 'auto', их вычисленные значения равны.

      Уровень блока незамещаемые


      10.6.3 Уровень блока, незамещаемые элементы при нормальном всплывании и всплывание, незамещаемые элементы

      Если 'top', 'bottom', 'margin-top' или 'margin-bottom' - 'auto', их вычисленное значение - '0'. Если 'height' - 'auto', высота зависит от того, имеет ли элемент дочерние элементы уровня блока. Если он имеет дочерние элементы только инлайн-уровня, высота будет от верха самого верхнего строчного бокса до низа самого нижнего строчного бокса. Если он имеет дочерние элементы уровня блока, это будет расстояние от верхнего края рамки самого верхнего дочернего бокса уровня блока до нижнего края рамки самого нижнего дочернего бокса уровня блока. В расчёт берутся только потомки при нормальном всплывании (т.е. боксы-поплавки и абсолютно позиционированные боксы игнорируются, а относительно позиционированные боксы рассматриваются без своих смещений). Обратите внимание, что дочерний бокс может быть анонимным боксом.

      Уровень блока замещаемые элементы при нормальном всплывании


      10.3.4 Уровень блока, замещаемые элементы при нормальном всплывании

      Если 'left' или 'right' - 'auto', их вычисленное значение - '0'. Если 'width' специфицировано как 'auto', его значением является внутренняя ширина элемента. Если одно из полей - 'auto', его вычисленное значение задаётся вышеприведённым уравнением. Кроме того, если оба поля - 'auto', их вычисленные значения равны.

      Установка значений свойств Каскадирование и Наследование

      6. Установка значений свойств, Каскадирование и Наследование

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


      • Увеличение

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


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


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

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

      Вид содержимого таблицы

      17.5 Вид содержимого таблицы

      Подобно другим элементам языка таблицы, внутренние элементы таблицы генерируют прямоугольные боксы с содержимым, заполнением и рамками. Однако они не имеют полей.
      Визуальное представление этих боксов управляется прямоугольной нерегулярной сеткой из рядов и столбцов. Каждый бокс занимает целое число ячеек сетки, определяемое в соответствии с нижеследующими правилами. Эти правила не применяются к HTML 4.0 или более ранним версиям HTML; HTML имеет свои собственные ограничения на охват рядов и столбцов.
    • Каждый бокс ряда занимает один ряд ячеек сетки. Все вместе боксы рядов заполняют таблицу сверху вниз в том порядке, в котором они появляются в документе-источнике (т.е. таблица занимает ровно столько рядов сетки, сколько имеется элементов рядов).
    • Группа рядов занимает те же ячейки, что и составляющие её ряды.
    • Бокс столбца занимает один или более столбцов сетки. Боксы столбцов размещаются друг за другом в том порядке, в котором они вводятся. Бокс первого столбца может находиться слева или справа, в зависимости от значения свойства 'direction' таблицы.
    • Бокс группы столбцов занимает те же ячейки сетки, что и содержащиеся в нём столбцы.
    • Ячейки могут захватывать несколько рядов и столбцов. (Хотя CSS2 не определяет, как вычисляется количество захваченных рядов или столбцов, ПА может иметь специальные сведения о документе-источнике; будущая версия CSS может предоставить способ выражения этих сведений в синтаксисе CSS.) Каждая ячейка, следовательно, это прямоугольный бокс шириной и высотой в одну или более ячеек сетки. Верхний ряд этого прямоугольника находится в ряду, специфицированном родителем ячейки. Прямоугольник обязан находиться как можно левее, но не может перекрывать любой другой бокс ячейки и обязан находиться справа от всех ячеек в том же ряду, определённых ранее в документе-источнике. (Это ограничение остаётся в силе, если свойство 'direction' таблицы - 'ltr'; если же 'direction' - 'rtl', "лево" и "право" в предыдущем предложении меняются местами.)
    • Бокс ячейки не может продолжаться за пределы бокса последнего ряда или группы рядов таблицы; ПА обязан уменьшить его (бокс ячейки) до вмещения.
      • Примечание. Ячейки таблицы могут быть позиционированы относительно или абсолютно, но это не рекомендуется: позиционирование и всплывание удаляет бокс из прорисовки, влияя на выравнивание таблицы.
      Вот два примера. Первый - документ HTML:
      1 2 3 4
      5
      1 2 3 4 5

      Вторая таблица сформатирована, как на правом рисунке. Однако представление таблицы HTML явно не определено HTML, и CSS не пытается определить его. ПА свободны в том, как отобразить её, например, как на левом рисунке.

      Видимость свойство 'visibility'

      'visibility'
      Значение:visible | hidden | collapse | inherit
      Начальное:inherit
      Применяется: ко всем элементам
      Наследуется:нет
      Процентное:N/A
      Носитель:визуальный
      Свойство 'visibility' специфицирует, отображаются ли боксы, генерируемые элементом. Невидимые боксы всё ещё влияют на структуру (см. свойство 'display' - 'none', чтобы полностью подавить генерацию бокса).
      Значения имеют следующий смысл:
      visible Генерируемый бокс виден. hidden Генерируемый бокс невидим (полностью прозрачен), но влияет на структуру. collapse См. также раздел динамические эффекты рядов и столбцов в таблицах. Если используется не с рядами или столбцами, 'collapse' имеет то же значение, что и 'hidden'. Это свойство может использоваться вместе со скриптами для создания динамических эффектов.
      В следующем примере нажатие любой кнопки в форме вызывает функцию скрипта, которая делает соответствующий бокс видимым, а другой скрывается. Поскольку эти боксы имеют одинаковые размеры и позицию, эффект заключается в том, что они сменяют друг друга. (Сценарий написан на гипотетическом языке сценариев. Он может иметь или не иметь какого-либо эффекта в ПА CSS.) Choose a suspect:
      Al Capone Name: Al Capone
      Residence: Chicago
      Lucky Luciano Name: Lucky Luciano
      Residence: New York


      Визуальные эффекты

      11. Визуальные эффекты

      Содержание
    • 11.1 Переполнение и сжатие
    • 11.1.1 Переполнение: свойство 'overflow'
    • 11.1.2 Сжатие: свойство 'clip'
    • 11.2 Видимость: свойство 'visibility'


      • Вложение счётчиков и область видимости

      12.5.1 Вложение счётчиков и область видимости

      Счётчики являются "самовкладывающимися", т.е. повторное использование счётчика в элементах-потомках автоматически создаёт новый объект счётчика. Это важно, например, для таких случаев, как списки в HTML, где элементы могут вкладываться внутри себя на произвольную глубину, и может оказаться невозможным определить уникально именованный счётчик для каждого уровня.
      Пример(ы):
      Так, следующего достаточно для нумерации вложенных элементов списка. Результат очень похож на применение установки 'display:list-item' и 'list-style: inside' в элементе LI: OL { counter-reset: item } LI { display: block } LI:before { content: counter(item) ". "; counter-increment: item }
      Самовложение базируется на том принципе, что каждый элемент, имеющий 'counter-reset' для счётчика X, создаёт новый счётчик X, область видимости которого - элемент, его предшествующие родственники и все потомки элемента и его предшествующих родственников.
      В предыдущем примере OL создаст счётчик, и все потомки OL будут ссылаться на этот счётчик.
      Если мы обозначим с помощью item[n] nый экземпляр счётчика "item" и "(" and ")" - начало и конец области видимости, то следующий фрагмент HTML будет использовать указанные счётчики. (Мы используем ту же таблицу стилей, что и в предыдущем примере).
    • item
    • item
    • item
    • item
    • item
    • item
    • item
    • item
    • item
    • item
    • item
      Функция 'counters()' генерирует строку, составленную из значений всех счётчиков с тем же самым именем, разделённых заданной строкой.
      Пример(ы):
      Следующая таблица стилей нумерует вложенные элементы списка как "1", "1.1", "1.1.1" и т.д. OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, "."); counter-increment: item }

      Время


      4.3.8 Время

      Временные значения (обозначаемые в тексте
    • ms: миллисекунды
    • s: секунды
      • Значения времени не могут быть негативными.

      Всплывание незамещаемые элементы


      10.3.5 Всплывание, незамещаемые элементы

      Если 'left', 'right', 'width', 'margin-left' или 'margin-right' специфицированы как 'auto', их вычисленное значение - '0'.

      Всплывание замещаемые элементы


      10.3.6 Всплывание, замещаемые элементы

      Если 'left', 'right', 'margin-left' или 'margin-right' специфицированы как 'auto', их вычисленное значение - '0'. Если 'width' - 'auto', его значением является внутренняя ширина элемента.

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


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

      Знаки кавычек вставляются в соответствующих местах документа значениями 'open-quote' и 'close-quote' свойства 'content'. Каждое вхождение 'open-quote' или 'close-quote' замещается одной их строк значения 'quotes', базируясь на глубине вложения.
      'Open-quote' относится к первой кавычке из пары, 'close-quote' относится ко второй. То, какая пара кавычек используется, зависит от уровня вложения кавычек: число вхождений 'open-quote' во всём сгенерированном тексте перед текущим вхождением минус число вхождений 'close-quote'. Если глубина - 0, используется первая пара, если глубина - 1, вторая пара и т.д. Если глубина вложения больше, чем число пар, повторяется последняя пара.
      Обратите внимание, что глубина вложения кавычек не зависит от вложения документа-источника или структуры форматирования.
      Некоторые стили печати требуют, чтобы знак открывающей кавычки повторялся перед каждым параграфом блока кавычек, охватывающего несколько параграфов, но только последний параграф оканчивался знаком закрывающей кавычки. В CSS этого можно добиться вставкой "фантома" закрывающих кавычек. Ключевое слово 'no-close-quote' уменьшает уровень кавычек, но не вставляет знак кавычки.
      Пример(ы):
      Следующая таблица стилей помещает знаки открывающей кавычки в каждом параграфе в BLOCKQUOTE и вставляет одиночную закрывающую кавычку в конце: BLOCKQUOTE P:before { content: open-quote } BLOCKQUOTE P:after { content: no-close-quote } BLOCKQUOTE P.last:after { content: close-quote }
      Это относится к последнему параграфу, маркированному классом "last", поскольку нет селекторов, которые могут совпадать с последним потомком элемента.
      Для симметрии имеется также ключевое слово 'no-open-quote', которое ничего не вставляет, а увеличивает глубину закавычивания на единицу.
      Примечание. Если язык закавычивания отличается от языка окружающего текста, то лучше использовать знаки кавычек языка окружающего текста, а не языка закавычивания.
      Пример(ы):
      Французский внутри английского: The device of the order of the garter is “Honi soit qui mal y pense.” Английский внутри французского:Il disait: « Il faut mettre l'action en ‹ fast forward ›.»
      Таблица стилей типа следующей установит свойство 'quotes' таким образом, что 'open-quote' и 'close-quote' будут корректно работать во всех элементах. Это правила для документов, содержащих только английский, французский или оба этих языка. Одно правило понадобится для каждого дополнительного языка. Обратите внимание на использование комбинатора-потомка (">") для установки кавычек в элементы на базе языка окружающего текста:
      [LANG|=fr] > * { quotes: "«" "»" "\2039" "\203A" } [LANG|=en] > * { quotes: "\201C" "\201D" "\2018" "\2019" } Знаки кавычек для английского показаны здесь в такой форме, что большинство людей будет способно их напечатать. Если Вы можете печатать их напрямую, то они будут выглядеть примерно так: [LANG|=fr] > * { quotes: "«" "»" "‹" "›" } [LANG|=en] > * { quotes: "“" "”" "‘" "’" }

      Втягивающиеся боксы (runin)


      9.2.4 Втягивающиеся боксы (run-in)

      Бокс run-in ведёт себя так:
    • Если бокс блока (не поплавок и не позиционированный абсолютно) следует за боксом run-in, то бокс run-in становится первым инлайн-боксом в боксе блока.
    • Иначе бокс run-in становится боксом блока.
      • Бокс 'run-in' используется для run-in-заголовков, как в этом примере: Пример бокса run-in

      Заголовок run-in.

      И параграф текста, следующий за ним.
      Этот пример может форматироваться так: Заголовок run-in. И параграф текста, следующий за ним.
      Свойства run-in-элемента наследуются от родителя в дереве-источнике, а не от бокса блока, частью которого он визуально является.
      Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе Генерируемое содержимое.

      В этом разделе рассматриваются характеристики

      15.4.1 Введение

      В этом разделе рассматриваются характеристики шрифта, которые могут пригодиться на стороне клиента для подбора, синтеза и загрузки на различных платформах Web.
      Данные могут быть использованы для любого носителя, которому необходимы шрифты в Web для каких-либо других целей, кроме физического внедрения данных шрифта в носитель.
      Эти характеристики используются для описания шрифта. Они не являются специфичными для CSS, или таблиц стилей. В CSS каждая характеристика описывается дескриптором шрифта. Эти характеристики могут также отображаться в узлы VRML, CGM Application Structures, Java API или альтернативные языки таблиц стилей. Шрифты, запрашиваемые одним носителем и хранящиеся в прокси-кэше, могут быть повторно использованы другим носителем, экономя время для загрузки и увеличивая пропускную способность сети, если общая система характеристик шрифтов используется повсюду.
      Вот неполный список примеров:
    • 2-мерные векторные форматы
    • Computer Graphics Metafile
    • Simple Vector Format
    • 3-мерные графические форматы
    • VRML
    • 3DMF
    • Технологии внедрения объектов
    • Java
    • Active-X
    • Obliq

      • Страничный носитель (например, бумага, плёнка, страницы , выводимые на экране компьютера и т.п.) отличается от непрерывного носителя тем, что содержимое документа разделяется на одну или более абстрактных страниц. Чтобы обрабатывать разрывы страниц, CSS2 расширяет модель визуального форматирования следующим образом:
    • Страничный бокс расширяет модель бокса, что позволяет авторам специфицировать размеры страницы, её полей и т.д.
    • Страничная модель расширяет модель визуального форматирования, чтобы рассчитывать разрывы страниц.
      • Страничная модель CSS 2 специфицирует, как форматируется документ в пределах прямоугольной области - страничного бокса - который имеет конечные ширину и высоту. Страничный бокс не обязательно соответствует реальному листу\странице, на котором документ в конце концов будет выведен (бумага, плёнка, экран и т.п.). Страничная модель CSS специфицирует форматирование в страничном боксе, но за перенос страничного бокса на лист отвечает пользовательский агент (ПА).
      Некоторые возможности переноса:
    • Перенос одного страничного бокса на один лист (например, односторонняя печать).
    • Перенос двух страничных боксов на две стороны одного листа (например, двухсторонняя печать).
    • Перенос N (маленького) страничного бокса на один лист (называется "n-up").
    • Перенос одного (большого) страничного бокса на N x M листов (называется "tiling").
    • Создание подписей. Подпись, это группа страниц, напечатанных на листе, которые после брошюрования и обрезки выглядят, как книга, и расположены в соответствующем порядке.
    • Печать одного документа в несколько потоков печати.
    • Вывод в файл.
      • Хотя CSS2 не специфицирует то, как ПА переносят страничные боксы на листы, не даётся также и определённого механизма для того, чтобы сообщить ПА о размерах и ориентации целевого листа.

      Одним из важнейших свойств таблиц стилей является то, что они специфицируют представление документа на различных носителях информации: на экране, бумаге, в речевом синтезаторе, в брайль-устройстве и т.п.Некоторые свойства CSS созданы для конкретных носителей (например, свойство 'cue-before' - для звуковых пользовательских агентов (ПА)). Иногда, однако, таблицы стилей для различных носителей могут использовать одно и то же свойство, но при этом требуют для него различных значений. Например, свойство 'font-size' используется и для экрана, и для носителя печати. Однако эти два носителя достаточно различны, чтобы требовать различных значений для общего свойства; документ обычно требует для экрана более крупный шрифт, чем для печати. Опыт показывает также, что шрифты sans-serif лучше читаются на экране, а шрифты с засечками (serif) лучше читаются на бумаге. Исходя из этих соображений, необходимо указывать, что таблица стилей - или раздел таблицы стилей - применяется к носителю определённого типа.

      17.1 Введение

      Таблицы представляют взаимоотношения между данными. Авторы специфицируют эти взаимоотношения на языке документа и их представление в CSS двумя способами - визуально и звуком.
      Авторы могут специфицировать визуальное форматирование таблицы как прямоугольной сетки ячеек. Ряды и столбцы ячеек можно организовать в группы рядов и столбцов. Ряды, столбцы, группы рядов, группы столбцов и ячейки могут иметь вокруг себя порисованные рамки (в CSS2 есть две модели рамок). Авторы могут выровнять данные в ячейках по вертикали и по горизонтали и выровнять данные во всех ячейках ряда или столбца.
      Авторы могут также специфицировать звуковое представление таблицы: то, как заголовки и данные будут звучать. На языке документа авторы могут помечать лэйблами ячейки и группы ячеек так, что при звуковом отображении заголовки ячеек будут произноситься перед данными ячеек. Фактически это "сериализует" таблицу: пользователи, прослушивающие таблицу, услышат последовательность заголовков и последующих данных.
      Пример(ы):
      Вот простая таблица из трёх рядов и трёх столбцов, написанная в HTML 4.0:
      Это простая таблица 3x3
      Header 1 Cell 1 Cell 2
      Header 2 Cell 3 Cell 4
      Header 3 Cell 5 Cell 6

      Этот код создаёт одну таблицу (элемент TABLE), три ряда (элементы TR), три заголовочных ячейки (элементы TH) и шесть ячеек данных (элементы TD). Обратите внимание, что три столбца в этом примере специфицированы неявно: в таблице столько столбцов, сколько затребовано заголовочными ячейками и ячейками данных.
      Следующее правило CSS центрирует текст по горизонтали в заголовочных ячейках и выводит данные шрифтом, имеющим вес bold:
      TH { text-align: center; font-weight: bold } Следующее правило выравнивает текст заголовочных ячеек по их базовой линии и центрирует текст по вертикали в каждой ячейке данных:
      TH { vertical-align: baseline } TD { vertical-align: middle } Следующие правила специфицируют, что верхний ряд будет окружён сплошной голубой рамкой толщиной 3px и каждый из других рядов будет окружён сплошной чёрной рамкой толщиной 1px:
      TABLE { border-collapse: collapse } TR#row1 { border-top: 3px solid blue } TR#row2 { border-top: 1px solid black } TR#row3 { border-top: 1px solid black } Заметьте, однако, что рамки вокруг рядов перекрываются там, где ряды смыкаются. Какого цвета (чёрного или голубого) и толщины (1px или 3px) будет рамка между рядами row1 и row2? Мы обсудим это в разделе о разрешении конфликтов рамок.
      Следующее правило помещает заголовок таблицы над таблицей:
      CAPTION { caption-side: top } Наконец, следующее правило специфицирует, что при звуковом выводе каждый ряд данных произносится как "Заголовок, Данные, Данные":
      TH { speak-header: once } Например, первый ряд будет произнесён "Заголовок1 Ячейка1 Ячейка2".
      С другой стороны, со следующим правилом:
      TH { speak-header: always } будет звучать "Заголовок1 Ячейка1 Заголовок1 Ячейка2".
      Этот пример показал, как CSS работает с элементами HTML 4.0; в HTML 4.0 семантика различных элементов таблицы (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH и TD) основательно проработана.
      В других языка документов (таких как приложения XML) может не быть предопределённых элементов таблицы. Поэтому CSS2 позволяет авторам "map/отображать" элементы языка документа в элементы таблицы через свойство 'display'. Например, следующее правило заставляет элемент FOO работать как элемент TABLE в HTML, а элемент BAR - как элемент CAPTION:
      FOO { display : table } BAR { display : table-caption } Мы обсудим различные элементы таблицы в следующем разделе. В данной спецификации термин элемент таблицы относится к любому элементу, участвующему в создании таблицы. "Внутренний" элемент таблицы это тот, который производит ряд, группу рядов, столбец, группу столбцов или ячейку.

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

      Выбор схемы позиционирования свойство 'position'


      9.3.1 Выбор схемы позиционирования: свойство 'position'

      Свойства 'position' и 'float' определяют, какой из алгоритмов позиционирования CSS2 используется для расчёта позиции бокса. 'position'
      Значение:static | relative | absolute | fixed | inherit
      Начальное:static
      Применяется:ко всем элементам, но не к генерируемому содержимому
      Наследуется:нет
      Процентное:N/A
      Носитель:визуальный

      Значения имеют следующий смысл:
      static Бокс является нормальным боксом, расположенным в соответствии с нормальным расположением. Свойства 'left' и 'top' не применяются. relative Позиция бокса высчитывается в соответствии с нормальным расположением. Затем бокс смещается относительно нормального расположения. Если бокс В позиционирован относительно, расположение последующего бокса вычисляется так, как если бы бокс В не имел смещения. absolute Позиция бокса (и возможные размеры) определяется свойствами 'left', 'right', 'top' и 'bottom'. Эти свойства устанавливают смещение относительно бокса содержащего блока. Абсолютно позиционированные боксы изымаются из нормального обтекания. Это значит, что они не влияют на вывод последующих родственных элементов. Также, хотя абсолютно позиционированные боксы имеют поля, они не соединяются с другими полями. fixed Позиция бокса вычисляется в соответствии с моделью 'absolute', но, в дополнение к этому, бокс фиксируется в соответствии с некоторой ссылкой. В случае с непрерывными носителями, бокс фиксируется относительно порта просмотра (и не перемещается при прокрутке). В случае со страничными носителям, бокс фиксируется относительно страницы, даже если страница просматривается через порт просмотра (в случае просмотра перед печатью, например). Авторам может понадобиться специфицировать 'fixed' способом, не зависящим от носителя. Например, автор может захотеть, чтобы бокс оставался в верхней части порта просмотра экрана, но не вверху каждой печатаемой страницы. Две такие спецификации можно разделить, используя правило @media, как здесь: Пример(ы):
      @media screen { H1#first { position: fixed } } @media print { H1#first { position: static } }

      Выбор шрифта

      Вторая фаза механизма шрифтов CSS2 - выбор в ПА шрифта на базе специфицированных автором свойств шрифта, доступных шрифтов и т.д. Детали алгоритма подбора шрифта рассматриваются ниже.
      Имеется четыре возможных действия при выборе шрифта: совпадение имени, смысловое совпадение, синтез и загрузка.
      совпадение имени шрифта В этом случае ПА использует существующий доступный шрифт, который имеет то же самое имя семейства, что и запрашиваемый шрифт. (Обратите внимание, что внешний вид и параметры не обязательно должны совпадать, если шрифт автора документа и шрифт клиентской системы - из разных "литеек"). Информация для сравнения ограничена свойствами шрифта CSS, включая имя семейства. Это единственный метод, используемый CSS1. смысловое совпадение В этом случае ПА использует существующий доступный шрифт, который имеет наибольшее совпадение с затребованным шрифтом. (Обратите внимание, что метрические параметры могут не совпадать точно). Информация для сравнения включает информацию о роде шрифта (текстовый или символьный), природе засечек, весе, cap-высоте, x-высоте, восхождении, нисхождении, наклоне и т.п. синтез В этом случае ПА создаёт шрифт, который лишь приблизительно совпадает по внешнему виду, а также по метрическим параметрам, с запрошенным шрифтом. Информация для синтезирования включает информацию для сравнения и обычно требует более точных значений параметров, используемых для некоторых схем сравнения. В особенности для синтеза необходимы точные данные ширины и символы для глифов замещения и информация о позиции, если сохраняются все характеристики вида специфицированного шрифта. загрузка Наконец, ПА может затребовать шрифт в Web. Этот процесс напоминает получение из Web изображений, звуков или аплетов для текущего документа и так же может вызвать задержку с отображением страницы. Отображение по частям комбинирует загрузку и один из других методов; при этом предоставляется временный замещающий шрифт (используется совпадение имени, смысловое совпадение или синтез), чтобы дать возможность читать содержимое, пока происходит загрузка шрифта. Как только нужный шрифт загружен, он замещает временный шрифт.
      Примечание. Отображение по частям требует наличия метрической информации о шрифте для того, чтобы исключить перерисовку содержимого после загрузки и вывода основного шрифта. Эта метрическая информация достаточно содержательна, чтобы её можно было специфицировать для шрифта документа не более одного раза.

      Вычисление ширины и полей

      Вычисленные значения свойств 'width', 'margin-left', 'margin-right', 'left' и 'right' для элементов зависят от типа генерируемого бокса и друг от друга. В принципе вычисленные значения - те же, что и специфицированные, с 'auto', замещаемым другим подходящим значением, но есть и исключения. Должны быть рассмотрены следующие варианты:
    • инлайн, незамещаемые элементы
    • инлайн, замещаемые элементы
    • уровень блока, незамещаемые элементы при нормальном всплывании
    • уровень блока, замещаемые элементы при нормальном всплывании
    • всплывание, незамещаемые элементы
    • всплывание, замещаемые элементы
    • абсолютно позиционированные незамещаемые элементы
    • абсолютно позиционированные замещаемые элементы
      • Пункты 1-6 включают относительное позиционирование.

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

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

      Специфика селектора высчитывается так:
    • вычисляется количество атрибутов ID в селекторе (= a)
    • вычисляется количество других атрибутов и псевдоклассов в селекторе (= b)
    • вычисляется количество имён элементов в селекторе (= c)
    • игнорируются псевдоэлементы.
      • Конкатенация трёх чисел a-b-c (в числовой системе с большой базой) дают специфику.
      Пример(ы):
      * {} /* a=0 b=0 c=0 -> специфика = 0 */ LI {} /* a=0 b=0 c=1 -> специфика = 1 */ UL LI {} /* a=0 b=0 c=2 -> специфика = 2 */ UL OL+LI {} /* a=0 b=0 c=3 -> специфика = 3 */ H1 + *[REL=up]{} /* a=0 b=1 c=1 -> специфика = 11 */ UL OL LI.red {} /* a=0 b=1 c=3 -> специфика = 13 */ LI.red.level {} /* a=0 b=2 c=1 -> специфика = 21 */ #x34y {} /* a=1 b=0 c=0 -> специфика = 100 */ В HTML значения атрибута "style" элемента являются правилами таблицы стилей. Эти правила не имеют селекторов, но для целей шага 3 каскадного алгоритма они рассматриваются как имеющие селектор ID (специфика: a=1, b=0, c=0). Для целей шага 4 они рассматриваются после всех других правил.


      В данном примере цвет элемента P будет красным. Хотя специфика - одна и та же для обоих объявлений, объявление атрибута "style" переопределит объявление в элементе STYLE в соответствии с каскадным правилом 4.

      Вычисление высоты и полей


      10.5 Высота содержимого: свойство 'height' 'height'
      Значение: | | auto | inherit
      Начальное:auto
      Применяется:ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов и групп столбцов таблицы
      Наследуется:нет
      Процентное:см. текст
      Носитель:визуальный
      Свойство определяет высоту содержимого боксов, генерируемых элементами уровня блока и замещаемыми элементами.
      Это свойство не применяется к незамещаемым элементам инлайн-уровня. Высота боксов незамещаемых инлайн-элементов задаётся значением (возможно, наследуемым) 'line-height' элемента.
      Значения имеют следующий смысл: Специфицирует фиксированную высоту. Специфицирует высоту в процентах. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т е. зависит от высоты содержимого), значение интерпретируется как 'auto'. auto Высота зависит от значений других свойств. См. ниже.
      Отрицательные значения 'height' недопустимы.
      Пример(ы):
      Следующее правило фиксирует высоту параграфа в 100 пикселов:
      P { height: 100px } Параграф, требующий высоты более 100 пикселов, будет вызывать переполнение в соответствии со свойством 'overflow'.

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


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

      Специфицированные значения могут быть абсолютными (т.е. не специфицированными относительно других значений: 'red' или '2mm') или относительными (т.е. специфицированными относительно других значений: 'auto', '2em', '12%'). Для абсолютных значений не требуется никаких вычислений, чтобы найти вычисленное значение.
      Относительные значения, с другой стороны, обязаны быть трансформированы в вычисленные значения: процентные рассчитываются относительно данного значения-ссылки (каждое свойство определяет соответствующее значение), значения с указанием единиц измерения (em, ex, px) должны быть сделаны абсолютными путём применения подходящих по размеру шрифтов или в пикселах, значения 'auto' должны высчитываться по формулам, данным для каждого свойства, ключевые слова ('smaller', 'bolder', 'inherit') должны быть замещены в соответствии со своими определениями.
      В большинстве случаев элементы наследуют вычисленные значения. Однако есть некоторые свойства, чьи специфицированные значения могут наследоваться (например, числовое значение свойства 'line-height'). В тех случаях , когда дочерние элементы не наследуют вычисленные значения, это описывается в определении свойства.

      Выравнивание свойство 'textalign'

      'text-align'
      Значение:left | right | center | justify | | inherit
      Начальное:зависит от ПА и направления письма
      Применяется: к элементам уровня блока
      Наследуется:да
      Процентное:N/A
      Носитель:визуальный
      Это свойство описывает, как выравнивается инлайн-содержимое блока.
      Значения имеют следующий смысл:
      left, right, center, and justify Выравнивает текст влево, вправо, по центру и по формату. Специфицирует строку, в которой ячейки столбца таблицы будут выровнены (см. детали и пример в разделе Горизонтальное выравнивание в столбце). Это значение применяется только к ячейкам таблицы. Если установлено в другом элементе, оно рассматривается как 'left' или 'right', в зависимости от того, каково направление письма: 'direction' - 'ltr' или 'rtl', соответственно. Блок текста это стопка строчных боксов. В случаях 'left', 'right' и 'center', это свойство специфицирует, как инлайн-боксы в каждом строчном боксе выравниваются относительно левой и правой сторон строчного бокса; выравнивание не производится относительно порта просмотра. В случае с 'justify', ПА может сжать инлайн-боксы в дополнение к уточнению их позиций. (См. также 'letter-spacing' и 'word-spacing'.)
      Пример(ы):
      Здесь обратите внимание, что, поскольку 'text-align' наследуется, все элементы уровня блока внутри элемента DIV с 'class=center' получат своё инлайн-содержимое сцентрированным. DIV.center { text-align: center }
      Примечание. Фактический алгоритм выравнивания по формату зависит от ПА и языка письма.
      Соответствующие пользовательские агенты (ПА) могут интерпретировать значение 'justify' как 'left' или 'right', в зависимости от того, каково по умолчанию направление письма: слева-направо или справа-налево, соответственно.

      Высота глифов нижнего регистра


      15.4.10 Высота глифов нижнего регистра

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

      Высота глифов верхнего регистра


      15.4.9 Высота глифов верхнего регистра

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

      Высота содержимого свойство 'height'

      'height'
      Значение: | | auto | inherit
      Начальное:auto
      Применяется: ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов и групп столбцов таблицы
      Наследуется:нет
      Процентное:см. текст
      Носитель:визуальный
      Свойство определяет высоту содержимого боксов, генерируемых элементами уровня блока и замещаемыми элементами.
      Это свойство не применяется к незамещаемым элементам инлайн-уровня. Высота боксов незамещаемых инлайн-элементов задаётся значением (возможно, наследуемым) 'line-height' элемента.
      Значения имеют следующий смысл: Специфицирует фиксированную высоту. Специфицирует высоту в процентах. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т е. зависит от высоты содержимого), значение интерпретируется как 'auto'. auto Высота зависит от значений других свойств. См. ниже.
      Отрицательные значения 'height' недопустимы.
      Пример(ы):
      Следующее правило фиксирует высоту параграфа в 100 пикселов:
      P { height: 100px } Параграф, требующий высоты более 100 пикселов, будет вызывать переполнение в соответствии со свойством 'overflow'.

      Взаимодействие before и after с элементами 'compact' и 'runin'


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

      Могут быть следующие ситуации:
    • Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'inline': псевдоэлементы учитываются, если размер бокса элемента вычислен (для 'compact') и выведен внутри того же бокса блока, что и элемент.
    • Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'inline':
      применяются правила предыдущего пункта.
    • Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'block': псевдоэлемент форматируется как блок поверх элемента и не участвует в вычислении размера элемента (для 'compact').
    • Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'block':
      и элемент, и его псевдоэлемент :after форматируются как боксы блока. Элемент не форматируется как инлайн-бокс в своём собственном псевдоэлементе :after.
    • Элемент, следующий за элементом 'run-in' или 'compact', имеет :before типа 'block': решение о том, как форматировать элемент 'run-in'/'compact', принимается с учётом результирующего бокса блока из псевдоэлемента :before.
    • Элемент, следующий за элементом 'run-in' или 'compact', имеет :before типа 'inline': решение о том, как форматировать элемент 'run-in'/'compact', зависит от значения 'display' элемента, к которому присоединён :before.
      • Пример(ы):
      Это заголовок 'run-in' с псевдоэлементом :after, после которого идёт параграф с псевдоэлементом :before. В этом пример все псевдоэлементы являются инлайн (по умолчанию). Когда таблица стилей:
      H3 { display: run-in } H3:after { content: ": " } P:before { content: "... " } применяется к такому документу-источнику:

      Centaurs

      have hoofs have a tail визуальное форматирование будет таким:
      Centaurs: ... have hoofs ... have a tail

      Замечания и примеры


      1.3.4 Замечания и примеры

      Все примеры, иллюстрирующие неправильное использование, явно помечены - "НЕПРАВИЛЬНОЕ ИСПОЛЬЗОВАНИЕ".
      Все примеры HTML соответствуют Строгому Определению Типа Документа HTML 4.0/Strict DTD, (определённом в [HTML40]), если иное не указано в объявлении типа документа.
      Все примечания являются исключительно информативными.
      Примеры и примечания промаркированы в коде HTML, чтобы ПА данной и CSS1 спецификаций представляли их особым образом.

      Значение 'inherit'


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

      Каждое свойство может иметь специфицированное значение 'inherit', которое означает, что для данного элемента свойство принимает то же самое вычисленное значение, что и свойство элемента-предка. Наследуемое значение, которое как правило используется только как возвращаемое значение, может быть усилено путём явной установки 'inherit'.
      Пример(ы):
      В следующем примере свойства 'color' и 'background' установлены в элементе BODY. Во всех других элементах значение 'color' будет наследоваться, а фон будет прозрачным. Если эти правила являются частью пользовательской таблицы стилей, чёрный текст на белом фоне будет форсирован по всему документу. BODY { color: black !important; background: white !important; } * { color: inherit !important; background: transparent; }

      Значение/Value

      Значение/Value

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

      • Другие слова в этих определениях являются ключевыми словами, которые обязаны появляться буквально, без кавычек (например, red). Слэш (/) и запятая (,) также обязаны появляться буквально.
      Значения должны быть организованы так:
    • Несколько соседних слов означают, что все они должны появляться в указанном порядке.
    • Вертикальная линия (|) разделяет две или более альтернативы: только одна из них должна быть записана.
    • Двойная вертикальная черта (||) разделяет две или более опции: одна или более из них должны быть записаны в любом порядке.
    • Скобки ([ ]) служат для группирования.
      • Соседство является более строгим, чем двойная вертикальная черта, а двойная вертикальная черта - строже, чем одинарная. Таким образом, следующие строки эквивалентны: a b | c || d e [ a b ] | [ c || [ d e ]]
      За каждым типом, ключевым словом или группой в скобках может следовать один из модификаторов:
    • Звёздочка (*) - означает, что предыдущий тип, слово или группа появляется ноль или более раз.
    • Плюс (+) - означает, что предыдущий тип, слово или группа появляется один или более раз.
    • Знак вопроса (?) - означает, что предыдущий тип, слово или группа являются необязательными.
    • Пара чисел в фигурных скобках ({A,B}) - означает, что предыдущий тип, слово или группа появляется не менее А и не более В раз.
      • Следующий пример иллюстрирует различные значения типов: Value\Значение: N | NW | NE
      Value: [ | thick | thin ]{1,4}
      Value: [ , ]*
      Value: ? [ / ]?
      Value: ||

      Значения по умолчанию для атрибутов в ОТД

      5.8.2 Значения по умолчанию для атрибутов в ОТД

      Совпадение происходит в значениях атрибутов в дереве документа. Для языков документа, отличных от HTML, значения по умолчанию для атрибутов могут определяться в ОТД или где-либо ещё. Таблицы стилей должны создаваться так, чтобы они работали даже тогда, когда значения по умолчанию не включены в дерево документа.
      Пример(ы):
      Рассмотрим элемент EXAMPLE с атрибутом "notation", имеющим значение по умолчанию "decimal".
      Фрагмент ОТД может быть таким:
      Если таблица стилей содержит правила EXAMPLE[notation=decimal] { /*... установки по умолчанию для свойства ...*/ } EXAMPLE[notation=octal] { /*... другие установки ...*/ }
      тогда, чтобы отобрать случаи, когда атрибут установлен по умолчанию, а не явно, можно добавить следующее правило: EXAMPLE { /*... значения по умолчанию для свойства ...*/ }
      Поскольку этот селектор менее специфичен, чем селектор атрибута, он будет использоваться только для случаев установки значения по умолчанию. Это делается для того, чтобы все другие значения атрибута, не получающие тот же стиль, что и стиль по умолчанию, были охвачены явно.

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

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

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

      Знаки обрезки свойство 'marks'


      13.2.3 Знаки обрезки: свойство 'marks'

      'marks'
      Значение:[ crop || cross ] | none | inherit
      Начальное:none
      Применяется:к контексту страницы
      Наследуется:N/A
      Процентное:N/A
      Носитель:визуальный, страничный
      При высококачественной печати маркировка часто помещается вне страничного бокса. Данное свойство специфицирует, должны ли знаки крестика или обрезки, или оба, отображаться сразу за краем страничного бокса.
      Знаки обрезки обозначают место, где страница должна быть обрезана.
      Знак "крестик" (известный также как знак регистрации) используется для выравнивания листов.
      Маркировка видна только на абсолютных страничных боксах (см. свойство 'size'). При относительных страничных боксах, страничный бокс будет выровнен с целевым, а маркировка будет находиться за пределами области печати.
      Размеры, стиль и расположение крестиков зависят от ПА.

      Звуковое представление таблиц


      17.7 Звуковое представление таблиц

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

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

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

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


      • 

          Бизнес в интернете: Сайты - Софт - Языки - Дизайн