Jos olet joskus tulostanut lippuvarauksia tai ohjeita hotellille verkosta, olet todennäköisesti ollut vähemmän vaikuttunut tuloksista. Siksi saatat olla tietämätön siitä, että tulostetut asiakirjat voidaan tyylittää samalla tavalla kuin ruudulla CSS (CSS) -työkalujen avulla.

Huolenaiheiden erottaminen

CSS: n keskeinen etu on sisällön erottaminen esityksestä. Yksinkertaisesti sanottuna tämä tarkoittaa hyvin vanhanaikaista tyylimerkintää, kuten:

Otsikko

Käytämme semanttista merkintää:

Otsikko

Paitsi että tämä on paljon puhtaampaa, se tarkoittaa myös sitä, että esityksemme on erotettu sisällöltämme. Selaimet tekevät h1 elementit oletusarvoisesti suurena, lihavoituna tekstinä, mutta voimme muuttaa kyseistä tyyliä milloin tahansa tyylitaulukolla:

h1 {font-weight: normaali; }

Keräämällä nämä tyyli-ilmoitukset erilliseen tiedostoon ja viittaamalla kyseiseen tiedostoon HTML-dokumentistamme voimme hyödyntää erottelua entistä paremmin. Tyylitaulukkoa voidaan käyttää uudelleen, ja voimme muuttaa kyseistä yksittäistä tiedostoa milloin tahansa päivittääksesi jokaisen sitä käyttävän asiakirjan muotoilun.

Mukana tulostustyyliarkki

Voimme määrittää tyylisivun tulostusta varten samalla tavalla kuin näytön tyylisivun sisällyttäminen. Näytön tyylisivut sisältyvät yleensä seuraavasti:

Lisäominaisuus, media, sallii kohdistamisen kontekstin perusteella, jossa asiakirja renderöidään. Oletusarvoisesti edellinen elementti vastaa:

Tämä tarkoittaa, että tyylitaulukkoa sovelletaan kaikkiin välineisiin, joissa asiakirja renderöidään. Media-attribuutti voi kuitenkin ottaa myös tulosteen ja näytön arvot:

Tässä esimerkissä print.css tyylitaulukkoa käytetään vain, kun asiakirja tulostetaan. Tämä on erittäin hyödyllinen mekanismi. Voimme kerätä kaikki yleiset tyylit (ehkä kirjasinperheen tai rivivälit) tyylitaulukkoon, joka koskee kaikkea mediaa, ja mediakohtaisen muotoilun yksittäisissä tyylitaulukoissa. Jälleen tämä on toinen tapa käyttää huolenaiheita.

Joitakin esimerkkejä tyyli-ilmoituksista

Puhdas tausta

Melkein varmasti ei halua tuhlata mustetta värikkään taustan tai taustakuvan tulostamiseen. Aloita palauttamalla kaikki oletusarvot näille arvoille, jotka on määritetty asiakirjassa:

runko {
tausta: valkoinen;
väri musta;
}

Haluat ehkä myös estää taustakuvien tulostamisen - niiden on oltava koristeellisia, eivätkä ne siis ole pakollinen osa sisältöäsi:

* {
taustakuva: ei mitään! tärkeä;
}

Liittyvät: Kuinka asettaa taustakuva CSS: ssä

Kuinka asettaa taustakuva CSS: ssä

CSS on tehokas työkalu verkkosivujen muotoiluun. Oppiminen taustakuvan sijoittamisesta opettaa sinulle paljon CSS-perusteita.

Marginaalien hallinta

Toinen ilmeinen seikka, joka on otettava huomioon tulostuksessa, on sivumarginaali. Vaikka CSS tarjoaa keinon marginaalin koon asettamiseen, sinun on pidettävä mielessä, että selaimesi ja tulostimesi voivat vaikuttaa itse marginaaliasetuksiin.

Esimerkiksi Chromen tulostusvalintaikkunassa on marginaali-asetus, joka sisältää arvot ei mitään ja mukautettu joka ohittaa kaikki CSS: n kautta määritellyt:

Tästä syystä on suositeltavaa jättää marginaalipäätökset lukijan tehtäväksi julkisilla verkkosivuilla. Henkilökohtaiseen käyttöön tai oletusasettelun luomiseksi tulostusmarginaalien asettaminen CSS: n kautta voi kuitenkin olla tarkoituksenmukaista. @sivu sääntö sallii marginaalien asettamisen, ja sitä tulisi käyttää seuraavasti:

@page {
marginaali: 2 cm;
}

CSS: llä on myös kyky kehittyneempiin tulostusasetteluihin, kuten marginaalin vaihteluun sen mukaan, onko sivu pariton numero (oikea), parillinen (vasen) vai kansisivu.

Valitettavasti tätä tuetaan huonosti - etenkin kansisivuvaihtoehtoa -, mutta sitä voidaan käyttää vain vähän. Seuraavat tyylit tuottavat sivuja, joiden alamarginaalit ovat hieman suuremmat kuin ylä- ja hieman suuremmat marginaalit sivun ulkoreunassa kuin selkäranka:

@page {
marginaali vasemmalla: 20mm;
reuna-oikea: 20mm;
yläreuna: 40 mm;
marginaalin pohja: 50 mm;
}
@page: left {
marginaali vasemmalla: 30 mm;
}
@page: oikea {
reuna-oikea: 30mm;
}

