Автор: Крис Койер
Перевод: Всеволод Козлов
Многие веб-мастера не создают CSS-стилей для печати веб-страниц из-за того, что не знают, как это правильно реализовать. Проблема острая и требует незамедлительного решения!
Далее я покажу Вам, как всего лишь с помощью пары простейших строк кода реализовать грамотный CSS-стиль для печати веб-страниц.
Как Вы знаете, когда пользователь собирается вывести на печать ту или иную веб-страницу, он хочет распечатать контент, соответственно, навигация, хедер, футер и прочие ненужные элементы Вашего сайта ему абсолютно неинтересны на бумаге.
Посему наш CSS-стиль для печати будет выглядеть следующим образом:
#header, #navigation, #footer, .прочие, .ненужные, .элементы, .веб-страницы {
display: none; }
Благодарность за идею: 37signals
Оригинал статьи: Stylesheets for Printing
Смотрите также:
- Скрипт галереи
- Prestashop шаблоны
- Jquery скрипты
- Создание логотипа
- Css конструктор
- Blockquote css
- Сделать сайт
- Css reset
- Ускорение загрузки сайта
- Css прилепить футер
15 комментария(-ев)
Стоило еще добавить как сделать эти стили для печати именно стилями для печати, ну и сделать такое для этого сайта.
Евгений, я думаю, что сделать файл print.css и импортировать его в код страниц сможет каждый! Цель урока не такая… Согласись, если в каждой статье возвращаться к базовым основам, они будут необоснованно расти в размерах!
PS. Стиль для печати блога сделал
Вот это я понимаю, стиль для печати, а то 4 страницы, для статьи не дотягивающей до половины страницы, это было слишком
Евгений, да лень-матушка… Все потом-потом думаю, а тут ты меня простимулировал сделать прямо сейчас! и на http://www.seoschool.ru тоже стиль для печати прикрутил!
Спасибо за объяснения, все гениальное просто
Хм. Я бы предложил сделать по этому же принципе, но наоборот
! Мне кажется что более уместно сделать так:
CSS:
* {
display: none;
}
.отобразить {
display: block !important;
}
Связанно это именно с тем, что чаще всего блок для печати содержится в одном div блоке, и объем такого стиля будет значительно легче. И не потребуется кропотливо копировать названия стилей, которые необходимо скрыть.
Но в общем идея та же.
А я столкнулся с такой проблемой: на первой странице хочется сверху вывести шапочку, на последней странице в самом низу хочется вывести информацию с контактами. Пока у меня ничего не получилось. Кто знает как это сделать?
CSS:
* {
display: none;
}
.отобразить {
display: block !important;
}
Это не работает. Все становится невидимым при печати
Евгений, я думаю, что сделать файл print.css и импортировать его в код страниц сможет каждый
Я думаю display:none знает каждый. А вот о media=»print» этот каждый может и не знать….
Хочу научиться, а не читать мнения умников.
А как эти стили применить, если мы просто нажимаем на кнопку «Печать» в окне браузера, и нет отдельной страницы на сайте «Распечатать»?
Создайте тему лучше, как сделать сайт чтобы он кроссбраузерно отображался, проверять свои сайты в первую очередь надо а не советы давать.
Например обращать внимание на то что некоторые до сих пор люди пользуются IE6.
Сайт у меня совсем новый и пустой.А где чёрный дизайн найти с белым шрифтом не знаю.Не поможете?
Крис Койер, конечно, хорош. Но стоило расписать тонкости поподробнее. Пример в моей статье «Печатаем web-страницу правильно с помощью CSS» http://www.aimweb.ru/css/css-print-page-breaks/