CSS naudojimas formatuojant dokumentus spausdinimui

CSS naudojimas formatuojant dokumentus spausdinimui

Jei kada nors iš interneto atspausdinote bilietų rezervacijas ar nuorodas į viešbutį, rezultatai greičiausiai jus sužavėjo. Todėl galbūt nežinote, kad spausdinti dokumentai gali būti formuojami taip pat, kaip ir ekrane, naudojant kaskadinius stiliaus lapus (CSS).





Susirūpinimo atskyrimas

Pagrindinis CSS privalumas yra turinio atskyrimas nuo pateikimo. Paprasčiau tariant, tai reiškia vietoj labai senamadiško stilistinio žymėjimo, pavyzdžiui:



Heading

Mes naudojame semantinį žymėjimą:






Tai ne tik švaresnė, bet ir reiškia, kad mūsų pristatymas yra atskirtas nuo turinio. Naršyklės atvaizduoja h1 elementai kaip didelis, paryškintas tekstas pagal numatytuosius nustatymus, tačiau bet kuriuo metu galime pakeisti šį stilių naudodami stiliaus lapą:

h1 { font-weight: normal; }

Surinkę šias stiliaus deklaracijas į atskirą failą ir nurodydami tą failą iš mūsų HTML dokumento, galime dar geriau panaudoti atskyrimą. Stiliaus lapą galima pakartotinai naudoti, ir mes galime bet kuriuo metu pakeisti tą vienintelį failą, kad atnaujintume kiekvieno jo naudojančio dokumento formatą.



Įskaitant spausdinimo stiliaus lapą

Panašiai, kaip ir ekrano stiliaus lapo įtraukimas, galime nurodyti spausdinimo stiliaus lapą. Ekrano stiliaus lapas paprastai įtraukiamas taip:


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




Tai reiškia, kad stilių lapas bus taikomas bet kokiai laikmenai, kurioje pateikiamas dokumentas. Tačiau medijos atributas taip pat gali priimti spausdinimo ir ekrano reikšmes:


Šiame pavyzdyje spausdinti.css stilių lapas bus naudojamas tik tada, kai dokumentas bus išspausdintas. Tai labai naudingas mechanizmas. Visą įprastą stilių (galbūt šriftų šeimą ar tarpą tarp eilučių) galime surinkti stilių lape, kuris taikomas visoms laikmenoms, ir konkrečios laikmenos formatavimą atskiruose stilių lapuose. Vėlgi, tai dar vienas rūpesčių atskyrimo būdas.



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 visas numatytasis šių verčių vertes, kurios galėjo būti nustatytos jūsų dokumente:

body {
background: white;
color: black;
}

Taip pat galbūt norėsite neleisti spausdinti jokių foninių vaizdų - jie turėtų būti dekoratyvūs ir todėl nebūtina jūsų turinio dalis:

* {
background-image: none !important;
}

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

kokią failų sistemą naudoja „Windows 10“

Kraštinių kontrolė

Kitas akivaizdus dalykas, kurį reikia apsvarstyti dėl spausdinimo, yra puslapio paraštė. Nors CSS suteikia galimybę nustatyti paraštės dydį, atminkite, kad jūsų naršyklė ir spausdintuvas taip pat gali turėti įtakos pačių paraščių nustatymams.

Pvz., „Chrome“ spausdinimo dialogo lange yra paraštės nustatymas, kuriame yra vertės nė vienas ir paprotys kuris pakeis viską, kas nurodyta naudojant CSS:

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

@page {
margin: 2cm;
}

CSS taip pat gali sudaryti sudėtingesnius spausdinimo maketus, pvz., Keisti paraštes pagal tai, ar puslapis yra nelyginis (dešinysis), lyginis (kairysis) ar viršelis.

kaip pašalinti geriausius draugus iš „snapchat“

Deja, tai menkai palaikoma, ypač titulinio puslapio parinktis, tačiau ją galima naudoti minimaliai. Šie stiliai sukuria puslapius su šiek tiek didesnėmis apatinėmis paraštėmis nei viršutinė ir šiek tiek didesnėmis paraštėmis išoriniame puslapio krašte nei stuburas:

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

Nereikšmingo turinio slėpimas

Ne visas turinys bus tinkamas spausdintinei jūsų dokumento versijai. Jei jūsų puslapyje yra reklamjuostės naršymas, skelbimai ar šoninė juosta, galbūt norėsite, kad ši informacija nebūtų rodoma spausdintoje versijoje, pavyzdžiui:

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

