Ако някога сте отпечатвали резервации за билети или упътвания до хотел от мрежата, вероятно сте били по-малко впечатлени от резултатите. Следователно може да не сте наясно, че отпечатаните документи могат да бъдат стилизирани по същия начин, както те могат да бъдат на екрана, като се използват каскадни таблици със стилове (CSS).

Разделяне на загрижеността

Ключово предимство на CSS е отделянето на съдържанието от презентацията. Най-просто казано, това означава вместо много старомодна стилистична маркировка като:

Заглавие

Използваме семантично маркиране:

Заглавие

Това не само е много по-чисто, но също така означава, че нашата презентация е отделена от нашето съдържание. Браузърите се визуализират h1 елементи като голям, удебелен текст по подразбиране, но можем да променим този стил по всяко време с таблица със стилове:

h1 {шрифт-тегло: нормално; }

Събирайки тези декларации за стил в отделен файл и препращайки този файл от нашия HTML документ, можем да използваме още по-добре разделянето. Таблицата със стилове може да се използва повторно и можем да променим този единствен файл по всяко време, за да актуализираме форматирането във всеки документ, който го използва.

Включително лист за стил на печат

По начин, подобен на включването на таблица със стилове на екрана, можем да посочим таблица със стилове за печат. Обикновено се включва лист със стил на екрана по следния начин:

Въпреки това, допълнителен атрибут, медии, позволява насочване въз основа на контекста, в който се изобразява документът. По подразбиране предишният елемент е еквивалентен на:

Това означава, че таблицата със стилове ще бъде приложена за всеки носител, в който е представен документът. Атрибутът мултимедия обаче може също така да приема стойности за печат и екран:

В този пример, print.css таблица със стилове ще се използва само когато документът е разпечатан. Това е много полезен механизъм. Можем да съберем всички често срещани стилове (може би семейство шрифтове или междуредие) в таблица със стилове, която се отнася за всички носители, и форматиране, специфично за медиите, в отделни таблици със стилове. Отново, това е поредната употреба на разделяне на проблемите.

Някои примерни декларации за стил

Чист фон

Почти сигурно не искате да губите мастило, отпечатвайки цветен фон или фоново изображение. Започнете с нулиране на всички настройки по подразбиране за тези стойности, които може да са зададени във вашия документ:

тяло {
фон: бял;
цвят черен;
}

Можете също така да предотвратите отпечатването на фонови изображения - те трябва да са декоративни и следователно да не са задължителна част от вашето съдържание:

* {
фоново изображение: няма! важно;
}

Свързани: Как да зададете фоново изображение в CSS

Как да зададете фоново изображение в CSS

CSS е мощен инструмент за стилизиране на уеб страници. Научаването как да поставите фоново изображение ви научава на много основи на CSS.

Контролиране на полета

Друг очевиден момент, който трябва да имате предвид по отношение на печата, е полето на страницата. Докато CSS предоставя средство за задаване на размер на полето, трябва да имате предвид, че вашият браузър и принтер също могат да повлияят на самите настройки на полето.

Например в диалоговия прозорец за печат на Chrome има настройка на полето, която има стойности, включително нито един и персонализиран което ще замени всичко, посочено чрез CSS:

Поради тази причина се препоръчва да оставите решенията за марж на читателя на публичните уеб страници. Въпреки това, за лична употреба или за създаване на оформление по подразбиране, задаването на полета за печат чрез CSS може да е подходящо. The @ страница правило позволява да се задават полета и трябва да се използва, както следва:

@page {
марж: 2 см;
}

CSS също има капацитет за по-сложни оформления за печат, като например промяна на полето в зависимост от това дали страницата е нечетна (дясна), четна (лява) или заглавна страница.

За съжаление, това се поддържа слабо - особено опцията за заглавна страница, но може да се използва в минимална степен. Следните стилове създават страници с малко по-големи долни полета от горните и малко по-големи полета на външния ръб на страницата от гръбначния стълб:

@page {
поле вляво: 20 мм;
поле вдясно: 20 мм;
margin-top: 40mm;
поле отдолу: 50 мм;
}
@page: ляво {
поле вляво: 30 мм;
}
@page: вдясно {
поле вдясно: 30 мм;
}

