Ak ste si niekedy z webu vytlačili rezervácie leteniek alebo pokyny k hotelu, výsledky vás pravdepodobne ohromili. Možno si preto neuvedomujete, že tlačené dokumenty je možné štýlovať rovnakým spôsobom, ako je to možné na obrazovke, pomocou kaskádových štýlov (CSS).

Rozdelenie obáv

Kľúčovou výhodou CSS je oddelenie obsahu od prezentácie. Najjednoduchšie to znamená, namiesto veľmi staromódneho štýlového označenia, ako napríklad:

Nadpis

Používame sémantické značenie:

Nadpis

Je to nielen oveľa čistejšie, ale tiež to znamená, že naša prezentácia je oddelená od nášho obsahu. Prehliadače sa vykresľujú h1 v predvolenom nastavení prvky ako veľký, tučný text, ale tento štýl môžeme kedykoľvek zmeniť pomocou šablóny so štýlmi:

h1 {font-weight: normal; }

Zhromaždením týchto vyhlásení o štýle do samostatného súboru a odkazom na tento súbor z nášho dokumentu HTML môžeme separáciu ešte lepšie využiť. Šablónu štýlov je možné znova použiť a tento jeden súbor môžeme kedykoľvek zmeniť, aby sme aktualizovali formátovanie v každom dokumente, ktorý ho používa.

Vrátane hárku štýlov tlače

Podobným spôsobom, ako keď zahrnieme šablónu štýlov obrazovky, môžeme určiť šablónu štýlov pre tlač. Šablóna štýlov obrazovky je zvyčajne zahrnutá takto:

Dodatočný atribút, médiá, umožňuje zacielenie na základe kontextu, v ktorom je dokument vykreslený. Predvolene je predchádzajúci prvok ekvivalentný s:

To znamená, že šablóna so štýlmi sa použije pre každé médium, v ktorom je dokument vykreslený. Atribút media však môže nadobúdať aj hodnoty tlače a obrazovky:

V tomto príklade print.css šablóna so štýlmi sa použije iba vtedy, keď je dokument vytlačený. Toto je veľmi užitočný mechanizmus. Môžeme zhromaždiť všetky bežné štýly (napríklad rodinu fontov alebo riadkovanie) v šablóne štýlov, ktorá sa vzťahuje na všetky médiá, a formátovanie špecifické pre dané médium v ​​jednotlivých hárkoch štýlov. Opäť ide o ďalšie použitie oddelenia obáv.

Niekoľko príkladov deklarácií štýlu

Čisté pozadie

Takmer určite nebudete chcieť plytvať atramentom na farebné pozadie alebo obrázok na pozadí. Začnite obnovením všetkých predvolených hodnôt pre tieto hodnoty, ktoré mohli byť nastavené v dokumente:

telo {
pozadie: biele;
farba: čierna;
}

Možno budete tiež chcieť zabrániť tomu, aby sa obrázky na pozadí tlačili - mali by byť dekoratívne, a preto by nemali byť povinnou súčasťou vášho obsahu:

* {
obrázok na pozadí: žiadny! dôležité;
}

Súvisiace: Ako nastaviť obrázok na pozadí v CSS

Ako nastaviť obrázok na pozadí v CSS

CSS je výkonný nástroj na úpravu webových stránok. Naučenie sa, ako umiestniť obrázok na pozadí, vás naučí veľa základov CSS.

Ovládanie okrajov

Ďalším zjavným bodom, ktorý je potrebné v súvislosti s tlačou zvážiť, je okraj strany. Aj keď CSS poskytuje prostriedky na nastavenie veľkosti okraja, mali by ste mať na pamäti, že váš prehliadač a tlačiareň môžu tiež ovplyvňovať samotné nastavenie okrajov.

Napríklad v dialógovom okne tlače prehliadača Chrome je nastavenie okraja, ktoré má hodnoty vrátane žiadny a zvyk ktorý prepíše všetko zadané pomocou CSS:

Z tohto dôvodu sa odporúča ponechať rozhodnutie o rezervách na čitateľovi na verejných webových stránkach. Pre osobné použitie alebo na vytvorenie predvoleného rozloženia však môže byť vhodné nastavenie okrajov tlače pomocou CSS. The @stránka pravidlo umožňuje nastavenie okrajov a malo by sa používať nasledovne:

@strana {
okraj: 2cm;
}

CSS má tiež kapacitu pre prepracovanejšie rozloženia tlače, ako je napríklad zmena okraja podľa toho, či je stránka nepárna (vpravo), párna (vľavo) alebo titulná strana.

Toto je, bohužiaľ, slabo podporované - najmä možnosť titulnej stránky -, ale dá sa použiť v minimálnej miere. Nasledujúce štýly vytvárajú stránky s mierne väčšími spodnými okrajmi ako hornými a mierne väčšími okrajmi na vonkajšom okraji stránky ako na chrbtici:

@strana {
okraj vľavo: 20 mm;
pravý okraj: 20 mm;
horný okraj: 40 mm;
spodný okraj: 50 mm;
}
@ stránka: vľavo {
okraj vľavo: 30 mm;
}
@page: right {
pravý okraj: 30 mm;
}

Skrytie nepodstatného obsahu

Nie všetok obsah bude vhodný pre tlačenú verziu dokumentu. Ak vaša stránka obsahuje navigáciu po banneroch, reklamy alebo bočný panel, možno budete chcieť zabrániť zobrazeniu týchto podrobností v tlačenej verzii, napríklad:

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

Hypertextové odkazy v tlačenom materiáli zjavne nie sú relevantné, takže pravdepodobne budete chcieť odstrániť všetky štýly, ktoré ich odlišujú od okolitého textu:

a {text-decoration: none; farba: dediť; }

Možno však budete chcieť, aby mali čitatelia prístup k pôvodným adresám URL, a priamym riešením je automaticky ich vložiť za prepojený text:

a [href]: po {
obsah: "(" attr (href) ")";
veľkosť písma: 90%;
farba: # 333;
}

Tento CSS poskytuje nasledujúce výsledky:

a [href]: po konkrétne zameriava pozíciu po (: po) každý prvok odkazu (a), ktorá má skutočne adresu URL ([href]). The obsah vyhlásenie tu vloží hodnotu href atribút medzi zátvorkami. Upozorňujeme, že na riadenie zobrazenia vygenerovaného obsahu je možné použiť ďalšie pravidlá štýlu.

Zaobchádzanie s prerušeniami stránky

Ak chcete zabrániť tomu, aby konce stránok ponechali izolovaný obsah alebo ho nepríjemne rozbili uprostred, využite vlastnosti konca stránky: koniec stránky, koniec stránky a zlomok stránky. Napríklad:

tabuľka {page-break-inside: avoid; }

To by malo pomôcť zabrániť tomu, aby tabuľky pokrývali viac stránok a za predpokladu, že žiadna nebude vyššia ako jedna stránka. Podobne:

h1, h2 {page-break-before: always; }

To znamená, že také nadpisy vždy zakladajú novú stránku. Ak by ste okamžite sledovali h1 svojej stránky s h2, mohlo by to spôsobiť problémy, pretože h1 skončí na stránke úplne sama. Ak tomu chcete zabrániť, jednoducho zrušte koniec stránky pomocou selektora, ktorý zacieli na konkrétnu inštanciu, napríklad:

h1 + h2 {page-break-before: vyhnúť sa; }

Prezeranie štýlov tlače

Vo všetkých prípadoch by mal váš prehliadač a operačný systém poskytovať funkciu náhľadu pred tlačou, často ako súčasť štandardného dialógového okna pre tlač.

Prehliadač Chrome umožňuje pohodlnejšie kontrolovať a dokonca ladiť vaše štýly tlače pomocou Nástrojov pre vývojárov, čo dokazuje tento príklad zobrazujúci životopis so šablónou štýlov tlače. Najskôr otvorte hlavné menu a vyberte Ďalšie nástroje nasledované Nástroje pre vývojárov možnosť:

Na novom zobrazenom paneli vyberte možnosť Ponukapotom Ďalšie nástroje, nasledovaný Vykreslenie:

Potom prejdite nadol na ikonu Emulujte typ média CSS nastavenie. Rozbaľovacia ponuka umožňuje prepínať medzi tlačeným a obrazovkovým zobrazením dokumentu:

Pri emulovaní šablóny štýlov tlače štandard Prehliadač štýlov je k dispozícii na kontrolu a úpravu pravidiel živého štýlu. Majte na pamäti, že emulácia tlačového výstupu na obrazovku nie je stále stopercentne presná. Prehliadač nevie nič o veľkosti papiera a @stránka pravidlo nemožno napodobniť.

Tlač do PDF

Užitočnou vlastnosťou moderných operačných systémov je možnosť tlače do súboru PDF. Čokoľvek, čo môžete vytlačiť, sa dá v skutočnosti poslať do súboru PDF - nie je to žiadne prekvapenie, pretože súbor PDF má predstavovať vytlačený dokument.

Vďaka tomu je HTML v kombinácii s hárkom štýlov tlače vynikajúcim prostriedkom na vytvorenie vysoko kvalitného dokumentu, ktorý je možné odoslať ako prílohu, ale aj vytlačiť.

Vytlačte si rôzne dokumenty

Šablónu štýlov tlače môžete použiť na vytvorenie kvalitných dokumentov vrátane všetkého od životopisu po recepty alebo oznámenia o udalostiach. Webové stránky zvyčajne vyzerajú škaredo a pri tlači obsahujú nežiaduce podrobnosti, ale malý počet úprav štýlu môže výrazne vylepšiť výsledky tlače. Uloženie konečných výsledkov vo formáte PDF je rýchly spôsob, ako vytvoriť atraktívne a profesionálne dokumenty.

Ako tlačiť webové stránky do formátu PDF s Microsoft Edge

Stretli ste sa už so zaujímavým článkom, ktorý ste si chceli odložiť na neskôr? S Edgeom môžete uložiť ako PDF vo troch jednoduchých krokoch.

O autorovi