Hipersaitai akivaizdžiai nėra susiję su spausdinta medžiaga, todėl tikriausiai norėsite pašalinti visus stilius, kurie juos išskiria iš aplinkinio teksto:

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

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

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

Šis CSS duoda tokius rezultatus:

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

Puslapio pertraukų tvarkymas

Kad puslapio pertraukos nepaliktų izoliuoto turinio arba nepatogiai nesulaužytų jo viduryje, pasinaudokite puslapio lūžio ypatybėmis: puslapio pertrauka , puslapio pertrauka ir puslapio pertrauka . Pavyzdžiui:

table { page-break-inside: avoid; }

Tai turėtų padėti neleisti lentelėms apimti kelių puslapių, jei nė vienas nėra aukštesnis už vieną puslapį. Panašiai:

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

Tai reiškia, kad tokios antraštės visada pradeda naują puslapį. Tačiau gali kilti problemų, jei iš karto seksite savo puslapio h1 naudodami h2, nes h1 vis tiek atsidurs puslapyje. Norėdami to išvengti, tiesiog atšaukite puslapio pertrauką naudodami parinkiklį, taikomą pagal tą konkretų egzempliorių, pavyzdžiui:

kaip ištrinti paieškos istoriją „Facebook“
h1 + h2 { page-break-before: avoid; }

Spausdinimo stilių peržiūra

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

Naudojant „Chrome“ naršyklę patogiau patikrinti ir net derinti spausdinimo stilius naudojant kūrėjo įrankius, kaip parodyta šiame pavyzdyje, rodančiame CV su spausdinimo stiliaus lapu. Pirmiausia atidarykite pagrindinį meniu ir pasirinkite Daugiau įrankių po to Kurejo irankiai variantas:

Pasirodžiusiame naujame skydelyje pasirinkite Meniu , tada Daugiau įrankių , po to Atvaizdavimas :

Tada slinkite žemyn iki Imituoti CSS laikmenos tipą nustatymas. Išskleidžiamajame meniu galite perjungti dokumento spausdinimo ir ekrano rodinius:

Imituodama spausdinimo stiliaus lapą, standartas Stilių naršyklė galima peržiūrėti ir keisti tiesioginio stiliaus taisykles. Atminkite, kad spausdinimo išvesties emuliacija ekrane vis dar nėra 100% tiksli. Naršyklė nieko nežino apie popieriaus dydį ir @puslapis taisyklė negali būti imituojama.

Spausdinimas į PDF

Patogi šiuolaikinių operacinių sistemų ypatybė yra galimybė spausdinti į PDF failą. Tiesą sakant, viskas, ką galite atspausdinti, gali būti siunčiama į PDF failą - tikrai nenuostabu, nes PDF failas vis tiek turėtų būti atspausdintas dokumentas.

Dėl to HTML kartu su spausdinimo stiliaus lapu yra puiki priemonė sukurti aukštos kokybės dokumentą, kuris gali būti išsiųstas kaip priedas ir išspausdintas.

Galite naudoti spausdinimo stilių lapą, kad sukurtumėte kokybiškus dokumentus, įskaitant viską nuo savo CV iki receptų ar pranešimų apie renginius. Tinklalapiai paprastai atrodo negražiai ir juose yra nepageidaujamos informacijos, tačiau nedidelis stiliaus pakeitimų skaičius gali žymiai pagerinti spausdinimo rezultatus. Galutinių rezultatų išsaugojimas PDF formatu yra greitas būdas sukurti patrauklius, profesionalius dokumentus.

Dalintis Dalintis „Tweet“ Paštu Kaip spausdinti tinklalapius į PDF naudojant „Microsoft Edge“

Ar kada nors 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.

Skaityti toliau Susijusios temos
  • Programavimas
  • Spausdinimas
  • CSS
Apie autorių Bobis Džekas(Paskelbti 58 straipsniai)

Bobby yra technologijų entuziastas, kuris beveik du dešimtmečius dirbo programinės įrangos kūrėju. Jis aistringai žaidžia, dirba „Switch Player Magazine“ apžvalgų redaktoriumi ir yra pasinėręs į visus internetinės publikacijos ir žiniatinklio kūrimo aspektus.

Daugiau iš Bobby Jack

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia