Ja jūs kādreiz esat no interneta izdrukājis biļešu rezervāciju vai norādes uz viesnīcu, iespējams, jūs esat mazāk nekā pārsteigts par rezultātiem. Tāpēc jūs, iespējams, nezināt, ka drukāto dokumentu stilu var izmantot tāpat kā ekrānā, izmantojot kaskādes stila lapas (CSS).

Bažu nodalīšana

Galvenais CSS ieguvums ir satura nošķiršana no prezentācijas. Vienkāršāk sakot, tas nozīmē ļoti vecmodīgu stilistisko marķējumu, piemēram:

Virsraksts

Mēs izmantojam semantisko marķējumu:

Virsraksts

Tas ir ne tikai daudz tīrāks, bet arī nozīmē, ka mūsu prezentācija ir atdalīta no mūsu satura. Pārlūkprogrammas renderē h1 pēc noklusējuma elementi ir liels, treknrakstā, taču šo stilu mēs jebkurā laikā varam mainīt, izmantojot stila lapu:

h1 {font-weight: normāls; }

Apkopojot šīs stila deklarācijas atsevišķā failā un atsaucoties uz šo failu no mūsu HTML dokumenta, mēs varam vēl labāk izmantot atdalīšanu. Stila lapu var atkārtoti izmantot, un mēs jebkurā laikā varam mainīt šo atsevišķo failu, lai atjauninātu formatējumu katrā dokumentā, kurā tas tiek izmantots.

Ieskaitot drukas stila lapu

Līdzīgi kā ekrāna stila lapas iekļaušanā, mēs varam norādīt stila lapu drukāšanai. Ekrāna stila lapa parasti tiek iekļauta šādi:

Tomēr papildu atribūts, plašsaziņas līdzekļi, ļauj mērķēt, pamatojoties uz kontekstu, kurā dokuments tiek atveidots. Pēc noklusējuma iepriekšējais elements ir ekvivalents:

Tas nozīmē, ka stila lapa tiks piemērota jebkuram nesējam, kurā tiek atveidots dokuments. Tomēr multivides atribūts var ņemt arī drukas un ekrāna vērtības:

Šajā piemērā print.css stila lapa tiks izmantota tikai tad, kad dokuments tiks izdrukāts. Tas ir ļoti noderīgs mehānisms. Mēs varam apkopot visu parasto stilu (iespējams, fontu saimi vai atstarpes rindās) stila lapā, kas attiecas uz visiem multivides, un atsevišķiem plašsaziņas līdzekļiem paredzētu formatējumu atsevišķās stilu lapās. Atkal, tas ir vēl viens bažu nodalīšanas veids.

Daži stila deklarāciju piemēri

Tīrs fons

Gandrīz noteikti nevēlaties tērēt tinti, izdrukājot krāsainu fonu vai fona attēlu. Vispirms atiestatiet visus noklusējumus šīm vērtībām, kas, iespējams, ir iestatītas jūsu dokumentā:

ķermenis {
fons: balts;
krāsa: melna;
}

Varat arī novērst jebkādu fona attēlu drukāšanu - tiem jābūt dekoratīviem un tāpēc tiem nevajadzētu būt jūsu satura daļai:

* {
fona attēls: nav! svarīgs;
}

Saistīts: Kā iestatīt fona attēlu CSS

Kā iestatīt fona attēlu CSS

CSS ir spēcīgs rīks tīmekļa lapu veidošanai. Uzzinot, kā ievietot fona attēlu, jūs iemācīsit daudz CSS pamatu.

Margīnu kontrole

Vēl viens acīmredzams jautājums, kas jāņem vērā attiecībā uz drukāšanu, ir lapas mala. Lai gan CSS nodrošina līdzekli piemales lieluma iestatīšanai, jums jāpatur prātā, ka jūsu pārlūkprogramma un printeris var arī ietekmēt piemales iestatījumus.

Piemēram, Chrome drukāšanas dialoglodziņā ir piemales iestatījums, kurā ir vērtības, tostarp neviena un pasūtījuma kas ignorēs visu, kas norādīts, izmantojot CSS:

Šī iemesla dēļ ir ieteicams atstāt maržas lēmumus lasītājam publiskās vietnēs. Tomēr personīgai lietošanai vai noklusējuma izkārtojuma izveidošanai drukas piemales iestatīšana, izmantojot CSS, var būt piemērota. The @lappuse noteikums ļauj iestatīt piemales, un tas jāizmanto šādi:

@lappuse {
mala: 2cm;
}

CSS spēj veikt arī sarežģītākus drukas izkārtojumus, piemēram, mainot piemali atkarībā no tā, vai lapa ir nepāra numurēta (pa labi), pāra (pa kreisi) vai vāka lapa.

Diemžēl tas tiek vāji atbalstīts - īpaši vāka lapas opcija -, taču to var izmantot minimālā mērā. Šie stili rada lapas ar nedaudz lielākām apakšējām malām nekā augšējās un nedaudz lielākas malas lapas ārējā malā nekā mugurkauls:

@lappuse {
atstarpe pa kreisi: 20mm;
labā mala: 20mm;
margin-top: 40mm;
apmale apakšā: 50mm;
}
@page: left {
atstarpe pa kreisi: 30mm;
}
@page: right {
labā mala: 30 mm;
}

Nesvarīga satura slēpšana

Ne viss saturs būs piemērots dokumenta drukātajai versijai. Ja jūsu lapā ir reklāmkaroga navigācija, reklāmas vai sānjosla, iespējams, vēlēsities novērst šīs detaļas parādīšanos drukas versijā, piemēram:

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

Hipersaites drukātajos materiālos acīmredzami nav būtiskas, tāpēc, iespējams, vēlēsities noņemt visus stilus, kas tos atšķir no apkārtējā teksta:

a {teksta noformējums: nav; krāsa: mantot; }

Tomēr jūs joprojām varētu vēlēties, lai lasītājiem būtu piekļuve sākotnējiem URL, un vienkāršs risinājums ir tos automātiski ievietot aiz saistītā teksta:

a [href]: pēc {
saturs: "(" attr (href) ")";
fonta lielums: 90%;
krāsa: # 333;
}

Šī CSS sniedz šādus rezultātus:

a [href]: pēc pozīciju īpaši mērķē pēc (: pēc) katrs saites elements (a), kam faktiski ir URL ([href]). The saturu deklarācija šeit ievieto vērtību href atribūts starp iekavām. Ņemiet vērā, ka ģenerētā satura attēlošanai var piemērot citus stila noteikumus.

Darbība ar lapu pārtraukumiem

Lai izvairītos no lapu pārtraukumiem, kas atstāj izolētu saturu vai neveikli to salauž pa vidu, izmantojiet lapas pārtraukuma īpašības: page-break-before, lapu pārtraukums un lapu ielaušanās iekšpusē. Piemēram:

tabula {page-break-inside: izvairīties; }

Tam vajadzētu palīdzēt atturēt tabulas no vairākām lapām, nodrošinot, ka neviena no tām nav garāka par vienu lapu. Līdzīgi:

h1, h2 {page-break-before: vienmēr; }

Tas nozīmē, ka šādi virsraksti vienmēr sāk jaunu lapu. Tas var radīt problēmas, ja nekavējoties sekojat savas lapas h1 ar h2, jo h1 nonāks pašā lapā. Lai no tā izvairītos, vienkārši atceliet lapas pārtraukumu, izmantojot atlasītāju, kas mērķēts uz konkrēto gadījumu, piemēram:

h1 + h2 {page-break-before: izvairīties; }

Drukas stilu apskate

Visos gadījumos jūsu pārlūkprogrammai un operētājsistēmai ir jānodrošina drukas priekšskatījuma funkcija, bieži vien kā daļa no standarta drukas dialoga.

Chrome pārlūks atvieglo drukas stilu pārbaudi un pat atkļūdošanu, izmantojot izstrādātāja rīkus, kā parādīts šajā piemērā, kurā parādīts CV ar drukas stila lapu. Vispirms atveriet galveno izvēlni un atlasiet Vairāk rīku seko Izstrādātāja rīki iespēja:

Parādītajā jaunajā panelī atlasiet Izvēlne, pēc tam Vairāk rīku, kam seko Atveidošana:

Pēc tam ritiniet uz leju līdz Atdarināt CSS multivides veidu iestatījums. Nolaižamajā izvēlnē varat pārslēgties starp dokumenta drukas un ekrāna skatiem:

Atdarinot drukas stila lapu, standarts Stilu pārlūks ir pieejams, lai pārbaudītu un modificētu tiešraides stila noteikumus. Paturiet prātā, ka drukas izvades atdarināšana uz ekrāna joprojām nav 100% precīza. Pārlūks neko nezina par papīra izmēru un @lappuse noteikumu nevar atdarināt.

Drukāšana uz PDF

Mūsdienu operētājsistēmu ērta iezīme ir spēja drukāt PDF failā. Faktiski visu, ko varat izdrukāt, tā vietā var nosūtīt uz PDF failu - tas nav īsts pārsteigums, jo galu galā PDF failam ir jāpārstāv drukāts dokuments.

Tas padara HTML kopā ar drukas stila lapu par lielisku līdzekli augstas kvalitātes dokumenta izveidošanai, kuru var nosūtīt kā pielikumu, kā arī izdrukāt.

Izdrukājiet dažādus dokumentus

Varat izmantot drukas stila lapu, lai izveidotu kvalitatīvus dokumentus, ieskaitot visu, sākot no jūsu CV līdz receptēm vai pasākumu paziņojumiem. Tīmekļa lapas parasti izskatās neglītas un izdrukājot satur nevēlamas detaļas, taču neliels skaits stila pielāgojumu var ievērojami uzlabot drukas rezultātus. Galīgo rezultātu saglabāšana kā PDF ir ātrs veids, kā izveidot pievilcīgus, profesionālus dokumentus.

Kā Web lapas drukāt PDF formātā, izmantojot Microsoft Edge

Vai esat kādreiz saskāries ar kādu interesantu rakstu, kuru vēlaties saglabāt vēlāk? Nu, jūs varat saglabāt kā PDF ar Edge trīs vienkāršās darbībās.

Par autoru