Epäasiallisen sisällön piilottaminen

Kaikki sisältö ei sovi asiakirjan tulostettuun versioon. Jos sivullasi on bannerinavigointi, mainoksia tai sivupalkki, voit ehkä estää näiden tietojen näkymisen painetussa versiossa, esimerkiksi:

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

Hyperlinkit eivät tietenkään ole merkityksellisiä painetussa materiaalissa, joten sinun kannattaa todennäköisesti poistaa kaikki tyylit, jotka erottavat ne ympäröivästä tekstistä:

a {tekstikoristelu: ei mitään; väri: periä; }

Saatat silti haluta, että lukijoilla on pääsy alkuperäisiin URL-osoitteisiin, ja yksinkertainen ratkaisu on lisätä ne automaattisesti linkitetyn tekstin jälkeen:

a [href]: jälkeen {
sisältö: "(" attr (href) ")";
kirjasinkoko: 90%;
väri: # 333;
}

Tämä CSS tarjoaa esimerkiksi seuraavia tuloksia:

a [href]: jälkeen kohdistaa nimenomaisesti asemaan jälkeen (:jälkeen) kukin linkki-elementti (a) jolla on tosiasiallisesti URL-osoite ([href]). sisältö tässä oleva ilmoitus lisää arvon href attribuutti sulkeiden välillä. Huomaa, että muita tyylisääntöjä voidaan käyttää ohjaamaan luodun sisällön näyttämistä.

Sivumurtumien käsittely

Käytä sivunvaihtominaisuuksia välttääksesi sivunvaihtoa jättämästä erillistä sisältöä tai rikkomatta sitä hankalasti keskelle: page-break-before, sivunvaihto ja sivunvaihto. Esimerkiksi:

taulukko {page-break-inside: välttää; }

Tämän pitäisi auttaa estämään taulukoiden ulottuminen usealle sivulle edellyttäen, että yksikään ei ole yhden sivun korkein. Samoin:

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

Tämä tarkoittaa, että tällaiset otsikot alkavat aina uuden sivun. Se saattaa aiheuttaa ongelmia, jos seuraat sivusi h1 heti h2: lla, koska h1 pääsee sivulle yksin. Tämän välttämiseksi yksinkertaisesti peruuta sivunvaihto valitsimella, joka kohdistuu kyseiseen ilmentymään, esimerkiksi:

h1 + h2 {page-break-before: välttää; }

Tulostustyylien tarkasteleminen

Kaikissa tapauksissa selaimesi ja käyttöjärjestelmän on tarjottava tulostuksen esikatseluominaisuus, usein osana normaalia tulostusikkunaa.

Chrome-selain helpottaa tulostustyylien tarkistamista ja jopa virheenkorjaamista kehittäjätyökalujen avulla, kuten tämä esimerkki osoittaa, että CV näyttää tulostustyylisivun. Avaa ensin päävalikko ja valitse Lisää työkaluja jota seuraa Kehitystyökalut vaihtoehto:

Valitse näkyviin tulevasta uudesta paneelista Valikkositten Lisää työkaluja, jonka jälkeen Renderointi:

Selaa sitten alas kohtaan Emuloi CSS-mediatyyppiä asetus. Pudotusvalikossa voit vaihtaa asiakirjan tulostus- ja näyttönäkymien välillä:

Kun jäljitellään tulostustyyliä, standardi Tyylit-selain on käytettävissä live-tyylisääntöjen tarkastamiseen ja muokkaamiseen. Muista, että tulostustuloksen jäljitteleminen näytöllä ei ole vieläkään 100% tarkkaa. Selain ei tiedä mitään paperin koosta ja @sivu sääntöä ei voida jäljitellä.

Tulostaminen PDF-tiedostoksi

Kätevä ominaisuus nykyaikaisissa käyttöjärjestelmissä on kyky tulostaa PDF-tiedostoon. Itse asiassa kaikki, mitä voit tulostaa, voidaan sen sijaan lähettää PDF-tiedostoon - ei todellista yllätystä, koska loppujen lopuksi PDF-tiedoston on tarkoitus edustaa tulostettua asiakirjaa.

Tämä tekee HTML: stä yhdessä tulostustyylitaulukon kanssa erinomaisen tavan luoda korkealaatuinen asiakirja, joka voidaan lähettää liitteenä sekä tulostaa.

Tulosta erilaisia ​​asiakirjoja

Voit luoda laadukkaita asiakirjoja tulostustyylitaulukon avulla, mukaan lukien kaikki ansioluettelostasi resepteihin tai tapahtuma-ilmoituksiin. Verkkosivut näyttävät tyypillisesti rumilta ja sisältävät ei-toivottuja yksityiskohtia tulostettaessa, mutta pieni määrä tyyliominaisuuksia voi parantaa merkittävästi tulostustuloksia. Lopputulosten tallentaminen PDF-tiedostona on nopea tapa luoda houkuttelevia ja ammattimaisia ​​asiakirjoja.

Verkkosivujen tulostaminen PDF-tiedostoiksi Microsoft Edgen avulla

Oletko koskaan törmännyt mielenkiintoiseen artikkeliin, jonka halusit tallentaa myöhempää käyttöä varten? No, voit tallentaa PDF-tiedostona Edgen avulla kolmessa helpossa vaiheessa.

Kirjailijasta