Dokumentide vormindamiseks printimiseks CSS -i kasutamine

Dokumentide vormindamiseks printimiseks CSS -i kasutamine

Kui olete kunagi veebist piletite broneeringud või juhised hotelli printinud, olete tulemustest tõenäoliselt vähem muljet avaldanud. Seetõttu ei pruugi te olla teadlikud, et prinditud dokumente saab stiilida samamoodi nagu ekraanil, kasutades CSS-i.





Murede eraldamine

CSS -i peamine eelis on sisu eraldamine esitlusest. Lihtsamalt öeldes tähendab see väga vanamoodsa stiilimärgistuse asemel järgmist:



Heading

Kasutame semantilist märgistust:




See pole mitte ainult palju puhtam, vaid tähendab ka seda, et meie esitlus on sisust eraldatud. Brauserid renderdavad h1 vaikimisi suured, paksus kirjas olevad elemendid, kuid saame seda stiili igal ajal stiililehe abil muuta:

h1 { font-weight: normal; }

Kogudes need stiilideklaratsioonid eraldi faili ja viidates sellele failile meie HTML -dokumendist, saame eraldamist veelgi paremini kasutada. Stiililehte saab uuesti kasutada ja me saame seda üksikut faili igal ajal muuta, et värskendada vormingut igas dokumendis, mis seda kasutab.



Kaasa trükistiilileht

Sarnaselt ekraani stiililehe lisamisega saame printimiseks määrata stiililehe. Ekraani stiilileht on tavaliselt lisatud järgmiselt:


Täiendav atribuut on aga pool , võimaldab sihtimist konteksti alusel, milles dokument on renderdatud. Vaikimisi on eelmine element samaväärne:




See tähendab, et stiililehte rakendatakse mis tahes kandjale, milles dokument on renderdatud. Siiski võib meedia atribuut võtta ka prindi- ja ekraaniväärtusi.


Selles näites on print.css stiililehte kasutatakse ainult siis, kui dokument on välja prinditud. See on väga kasulik mehhanism. Me võime koondada kogu levinud stiilid (võib-olla fondipere või reavahed) stiililehele, mis kehtib kogu meedia kohta, ja meediaspetsiifilise vormindamise üksikutele stiililehtedele. Jällegi on see veel üks murede eraldamise kasutus.



Mõned stiilinäidete näited

Puhas taust

Sa ei taha peaaegu kindlasti raisata tinti värvilise tausta või taustpildi printimisele. Alustuseks lähtestage nende väärtuste vaikeseaded, mis võisid olla teie dokumendis määratud:

body {
background: white;
color: black;
}

Samuti võiksite takistada taustpiltide printimist - need peaksid olema dekoratiivsed ja seega mitte teie sisu kohustuslikud osad.

* {
background-image: none !important;
}

Seotud: Kuidas CSS -is taustapilti määrata?

kas saate võrgus torrent mänge mängida

Veeriste kontrollimine

Veel üks ilmne punkt, mida printimise osas arvestada, on lehe veerised. Kuigi CSS pakub vahendit veerise suuruse määramiseks, peate meeles pidama, et teie brauser ja printer võivad mõjutada ka veeriseadeid.

Näiteks on Chrome'i printimisdialoogis veeriseade, millel on väärtused, sealhulgas mitte ühtegi ja kohandatud mis alistab kõik CSS -i kaudu määratud:

Sel põhjusel on soovitatav jätta avalikes veebisaitides varuotsused lugeja hooleks. Isiklikuks kasutamiseks või vaikimisi paigutuse loomiseks võib aga olla sobiv prindimarginaalide seadmine CSS -i kaudu. The @leht reegel võimaldab määrata veeriseid ja seda tuleks kasutada järgmiselt.

@page {
margin: 2cm;
}

CSS-il on ka võimalusi keerukamate trükipaigutuste jaoks, näiteks veeriste muutmine vastavalt sellele, kas leht on paaritu (paremal), paaris (vasakul) või kaaneleht.

mis on .apk -fail

Kahjuks on see halvasti toetatud - eriti kaanelehe valik -, kuid seda saab kasutada minimaalsel määral. Järgmised stiilid loovad lehti, mille alumine serv on veidi suurem kui ülemine ja veidi suuremad veerised lehe välimisel serval kui selgroog:

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

Asjakohase sisu peitmine

Mitte kogu sisu ei sobi teie dokumendi trükiversiooniks. Kui teie leht sisaldab bännerite navigeerimist, reklaame või külgriba, võiksite takistada nende üksikasjade ilmumist trükiversioonis, näiteks:

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

