Наука и техника

Css для печати

Многие начинающие верстальщики не уделяют должного внимания изучению специальных стилей предназначенных для распечатываемых веб-страниц. Это и не удивительно. Довольно редко требуется сделать страницы пригодные для печати на принтере. Но когда такая необходимость все же появляется, они начинают судорожно искать информацию по этому вопросу. Давайте исправим эту ситуацию. Когда-то, на заре развития интернета, веб-мастера делали отдельные страницы для просмотра на экране компьютера и для печати на бумаге. О минусах такого подхода можно написать очень много, но статья не об этом. Css изменил положение дел и позволил делать одни стили для монитора, а другие для распечатки. Нужно это для того чтобы исключить лишние элементы, такие как навигация, картинки, реклама и т.д. Мы используем принтер купленный в магазине http://technoportal.ua/printers.html, доступные цены большой выбор. Возможно купить как украинским пользователям так и русским. Css для печати А также чтобы перенести страницу на бумагу в наиболее удобном для чтения виде.

Аппаратно-зависимые таблицы стилей.

Css поддерживает много различных видов устройств. Это экраны, принтеры, проекторы, экранные дикторы, устройства для чтения шрифтом Брайля и т.д. Эти таблицы стилей применяются только при использовании соответствующего устройства, могут быть или внутренними или внешними. Давайте вставим в наш код между тегами head такое объявление: {link rel="stylesheet" media="print" href="print.css"} Тип устройства определяется в параметре media. По умолчанию, если не указать этот параметр, стили будут применяться к любым устройствам. Также можно указать несколько типов просто перечислив их через запятую. Такого же эффекта можно добиться используя инструкцию @media, например: @media print { /* стили для печати писать здесь */ } Чтобы проверить, как страница будет выглядеть при печати, нужно просто выбрать пункт «печать» в браузере. Откроется предпросмотр.

Правило «!important» и удобная отмена стиля для экранов

Предположим у вас на странице есть заголовок h1 и в основной таблице стилей ему задан красный цвет. Для того чтобы переопределить цвет заголовка при печати нужно либо добавить еще одну внешнюю таблицу стилей с параметром media=”print”, либо добавить инструкцию @media к основной. Уже там нужно указать для тега h1 черный цвет. Но здесь может возникнуть небольшая трудность. Вам нужно убедиться, что приоритет у стилей для принтеров выше, чем для мониторов. Самый простой способ это сделать применить !important. h1 { color: #000 !important ; } Это ключевое слово дает стилю абсолютный приоритет над основными стилями. В верстке его использовать не рекомендуется из-за того, что оно делает код более запутанным. Но для наших целей оно вполне подходит.

Наиболее часто изменяемые вещи

Наиболее часто переопределяют свойства font-size и color. Размер шрифта в пунктах (pt) в нашем случае намного более уместен, чем в пикселях(px). Цвет текста обычно делают черным. В большинстве случаев изменяют не только текст, но и фон на котором он написан. Согласитесь, что черный фон и белые буквы выглядят красиво на экране. Но пользователь потратит немало краски на такой фон. Вообще любые фоны рекомендуется отключать. Лишние элементы, которые не имеют никакого смысла вне браузера, тоже отключают.

Добавить комментарий

Кнопка «Наверх»