Минимальная и максимальная ширина 'minwidth' и 'maxwidth'
'min-width'
Значение: | <length> | <percentage> | inherit |
Начальное: | зависит от ПА |
Применяется: | ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы |
Наследуется: | нет |
Процентное: | относительно ширины содержащего блока |
Носитель: | визуальный |
Значение: | <length> | <percentage> | none | inherit |
Начальное: | none |
Применяется: | ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы |
Наследуется: | нет |
Процентное: | относительно ширины содержащего блока |
Носитель: | визуальный |
Эти два свойства позволяют авторам ограничить ширину бокса определёнными рамками.
Значения имеют следующий смысл:
Следующий алгоритм описывает, как эти два свойства воздействуют на вычисленное значение свойства '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'
Значение: | <length> | <percentage> | inherit |
Начальное: | 0 |
Применяется: | ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы |
Наследуется: | нет |
Процентное: | относительно высоты содержащего блока |
Носитель: | визуальный |
Значение: | <length> | <percentage> | none | inherit |
Начальное: | none |
Применяется: | ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы |
Наследуется: | нет |
Процентное: | относительно высоты содержащего блока |
Носитель: | визуальный |
Эти два свойства позволяют авторам ограничить высоту боксов определённым диапазоном. Значения имеют следующий смысл:
<length> Специфицирует фиксированный минимум и максимум вычисленной высоты. <percentage> Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентные значения интерпретируются так же, как 'auto'. none (Только для 'max-height') Высота бокса не ограничена.Следующий алгоритм описывает, как эти два свойства вводят вычисленное значение свойства 'height':
Высота вычисляется (без 'min-height' и 'max-height') по вышеприведённым правилам в "Вычислении высоты и полей". Если вычисленное значение 'min-height' больше значения 'max-height', 'max-height' устанавливается в значение 'min-height'. Если вычисленная высота больше, чем 'max-height', вновь применяются вышеприведённые правила, но на этот раз с использованием значения 'max-height' как специфицированного значения для 'height'. Если вычисленная высота меньше, чем 'min-height', вновь применяются вышеприведённые правила, но на этот раз с использованием значения 'min-height' как специфицированного значения для 'height'.Мнемоники символов не представленных в кодировке символов
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. Например, мы рекомендуем:
<SPAN style="voice-family: D\FC rst">...</SPAN>вместо:
<SPAN style="voice-family: Dürst">...</SPAN>Модель адресации 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'
Значение: | <length> <length>? | inherit |
Начальное: | 0 |
Применяется: | к элементам 'table' и 'inline-table' |
Наследуется: | да |
Процентное: | N/A |
Носитель: | визуальный |
Размеры специфицируют расстояние, разделяющее рамки смежных таблиц. Если специфицирован один размер, он задаёт и горизонтальное, и вертикальное расстояние. Если специфицированы два, то первый задаёт расстояние по горизонтали, второй - по вертикали. Значения размеров не могут быть отрицательными.
В этой модели каждая ячейка имеет собственную рамку. Свойство 'border-spacing' специфицирует расстояние между рамками смежных ячеек. Это пространство заполняется фоном элемента таблицы. Ряды, группы рядов, столбцы и группы столбцов не могут иметь рамок (т.е. ПА обязаны игнорировать свойства рамки в таких элементах).
Пример(ы):
Таблица на рисунке может быть результатом такой таблицы стилей: TABLE { border: outset 10pt; border-collapse: separate; border-spacing: 15pt } TD { border: inset 5pt } TD.special { border: inset 10pt } /* Верхняя левая ячейка */
Модель сжимающихся рамок
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. Учтите только, что лишь половина из двух внешних рамок учитывается в ширине таблицы; другая половина этих двух рамок находится в области полей.
Модель визуального форматирования
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'
Модель визуального форматирования Детали
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 Габариты и полугабариты
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 языка и ОТД.
Пример(ы):
Здесь буквы нижнего регистра присущи символам слева-направо, а буквы верхнего регистра - символам справа-налево: <HEBREW> <PAR>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</PAR> <PAR>HEBREW6 <EMPH>HEBREW7</EMPH> HEBREW8</PAR> </HEBREW> <ENGLISH> <PAR>english9 english10 english11 HEBREW12 HEBREW13</PAR> <PAR>english14 english15 english16</PAR> <PAR>english17 <HE-QUO>HEBREW18 english19 HEBREW20</HE-QUO></PAR> </ENGLISH>
Поскольку это - XML, таблица стилей отвечает за направление письма.
Это таблица стилей:
Элемент HEBREW это блок с базовым направлением справа-налево, элемент ENGLISH это блок с базовым направлением слева-направо. PARы - это блоки, наследующие базовое направление от своих родителей. Таким образом, первые два PARа готовы начаться справа сверху, а последние три готовы начаться слева сверху. Обратите внимание, пожалуйста, что HEBREW и ENGLISH выбраны как имена элементов лишь для ясности; обычно имена элементов должны относиться к структуре, без ссылок на языки.
Элемент EMPH - уровня инлайн, и, поскольку его значение для 'unicode-bidi' - 'normal' (начальное значение), он не оказывает воздействия на порядок расположения текста. Элемент HE-QUO, напротив, создаёт внедрение.
Если длина строки достаточно большая, форматирование текста может выглядеть примерно так: 5WERBEH 4WERBEH english3 2WERBEH 1WERBEH 8WERBEH 7WERBEH 6WERBEH english9 english10 english11 13WERBEH 12WERBEH english14 english15 english16 english17 20WERBEH english19 18WERBEH
Заметьте, что внедрение HE-QUO заставляет HEBREW18 находиться справа от english19.
Если строки должны быть разбиты, то выглядеть будет примерно так: 2WERBEH 1WERBEH -EH 4WERBEH english3 5WERB -EH 7WERBEH 6WERBEH 8WERB english9 english10 en- glish11 12WERBEH 13WERBEH english14 english15 english16 english17 18WERBEH 20WERBEH english19
Поскольку HEBREW18 обязан быть прочитан до english19, он находится в строке над english19. Простой разрыв строки из предыдущего форматирования не должен сработать.
Заметьте также, что первый слог из english19 может войти на предыдущую строку, но перенос слов слева-направо в контекст справа-налево и наоборот обычно подавляется, чтобы исключить отображение знака переноса в середине строки.
Наследование
Некоторые значения наследуются потомками элемента в дереве документа. Каждое свойство определяет, наследуется оно или нет.
Предположим, имеется элемент H1 с выделенным элементом (EM) внутри:
<H1>The headline <EM>is</EM> important!</H1>Если цвет элементу EM не назначен, выделенное "is" будет наследовать цвет элемента-предка, и, поскольку H1 имеет голубой цвет, элемент EM будет, соответственно, голубым.
Чтобы установить свойство стиля "по умолчанию" в документе, авторы могут установить это свойство в корне дерева документа. В HTML, например, эту функцию могут выполнить элементы HTML или BODY. Заметьте, что это будет работать, даже если автор опустит тэг BODY в тексте HTML, поскольку разборщик HTML вставит отсутствующие тэги.
Пример(ы):
Например, поскольку свойство 'color' наследуется, все потомки элемента BODY будут наследовать цвет 'black': BODY { color: black; }
Специфицированные процентные значения не наследуются, а вычисленные значения - наследуются.
Пример(ы):
В данной таблице:
BODY { font-size: 10pt } H1 { font-size: 120% }и в этом фрагменте документа: <BODY> <H1>A <EM>large</EM> heading</H1> </BODY>
свойство 'font-size' элемента H1 будет иметь вычисленное значение'12pt' (120% от 10pt, значения-предка). Поскольку значение свойства 'font-size' наследуется, элемент EM также получит вычисленное значение '12pt'. Если ПА не имеет доступного шрифта в 12pt, реальное значение 'font-size' и для H1, и для EM может быть, например, '11pt'.
Наследуется/Inherited
Наследуется/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
(переводчик русской версии).
Операторы
4.1.4 Операторы
Таблица стилей любой версии CSS состоит из списка операторов (см. грамматику выше). Есть два вида операторов: at-правила и наборы правил. Вокруг операторов могут быть пробелы.
В данной спецификации выражения "непосредственно перед" или "сразу после" означают отсутствие пробелов или комментариев.
Описание шрифта и @fontface
15.3.1 Описание шрифта и @font-face
Описание шрифта является мостом между авторской спецификацией шрифта и данными шрифта, которые представляют собой данные, необходимые для форматирования текста и для представления абстрактных глифов, для которых карта символов в действительности является упорядоченным контуром или растром. Шрифты имеют ссылку из свойств таблицы стилей.
Описания шрифтов добавляются к БД шрифтов и используются затем для выбора соответствующих данных шрифта. Описание шрифта содержит дескрипторы, такие как размещение данных шрифта в Web, и описание этих данных шрифта. Дескрипторы шрифта необходимы также при выборе свойств шрифта из таблицы стилей для определённых данных шрифта. Степень детализации описания шрифта может варьироваться от имени шрифта до списка ширины глифов.
Дескрипторы шрифта можно классифицировать по трём типам:
служащие связкой между использованием шрифта в CSS и описанием шрифта (эти дескрипторы имеют те же имена, что и соответствующие свойства шрифта CSS), URI для локализации данных шрифта, для характеристики шрифта, являющиеся связкой между описанием шрифта и данными шрифта.Все описания шрифта специфицируются at-правилом @font-face.
Общая форма такая:
@font-face { <font-description> }
где <font-description> имеет форму: дескриптор: значение; дескриптор: значение; [...] дескриптор: значение;
Одно правило @font-face специфицирует значение для одного дескриптора шрифта, явно или неявно. Дескрипторы, не получившие явных значений в правиле, берут их из списка для каждого дескриптора в этой спецификации. Эти дескрипторы применяются только в контексте того правила @font-face, в котором они определены, и не применяются к элементам языка документа. Таким образом, отсутствует указание на то, для каких элементов применяются дескрипторы, или на то, наследуются ли значения дочерними элементами.
Доступные дескрипторы шрифта описываются далее в разделах этой спецификации.
Например, это шрифт 'Robson Celtic', определённый и имеющий ссылку в таблице стилей, содержащейся в документе HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Font test</TITLE> <STYLE TYPE="text/css" MEDIA="screen, print"> @font-face { font-family: "Robson Celtic"; src: url("http://site/fonts/rob-celt") } H1 { font-family: "Robson Celtic", serif } </STYLE> </HEAD> <BODY> <H1> Этот заголовок выводится с использованием Robson Celtic</H1> </BODY> </HTML>
Таблица стилей (в элементе STYLE) содержит правило CSS, устанавливающее все элементы H1 на использование семейства шрифтов 'Robson Celtic'.
Реализация CSS1 будет искать у клиента шрифт, чьи имя семейства и другие свойства совпадают с 'Robson Celtic', и, если совпадение не будет найдено, будет использоваться специфичный для данного ПА резервный шрифт serif (который должен существовать).
ПА, реализующий CSS2, сначала проверяет правила @font-face для поиска описания шрифта, определённого как 'Robson Celtic'. Данный пример содержит подходящее правило. Хотя в этом правиле и не содержится много данных шрифта, в нём есть URI, где можно запросить шрифт для представления данного документа. Загруженные шрифты не должны становиться доступными для других приложений. Если не найдено совпадение для @font-face, ПА попытается выполнить сравнение как ПА с CSS1.
Обратите внимание, что, если шрифт 'Robson Celtic' был установлен на клиентской системе, это может вызвать добавление пользовательским агентом входа в БД шрифтов для установленной копии, как описано в разделе алгоритм совпадения шрифта. Установленная копия получит совпадение до загружаемого шрифта (в предыдущем примере).
Реализации CSS1, не понимающие правило @font-face, вычислят открывающую фигурную скобку и будут игнорировать всё до появления закрывающей скобки. Это at-правило соответствует требованию вперёд-совместимого разбора CSS. Разборщики могут игнорировать эти правила без возникновения ошибки.
Разделение дескрипторов шрифта и данных шрифта даёт возможность выполнит выбор и/или замену шрифта. Защита данных и ограничения репликации для дескрипторов шрифта могут быть менее жёсткими, чем для полных данных шрифта.
Таким образом, возможно установить определение шрифта локально или как минимум иметь его в локальном кэше, если он появляется в обычно используемой таблице стилей; это может не потребовать доступа к полному определению шрифта в Web больше, чем однократно, для именованного шрифта.
Если дескриптор шрифта дублируется, последний появившийся дескриптор используется, а остальное должно игнорироваться.
Также любые дескрипторы, которые не распознаются или не используются ПА, должны игнорироваться. Последующие версии CSS могут предоставить дополнительные дескрипторы для лучшего подбора, замены или синтеза шрифта.
Определение "содержащего блока"
Позиция и размер бокса(ов) элемента иногда вычисляются относительно определённого прямоугольника, называемого содержащий блок элемента.
Содержащий блок элемента определяется так:
Если такого предка нет, край содержимого бокса корневого элемента устанавливает содержащий блок.
Пример(ы):
Содержащие блоки (СБ) без позиционирования в этом документе:
<HTML> <HEAD> <TITLE>Illustration of containing blocks</TITLE> </HEAD> <BODY id="body"> <DIV id="div1"> <P id="p1">This is text in the first paragraph...</P> <P id="p2">This is text <EM id="em1"> in the <STRONG id="strong1">second</STRONG> paragraph.</EM></P> </DIV> </BODY> </HTML>устанавливаются так:
СБ устанавливается | |
body | начальным СБ (зависит от ПА) |
div1 | body |
p1 | div1 |
p2 | div1 |
em1 | p2 |
strong1 | p2 |
Если позиция "div1":
#div1 { position: absolute; left: 50px; top: 50px }то его содержащий блок - уже не "body"; им становится начальный содержащий блок (поскольку отсутствуют другие позиционированные боксы предка).
Также, если позиция "em1":
#div1 { position: absolute; left: 50px; top: 50px } #em1 { position: absolute; left: 100px; top: 100px }таблица содержащих блоков будет:
СБ устанавливается | |
body | начальным СБ |
div1 | начальным СБ |
p1 | div1 |
p2 | div1 |
em1 | div1 |
strong1 | em1 |
При позиционировании "em1", его содержащим блоком становится ближайший позиционированный бокс предка (т.е. тот, который сгенерирован "div1").
Определения
В этом разделе мы начинаем формальную спецификацию CSS2 с соглашения между авторами, пользователями и исполнителями.
Ключевые слова "ОБЯЗАН", "НЕ ОБЯЗАН", "НЕОБХОДИМ", "БУДЕТ", "НЕ БУДЕТ", "ДОЛЖЕН", "НЕ ДОЛЖЕН", "МОЖЕТ", "РЕКОМЕНДУЕТСЯ" И "НЕОБЯЗАТЕЛЕН" в этом документе интерпретируются так, как описано в [RFC2119].
Однако, для удобства чтения эти слова не употребляются в этой спецификации со всеми буквами в верхнем регистре.
Время от времени авторы этой спецификации дают практические рекомендации для авторов и пользовательских агентов (ПА). Эти рекомендации не являются нормативными и соответствие с этой спецификацией не зависит от их реализации. Эти рекомендации содержат выражения типа: "мы рекомендуем ...", "эта спецификация рекомендует ...", или другие подобные конструкции.
Таблица стилей Набор операторов, специфицирующих представление документа.Таблицы стилей могут иметь три различных источника: автор, пользователь и ПА. Взаимодействие этих источников описано в разделе Каскадирование и наследование.
Действующие таблицы стилей
Статус таблицы стилей зависит от уровня CSS, используемого в таблице стилей. Все действующие таблицы стилей CSS1 являются действующими и в CSS2. Однако некоторые изменения по сравнению с CSS1 указывают, что некоторые таблицы стилей CSS1 будут иметь несколько другую семантику в CSS2.
Действующая таблица стилей CSS2 обязана быть написана в соответствии с грамматикой CSS2. Кроме того, она обязана содержать только at-правила, названия свойств и значения свойств, определённые в данной спецификации. Неверное at-правило, название свойства или значение свойства - это то, которое имеет неверное значение.
Документ-источник
Документ, на который ссылается одна или более таблиц стилей. Он кодирован в том же языке, в котором документ представлен как дерево элементов. Каждый элемент состоит из имени, идентифицирующего тип элемента, нескольких необязательных атрибутов и (возможно пустого) содержимого.
Язык документа
Язык кодировки документа-источника (например, HTML или XML).
Элемент
(Термин SGML, см. [ISO8879].) Первичные синтаксические конструкции языка документа. Большинство правил таблиц стилей CSS используют имена элементов (такие как "P", "TABLE" и "OL" в HTML) для спецификации информации для их представления.
Замещаемый элемент
Элемент, для которого форматировщик CSS знает только внутренние размеры. В HTML элементы IMG, INPUT, TEXTAREA, SELECT и OBJECT можно привести в качестве примеров таких элементов. Например, содержимое элемента IMG часто замещается изображением, на которое указывает атрибут "src". CSS не определяет, как находить внутренние размеры.
Внутренние размеры
Ширина и высота, определённые самим элементом, а не его окружением. В CSS2 принято, что все замещаемые элементы - и только замещаемые элементы - появляются с внутренними размерами.
Атрибут
Значение, ассоциированное с элементом, состоящее из названия и ассоциированного значения.
Содержимое
Содержимое, ассоциированное с элементом в документе-источнике; не все элементы имеют содержимое, и в этом случае они называются пустыми. Содержимое элемента может быть текстом и может включать несколько субэлементов, тогда такой элемент называется родительским (элементом-предком) для субэлементов.
Выводимое содержимое
Содержимое элемента после вывода, которое представляется в соответствии с подключённой таблицей стилей. Выводимое содержимое замещаемых элементов
поступает извне документа-источника. Выводимое содержимое может быть также альтернативным текстом для данного элемента (например, значением атрибута "alt" в HTML) и может включать объекты, вставленные, явно или неявно, таблицей стилей: маркировка или нумерация списков и т.п.
Дерево документа
Дерево элементов, кодированных в документе-источнике. Каждый элемент в этом дереве имеет только одного предка, за исключением элемента root, который предков не имеет.
Дочерний элемент
Элемент А называется дочерним элементом элемента В, если только В является родителем А.
Потомок
Элемент А называется потомком элемента В, если (1) А является дочерним по отношению к В, или (2) если А является дочерним относительно элемента С, который является потомком В.
Предок (родительский элемент)
Элемент А называется предком элемента В, если, и только если, В является потомком А.
Родственник
Элемент А называется родственником элемента В, если, и только если, В и А имеют одного общего предка.
Элемент А является предшествующим родственником, если появляется перед В в дереве документа.
Элемент В является последующим родственником, если появляется после А в дереве документа.
Предшествующий элемент
Элемент А называется предшествующим элементу В, если, и только если, (1) А является предком В или (2) А является предшествующим родственником В.
Последующий элемент
Элемент А называется последующим элементом для В, если, и только если, В является предшествующим элементом для А.
АвторТот, кто пишет документы и ассоциированные таблицы стилей.
Авторская утилита генерирует документы и ассоциированные таблицы стилей.
Пользователь Тот, кто взаимодействует с пользовательским агентом (ПА) для просмотра, прослушивания или другого использования документа и ассоциированной таблицы стилей. Пользователь может предоставлять персональную таблицу стилей, которая кодирует персональные установки-предпочтения.
Пользовательский агент (ПА)
Это какая-либо программа, интерпретирующая документ, написанный на определённом языке документов, и ассоциированную с ним таблицу стилей в соответствии с терминами данной спецификации. ПА может отображать документ, "читать" его вслух, распечатывать его, конвертировать его в другой формат и т.п.
Это пример документа-источника, кодированного в HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <TITLE>My home page</TITLE> <BODY> <H1>My home page</H1> <P>Welcome to my home page! Let me tell you about my favorite composers: <UL> <LI> Elvis Costello <LI> Johannes Brahms <LI> Georges Brassens </UL> </BODY> </HTML>
Это дерево данного документа:
Определения свойств CSS
1.3.2 Определения свойств CSS
Каждое определение свойства CSS начинается общей ключевой информацией:
'property-name'Значение: | действительные значения & синтаксис |
Начальное: | начальное значение |
Применяется: | к соответствующим элементам |
Наследуется: | если свойство наследуется |
Процентное: | интерпретация процентных значений |
Носитель: | к каким группам носителей применяется свойство |
Ошибочные условия
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'
Значение: | <length> | <percentage> | inherit |
Начальное: | 0 |
Применяется: | к элементам уровня блока |
Наследуется: | да |
Процентное: | относительно ширины содержащего блока |
Носитель: | визуальный |
Это свойство специфицирует отступ первой строки текста в блоке. Точнее, оно специфицирует отступ первого бокса, всплывающего в первый строчный бокс блока. Бокс получает отступ относительно левого (или правого, для вывода справа-налево) края строчного бокса. Пользовательские агенты (ПА) должны отображать этот отступ как пробел.
Значения имеют следующий смысл:
<length> Отступ имеет фиксированный размер. <percentage> Процент от ширины содержащего блока.Значение 'text-indent' может быть отрицательным, но могут быть ограничения, зависящие от реализации.
Пример(ы):
Отступ размером '3em' для текста. P { text-indent: 3em }
Оттенение текста свойство 'textshadow'
16.3.2 Оттенение текста: свойство 'text-shadow'
'text-shadow'
Значение: | none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit |
Начальное: | none |
Применяется: | ко всем элементам |
Наследуется: | нет (см. текст) |
Процентное: | N/A |
Носитель: | визуальный |
Это свойство принимает список разделённых запятыми эффектов оттенения, применяемых к тексту элемента. Эффекты оттенения применяются в том порядке, в котором они специфицированы, и могут, таким образом, перекрываться один другим, но они никогда не перекрывают сам текст. Эффекты оттенения не изменяют размеры бокса, но могут выходить за его пределы. Уровень стэка эффекта оттенения - тот же самый, что и самого элемента.
Каждый эффект оттенения обязан специфицировать смещение оттенения и может по выбору специфицировать радиус рассеяния и цвет тени.
Смещение оттенения специфицируется двумя значениями <length>, указывающими расстояние от текста. Первое значение специфицирует расстояние по горизонтали справа от текста. Отрицательное значение по горизонтали помещает тень слева от текста. Второе значение специфицирует вертикальное расстояние под текстом. Отрицательное значение по вертикали помещает тень сверху от текста.
Радиус рассеяния может быть по выбору специфицирован после смещения оттенения. Радиус рассеяния это значение, обозначающее границы эффекта рассеяния. Точный алгоритм вычисления эффекта рассеяния не специфицирован.
Значение цвета может быть по выбору специфицировано до или после значений length эффекта оттенения. Значение цвета будет использоваться как базис эффекта оттенения. Если цвет не специфицирован, вместо него будет использоваться значение свойства 'color'.
Оттенения текста могут использоваться вместе с псевдоэлементами :first-letter и :first-line.
Пример(ы):
Следующий пример установит тень справа и снизу от текста элемента. Поскольку цвет не специфицирован, тень будет того же цвета, что и сам элемент, и, поскольку радиус рассеяния не специфицирован, тень текста не будет рассеиваться:
H1 { text-shadow: 0.2em 0.2em }Следующий пример установит тень справа и снизу от текста элемента. Тень будет иметь радиус рассеяния 5px и красный цвет: H2 { text-shadow: 3px 3px 5px red }
Следующий пример специфицирует список эффектов оттенения. Первая тень будет справа и снизу от текста элемента и будет красного цвета без рассеяния. Вторая тень будет перекрывать первую и будет жёлтая, с рассеянием и размещена влево и ниже текста. Третья тень будет справа и сверху над текстом. Поскольку у неё цвет не специфицирован, будет использоваться значение свойства 'color' элемента:
H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }Пример(ы):
Рассмотри этот пример: SPAN.glow { background: white; color: white; text-shadow: black 0px 0px 5px; }
Здесь свойства 'background' и 'color' имеют одинаковые значения, и свойство 'text-shadow' используется для создания эффекта "солнечного затмения":
Переполнение и сжатие
Обычно содержимое бокса блока ограничено краями бокса. В определённых случаях бокс может переполняться, то есть его содержимое частично или полностью находится за пределами бокса, например:
Строка не может быть разорвана, и строчный бокс оказывается шире, чем бокс блока. Бокс уровня блока слишком широк для содержащего блока. Это случается, если свойство 'width' элемента имеет такое значение, которое вызывает растекание генерируемого бокса блока за пределы содержащего блока. Высота элемента превосходит явно установленную высоту содержащего блока (т.е. высота содержащего блока определяется свойством 'height', а не высотой содержимого). Бокс позиционирован абсолютно. Бокс имеет отрицательные значения полей.Когда возникает переполнение, свойство 'overflow' специфицирует, как сжимается бокс ( и сжимается ли). Свойство 'clip' специфицирует размер и форму сжимаемой области. Спецификация маленькой области для сжатия может вызвать сжатие другого видимого содержимого.
Переполнение свойство 'overflow'
11.1.1 Переполнение: свойство 'overflow'
'overflow'
Значение: | visible | hidden | scroll | auto | inherit |
Начальное: | visible |
Применяется: | к элементам уровня блока и к замещаемым элементам |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный |
Это свойство специфицирует, сжимается ли содержимое элемента уровня блока, если оно переполняет бокс элемента (который действует как содержащий блок для содержимого).
Значения имеют следующий смысл:
Даже если 'overflow' установлено в 'visible', содержимое может быть обрезано до размеров окна документа ПА средой окружения.
Пример(ы):
Рассмотрим следующий пример блока кавычек (BLOCKQUOTE), который слишком велик для своего содержащего блока (установленного DIV). Вот документ-источник:
<DIV> <BLOCKQUOTE> <P>I didn't like the play, but then I saw it under adverse conditions - the curtain was up. <DIV class="attributed-to">- Groucho Marx</DIV> </BLOCKQUOTE> </DIV>Это таблица стилей, управляющая размерами и стилем генерируемых боксов: DIV { width : 100px; height: 100px; border: thin solid red; } BLOCKQUOTE { width : 125px; height : 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black } DIV.attributed-to { text-align : right; }
Начальное значение 'overflow' - 'visible', поэтому BLOCKQUOTE может быть сформатирован без сжатия примерно так:
Подчёркивание надчёркивание перечёркивание и мигание свойство '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 и таблицу стилей:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Float example</TITLE> <STYLE type="text/css"> IMG { float: left } BODY, P, IMG { margin: 2em } </STYLE> </HEAD> <BODY> <P><IMG src=img.gif alt="This image will illustrate floats"> Some sample text that has no other... </BODY> </HTML>IMG-бокс всплывает влево. Последующее содержимое форматируется справа от поплавка, начиная с той же строки, где находится поплавок. Строчные боксы справа от поплавка укорачиваются из-за присутствия поплавка, но имеют свою "нормальную" ширину (как в содержащем блоке, установленном элементом P) после поплавка. Этот документ может быть сформатирован так:
Порядок каскадирования
6.4.1 Порядок каскадирования
Чтобы найти значение для комбинации элемент/свойство, ПА обязаны применять следующий порядок сортировки:
Найти все объявления, применяемые в запросе к элементу и свойству, для целевого типа носителя. Объявления применяются, если ассоциированный селектор подбирает элемент в запросе. Сначала объявления сортируются по весу и источнику: для нормальных объявлений - авторские таблицы стилей переопределяют пользовательские, которые, в свою очередь, переопределяют таблицу стилей по умолчанию. Для объявлений "!important" - пользовательские таблицы стилей переопределяют авторские таблицы, которые, в свою очередь, переопределяют таблицу стилей по умолчанию. Объявления "!important" переопределяют нормальные объявления. Импортированная таблица стилей имеет тот же источник, что и таблица стилей, импортировавшая её. Вторая сортировка производится по специфике селектора: более специфические селекторы переопределяют более общие. Псевдоэлементы и псевдоклассы обсчитываются как нормальные элементы и классы соответственно. Наконец, идёт сортировка по специфицированному порядку: если два правила имеют одинаковые вес, источник и специфику, выбирается специфицированное позже. Правила в импортируемых таблицах стилей рассматриваются перед любыми правилами имеющейся таблицы стилей.Независимо от установок "!important" индивидуальных объявлений, эта стратегия даёт авторским таблицам стилей больший вес, чем таблицам читателя. Это тем более важно, поскольку ПА предоставляют пользователю возможность отключить влияние определённых таблиц стилей, например, в выпадающих меню.
Порт просмотра
9.1.1 Порт просмотра
ПА для непрерывных носителей обычно предлагают пользователю порт просмотра (окно или другую область просмотра на экране), в котором пользователь видит документ. ПА могут изменять внешний вид документа, если порт просмотра изменил размеры (см. начальный содержащий блок). Если порт просмотра меньше, чем начальный содержащий блок документа, ПА должен предоставить механизм прокрутки. Имеется не менее одного порта просмотра в канве, но ПА могут отображать более чем одну канву (т.е. предоставлять различные виды того же самого документа).
Позиция и выравнивание заголовка
17.4.1 Позиция и выравнивание заголовка
'caption-side'
Значение: | top | bottom | left | right | inherit |
Начальное: | top |
Применяется: | к элементам 'table-caption' |
Наследуется: | да |
Процентное: | N/A |
Носитель: | визуальный |
Это свойство специфицирует позицию бокса заголовка относительно бокса таблицы.
Значения имеют следующий смысл:
Заголовки сверху или снизу от элемента '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'Значение: | <length> | <percentage> | auto | inherit |
Начальное: | auto |
Применяется: | к позиционируемым элементам |
Наследуется: | нет |
Процентное: | относительно высоты содержащего блока |
Носитель: | визуальный |
Это свойство специфицирует, насколько смещён вниз верхний край содержимого бокса относительно верхнего края содержащего блока. 'right'
Значение: | <length> | <percentage> | auto | inherit |
Начальное: | auto |
Применяется: | к позиционируемым элементам |
Наследуется: | нет |
Процентное: | относительно ширины содержащего блока |
Носитель: | визуальный |
Это свойство специфицирует, насколько смещён влево правый край содержимого бокса относительно правого края содержащего блока. 'bottom'
Значение: | <length> | <percentage> | auto | inherit |
Начальное: | auto |
Применяется: | к позиционируемым элементам |
Наследуется: | нет |
Процентное: | относительно высоты содержащего блока |
Носитель: | визуальный |
Это свойство специфицирует, насколько смещён вверх нижний край содержимого бокса относительно низа содержащего блока. 'left'
Значение: | <length> | <percentage> | auto | inherit |
Начальное: | auto |
Применяется: | к позиционируемым элементам |
Наследуется: | нет |
Процентное: | относительно ширины содержащего блока |
Носитель: | визуальный |
Это свойство специфицирует, насколько смещён вправо левый край содержимого бокса относительно левого края содержащего блока.
Значения для этих четырёх свойств имеют следующий смысл:
<length> Смещением является расстояние от соответствующего края. <percentage> Смещением является процент ширины содержащего блока (для 'left' или 'right') или высоты содержащего блока (для 'top' и 'bottom'). Для 'top' и 'bottom', если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентное значение интерпретируется так же, как 'auto'. auto Действие этого значения зависит от того, какое из соответствующих свойств также имеет значение 'auto'. См. также разделы ширина и высота абсолютно позиционируемых, незамещаемых элементов.Для абсолютно позиционируемых боксов - смещения являются относительными к содержащему блоку бокса. Для относительно позиционируемых боксов - смещения являются относительными к внешним краям самого бокса (т.е. боксу задаётся нормальное расположение, а затем - смещение от этой позиции в соответствии с вышеуказанными свойствами).
Позиционирование поплавка свойство 'float'
9.5.1 Позиционирование поплавка: свойство 'float'
'float'
Значение: | left | right | none | inherit |
Начальное: | none |
Применяется: | ко всему, кроме позиционированных элементов и генерируемого содержимого |
Наследуется: | нет |
Процентное: | N/A |
Носитель: | визуальный |
Это свойство специфицирует, должен ли бокс всплывать влево, вправо или не всплывать вообще. Оно может быть установлено для элементов, генерирующих боксы, которые не позиционированы абсолютно.
Значения этого свойства имеют следующий смысл:
Вот точные правила, управляющие поведением поплавка:
Левый внешний край всплывающего влево бокса не может быть слева от левого края его содержащего блока. Аналогичное правило действует для элементов, всплывающих вправо. Если текущий бокс всплывает влево и имеются другие всплывающие влево боксы, сгенерированные элементами в документе-источнике ранее, тогда для каждого такого предшествующего бокса или левый внешний край текущего бокса обязан быть справа от правого внешнего края предшествующего бокса, или его верх обязан быть ниже, чем низ предшествующего бокса. Аналогичное правило действует для боксов, всплывающих вправо. Правый внешний край всплывающего влево бокса не может быть справа от левого внешнего края какого-либо всплывающего вправо бокса, находящегося справа от него. Аналогичные правила действуют для элементов, всплывающих вправо. Верхний внешний край всплывающего бокса не может быть выше, чем верх его содержащего блока. Верхний внешний край всплывающего бокса не может быть выше, чем верхний внешний край любого всплывающего бокса блока, сгенерированного элементом ранее в документе-источнике. Верхний внешний край всплывающего бокса элемента не может быть выше, чем верх любого строчного бокса, содержащего бокс, сгенерированный элементом ранее в документе-источнике. Всплывающий влево бокс, имеющий слева от себя другой всплывающий влево бокс, не может иметь свой правый внешний край справа от правого края своего содержащего блока. (Говоря шире: левый поплавок не может находиться у правого края, если только он уже не находится слева так далеко, насколько это возможно.) Аналогичное правило действует для элементов, всплывающих вправо. Всплывающий бокс должен быть размещён так высоко, насколько это возможно. Всплывающий влево бокс обязан быть размещён так далеко влево, насколько это возможно, а всплывающий вправо бокс обязан быть размещён так далеко вправо, насколько это возможно. Более высока позиция имеет преимущество перед позицией, идущей далее влево/вправо.Позиционирование страничного бокса на листе
Позиционирование страничного бокса на листе
Если страничный бокс имеет размеры меньше целевых, то ПА может размещать страничный бокс в любом месте листа. Однако рекомендуется, чтобы страничный бокс центрировался на листе, поскольку это выровняет сдвоенные страницы и исключит случайную потерю информации, расположенной близко к краю листа.
Правила !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' для носителя имеет тот же эффект.