Home-theater-designers
Ако някога сте отпечатвали резервации за билети или упътвания до хотел от мрежата, вероятно сте били по -малко впечатлени от резултатите. Следователно може да не знаете, че отпечатаните документи могат да бъдат оформени по същия начин, по който могат да се изобразят на екрана, като се използват каскадни таблици със стилове (CSS).
Разделяне на притесненията
Основно предимство на CSS е отделянето на съдържанието от представянето. Най-просто казано, това означава много старомодно стилистично маркиране като:
Heading
Използваме семантично маркиране:
Това не само е много по -чисто, но и означава, че нашата презентация е отделена от съдържанието ни. Браузърите изобразяват h1 елементи като голям, удебелен текст по подразбиране, но можем да променим този стил по всяко време с таблица със стилове:
h1 { font-weight: normal; }
Събирайки тези декларации за стил в отделен файл и препращайки този файл към нашия HTML документ, можем да използваме още по -добре разделянето. Таблицата със стилове може да се използва повторно и можем да променим този единствен файл по всяко време, за да актуализираме форматирането във всеки документ, който го използва.
Включително лист за стил на печат
По подобен начин с включването на стилова таблица на екрана, можем да посочим стилова таблица за печат. Таблица със стилове на екрана обикновено се включва по следния начин:
Допълнителен атрибут обаче половината , позволява насочване въз основа на контекста, в който е изобразен документът. По подразбиране предишният елемент е еквивалентен на:
Това означава, че таблицата със стилове ще бъде приложена за всеки носител, в който е изобразен документът. Атрибутът на носителя обаче може също да приема стойности за печат и екран:
В този пример, print.css таблицата със стилове ще се използва само когато документът е разпечатан. Това е много полезен механизъм. Можем да съберем всички обичайни стилове (може би семейство шрифтове или междуредови интервали) в таблица със стилове, която се прилага за всички носители, и специфично за медиите форматиране в отделни стилове. Отново, това е друга употреба за разделяне на опасенията.
Някои примерни декларации за стил
Чист фон
Почти със сигурност не искате да губите мастило, отпечатвайки цветен фон или фоново изображение. Започнете с нулиране на всички настройки по подразбиране за тези стойности, които може да са зададени във вашия документ:
body {
background: white;
color: black;
}
Може също да искате да предотвратите отпечатването на фонови изображения - те трябва да бъдат декоративни и следователно не са задължителна част от съдържанието ви:
* {
background-image: none !important;
}
Свързани: Как да зададете фоново изображение в CSS
как да инсталирате homebrew на wii без sd карта
Контролиране на маржове
Друг очевиден момент, който трябва да имате предвид при отпечатването, е полето на страницата. Докато CSS предоставя средство за настройка на размера на маржа, трябва да имате предвид, че вашият браузър и принтер също могат да повлияят на самите настройки на маржа.
Например в диалоговия прозорец за печат на Chrome има настройка на поле, която има стойности, включително нито един и персонализиран което ще замени всичко, посочено чрез CSS:
Поради тази причина се препоръчва да оставите решенията за марж на читателя на публични уеб страници. Въпреки това, за лична употреба или за създаване на оформление по подразбиране, настройката на полета за печат чрез CSS може да бъде подходяща. The @страница правилото позволява да се задават полета и трябва да се използва, както следва:
@page {
margin: 2cm;
}
CSS също така има капацитет за по-сложни оформления за печат, като например промяна на полето в зависимост от това дали страницата е с нечетен номер (вдясно), четен номер (вляво) или заглавната страница.
как да намерите тайна група във фейсбук
За съжаление, това се поддържа слабо - особено опцията за заглавната страница - но може да се използва в минимална степен. Следните стилове произвеждат страници с малко по -големи долни полета от горните и малко по -големи полета по външния ръб на страницата от гръбнака:
@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}
Скриване на неподходящо съдържание
Не цялото съдържание ще бъде подходящо за печатна версия на вашия документ. Ако страницата ви включва навигация по банери, реклами или странична лента, може да искате да предотвратите появата на тези подробности във версията за печат, например:
#contents, div.ad { display: none; }
Фиксиране на връзки
Хипервръзките очевидно не са уместни в печатните материали, така че вероятно ще искате да премахнете всички стилове, които ги различават от околния текст:
a { text-decoration: none; color: inherit; }
Все пак може да искате читателите да имат достъп до оригиналните URL адреси, а простото решение е автоматично да ги вмъкнете след свързания текст:
a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}
Този CSS дава резултати като следното:
a [href]: след специално насочва позицията след (( :след ) всеки елемент на връзката ( да се ), който всъщност има URL адрес ( [href] ). The съдържание декларацията тук вмъква стойността на href атрибут между скобите. Обърнете внимание, че други правила за стил могат да се прилагат за контрол на показването на генерираното съдържание.
Обработка на прекъсвания на страници
За да избегнете прекъсвания на страници, които да оставят изолирано съдържание или да го прекъснат неудобно в средата, използвайте свойствата на прекъсване на страницата: page-break-before , page-break-after и пробиване на страница . Например:
table { page-break-inside: avoid; }
Това би трябвало да предпази таблиците от обхващане на няколко страници, при условие че никоя не е по -висока от една страница. По същия начин:
h1, h2 { page-break-before: always; }
Това означава, че такива заглавия винаги започват нова страница. Това може да причини проблеми, ако незабавно следвате h1 на страницата си с h2, тъй като h1 ще се озове на страница сама по себе си. За да избегнете това, просто отменете прекъсването на страницата с помощта на селектор, който е насочен към този конкретен екземпляр, например:
как да се отървете от използването на 100 диска
h1 + h2 { page-break-before: avoid; }
Преглед на стилове за печат
Във всички случаи вашият браузър и операционната система трябва да предоставят функция за визуализация на печат, често като част от стандартния диалогов прозорец за печат.
Браузърът Chrome прави по -удобно да проверявате и дори отстранявате грешки в стиловете си за печат чрез Инструменти за разработчици, както е показано от този пример, показващ автобиография с таблица със стилове за печат. Първо отворете главното меню и изберете Още инструменти последвано от Инструменти за разработчици опция:
От новия панел, който се показва, изберете Меню , тогава Още инструменти , следван от Изобразяване :
След това превъртете надолу до Имулирайте CSS тип носител настройка. Падащото меню ви позволява да превключвате между изгледа на печат и екрана на вашия документ:
При емулиране на таблицата със стилове за печат, стандартът Стилове браузър е на разположение за проверка и промяна на правилата за стил на живо. Имайте предвид, че емулирането на печат на екран все още не е 100% точен. Браузърът не знае нищо за размера на хартията и @страница правилото не може да се подражава.
Отпечатване в PDF
Удобна характеристика на съвременните операционни системи е възможността за печат в PDF файл. Всъщност всичко, което можете да отпечатате, може вместо това да бъде изпратено до PDF файл - няма истинска изненада, тъй като в крайна сметка PDF файл трябва да представлява отпечатан документ.
Това прави HTML, в комбинация с таблица със стилове за печат, отлично средство за създаване на висококачествен документ, който може да бъде изпратен като прикачен файл, както и отпечатан.
Отпечатайте различни документи
Можете да използвате таблица със стилове за печат, за да създавате качествени документи, включително всичко от вашата автобиография до рецепти или съобщения за събития. Уеб страниците обикновено изглеждат грозни и съдържат нежелани подробности при отпечатване, но малък брой ощипвания на стила могат драстично да подобрят резултатите за печат. Запазването на крайните резултати като PDF е бърз начин за създаване на атрактивни, професионални документи.
Дял Дял Туит електронна поща Как да отпечатвате уеб страници в PDF с Microsoft EdgeСлучвало ли ви се е да попаднете на интересна статия, която искате да запазите за по -късно? Е, можете да запишете като PDF с Edge в три лесни стъпки.
Прочетете Напред Свързани теми- Програмиране
- Печат
- CSS
Боби е ентусиаст на технологиите, който работи като софтуерен разработчик в продължение на почти две десетилетия. Той е запален по игрите, работи като редактор на рецензии в Switch Player Magazine и е потопен във всички аспекти на онлайн издателството и уеб разработката.
Още от Боби ДжакАбонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!
Щракнете тук, за да се абонирате