Uporaba CSS za oblikovanje dokumentov za tiskanje

Uporaba CSS za oblikovanje dokumentov za tiskanje

Če ste kdaj s spleta natisnili rezervacije vstopnic ali navodila do hotela, ste bili verjetno manj navdušeni nad rezultati. Morda se torej ne zavedate, da je mogoče tiskane dokumente oblikovati na enak način kot na zaslonu z uporabo kaskadnih slogov (CSS).





Ločitev pomislekov

Ključna prednost CSS je ločitev vsebine od predstavitve. Preprosto povedano, to pomeni namesto zelo staromodnih slogovnih oznak, kot so:



Heading

Uporabljamo pomenske oznake:






Ne samo, da je to veliko čistejše, ampak tudi pomeni, da je naša predstavitev ločena od naše vsebine. Brskalniki upodabljajo h1 elementi privzeto veliko, krepko besedilo, vendar lahko ta slog kadar koli spremenimo s preglednico slogov:

h1 { font-weight: normal; }

Z zbiranjem teh slogovnih deklaracij v ločeni datoteki in sklicevanjem na to datoteko iz našega dokumenta HTML lahko ločevanje še bolje izkoristimo. Slog sloga je mogoče znova uporabiti in to datoteko lahko kadar koli spremenimo, da posodobimo oblikovanje v vsakem dokumentu, ki jo uporablja.



Vključno s slogom tiskanja

Podobno kot pri vključitvi slogovnega lista zaslona lahko določimo slogovni list za tiskanje. List sloga zaslona je običajno priložen tako:


Vendar pa je dodaten atribut, pol , omogoča ciljanje na podlagi konteksta, v katerem je dokument upodobljen. Privzeto je prejšnji element enakovreden:




To pomeni, da bo slogovna lista uporabljena za kateri koli medij, v katerem je dokument upodobljen. Vendar pa lahko atribut medija sprejme tudi vrednosti tiskanja in zaslona:


V tem primeru je print.css Tabela slogi bo uporabljena le, ko bo dokument natisnjen. To je zelo uporaben mehanizem. Vse skupne sloge (morda družino pisav ali razmik med vrsticami) lahko zberemo v slogovni list, ki velja za vse medije, in oblikovanje, specifično za medije, v posameznih slogovnih listih. Še enkrat, to je še ena uporaba ločevanja skrbi.



Nekaj ​​primerov deklaracij o slogu

Čisto ozadje

Skoraj zagotovo ne želite izgubljati črnila pri tiskanju pisanega ozadja ali slike ozadja. Začnite tako, da ponastavite privzete vrednosti za te vrednosti, ki so bile morda nastavljene v vašem dokumentu:

body {
background: white;
color: black;
}

Morda boste želeli preprečiti tudi tiskanje slik v ozadju - te naj bodo dekorativne in zato niso obvezen del vaše vsebine:

* {
background-image: none !important;
}

Povezano: Kako nastaviti sliko ozadja v CSS

lahko pošljete telefonsko številko po e -pošti

Nadzor marž

Druga očitna točka pri tiskanju je rob strani. Čeprav CSS ponuja način za nastavitev velikosti robov, ne pozabite, da lahko vaš brskalnik in tiskalnik vplivata tudi na same nastavitve robov.

Na primer, v Chromovem pogovornem oknu za tiskanje obstaja nastavitev roba, ki vsebuje tudi vrednosti nobena in po meri ki bo preglasil vse, kar je podano prek CSS:

Zaradi tega je priporočljivo, da se odločitve o maržah prepustijo bralcu na javnih spletnih straneh. Za osebno uporabo ali za ustvarjanje privzete postavitve je morda primerna nastavitev roba tiskanja prek CSS. The @stran pravilo omogoča nastavitev robov in ga je treba uporabiti na naslednji način:

@page {
margin: 2cm;
}

CSS ima tudi zmogljivost za bolj izpopolnjene postavitve tiskanja, na primer spreminjanje roba glede na to, ali je stran liha (desno), sodo (levo) ali naslovna stran.

kako obrniti iskanje slik na telefonu

Žal je to slabo podprto - zlasti možnost naslovne strani -, vendar ga je mogoče uporabiti v minimalnem obsegu. Naslednji slogi proizvajajo strani z nekoliko večjimi spodnjimi robovi kot zgornji in nekoliko večjimi robovi na zunanjem robu strani kot hrbtenica:

@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}

Skrivanje nepomembnih vsebin

Vse vsebine ne bodo primerne za tiskano različico vašega dokumenta. Če vaša stran vključuje navigacijo s pasicami, oglase ali stransko vrstico, lahko preprečite prikaz teh podrobnosti v tiskani različici, na primer:

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

Hiperpovezave očitno niso pomembne za tiskano gradivo, zato boste verjetno želeli odstraniti vse sloge, ki jih razlikujejo od besedila v okolici:

a { text-decoration: none; color: inherit; }

Vendar pa boste morda še vedno želeli, da imajo bralci dostop do izvirnih URL -jev, preprosta rešitev pa je, da jih samodejno vstavite za povezano besedilo:

a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}

Ta CSS daje rezultate, kot so naslednji:

a [href]: po posebej cilja na položaj po ( : po ) vsak element povezave ( do ), ki ima dejansko URL ( [href] ). The vsebino deklaracija tukaj vstavi vrednost href atribut med oklepaji. Upoštevajte, da lahko za nadzor prikaza ustvarjene vsebine uporabite druga slogna pravila.

Obravnavanje prelomov strani

Če želite, da prelomi strani ne pustijo izolirane vsebine ali pa jo nerodno razbijejo na sredini, uporabite lastnosti preloma strani: prelom strani pred , prelom strani po in prelom strani . Na primer:

table { page-break-inside: avoid; }

To bi moralo preprečiti, da bi tabele obsegale več strani, če nobena ni višja od ene strani. Podobno:

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

To pomeni, da takšni naslovi vedno začnejo novo stran. Lahko pa povzroči težave, če nemudoma sledite h1 vaše strani z h2, saj bo h1 končal sam na strani. Če se želite temu izogniti, preprosto prekličite prelom strani z izbirnikom, ki cilja na določen primerek, na primer:

kako velik je nameščen windows 10
h1 + h2 { page-break-before: avoid; }

Ogled slogov tiskanja

V vseh primerih bi morali vaš brskalnik in operacijski sistem zagotoviti funkcijo predogleda tiskanja, pogosto kot del standardnega pogovornega okna za tiskanje.

Brskalnik Chrome olajša preverjanje in celo odpravljanje napak pri tiskanju prek orodja za razvijalce, kar dokazuje ta primer, ki prikazuje življenjepis s slogom tiskanja. Najprej odprite glavni meni in izberite Več orodij sledi Orodja za razvijalce možnost:

Na novem podoknu, ki se prikaže, izberite Meni , potem Več orodij , sledi Upodabljanje :

Nato se pomaknite navzdol do Posnemajte vrsto medija CSS nastavitev. S spustnega menija lahko preklapljate med pogledi tiskanja in zaslona vašega dokumenta:

Pri posnemanju lista slogi tiskanja je standard Slog brskalnik je na voljo za pregled in spreminjanje pravil o slogu v živo. Upoštevajte, da posnemanje tiskanja na zaslonu še vedno ni 100% natančno. Brskalnik ne ve ničesar o velikosti papirja in @stran pravila ni mogoče posnemati.

Tiskanje v PDF

Priročna lastnost sodobnih operacijskih sistemov je možnost tiskanja v datoteko PDF. Pravzaprav je vse, kar lahko natisnete, mogoče poslati v datoteko PDF - ni presenečenje, saj naj bi datoteka PDF navsezadnje predstavljala natisnjen dokument.

Zaradi tega je HTML v kombinaciji s tabelo slogi tiskanja odlično sredstvo za ustvarjanje kakovostnega dokumenta, ki ga lahko pošljete kot prilogo in tudi natisnete.

Tabelo slogi tiskanja lahko uporabite za ustvarjanje kakovostnih dokumentov, vključno z vsem, od vašega življenjepisa do receptov ali napovedi dogodkov. Spletne strani so običajno natisnjene in vsebujejo nezaželene podrobnosti, ko jih natisnete, vendar lahko majhno število slogovnih sprememb dramatično izboljša rezultate tiskanja. Shranjevanje končnih rezultatov v obliki PDF je hiter način za ustvarjanje privlačnih, profesionalnih dokumentov.

Deliti Deliti Cvrkutati E-naslov Kako natisniti spletne strani v PDF z Microsoft Edge

Ste kdaj naleteli na zanimiv članek, ki ste ga želeli shraniti za kasneje? No, lahko shranite kot PDF z Edge v treh preprostih korakih.

Preberite Naprej Sorodne teme
  • Programiranje
  • Tiskanje
  • CSS
O avtorju Bobby Jack(58 objavljenih člankov)

Bobby je tehnološki navdušenec, ki je več kot dve desetletji delal kot razvijalec programske opreme. Navdušen je nad igranjem iger, dela kot urednik recenzij v reviji Switch Player in je potopljen v vse vidike spletnega založništva in spletnega razvoja.

Več od Bobbyja Jacka

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti