CSS izmantošana dokumentu formatēšanai drukāšanai

CSS izmantošana dokumentu formatēšanai drukāšanai

Ja kādreiz esat tīmeklī izdrukājis biļešu rezervācijas vai norādes uz viesnīcu, iespējams, esat pārsteigts par rezultātiem. Tāpēc jūs, iespējams, nezināt, ka drukātos dokumentus var veidot tādā pašā veidā 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ā nozīmē tas nozīmē ļoti vecmodīgu stilistisko iezīmējumu, piemēram:



Heading

Mēs izmantojam semantisko iezīmējumu:






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

h1 { font-weight: normal; }

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 izmantot atkārtoti, un mēs varam mainīt šo vienu failu jebkurā laikā, lai atjauninātu formatējumu katrā dokumentā, kas to izmanto.



Ieskaitot drukas stila lapu

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


Tomēr papildu atribūts, puse , ļauj atlasīt mērķauditoriju, pamatojoties uz kontekstu, kurā dokuments tiek atveidots. Pēc noklusējuma iepriekšējais elements ir līdzvērtīgs:




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


Šajā piemērā print.css stila lapa tiks izmantota tikai tad, kad dokuments ir izdrukāts. Tas ir ļoti noderīgs mehānisms. Mēs varam apkopot visu parasto stilu (iespējams, fontu saimi vai atstarpes starp rindām) stilu lapā, kas attiecas uz visiem datu nesējiem, un mediju specifisko 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

Jūs gandrīz noteikti nevēlaties tērēt tinti, izdrukājot krāsainu fonu vai fona attēlu. Sāciet, atiestatot visu noklusējuma vērtību šīm vērtībām, kas, iespējams, ir iestatītas jūsu dokumentā.

body {
background: white;
color: black;
}

Iespējams, vēlēsities arī neļaut drukāt nevienu fona attēlu - tiem vajadzētu būt dekoratīviem un tāpēc nav obligāta jūsu satura daļa:

* {
background-image: none !important;
}

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

ir fat32 tas pats kas exfat

Malas kontrole

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

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

Šī iemesla dēļ ir ieteicams atstāt lēmumus par rezervēm publiskajās tīmekļa vietnēs. Tomēr personiskai lietošanai vai noklusējuma izkārtojuma izveidei drukas piemaļu iestatīšana, izmantojot CSS, var būt piemērota. The @lappuse noteikums ļauj iestatīt piemales, un tas jāizmanto šādi:

@page {
margin: 2cm;
}

CSS var izmantot arī sarežģītākus drukas izkārtojumus, piemēram, mainīt malas atkarībā no tā, vai lapa ir nepāra (labajā), pāra (kreisā) vai titullapā.

kā noņemt drm ar kalibru

Diemžēl tas ir vāji atbalstīts - īpaši titullapas opcija -, taču to var izmantot minimālā mērā. Tālāk minētie stili rada lapas ar nedaudz lielākām apakšējām malām nekā augšdaļa un nedaudz lielākas piemales lapas ārējā malā nekā mugurkauls:

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

Neatbilstoša satura slēpšana

Ne viss saturs būs piemērots jūsu dokumenta drukas versijai. Ja jūsu lapa ietver reklāmkarogu navigāciju, reklāmas vai sānjoslu, iespējams, vēlēsities neļaut šo informāciju parādīt drukātajā versijā, piemēram:

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

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

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

Tomēr jūs, iespējams, vēlēsities, lai lasītājiem būtu piekļuve sākotnējiem URL, un vienkāršs risinājums ir automātiski tos ievietot pēc saistītā teksta:

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

Šis CSS sniedz tādus rezultātus kā:

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

Lapu pārtraukumu apstrāde

Lai izvairītos no lappušu pārtraukumiem, kas atstātu izolētu saturu vai neveikli to vidū, izmantojiet lapu pārtraukuma rekvizītus: lappuses pārtraukums , lappušu pārtraukums un lappuses pārrāvums . Piemēram:

table { page-break-inside: avoid; }

Tam vajadzētu palīdzēt novērst to, ka tabulas aptver vairākas lapas, ja neviena no tām nav augstāka par vienu lapu. Līdzīgi:

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

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

cik maksā ps4 kamera
h1 + h2 { page-break-before: avoid; }

Drukas stilu apskate

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

Pārlūkprogrammā Chrome ir ērtāk pārbaudīt un pat atkļūdot drukas stilus, izmantojot izstrādātāja rīkus, kā parādīts šajā piemērā, kas parāda CV ar drukas stila lapu. Vispirms atveriet galveno izvēlni un izvēlieties Vairāk rīku kam seko Izstrādātāja rīki iespēja:

Parādītajā jaunajā panelī atlasiet Izvēlne , tad Vairāk rīku , kam seko Renderēšana :

Pēc tam ritiniet uz leju līdz Līdzināties CSS multivides tipam iestatījumu. Nolaižamā izvēlne ļauj pārslēgties starp dokumenta drukas un ekrāna skatiem:

Atdarinot drukas stilu lapu, standarts Stilu pārlūks ir pieejams tiešā stila noteikumu apskatei un modificēšanai. Ņemiet vērā, ka drukas izvades atdarināšana ekrānā joprojām nav 100% precīza. Pārlūkprogramma 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 iespēja drukāt PDF failā. Faktiski viss, ko varat izdrukāt, var tikt nosūtīts uz PDF failu - tas nav īsts pārsteigums, jo galu galā PDF failam vajadzētu būt drukātam dokumentam.

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

Jūs varat izmantot drukas stilu lapu, lai izveidotu kvalitatīvus dokumentus, tostarp visu, sākot no sava CV līdz receptēm vai paziņojumiem par notikumiem. Tīmekļa lapas parasti izskatās neglītas un drukājot satur nevēlamu informāciju, taču neliela stila pielāgošana var ievērojami uzlabot drukas rezultātus. Galīgo rezultātu saglabāšana PDF formātā ir ātrs veids, kā izveidot pievilcīgus, profesionālus dokumentus.

Kopīgot Kopīgot Čivināt E -pasts Kā drukāt tīmekļa lapas PDF formātā, izmantojot Microsoft Edge

Vai esat kādreiz saskāries ar interesantu rakstu, kuru vēlējāties saglabāt vēlākam laikam? Jūs varat saglabāt kā PDF, izmantojot Edge, veicot trīs vienkāršas darbības.

Lasīt Tālāk Saistītās tēmas
  • Programmēšana
  • Drukāšana
  • CSS
Par autoru Bobijs Džeks(58 raksti publicēti)

Bobijs ir tehnoloģiju entuziasts, kurš gandrīz divus gadu desmitus strādāja par programmatūras izstrādātāju. Viņš aizraujas ar spēlēm, strādā par atsauksmju redaktoru žurnālā Switch Player un ir iedziļinājies visos tiešsaistes publicēšanas un tīmekļa izstrādes aspektos.

Vairāk no Bobija Džeka

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu