CSS (каскадные таблицы стилей) дают вам значительный контроль над тем, как содержимое ваших веб-страниц отображается на экране. Этот элемент управления распространяется и на другие носители, например, при печати веб-страницы.
Вы можете быть удивлены, почему вы хотите добавить функция печати на вашу веб-страницу; в конце концов, большинство людей уже знают или могут легко понять, как распечатать веб-страницу, используя меню своего браузера.
Но есть ситуации, когда добавление кнопки печати или ссылка на сайт на страницу не только облегчит процесс для ваших пользователей, когда они должны распечатать страницу но, возможно, еще более важно, дать вам больше контроля над тем, как эти распечатки будут отображаться на бумага.
Вот как добавить кнопки печати или ссылки на ваши страницы и как определить, какие части содержимого вашей страницы будут печататься, а какие нет.
Добавление кнопки печати
Вы можете легко добавить кнопку печати на свою веб-страницу, добавив следующий код в HTML-документ, где вы хотите, чтобы кнопка появилась:
onclick = "window.print (); return false;" />
Кнопка будет помечена как распечатайте эту страницу когда он появится на веб-странице. Вы можете настроить этот текст по своему усмотрению, изменив текст в кавычках после
значение =в коде выше.
Обратите внимание, что перед текстом и после него стоит один пробел; это улучшает внешний вид кнопки, вставляя некоторое пространство между концами текста и краями отображаемой кнопки.
Добавление ссылки на печать
Еще проще добавить простую ссылку для печати на вашу веб-страницу. Просто вставьте следующий код в ваш HTML-документ, где вы хотите, чтобы ссылка появилась:
Распечатать
Вы можете настроить текст ссылки, изменив «печать» на все, что вы выберете.
Создание определенных разделов для печати
Вы можете настроить возможность для пользователей печатать определенные части вашей веб-страницы, используя кнопку печати или ссылку. Вы можете сделать это, добавив print.css файл на свой сайт, вызывая его в заголовке вашего HTML-документа, а затем определяя те разделы, которые вы хотите легко распечатать, определив класс.
Сначала добавьте следующий код в раздел head вашего HTML-документа:
type = "text / css" media = "print" />
Далее создайте файл с именем print.css. В этом файле добавьте следующий код:
тело {видимость: скрытый;}
.print {visibility: visible;}Этот код определяет все элементы в теле как скрытые при печати, если этому элементу не присвоен класс «print».
Теперь все, что вам нужно сделать, это назначить класс «print» тем элементам вашей веб-страницы, которые вы хотите печатать. Например, чтобы сделать раздел, определенный в элементе div, пригодным для печати, вы должны использовать
Все остальное на странице, которое не назначено этому классу, не будет напечатано.