Читать онлайн «Спецификация CSS2». Страница 16

Автор Евгений Резниченко

В настоящее время есть два способа специфицировать зависимость от типа носителя в таблицах стилей:

[x].

Специфицировать целевой носитель из таблицы стилей с помощью at-правил @media или @import.

@import url("loudvoice.css") aural; @media print { /* здесь идёт таблица стилей для печати */ }

[x].

Специфицировать целевой носитель в языке документа. Например, в HTML 4.0 ( [HTML40] ) атрибут "media" элемента LINK специфицирует целевой носитель для внешней таблицы стилей:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Link to a target medium</TITLE> <LINK rel="stylesheet" type="text/css" media="print, handheld" href="foo.css"> </HEAD> <BODY> <P>Тело документа... </BODY> </HTML>

Правило @import определено в главе о каскадах.

Правило @media специфицирует целевые типы носителя (разделённые запятыми) в наборе правил (ограниченных фигурными скобками). Конструкция @media допускает присутствие правил таблиц стилей для различных носителей в одной таблице стилей:

@media print { BODY { font-size: 10pt } } @media screen { BODY { font-size: 12pt } } @media screen, print { BODY { line-height: 1.2 } }

Тип носителя CSS именует набор свойств CSS. ПА, заявляющий о поддержке типа носителя по имени, обязан поддерживать все свойства, применимые к данному типу носителя.

Имена для типов носителя в CSS отражают целевое устройство, на которое соответствующие свойства оказывают действие. В следующем списке типов носителя CSS описания в скобках не являются нормативными. Они лишь дают представление о том, к каким устройствам относится данный тип носителя.

все

Для всех устройств.

звуковой

Предполагается для использования в речевых синтезаторах. См. детали в разделе звуковые таблицы стилей.

брайль-устройство

Для брайль-устройств.

брайль-принтер

Для страничных брайль-принтеров.

портативный

Для портативных устройств (обычно с маленьким экраном, монохромных, с ограниченной пропускной способностью).

печатный

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

проектор

Предполагается для проецируемых презентаций, например, проекторов или печати на прозрачные носители. Информацию о вопросах форматирования, специфичных для страничных носителей, см. в разделе Страничные носители.

экран

Прежде всего - для компьютерного цветного экрана.

tty

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

Для устройств типа телевизора (низкое разрешение, цвет, ограниченная возможность прокрутки экрана, звуковые возможности).

Названия типов носителя нечувствительны к регистру.

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

Примечание. Будущие версии CSS могут расширить этот список. Авторы не должны ссылаться на названия типов носителя, ещё не определённых в спецификации CSS.

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

CSS2 определяет следующие группы носителей:

[x]. непрерывные или страничные. "Оба" означает, что свойство применяется к обеим группам носителей.

[x]. визуальные, звуковые или осязательные.

[x]. решётка (для устройств с решётками символов) или растровые. "Оба" означает, что свойство применяется к обеим группам носителей.

[x]. интерактивные (для устройств, взаимодействующих с пользователем или статичные (для не взаимодействующих). "Оба" означает, что свойство применяется к носителям обеих групп.

[x]. все (включает все типы носителей).

В следующей таблице показаны соотношения между группами носителей и типами носителя:

Соотношения между группами носителя и типами носителяТипы носителяГруппы носителейнепрерывный / страничныйвизуальный / звуковой / осязательныйрешётка / растровыйинтерактивный / статичныйзвуковойнепрерывныйзвуковойN/Aобабрайль-устройствонепрерывныйосязательныйрешёткаобабрайль-принтерстраничныйосязательныйрешёткаобапортативныйобавизуальныйобаобапечатныйстраничныйвизуальныйрастровыйстатичныйпроекторстраничныйвизуальныйрастровыйстатичныйэкраннепрерывныйвизуальныйрастровыйобаttyнепрерывныйвизуальныйрешёткаобаtvобавизуальный, звуковойрастровыйоба

Лекция 8. Модель бокса

Описывается модель бокса, свойства полей бокса, заполнения бокса и его рамок.

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

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

[D]

Поле, рамка и заполнение могут быть разорваны в левом, правом, верхнем или нижнем сегментах (например, на диаграмме, "LM" в левом поле, "RP" в правом заполнении, "TB" в верху рамки и т.д.).

Периметр каждой из четырёх областей (содержимого, заполнения, рамки и поля) называется "край", соответственно - каждый бокс имеет четыре края:

content edge/край содержимого или inner edge/внутренний край

Край содержимого окружает отображаемое содержимое.

padding edge/край заполнения

Окружает заполнение бокса . Если заполнение имеет ширину 0, край заполнения - это то же, что и край содержимого. Край заполнения бокса определяет края содержащего блока, установленного боксом.