Описание

Css-каскадные таблицы стилей. подробное руководство скачать

Глава 13.Стили пользовательского интерфейса

контурам смещаться и перекрывать рамки или другие видимые части блока элемента, вопрос их размещения приобретет большее значение.

Еще одна неясность CSS2 состоит в том, что он явно уклоняется от определения поведения двух контуров, перекрывающих друг друга, и того, что происходит с контурами элементов, частично перекрытых другими элементами. Все это можно свести воедино в следующем примере:

Теперь предположим, что div#two следует в документе непосредственно за div#one. Он перекроет первый div, а его фон перекроет части контура первого div. Я не привел рисунка к этому примеру, потому что в спецификации CSS2 ничего не говорится о том, что могло бы произойти в этом случае. Должен ли быть видимым контур первого div, перекрывающий фон и содержимое второго div? Также должны образоваться области, в которых пересекаются два инверсных контура; что должно произойти там? Происходит ли двойная инверсия пикселов и таким образом восстановление исходного их состояния? И должны ли быть пикселы инвертированы один раз? Мы не знаем. Ни одна из иллюстраций не была бы ни верной, ни неверной, это был бы просто возможный результат - и не обязательно, что это был бы именно тот результат, на котором остановятся агенты пользователя или который определит будущая версия CSS.

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

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

Не все обитатели Всемирной паутины могут видеть эффекты, которые мы обсудили в этой книге. В США примерно 1,1 миллиона людей с ослабленным зрением, и очевидно, что они работают с Интернетом совсем не так, как те, кто видит хорошо.

К счастью, CSS не безмолвствуют по вопросу невизуального доступа. BCSS2 добавлена возможность применять стили в неэкранных устройствах. Тогда как Всемирная паутина эволюционировала, преимущественно ориентируясь на мониторы, т. е. на визуальную среду, CSS2 может применяться в невизуальных устройствах, если соответствующую поддержку обеспечивает агент пользователя.

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

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

Здесь видно, что во всех устройствах у элементов body будет белый фон, а их основной цвет будет черным. Затем отдельно представлен блок правил для устройства screen, за которым следует другой блок правил, применяемых только в устройстве print.

Блоки @media могут иметь любой размер и содержать любое количество правил. В тех ситуациях, когда авторы могут управлять только одной таблицей стилей, блоки ©media дают, возможно, единственный способ задания зависящих от среды таблиц стилей. Это также верно, когда CSS применяется для стилевого оформления документа, основанного на XML, не содержащего атрибут media или его эквивалент.

Устройства спостраничной разбивкой

С точки зрения CSS устройство с постраничной разбивкой (paged medium) - это любое устройство, в котором представление документа обрабатывается как ряд отдельных «страниц». На экране, который является устройством без разбивки (continuous medium), документы представляются как единая прокручиваемая «страница». Пример устройства без разбивки - свиток папируса. Печатные материалы, такие как книги, журналы и распечатки на лазерном принтере, - все это носители с постраничной разбивкой. К ним относятся и слайдовые презентации, в которых слайды демонстрируются поочередно. С точки зрения CSS каждый слайд - это «страница».

Стили для вывода на печать

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

Обратите внимание, что стили для вывода на печать также могли бы применяться в случае представления документа в режиме «предварительного просмотра перед печатью». Таким образом, в ряде обстоятельств стили для вывода на печать можно увидеть и на устройстве отображения.

Глава 14.Неэкранные устройства

Отличия между экранным и печатным представлениями /

Кроме очевидной физической разницы, между экранным и печатным представлениями существует ряд стилистических отличий. Самое основное - выбор шрифтов. Большинство разработчиков скажут, что рубленые шрифты лучше всего подходят для экранного представления, а вот шрифты антиква лучше читаются при печати. Таким образом, можно создать таблицу стилей для печати, выводящую текст документа шрифтом Times вместо Verdana.

Следующее отличие заключается в задании размеров шрифтов. Тот, кто хоть немного занимался веб-разработкой, вероятно, неоднократно слышал, что пункты не подходят для задания размеров шрифтов вИнтернете. В основном это верно, особенно если вы хотите, чтобы в различных броузерах и операционных системах размеры текста были одинаковыми. Однако печатное представление - это не веб-представ- ление, а веб-представление отличается от печатного. В печатном представлении применение пунктов или даже сантиметров или пик вполне допустимо, потому что печатные устройства знают физический размер своей области вывода. Принтер знает, что размер зоны печати соответствует размерам листа бумаги (например, 8.5x11 дюймов). Он также знает, сколько точек в дюйме, поскольку осведомлен о том, сколько точек на дюйм (dpi) может сгенерировать. Это значит, что принтер может оперировать такими физическими единицами измерения длины, как пункты.

Поэтому многие таблицы стилей для печати начинаются примерно с такого объявления:

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

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

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

лей, будет удален. Поскольку в любом случае большинство принтеров

Устройства с постраничной разбивкой

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

CSS2.X не содержит механизма выбора таблицы стилей в зависимости от устройства вывода пользователя. Таким образом, все принтеры будут использовать определенные автором таблицы стилей для вывода на печать. Модуль CSS3 «Media Queries» определяет способы выбора разных таблиц стилей для цветных и черно-белых принтеров, но на момент написания даннойкниги запросы типа устройства не поддерживаются.

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

Очевидное решение состоит в том, чтобы использовать CSS для верстки двух колонок (может быть, делая их перемещаемыми) и затем создавать для вывода на печать таблицу стилей, которая помещает содержимое в одну колонку. Таким образом, в таблице стилей для вывода на экран вы могли бы написать нечто подобное:

А это - в таблице стилей для вывода на печать: div#leftcol, divftrightcol

Если бы в CSS была возможность создавать макеты, состоящие из нескольких колонок, ничего подобного не понадобилось бы. К сожалению, на момент написания данной книги ничего в этом направлении не предложено, хотя попыток за долгие годы было предпринято немало.

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

Глава 14.Неэкранные устройства

Определение размера страницы

Практически так же, как он определяет блок элемента, CSS2 определяет и блок страницы (page box), который описывает компоненты страницы. Блок страницы образован, по существу, двумя областями:

• Областью страницы (page area), которая является той частью страницы, где располагается содержимое. Это аналог области содержимого обычного блока элемента, если принять, что границы области страницы выступают в роли начального блока-контейнера макета страницы. (Подробно о блоках-контейнерах рассказано в главе 7.)

• Областью полей (margin area), которая окружает область страницы. Модель блока страницы проиллюстрирована на рис. 14.1.

В CSS2 можно определять как размер блока страницы, так и размер полей. В CSS2.1 авторы могут задавать только размер области полей.

В обоих случаях эти параметры задаются с помощью правила @раде. Простой пример:

Это правило CSS2, поскольку оно использует свойство size, которое не было включено в CSS2.1 из-за отсутствия реализации.

Это свойство применяется для определения размера области страницы. Значение landscape (альбомная) разворачивает макет на 90°, тогда как portrait (книжная)- это обычная ориентация для распечаток на западных языках. Таким образом, документ при распечатке можно повернуть на 90°, объявив:

Свойство size не является частью CSS2.1. Это означает, что на момент написания книги неизвестно о существовании хотя бы двух реализаций size, способных взаимодействовать. Так что поддержка броузеров, скорее всего, слаба. CSS2.1 включает возможность стилевого оформления области полей блока страницы, что, вероятно, будет работать более надежно. Для того чтобы печать осуществлялась лишь на небольшом участке в центре страницы размером 8.5x11 дюймов, напишите:

В результате область печати будет иметь 1 дюйм в ширину и 3,5 дюйма в высоту.

Самое интересное в блоке страницы то, что поскольку он не имеет никакого отношения к шрифтам, то нельзя описывать ни поля, ни область страницы с помощью единиц длины em или ex. Допускаются только процентные значения и «линейные» единицы длины, такие как дюймы, сантиметры или пункты.

Выбор типов страниц

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

Теперь надо лишь применить эти типы страниц соответствующим образом. Значение id таблицы лун Сатурна- moon-data, т. е. вы пишете следующие правила:

Согласно этим правилам таблица распечатывается горизонтально, а весь остальной документ - вертикально. Это возможно благодаря свойству page, еще одного изгнанника CSS2.1.

Как видно из описания значений, единственное оправдание существования свойства page в том, что оно обеспечивает авторам возможность создавать именованные типы страниц для различных элементов документа.

Существует ряд базовых типов страниц, к которым можно обращаться посредством специальных псевдоклассов, и, что радует, эта возможность определена и в CSS2, и в CSS2.1. Псевдокласс :first позволяет применять специальные стили к первой странице документа. Пусть надо задать для первой страницы поле сверху большее, чем у других страниц. Вот как это делается:

В результате на всех страницах, за исключением первой, для которой поле сверху составит шесть сантиметров, будет создано поле высотой три сантиметра (примерно как на рис. 14.2).

Кроме оформления первой страницы, можно также задать размещение страниц слева или справа, имитируя разворот книги. Применяя псевдоклассы :left и. right, можно и их оформить по-разному. Например:

Эффект от применения этих правил будет таким же, как от задания больших полей «между» содержимым левой и правой страниц - там, где должен был бы располагаться корешок книги. Так всегда поступают, объединяя страницы в книгу. Результат применения предыдущих правил можно увидеть на рис. 14.3.

В устройствах с постраничной разбивкой неплохо было бы уметь влиять на размещение разрывов страниц. Управлять разрывами страниц