Скриване на неподходящо съдържание

Не цялото съдържание ще бъде подходящо за версия за печат на вашия документ. Ако вашата страница включва навигация с банери, реклами или странична лента, може да искате да предотвратите появата на тези подробности във версията за печат, например:

#contents, div.ad {display: none; }

Очевидно хипервръзките не са от значение в печатните материали, така че вероятно ще искате да премахнете всички стилове, които ги различават от околния текст:

a {текстова украса: няма; цвят: наследяване; }

Все пак може да искате читателите да имат достъп до оригиналните URL адреси и едно просто решение е да ги вмъкнете автоматично след свързания текст:

a [href]: след {
съдържание: "(" attr (href) ")";
размер на шрифта: 90%;
цвят: # 333;
}

Този CSS дава резултати като следното:

a [href]: след специално насочва позицията след (:след) всеки елемент на връзката (а), който всъщност има URL ([href]). The съдържание декларацията тук вмъква стойността на href атрибут между скоби. Имайте предвид, че могат да се прилагат други правила за стил, за да се контролира показването на генерираното съдържание.

Обработка на прекъсвания на страници

За да избегнете прекъсвания на страницата, оставяйки изолирано съдържание, или да го счупите неловко в средата, използвайте свойствата за прекъсване на страницата: прекъсване на страницата преди, прекъсване на страницата и прекъсване на страницата. Например:

таблица {страница-пробив вътре: избягвайте; }

Това трябва да помогне на таблиците да не обхващат множество страници, при условие че нито една не е по-висока от една страница. По същия начин:

h1, h2 {прекъсване на страницата преди: винаги; }

Това означава, че такива заглавия винаги започват нова страница. Това може да причини проблеми, ако веднага следвате h1 на вашата страница с h2, тъй като h1 ще се озове на страницата самостоятелно. За да избегнете това, просто отменете прекъсването на страницата с помощта на селектор, който е насочен към този конкретен екземпляр, например:

h1 + h2 {прекъсване на страницата преди: избягване; }

Преглед на стилове за печат

Във всички случаи браузърът и операционната система трябва да предоставят функция за предварителен преглед, често като част от стандартния диалогов прозорец за печат.

Браузърът Chrome прави по-удобно да проверявате и дори отстранявате грешки в стиловете си за печат чрез Инструменти за разработчици, както е показано от този пример, показващ автобиография със лист за стил на печат. Първо отворете главното меню и изберете Още инструменти последвано от Инструменти за разработчици опция:

От новия панел, който се появява, изберете Меню, тогава Още инструменти, следван от Предаване:

След това превъртете надолу до Емулирайте CSS тип носител настройка. Падащото меню ви позволява да превключвате между изгледите за печат и екрана на вашия документ:

Когато емулирате таблицата със стилове за печат, стандартът Стилове браузър е на разположение за проверка и промяна на правилата за стил на живо. Имайте предвид, че емулирането на печата на екрана все още не е 100% точно. Браузърът не знае нищо за размера на хартията и за @ страница правило не може да се емулира.

Печат в PDF

Удобна характеристика на съвременните операционни системи е възможността за печат в PDF файл. Всъщност всичко, което можете да отпечатате, може вместо това да бъде изпратено в PDF файл - няма истинска изненада, тъй като в крайна сметка PDF файл трябва да представлява отпечатан документ.

Това прави HTML, в комбинация с таблица със стилове за печат, отлично средство за създаване на висококачествен документ, който може да бъде изпратен като прикачен файл, както и отпечатан.

Отпечатайте разнообразни документи

Можете да използвате таблица със стилове за печат, за да създавате качествени документи, включително всичко от вашето CV до рецепти или съобщения за събития. Уеб страниците обикновено изглеждат грозни и съдържат нежелани детайли при отпечатване, но малък брой ощипвания на стилове могат драстично да подобрят резултатите от печат. Запазването на крайните резултати като PDF е бърз начин за създаване на атрактивни, професионални документи.

Как да отпечатваме уеб страници в PDF с Microsoft Edge

Попадали ли сте някога на интересна статия, която сте искали да запазите за по-късно? Е, можете да запазите като PDF с Edge в три лесни стъпки.

За автора