Jei kada nors iš interneto atsispausdinote bilietų rezervacijas ar nuorodas į viešbutį, rezultatai tikriausiai buvo mažiau nei sužavėti. Todėl galite nežinoti, kad spausdintų dokumentų stilius gali būti panašus, kaip jie gali būti rodomi ekrane, naudojant kaskadinio stiliaus lenteles (CSS).

Rūpesčių atskyrimas

Pagrindinis CSS privalumas yra turinio atskyrimas nuo pateikimo. Paprasčiau tariant, tai reiškia vietoj labai senamadiškų stilistinių žymėjimų, tokių kaip:

Antraštė

Mes naudojame semantinį žymėjimą:

Antraštė

Tai ne tik daug švaresnis, bet ir tai, kad mūsų pristatymas yra atskirtas nuo mūsų turinio. Naršyklės pateikia h1 elementai yra didelis, paryškintas tekstas pagal numatytuosius nustatymus, tačiau stilių galime bet kada pakeisti naudodami stiliaus lapą:

h1 {šrifto svoris: normalus; }

Surinkę tas stiliaus deklaracijas į atskirą failą ir nurodydami tą failą iš savo HTML dokumento, galime dar geriau panaudoti atskyrimą. Stiliaus lapą galima pakartotinai naudoti ir mes galime bet kada pakeisti tą vienintelį failą, kad atnaujintume kiekvieno jį naudojančio dokumento formatą.

Įskaitant spausdinimo stiliaus lapą

Panašiai kaip įtraukdami ekrano stiliaus lapą, galime nurodyti stiliaus lapą spausdinimui. Ekrano stiliaus lapas paprastai pridedamas taip:

Tačiau papildomas atributas, žiniasklaida, leidžia taikyti pagal kontekstą, kuriame pateikiamas dokumentas. Pagal numatytuosius nustatymus ankstesnis elementas yra lygiavertis:

Tai reiškia, kad stiliaus lapas bus taikomas bet kuriai laikmenai, kurioje pateikiamas dokumentas. Tačiau laikmenos atributas taip pat gali turėti spausdinimo ir ekrano reikšmes:

Šiame pavyzdyje print.css stilių lapas bus naudojamas tik tada, kai dokumentas bus atspausdintas. Tai labai naudingas mechanizmas. Mes galime surinkti visus įprastus stilius (galbūt šriftų šeimą ar tarpų tarp eilučių) į stiliaus lapą, kuris taikomas visoms laikmenoms, ir su konkrečia medija susijusį formatavimą atskiruose stiliaus lapuose. Vėlgi, tai dar vienas rūpesčių atskyrimo panaudojimas.

Keletas stiliaus deklaracijų pavyzdžių

Švarus fonas

Beveik tikrai nenorite švaistyti rašalo spausdindami spalvingą foną ar fono paveikslėlį. Pradėkite iš naujo nustatydami visus numatytuosius šių verčių, kurie gali būti nustatyti jūsų dokumente, nustatymus:

kūnas {
fonas: baltas;
spalva: juoda;
}

Taip pat galite užkirsti kelią bet kokiems foniniams vaizdams spausdinti - jie turėtų būti dekoratyvūs ir todėl nebūtina jūsų turinio dalis:

* {
fono paveikslėlis: nėra! svarbu;
}

Susijęs: Kaip nustatyti fono paveikslėlį CSS

Kaip nustatyti fono paveikslėlį CSS

CSS yra galingas tinklalapių stiliaus įrankis. Išmokę įdėti fono paveikslėlį, išmokote daug CSS pagrindų.

Marginų kontrolė

Kitas akivaizdus aspektas, į kurį reikia atsižvelgti spausdinant, yra puslapio paraštė. Nors CSS suteikia galimybę nustatyti paraštės dydį, turėtumėte nepamiršti, kad jūsų naršyklė ir spausdintuvas taip pat gali turėti įtakos pačių paraštės nustatymams.

Pavyzdžiui, „Chrome“ spausdinimo dialogo lange yra paraštės nustatymas, kuriame yra vertės, įskaitant nė vienas ir paprotys kuris pakeis viską, kas nurodyta per CSS:

Dėl šios priežasties rekomenduojama palikti skaitytojams sprendimus dėl paraščių viešuose tinklalapiuose. Tačiau asmeniniam naudojimui arba numatytojo maketo kūrimui gali būti tikslinga nustatyti spausdinimo paraštes naudojant CSS. @page taisyklė leidžia nustatyti paraštes ir turėtų būti naudojama taip:

@page {
paraštė: 2cm;
}

CSS taip pat gali naudoti sudėtingesnius spausdinimo maketus, pavyzdžiui, keisti paraštę pagal tai, ar puslapis yra nelyginis (dešinysis), lyginis (kairysis), ar viršelis.

Deja, tai yra prastai palaikoma, ypač viršelio parinktis, tačiau ją galima naudoti kuo mažiau. Šie stiliai pateikia puslapius, kurių apatinės paraštės yra šiek tiek didesnės nei viršutinės ir šiek tiek didesnės išorinio puslapio kraštų nei stuburo paraštės:

@page {
kairė paraštė: 20 mm;
paraštė-dešinė: 20mm;
paraštė-viršus: 40mm;
paraštė-apačia: 50mm;
}
@page: left {
kairė paraštė: 30 mm;
}
@page: right {
paraštė-dešinė: 30mm;
}

Neslėpiančio turinio slėpimas

Ne visas turinys bus tinkamas spausdintai dokumento versijai. Jei jūsų puslapyje yra reklamjuostės naršymas, skelbimai ar šoninė juosta, galbūt norėsite neleisti šios informacijos rodyti spausdintinėje versijoje, pavyzdžiui:

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

Hipersaitai spausdintoje medžiagoje akivaizdžiai nėra svarbūs, todėl tikriausiai norėsite pašalinti bet kokius stilius, kurie juos skiria nuo supančio teksto:

a {teksto dekoravimas: nėra; spalva: paveldėti; }

Tačiau vis tiek galbūt norėsite, kad skaitytojai turėtų prieigą prie originalių URL, o paprastas sprendimas yra automatiškai juos įterpti po susieto teksto:

a [href]: po {
turinys: "(" attr (href) ")";
šrifto dydis: 90%;
spalva: # 333;
}

Ši CSS pateikia tokius rezultatus kaip šie:

a [href]: po konkrečiai taiko poziciją po (: po) kiekvienas nuorodos elementas (a), kuris iš tikrųjų turi URL ([href]). turinys deklaracija čia įterpia href atributas tarp skliaustų. Atkreipkite dėmesį, kad sugeneruoto turinio rodymui valdyti gali būti taikomos kitos stiliaus taisyklės.

Tvarkyti puslapių pertraukas

Norėdami išvengti puslapio pertraukų, paliekančių izoliuotą turinį arba nepatogiai sulaužantį viduryje, naudokite puslapio pertraukimo ypatybes: puslapio pertrauka prieš, puslapio pertrauka ir puslapis-įsilaužimas. Pavyzdžiui:

lentelė {page-break-inside: vengti; }

Tai turėtų padėti išvengti lentelių apimties keliuose puslapiuose, jei nė vienas nėra aukštesnis nei vienas puslapis. Panašiai:

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

Tai reiškia, kad tokios antraštės visada pradeda naują puslapį. Tai gali sukelti problemų, jei iškart stebėsite savo puslapio h1 su h2, nes h1 pateks į puslapį pats. Norėdami to išvengti, tiesiog atšaukite puslapio pertrauką naudodami selektorių, kuris nukreiptas į konkretų egzempliorių, pavyzdžiui:

h1 + h2 {page-break-before: vengti; }

Spausdinimo stilių peržiūra

Visais atvejais jūsų naršyklė ir operacinė sistema turėtų suteikti spausdinimo peržiūros funkciją, dažnai kaip standartinio spausdinimo dialogo dalį.

„Chrome“ naršyklė leidžia patogiau patikrinti ir net derinti spausdinimo stilius naudojant „Developer Tools“, kaip parodyta šiame pavyzdyje, kuriame rodomas CV su spausdinimo stiliaus lapu. Pirmiausia atidarykite pagrindinį meniu ir pasirinkite Daugiau įrankių po jo Kurejo irankiai variantas:

Pasirodžiusiame naujame skydelyje pasirinkite Meniutada Daugiau įrankių, paskui Atvaizdavimas:

Tada slinkite žemyn iki Imituokite CSS laikmenos tipą nustatymas. Išskleidžiamasis meniu leidžia pasirinkti dokumento spausdinimo ir ekrano rodinius:

Imituojant spausdinimo stiliaus lapą, standartas Stilių naršyklė galima patikrinti ir modifikuoti gyvo stiliaus taisykles. Atminkite, kad spausdinimo išvesties imitavimas ekrane vis dar nėra tikslus. Naršyklė nieko nežino apie popieriaus dydį ir @page taisyklė negali būti imituojama.

Spausdinimas į PDF

Patogus šiuolaikinių operacinių sistemų bruožas yra galimybė spausdinti į PDF failą. Tiesą sakant, viską, ką galite atsispausdinti, galite nusiųsti į PDF failą - tai nėra tikras netikėtumas, nes vis dėlto PDF failas turėtų atspindėti išspausdintą dokumentą.

Tai daro HTML ir spausdinimo stiliaus lapą puikia priemone kuriant aukštos kokybės dokumentą, kurį galima siųsti kaip priedą, taip pat atspausdinti.

Spausdinkite įvairius dokumentus

Galite naudoti spausdinimo stiliaus lapą, kad sukurtumėte kokybiškus dokumentus, įskaitant bet ką, pradedant jūsų CV, baigiant receptais ar renginių pranešimais. Tinklalapiai paprastai atrodo negraži ir juose yra nepageidaujamų detalių spausdinant, tačiau nedidelis stiliaus pakeitimų skaičius gali žymiai pagerinti spausdinimo rezultatus. Galutinių rezultatų išsaugojimas kaip PDF yra greitas būdas sukurti patrauklius, profesionalius dokumentus.

Kaip atsispausdinti tinklalapius PDF formatu naudojant „Microsoft Edge“

Ar kada susidūrėte su įdomiu straipsniu, kurį norėjote išsaugoti vėliau? Na, galite išsaugoti kaip PDF naudodami „Edge“ atlikdami tris paprastus veiksmus.

Apie autorių