, заданный так, чтобы выглядеть синим на экране, и вы также выбрали правила, определяющие интервал между буквами, размер шрифта и выравнивание текста. Если единственная вещь, которую вы хотите из- менить для своих печатных страниц, — это использование черного цвета вместо синего, то вам не нужно создавать новый стиль с целым набором новых свойств.
Просто создайте главную таблицу стилей, которая применяется в обоих случаях, и таблицу стилей для печати, который отменяет синий цвет для тега
Одна проблема этого подхода состоит в том, что вы должны убедиться, что сти- ли для принтера на самом деле имеют больший приоритет, чем основная таблица стилей. Таким образом, вам надо внимательно управлять каскадностью. Как об- суждалось в гл. 5, стили могут взаимодействовать между собой сложным образом: некоторые из них могут относиться к одному и тому же элементу и CSS-свойства этих стилей могут соединяться и отменять друг друга. Однако существует безоши- бочный способ убедиться в том, что одно свойство превосходит все остальные — применение правила
!important
Глава 16. CSS для распечатываемых веб-страниц 533Когда вы добавите !important после значения свойства в CSS-коде, это конкрет- ное свойство стиля будет доминировать в любых конфликтах с другими стилями. Добавьте правило !important к таблице стилей для печати, чтобы убедиться, что все теги
будут напечатаны черными:
h1 {
color: #000
!important ;
}
Этот стиль заголовка h1
отменит еще более специфические стили, включая
#main h1
, h1.title или
#wrapper #main h1
из основной таблицы стилей.
Изменяем текстовые стили
Необязательно, чтобы текст выглядел одинаково и на экране, и на бумаге. Хоро- шее начало создания таблицы стилей для принтера — изменение свойств font-size и color
. Задание размеров в пикселах для текста не слишком удобно для принтера.
Яркий зеленый текст будет хорошо выглядеть на экране, но в распечатке он может стать трудночитаемым бледно-серым текстом.
Задание размеров в пикселах и em (см. раздел «Установка размера шрифта» гл. 6) имеет смысл для экранного текста, но для печати лучше использовать пунк-
ты. Это единицы, в которых Word и другие программы обработки текста измеря- ют высоту шрифта. На практике большинство браузеров так или иначе переводят пикселы и em в нечто более подходящее для принтеров. Базовый экранный размер шрифта для большинства браузеров — 16 пикселов — печатается как 12 пунктов.
Однако нет никакого способа предугадать, как определенный браузер изменит размеры текста, так что для максимального управления печатью устанавливайте в своих таблицах стилей для печати размер шрифта в пунктах.
Чтобы все абзацы напечатались шрифтом размером 12 пунктов (общепринятый размер для печати), используйте следующее правило:
p {
font-size: 12pt;
}
Аналогично экранные цвета часто плохо переводятся, когда выводятся на чер- но-белом лазерном принтере. Четкий черный текст на белом фоне намного легче читается, чем, например, светло-серые буквы. Кроме того, как вы узнаете в следу- ющем разделе, белый текст на черном фоне, хоть и выглядит очень разборчиво на экране, часто не печатается, как следует. Чтобы сделать текст читабельным на бумаге, лучше печатать его черным цветом. Если хотите сделать весь текст абзаца черным, добавьте следующий стиль к своей таблице стилей для принтера:
p {
color: #000;
}
Как было сказано выше, если ваша таблица стилей для печати конкурирует со стилями из другой присоединенной таблицы, используйте правило
!important
, что- бы быть уверенными в том, что стили для принтера имеют больший приоритет:
p {
font-size: 12pt !important;
534 Часть 4. CSS для продвинутых color: #000 !important; } Чтобы весь текст на странице распечатался черным цветом, используйте уни- версальный селектор (см. подраздел «Универсальный селектор» раздела «Стили- зация групп тегов» гл. 3) и правило !important для создания отдельного стиля, ко- торый форматирует каждый тег, устанавливая для него текст черного цвета: * { color: #000 !important } Конечно, этот совет применяется, только если ваш сайт печатается на черно- белом принтере. Если вы знаете, что большинство пользователей сайта работают с цветными принтерами, то можете сохранить все цвета текста или изменить их так, чтобы они стали даже более яркими при печати. Стилизация фонов для печатиДобавление фоновых изображений и цветов к навигационным кнопкам, боковым панелям и другим элементам страницы придает контрастность и визуальную при- влекательность вашим веб-страницам. Но вы не можете быть уверенными, что фон правильно отобразится, когда эти страницы будут печататься. Поскольку цветные фоны съедают чернила и порошок принтера, большинство браузеров обычно не отправляют их на печать, а многие посетители Сети не включают фоны при печати, даже если их браузеры имеют такую возможность. Вдобавок, даже если фон на самом деле напечатается, он может конкурировать с любым текстом, наложенным на него. Это особенно верно, если текст сильно отличается от цветного фона на экране, но смешивается с фоном при печати на черно-белом принтере. ПРИМЕЧАНИЕ Белый текст на черном фоне обычно вызывает самую большую проблему — у вашего посетителя после печати получится чистый белый лист. К счастью, в современных браузерах есть возможность изменять белый текст на черный (или серый), когда идет печать без фона. Удаление элементов фона. Самый легкий способ решить проблему с фоном — просто удалить его из таблицы стилей для печати. Скажем, вы полностью изменя- ете заголовок так, чтобы текст стал белым, а у фона был темный цвет. Если стиль, который создает этот эффект, называется .headHighlight , то продублируйте то же самое название в таблице стилей только для печати: .headHighlight { color: #000; background: #FFF; } Этот стиль устанавливает фону белый цвет — цвет бумаги. Кроме того, чтобы получить четкий печатный текст, этот стиль выбирает для шрифта черный цвет. ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВУбить двух зайцевВы можете применять свойство background-color , чтобы установить белый фоновый цвет, таким образом: background-color: white . Вы получаете тот же са мый результат, используя краткую версию этого метода: Глава 16. CSS для распечатываемых веб-страниц 535background: white . Помните, что свойство background (см. раздел «Сокращенный вариант свойства background» гл. 8) может определить фоновое изображение, то, как это изображение повторяется, и его положение. Если же вы опустите любые значения, используя крат кую версию, браузер установит для свойства значение по умолчанию. Другими словами, если вы опустите значение для фонового изображения, то браузер уста новит значение none . Значит, такая декларация, как background: white; , не только устанавливает фоно вый цвет в белый, но и удаляет любые фоновые изо бражения. Используя краткое свойство background, вы убиваете сразу двух зайцев: устанавливаете белый фон и удаляете изображения, написав при этом совсем небольшой код. ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВОставление элементов фона. Если вы не хотите избавляться от фона, то може- те оставить его в надежде, что пользователи настроят свои браузеры так, чтобы те печатали фон. Если вы оставляете элементы фона в таблице стилей для печати, а над ними появляется текст, то убедитесь, что текст будет читабельным как с фоном, так и без него. Другая вещь, которую надо рассмотреть, — использование фоновых изображе- ний: нужно ли их печатать? Скажем, вы поместили логотип компании как фоновое изображение тега , используемого в качестве баннера страницы. Поскольку логотип находится на заднем плане (в фоне), он может не распечататься. Ваша ком- пания или клиент, возможно, не обрадуются, если на каждой странице распечатан- ного сайта не будет логотипа. В этом случае у вас есть несколько вариантов. Вы можете вставить логотип как обычный тег ![]() вместо фонового изображения. Этот способ работает, но что, если логотип выглядит замечательно на цветном мониторе и не очень хорошо, когда печатается на черно-белом принтере? Другой способ со- стоит в том, чтобы оставить один логотип в фоновом изображении и добавить дру- гой, более подходящий для печати, используя тег ![]() . Затем вы спрячете изобра- жение с экрана, но покажете его при печати. Рассмотрим, как это делается. 1. Добавьте тег ![]() в то место в коде HTML, где вы хотите, чтобы он появился при распечатке: 2. Затем в главной таблице стилей (той, которая применяется при отображении страницы на экране) добавьте стиль, который спрячет это изображение: .logo { display: none; } 3. В таблице стилей для печати добавьте в конец один стиль для показа изображе- В таблице стилей для печати добавьте в конец один стиль для показа изображе- ния: .logo { display: inline; } Теперь этот логотип на экране появляться не будет, а при печати — будет. ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙПоказываем ссылки при печатиПредположим, сотрудник поделился с вами распечат кой интересной статьи, которую он обранужил в Сети. Вы читаете и сталкиваетесь с таким переходом: «И вот я нашел секрет вечной жизни здесь». Подчеркивание 536 Часть 4. CSS для продвинутых говорит вам о том, что здесь расположена ссылка, которая разоблачит описываемый секрет. Но на листке бумаги, конечно, у вас нет возможности перейти по этой ссылке. Чтобы предотвратить эту проблему на своих собствен ных страницах, вы можете сделать так, чтобы связан ные URL печатались наряду с остальной частью текста: «секрет вечной жизни здесь ( http://www.pyramind_ scam.com/) ». Используя усовершенствованный се лектор :after и CSSсвойство content. , вы можете напечатать текст, который не появляется на экране в конце стилизуемого элемента. К сожалению, селек тор : after и свойство content не работают в Internet Explorer версии 7. Но они работают в Internet Explorer 8 (и более поздних версиях), Firefox, Safar и Operai, и, таким образом, вы можете печатать URL для тех поль зователей, которые работают с этими браузерами. Чтобы сделать это, добавьте стиль к таблице стилей для печати, который напечатает URL после каждой ссылки. Вы можете даже добавить другие текстовые элемен ты, например круглые скобки, чтобы это выглядело лучше: a:after { content: " (" attr(href) ") "; } Однако этот CSSкод не различает внешние или вну тренние ссылки, так что он также печатает зависимые от документа ссылки на другие страницы того же сай та: «Посетите домашнюю страницу (../../index.html) ». Используя селекторы атрибутов (см. гл. 3), вы можете заставить стиль печатать только абсолютные URL (те, которые начинаются с http:// ) следующим образом: a[href^="http://"]:after { content: " (" attr(href) ") "; } К счастью, все браузеры, которые понимают селектор :after и свойство content , понимают и этот селектор атрибута. Если вы используете относительные ссылки на сво ем сайте, то можете применять другой способ печати корректных, полных URLадресов. Для получения подробной информации просмотрите статью по адре су: www.alistapart.com/articles/goingtoprint/. Кроме того, поскольку попадатются и слишком длин ные ссылки, они могут не помещаться на распечатыва емой странице и будут обрезаны по достижении края бумажного листа. Чтобы этого не произошло, можно воспользоваться свойством word-wrap, чтобы заста вить браузер разбивать ссылки на насколько строк: a { word-wrap: break-word; } Добавьте показанный выше стиль к своей таблице сти лей, предназначенной для вывода на печать. ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВСкрытие нежелательных областей страницыВеб-страницы часто нагружаются вспомогательными информационными сред- ствами, такими как навигационные панели, боковая панель, полная полезных ссы- лок, поля для поиска и т. д. Эти элементы хороши для веб-серфинга, но они мало чем полезны на бумаге. Ваша веб-страница может также содержать объявления, видео и другие дополнительные детали, на которые люди не хотят впустую тратить дорогие чернила и тонер. Вы можете помочь своим пользователям, убрав эти эк- ранные излишества из того содержимого, которое посетители действительно хотят напечатать. Как рассказывалось в части 3 книги, один из способов разбить страницу состо- ит в том, чтобы определить теги для различных элементов: баннеров, основ- ной навигации, содержимого, уведомления об авторском праве и т. д. При разработ- ке каждого тега
, используя относительное или абсолютное позиционирование,
Глава 16. CSS для распечатываемых веб-страниц 537вы можете разместить различные элементы страницы там, где хотите их видеть. Вы можете использовать такую же структуру для создания таблицы стилей, пред- назначенной только для печати, где с помощью свойства display скрываются не- желательные элементы. Устанавливая значение display в none , вы можете заставить браузер удалить разработанный элемент со страницы. Так, чтобы не выводить на печать боковую панель, просто переопределите этот стиль в таблице стилей для печати и устано- вите его свойству display значение none : .sidebar { display: none; } Для большинства страниц требуется, чтобы таблица стилей для печати показы- вала только самые основные информационные элементы: логотип, главное содер- жимое, сведения об авторском праве, скрывая все остальное. Вы можете легко скрыть множество элементов таким селектором группы: .banner, .mainNav, .sidebar, .ads, .newsLinks { display: none; } Помните, что эти стили относятся к вашей таблице стилей для печати, а не к главной таблице стилей, иначе вы никогда не увидите навигацию, баннеры или другие важные области своей экранной страницы. Однако время от времени вы можете захотеть скрыть что-нибудь от вашей основной таблицы стилей и показать это только при печати. Скажем, вы помещаете логотип своего сайта как фоновое изображение в обла- сти баннеров страницы. Вы, возможно, захотите определить его так, чтобы наверху изображения логотипа, где ничего нет, были текст или ссылки. Вы (ваш босс или клиент), конечно, хотите, чтобы логотип появлялся на всех печатных страницах, но поскольку не все браузеры печатают фоновые изображения, вы не можете быть уверены, что логотип будет напечатан. Одно из решений этой проблемы состоит в том, чтобы вставить тег ![]() , содержащий измененную, более подходящую для печати версию логотипа; добавить класс к изображению; создать стиль класса в глав- ной таблице стилей со свойством display , которому установлено значение none ; а затем задать свойству display того же класса значение block в таблице стилей для печати — и дело в шляпе! Логотип появится только при печати. Добавление разрывов страницы для печатиВерсия 2.1 стандарта вложенных таблиц стилей включает много CSS-свойств, на- целенных на лучшее форматирование печатной веб-страницы: от установки ори- ентации страницы до определения полей и размера бумаги (полный список вы найдете на сайте www.w3.org/TR/CSS21/page.html ). К сожалению, современные брау- зеры распознают очень немногие из этих стилей для печати. Два широко признанных свойства — это page-break-before и page-break-after Первое свойство указывает браузеру вставить разрыв страницы перед данным 538 Часть 4. CSS для продвинутых стилем. Скажем, вы хотите, чтобы определенные заголовки всегда появлялись на- верху страницы, как, например, названия различных разделов длинного докумен- та (рис. 16.3). Вы можете добавить свойство page-break-before: always к стилю для форматирования этих заголовков. Аналогично, чтобы элемент появился в каче стве последнего объекта на странице, добавьте свойство page-break-after: always к сти- лю этого элемента. а б Рис. 16.3. При печати страницы браузер разделяет ее содержимое на множество страниц, чтобы вместить на каждой как можно больше текста (а). Если же вы хотите, чтобы разрывы страниц находились в более логичных местах, используйте свойство page-break-before (б) Свойство page-break-before также полезно для больших изображений, так как некоторые браузеры позволяют себе печатать их на двух страницах, затрудняя просмотр всего изображения целиком. Если у вас есть одна страница с тремя абза- цами текста, за которыми идет изображение, то браузер напечатает часть изобра- жения на одной странице, а оставшуюся часть — на второй странице. Если вы не хотите, чтобы пользователям понадобился скотч, чтобы собрать два изображения в одно, то применяйте свойство page-break-before . В этом случае рисунок напеча- тается на новой странице, которой он соответствует. Рассмотрим быстрый способ использования этих свойств в своих интересах. Создайте два класса стилей, названных, например, .break_after и .break_before : .break_before { page-break-before: always; } .break_after { page-break-after: always; } Теперь вы можете выборочно применять эти стили к элементам, которые должны печататься наверху или внизу страницы. Если вы хотите, чтобы определенный за- головок был напечатан наверху страницы, используйте такой стиль:
|
Скачать 20.28 Mb.