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

       

Long description of illustration of



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


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


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



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

   [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'
Значение:[ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
Начальное:0% 0%
Применяется:  к элементам уровня блока и к замещаемым элементам
Наследуется:нет
Процентное:относится к размеру самого бокса
Носитель:визуальный

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

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



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





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


[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

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



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

   [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


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



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

   [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 } <P>Какой-нибудь текст не менее двух строк.</P> Если предположить, что разрыв строки появится перед словом "не", последовательность фиктивных тэгов для этого фрагмента может быть такой:
<P> <P:first-line> <P:first-letter> К </P:first-letter>акой-нибудь текст </P:first-line> не менее двух строк. </P> Заметьте, что элемент :first-letter находится внутри элемента :first-line. Свойства, установленные в :first-line, наследуются в :first-letter, но переопределяются, если то же самое свойство установлено в :first-letter.



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


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



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

   [D] На втором рисунке область 1px на 1px закрывается одной точкой устройства с низким разрешением (экран компьютера), и та же самая область покрывается 16-ю точками на устройстве с высоким разрешением (как лазерный принтер 400 dpi).
   [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 } /* пики */ В тех случаях, когда специфицированные размеры не могут поддерживаться, ПА обязаны давать значение, приближённое к реальному.

Содержание раздела