Hüperlingid pole trükitud materjalides ilmselt asjakohased, nii et tõenäoliselt soovite eemaldada kõik stiilid, mis neid ümbritsevast tekstist eristavad:

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

Siiski võite siiski soovida, et lugejatel oleks juurdepääs algsetele URL -idele, ja lihtne lahendus on need automaatselt lingitud teksti järel sisestada:

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

See CSS annab järgmisi tulemusi:

a [href]: pärast sihib konkreetselt positsiooni pärast ( : pärast ) iga lingielement ( et ), millel on tegelikult URL ( [href] ). The sisu deklaratsioon lisab siia väärtuse href sulgude vahel olev atribuut. Pange tähele, et loodud sisu kuvamise juhtimiseks saab rakendada muid stiilireegleid.

Lehevahetuste käsitlemine

Selleks, et vältida lehekatkestusi, mis jätaksid isoleeritud sisu või keset seda ebamugavalt katki, kasutage lehtede katkemise atribuute. leht-murda-enne , lehekatkestus ja lehe murdmine . Näiteks:

table { page-break-inside: avoid; }

See peaks aitama vältida tabelite hõlmamist mitmel lehel, eeldusel, et ükski leht ei ole kõrgem kui üks leht. Sarnaselt:

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

See tähendab, et sellised rubriigid alustavad alati uut lehte. See võib aga põhjustada probleeme, kui järgite oma lehe h1 kohe h2 -ga, kuna h1 jõuab lehele iseseisvalt. Selle vältimiseks tühistage lihtsalt lehepaus, kasutades valijat, mis sihib seda konkreetset eksemplari, näiteks:

kuidas kasutada telefoni Interneti -ühendust arvutis
h1 + h2 { page-break-before: avoid; }

Prindistiilide vaatamine

Kõikidel juhtudel peaks teie brauser ja operatsioonisüsteem pakkuma prindi eelvaate funktsiooni, mis on sageli osa tavalisest printimisdialoogist.

Chrome'i brauser muudab arendustööriistade kaudu prindistiilide kontrollimise ja isegi silumise mugavamaks, nagu näitab see näide, mis näitab trükistiililehega CV -d. Esiteks avage peamenüü ja valige Veel tööriistu millele järgneb Arendaja tööriistad valik:

Valige kuvatud uuelt paneelilt Menüü , siis Veel tööriistu , millele järgneb Renderdamine :

Seejärel kerige alla kuni Jäljendage CSS -i meediumitüüpi seadistus. Rippmenüü võimaldab teil vahetada dokumendi prindi- ja ekraanivaate vahel.

Prindistiililehe jäljendamisel on standard Stiilide brauser on saadaval live -stiili reeglite kontrollimiseks ja muutmiseks. Pidage meeles, et ekraanil prinditava väljundi jäljendamine ei ole ikka veel 100% täpne. Brauser ei tea paberi suurusest ja @leht reeglit ei saa jäljendada.

PDF -i printimine

Kaasaegsete operatsioonisüsteemide käepärane omadus on võimalus printida PDF -faili. Tegelikult saab kõik, mida saate printida, selle asemel saata PDF -faili - pole üllatav, sest PDF -fail peaks lõppude lõpuks esindama trükitud dokumenti.

See muudab HTML-i koos printimise stiililehega suurepäraseks vahendiks kvaliteetse dokumendi loomiseks, mida saab manusena saata ja ka printida.

Prindistiilide abil saate luua kvaliteetseid dokumente, sealhulgas kõike oma CV -st retseptide või sündmuste teadaandeni. Veebilehed näevad tavaliselt koledad välja ja sisaldavad printimisel soovimatuid üksikasju, kuid väike hulk stiiliparandusi võib prinditulemusi dramaatiliselt parandada. Lõpptulemuste salvestamine PDF -failina on kiire viis atraktiivsete ja professionaalsete dokumentide loomiseks.

Jaga Jaga Piiksuma E -post Kuidas veebilehti Microsoft Edge abil PDF -i printida

Kas olete kunagi kohanud huvitavat artiklit, mille soovisite hilisemaks salvestada? Noh, saate Edge'iga PDF -failina salvestada kolme lihtsa sammuga.

Loe edasi Seotud teemad
  • Programmeerimine
  • Trükkimine
  • CSS
Autori kohta Bobby Jack(58 artiklit avaldatud)

Bobby on tehnoloogiahuviline, kes töötas enam kui kaks aastakümmet tarkvaraarendajana. Ta on kirglik mängude vastu, töötab ajakirja Switch Player ülevaadete toimetajana ning on süvenenud kõikidesse veebipõhiste avaldamise ja veebiarenduse aspektidesse.

Veel Bobby Jackilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin