Če ste že kdaj s spleta natisnili rezervacije vozovnic ali navodila za hotel, ste bili verjetno manj navdušeni nad rezultati. Morda se zato ne zavedate, da je mogoče natisnjene dokumente s pomočjo Cascading Style Sheets (CSS) oblikovati na enak način kot na zaslonu.

Ločitev pomislekov

Ključna prednost CSS je ločitev vsebine od predstavitve. Najenostavneje to pomeni namesto zelo staromodne slogovne oznake, kot je:

Naslov

Uporabljamo pomenske oznake:

Naslov

Ne samo, da je toliko bolj čista, ampak tudi pomeni, da je naša predstavitev ločena od naše vsebine. Brskalniki upodabljajo h1 elementi so privzeto kot veliko, krepko besedilo, vendar lahko ta slog kadar koli spremenimo s tabelo slogi:

h1 {teža-pisave: normalno; }

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

Vključno s slogom tiskanja

Podobno kot vključitev slogovnega lista zaslona lahko za tisk določimo slog sloga. List slogov zaslona je običajno vključen tako:

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

To pomeni, da bo tabela slogi uporabljena za kateri koli medij, v katerem je dokument upodobljen. Atribut medija pa lahko zavzame tudi vrednosti tiskanja in zaslona:

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

Nekaj ​​primerov slogovnih deklaracij

Čisto ozadje

Skoraj zagotovo ne želite izgubljati črnila za tiskanje barvnega ozadja ali slike v ozadju. Začnite s ponastavitvijo privzetih vrednosti za te vrednosti, ki so morda nastavljene v vašem dokumentu:

telo {
ozadje: belo;
barva: črna;
}

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

* {
ozadje: noben! pomembno;
}

Sorodno: Kako nastaviti sliko ozadja v CSS

Kako nastaviti sliko ozadja v CSS

CSS je močno orodje za oblikovanje spletnih strani. Če se naučite postaviti sliko v ozadju, se naučite veliko osnov CSS.

Nadzor nad robovi

Druga očitna točka, ki jo je treba upoštevati pri tiskanju, je rob strani. Čeprav CSS omogoča nastavitev velikosti robov, ne pozabite, da lahko brskalnik in tiskalnik vpliva tudi na nastavitve robov.

Na primer, v Chromovem pogovornem oknu za tiskanje je nastavitev roba, ki vključuje tudi vrednosti nobenega in po meri ki bo preglasil vse, kar je določeno prek CSS:

Zaradi tega je priporočljivo, da odločitve o mejah bralcu prepustite na javnih spletnih straneh. Vendar pa je za osebno uporabo ali za ustvarjanje privzete postavitve nastavitev robov tiskanja prek CSS morda primerna. The @stran pravilo omogoča nastavitev robov in se uporablja na naslednji način:

@page {
rob: 2 cm;
}

CSS ima tudi zmogljivosti za bolj izpopolnjene postavitve tiskanja, na primer spreminjanje roba glede na to, ali je stran neparna (desna), sodoštevilčna (leva) ali naslovnica.

Na žalost je to slabo podprto - zlasti možnost naslovnice -, vendar ga je mogoče uporabiti v minimalni meri. Naslednji slogi ustvarijo strani z nekoliko večjimi spodnjimi robovi od zgornjih in nekoliko večjimi robovi na zunanjem robu strani kot hrbtenica:

@page {
rob levo: 20 mm;
rob desno: 20 mm;
rob zgoraj: 40 mm;
rob-dno: 50 mm;
}
@stran: levo {
rob levo: 30 mm;
}
@page: desno {
rob desno: 30 mm;
}

Skrivanje nepomembne vsebine

Vsa vsebina ne bo primerna za tiskano različico dokumenta. Če vaša stran vključuje navigacijsko pasico, oglase ali stransko vrstico, boste morda želeli preprečiti, da bi se ti podatki pojavili v tiskani različici, na primer:

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

Hiperpovezave očitno niso pomembne za tiskano gradivo, zato boste verjetno želeli odstraniti stile, ki jih razlikujejo od okoliškega besedila:

a {dekoracija besedila: nobena; barva: podedovati; }

Morda pa boste vseeno želeli, da imajo bralci dostop do izvirnih URL-jev, in preprosta rešitev je, da jih samodejno vstavite za povezanim besedilom:

a [href]: po {
vsebina: "(" attr (href) ")";
velikost pisave: 90%;
barva: # 333;
}

Ta CSS daje rezultate, kot so naslednji:

a [href]: po posebej cilja na položaj po (: po) vsak element povezave (a), 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 pravila sloga.

Ravnanje z odmori strani

Če želite, da prelomi strani ne puščajo izolirane vsebine ali jo nerodno lomijo na sredini, uporabite lastnosti preloma strani: prelom strani, prelom strani in prelom strani. Na primer:

tabela {page-break-inside :void; }

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

h1, h2 {prelom strani: vedno; }

To pomeni, da taki naslovi vedno začnejo novo stran. Težave bi lahko povzročilo, če takoj sledite h1 strani s h2, saj bo h1 na strani končal sam. Da bi se temu izognili, preprosto prekličite prelom strani z izbirnikom, ki cilja na ta primerek, na primer:

h1 + h2 {prelom strani: izogni se; }

Ogled slogov tiskanja

V vseh primerih morata vaš brskalnik in operacijski sistem zagotoviti funkcijo predogleda tiskanja, pogosto kot del običajnega pogovornega okna za tiskanje.

Brskalnik Chrome omogoča bolj priročno preverjanje in razhroščevanje stilov tiskanja prek orodij za razvijalce, kot je prikazano v tem primeru, ki prikazuje življenjepis s stilskim listom tiskanja. Najprej odprite glavni meni in izberite Več orodij čemur sledi Orodja za razvijalce možnost:

Na novi plošči, ki se prikaže, izberite Meni, potem Več orodij, čemur sledi Upodabljanje:

Nato se pomaknite navzdol do Posnemajte vrsto medija CSS nastavitev. Spustni meni omogoča preklapljanje med tiskanim in zaslonskim prikazom dokumenta:

Pri posnemanju sloga tiskanja je standard Slogi brskalnika je na voljo za pregled in spreminjanje pravil sloga v živo. Upoštevajte, da posnemanje izpisov na zaslonu še vedno ni stoodstotno 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 lahko vse, kar lahko natisnete, pošljete v datoteko PDF - kar ni resnično presenečenje, saj naj bi datoteka PDF vseeno predstavljala natisnjen dokument.

Zaradi tega je HTML v kombinaciji s tabelo s slogi za tiskanje odlično sredstvo za ustvarjanje visokokakovostnega dokumenta, ki ga je mogoče poslati kot prilogo in tiskati.

Natisnite različne dokumente

S pomočjo tiskanega sloga lahko ustvarite kakovostne dokumente, vključno s karkoli od vašega življenjepisa do receptov ali obvestil o dogodkih. Spletne strani so navadno videti grde in vsebujejo neželene podrobnosti, ko so natisnjene, vendar majhno število stilskih sprememb lahko bistveno izboljša rezultate tiskanja. Shranjevanje končnih rezultatov v obliki PDF je hiter način za ustvarjanje privlačnih profesionalnih dokumentov.

Kako natisniti spletne strani v PDF z Microsoft Edge

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

O avtorju