Ako ste ikad s interneta ispisali rezervacije karata ili upute do hotela, vjerojatno ste bili manje impresionirani rezultatima. Stoga možda niste svjesni da se tiskani dokumenti mogu oblikovati na sličan način kao i oni na ekranu, koristeći Cascading Style Sheets (CSS).

Odvajanje zabrinutosti

Ključna prednost CSS-a je odvajanje sadržaja od prezentacije. Najjednostavnije rečeno, to znači umjesto vrlo staromodne stilske oznake kao što su:

Naslov

Koristimo semantičko označavanje:

Naslov

Ne samo da je ovo puno čišće, to također znači da je naša prezentacija odvojena od našeg sadržaja. Preglednici se generiraju h1 elementi kao veliki, podebljani tekst prema zadanim postavkama, ali taj stil možemo promijeniti u bilo kojem trenutku s tablicom stilova:

h1 {font-weight: normalno; }

Okupljanjem tih deklaracija stilova u zasebnoj datoteci i referenciranjem te datoteke iz našeg HTML dokumenta možemo još bolje iskoristiti razdvajanje. Tablica stilova može se ponovno koristiti i tu pojedinačnu datoteku možemo u bilo kojem trenutku promijeniti kako bismo ažurirali oblikovanje u svakom dokumentu koji je koristi.

Uključujući tabelu sa stilom ispisa

Na sličan način kao što je uključivanje stilskog lista zaslona, ​​možemo odrediti tabelu stilova za ispis. Tablica stila zaslona obično se uključuje na sljedeći način:

Međutim, dodatni atribut, mediji, omogućuje ciljanje na temelju konteksta u kojem se dokument prikazuje. Prema zadanim postavkama, prethodni je element jednak:

To znači da će se tablica stilova primijeniti na bilo koji medij u kojem je dokument prikazan. Međutim, atribut medija može uzeti i vrijednosti ispisa i zaslona:

U ovom primjeru, ispis.css Tablica stilova koristit će se samo kad se dokument ispiše. Ovo je vrlo koristan mehanizam. Možemo prikupiti sve uobičajene stilove (možda obitelj fontova ili razmak između redova) u tablici stilova koja se odnosi na sve medije i oblikovanje specifično za medije u pojedinačnim tablicama stilova. Opet, ovo je još jedna upotreba razdvajanja zabrinutosti.

Neke primjere deklaracija o stilu

Čista pozadina

Gotovo sigurno ne želite trošiti tintu ispisujući šarenu pozadinu ili pozadinsku sliku. Počnite resetiranjem zadanih vrijednosti za ove vrijednosti koje su možda postavljene u vašem dokumentu:

tijelo {
pozadina: bijela;
Crna boja;
}

Možda biste trebali spriječiti ispis bilo kakvih pozadinskih slika - one bi trebale biti ukrasne i, prema tome, ne obavezni dio vašeg sadržaja:

* {
pozadinska slika: nema! važno;
}

Povezano: Kako postaviti pozadinsku sliku u CSS

Kako postaviti pozadinsku sliku u CSS

CSS je moćan alat za oblikovanje web stranica. Učenje postavljanja pozadinske slike podučava vas mnogim osnovama CSS-a.

Kontrola marži

Još jedna očita stvar koju treba uzeti u obzir u vezi s ispisom je margina stranice. Iako CSS pruža način postavljanja veličine margine, trebate imati na umu da vaš preglednik i pisač mogu utjecati i na same postavke margine.

Na primjer, u Chromeovom dijaloškom okviru za ispis postoji postavka margine koja sadrži vrijednosti nijedna i prilagođen koji će nadjačati sve navedeno putem CSS-a:

Iz tog razloga preporuča se prepustiti odluke o marginama čitatelju na javnim web stranicama. Međutim, za osobnu upotrebu ili za stvaranje zadanog izgleda, postavljanje margina ispisa putem CSS-a može biti prikladno. The @stranica pravilo omogućuje postavljanje margina i treba ga koristiti na sljedeći način:

@ stranica {
marža: 2cm;
}

CSS također ima mogućnost sofisticiranijih izgleda ispisa, poput mijenjanja margine ovisno o tome je li stranica neparna (desno), parna (lijeva) ili naslovna stranica.

Nažalost, ovo je slabo podržano - posebno opcija naslovnice - ali se može koristiti u minimalnoj mjeri. Sljedeći stilovi daju stranice s nešto većim donjim marginama od gornjih i nešto većim marginama na vanjskom rubu stranice od kralježnice:

@ stranica {
margina-lijevo: 20 mm;
margina-desno: 20 mm;
margin-top: 40 mm;
margina-dno: 50 mm;
}
@ stranica: lijevo {
margina-lijevo: 30 mm;
}
@ stranica: desno {
margina-desno: 30 mm;
}

Sakrivanje nebitnog sadržaja

Neće sav sadržaj biti prikladan za tiskanu verziju vašeg dokumenta. Ako vaša stranica uključuje navigaciju natpisima, oglase ili bočnu traku, možda ćete htjeti spriječiti da se ti detalji pojave u verziji za ispis, na primjer:

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

Hiperveze očito nisu bitne u tiskanom materijalu, pa ćete vjerojatno htjeti ukloniti sve stilove koji ih razlikuju od okolnog teksta:

a {ukras teksta: nijedan; boja: naslijediti; }

Međutim, možda ćete i dalje željeti da čitatelji imaju pristup izvornim URL-ovima, a jednostavno rješenje je da ih automatski umetnete nakon povezanog teksta:

a [href]: nakon {
sadržaj: "(" attr (href) ")";
veličina slova: 90%;
boja: # 333;
}

Ovaj CSS daje rezultate kao što su sljedeći:

a [href]: nakon posebno cilja položaj nakon (:nakon) svaki element veze (a) koji zapravo ima URL ([href]). The sadržaj deklaracija ovdje ubacuje vrijednost href atribut između zagrada. Imajte na umu da se za kontrolu prikaza generiranog sadržaja mogu primijeniti druga pravila stila.

Rukovanje prekidima stranice

Da biste izbjegli da prijelomi stranica ne ostavljaju izolirani sadržaj ili ga nezgodno lome u sredini, upotrijebite svojstva preloma stranice: prijelom stranice, prijelom stranice i proboj stranice. Na primjer:

tablica {razbijanje stranice: izbjegavati; }

To bi trebalo spriječiti da tablice obuhvaćaju više stranica, pod uvjetom da nijedna nije viša od jedne stranice. Slično:

h1, h2 {prijelom stranice: uvijek; }

To znači da takvi naslovi uvijek započinju novu stranicu. To bi moglo stvoriti probleme ako odmah slijedite h1 svoje stranice s h2, jer će h1 završiti na samoj stranici. Da biste to izbjegli, jednostavno otkažite prijelom stranice pomoću selektora koji cilja tu određenu instancu, na primjer:

h1 + h2 {prijelom stranice: izbjegavanje; }

Pregled stilova ispisa

U svim bi slučajevima vaš preglednik i operativni sustav trebali pružati značajku pregleda ispisa, često kao dio standardnog dijaloškog okvira za ispis.

Preglednik Chrome olakšava provjeru, pa čak i uklanjanje pogrešaka u stilovima ispisa putem alata za programere, kao što je pokazano u ovom primjeru koji prikazuje životopis s listom stilova ispisa. Prvo otvorite glavni izbornik i odaberite Više alata nakon čega slijedi Razvojni alati opcija:

Na novoj ploči koja će se pojaviti odaberite izbornik, onda Više alata, nakon čega slijedi Prikazivanje:

Zatim se pomaknite dolje do Emuliraj CSS vrstu medija postavljanje. Padajući izbornik omogućuje vam prebacivanje između prikaza ispisa i zaslona dokumenta:

Kada se oponaša tabela stilova ispisa, standard Preglednici stilova dostupan je za pregled i izmjenu pravila o stilu uživo. Imajte na umu da oponašanje ispisa na zaslonu još uvijek nije 100% točno. Preglednik ne zna ništa o veličini papira i @stranica pravilo se ne može oponašati.

Ispis u PDF

Zgodna značajka modernih operativnih sustava je mogućnost ispisa u PDF datoteku. U stvari, sve što možete ispisati može se, umjesto toga, poslati u PDF datoteku - ne predstavlja pravo iznenađenje jer bi PDF datoteka ipak trebala predstavljati ispisani dokument.

To HTML čini, u kombinaciji s ispisom stilskog lista, izvrsnim sredstvom za stvaranje visokokvalitetnog dokumenta koji se može poslati kao privitak, kao i ispisati.

Ispis raznih dokumenata

Možete koristiti ispisnu tablicu stilova za stvaranje kvalitetnih dokumenata, uključujući bilo što, od vašeg životopisa do recepata ili najava događaja. Web stranice obično izgledaju ružno i sadrže neželjene detalje kada se ispisuju, ali mali broj prilagodbi stila može dramatično poboljšati rezultate ispisa. Spremanje konačnih rezultata kao PDF brz je način za stvaranje atraktivnih, profesionalnih dokumenata.

Kako ispisati web stranice u PDF pomoću Microsoft Edgea

Jeste li ikad naišli na zanimljiv članak koji ste željeli sačuvati za kasnije? Pa, možete spremiti kao PDF s Edgeom u tri jednostavna koraka.

O autoru