CSS használata dokumentumok formázásához nyomtatáshoz

CSS használata dokumentumok formázásához nyomtatáshoz

Ha valaha kinyomtatta a netről a jegyfoglalásokat vagy a szállodába vezető útvonaltervet, akkor valószínűleg kevésbé volt lenyűgözve az eredményekkel. Ezért előfordulhat, hogy nem tudja, hogy a nyomtatott dokumentumok stílusa nagyjából ugyanolyan, mint a képernyőn, a Cascading Style Sheets (CSS) használatával.





Az aggodalmak elkülönítése

A CSS egyik fő előnye a tartalom és a prezentáció elkülönítése. A legegyszerűbben kifejezve ez a nagyon régimódi stílusjelölés helyett, mint például:



Heading

Szemantikai jelölést használunk:






Ez nemcsak tisztább, hanem azt is jelenti, hogy a bemutatónk el van választva a tartalmunktól. A böngészők megjelennek h1 alapértelmezés szerint nagy, félkövér szöveg, de ezt a stílust bármikor megváltoztathatjuk egy stíluslappal:

h1 { font-weight: normal; }

Ha ezeket a stílusnyilatkozatokat külön fájlba gyűjti, és a fájlra hivatkozik a HTML -dokumentumunkból, még jobban ki tudjuk használni az elválasztást. A stíluslap újra felhasználható, és bármikor megváltoztathatjuk ezt az egyetlen fájlt, hogy frissítsük a formázást minden dokumentumban, amely használja.



Nyomtatási stíluslapot is tartalmaz

Hasonló módon, mint a képernyő stíluslapjának megadása, megadhatunk egy stíluslapot a nyomtatáshoz. A képernyő stíluslapja általában a következőket tartalmazza:


Azonban egy további tulajdonság, fél , lehetővé teszi a célzást a dokumentum kontextusa alapján. Alapértelmezés szerint az előző elem egyenértékű:




Ez azt jelenti, hogy a stíluslapot minden olyan hordozóra alkalmazni kell, amelyen a dokumentum megjelenik. A media attribútum azonban a nyomtatás és a képernyő értékeit is felveheti:


Ebben a példában a print.css stíluslap csak akkor használható, ha a dokumentum ki van nyomtatva. Ez egy nagyon hasznos mechanizmus. Összegyűjthetjük az összes gyakori stílust (esetleg a betűtípuscsaládot vagy a sorközöket) egy stíluslapon, amely minden médiára vonatkozik, és a média-specifikus formázást az egyes stíluslapokon. Ismétlem, ez az aggodalmak szétválasztásának másik módja.



Néhány példa stílusnyilatkozatra

Tiszta háttér

Szinte biztosan nem akarja pazarolni a tintát színes háttér vagy háttérkép kinyomtatásával. Kezdje azzal, hogy visszaállítja az alapértelmezett értékeket a dokumentumban esetleg beállított értékekre:

body {
background: white;
color: black;
}

Érdemes megakadályozni a háttérképek nyomtatását is - ezeknek dekoratívnak kell lenniük, és ezért nem kötelező tartalom részeként:

* {
background-image: none !important;
}

Összefüggő: Háttérkép beállítása a CSS -ben

hogyan lehet elrejteni a számot hívás közben

A margók szabályozása

Egy másik nyilvánvaló szempont, amelyet figyelembe kell venni a nyomtatással kapcsolatban, az oldalmargó. Míg a CSS lehetőséget nyújt a margó méretének beállítására, ne feledje, hogy a böngésző és a nyomtató maguk is befolyásolhatják a margóbeállításokat.

Például a Chrome nyomtatási párbeszédablakában van egy margóbeállítás, amelynek értékei közé tartozik egyik sem és egyedi amely felülír minden, a CSS -en keresztül megadottat:

Ezért javasoljuk, hogy hagyja a marginális döntéseket az olvasóra a nyilvános weboldalakon. Azonban személyes használatra vagy alapértelmezett elrendezés létrehozásához a nyomtatási margók CSS -en keresztül történő beállítása megfelelő lehet. Az @oldal szabály lehetővé teszi a margók beállítását, és a következőképpen kell használni:

@page {
margin: 2cm;
}

A CSS képes kifinomultabb nyomtatási elrendezésekre is, például a margó módosítására aszerint, hogy az oldal páratlan (jobb), páros (bal) vagy a fedőlap.

letölthet epizódokat a hulu -ról

Sajnos ez gyengén támogatott - különösen a fedőlap opció -, de minimális mértékben használható. A következő stílusok olyan oldalakat hoznak létre, amelyek alsó margója valamivel nagyobb, mint a felső, és kissé nagyobb margók vannak a külső oldal szélén, mint a gerinc:

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

Irreleváns tartalom elrejtése

Nem minden tartalom lesz alkalmas a dokumentum nyomtatott változatára. Ha oldala szalaghirdetés -navigációt, hirdetéseket vagy oldalsávot tartalmaz, akkor érdemes megakadályozni, hogy ezek a részletek megjelenjenek a nyomtatott verzióban, például:

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

A hiperhivatkozások nyilvánvalóan nem relevánsak a nyomtatott anyagokban, ezért valószínűleg el szeretné távolítani azokat a stílusokat, amelyek megkülönböztetik őket a környező szövegtől:

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

Azonban továbbra is szeretné, ha az olvasók hozzáférnének az eredeti URL -címekhez, és egyszerű megoldás, ha automatikusan beszúrja őket a linkelt szöveg után:

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

Ez a CSS olyan eredményeket ad, mint például:

a [href]: után kifejezetten a pozíciót célozza (( :után ) minden link elem ( nak nek ), amely valóban rendelkezik URL -lel ( [href] ). Az tartalom deklaráció ide illeszti be a href attribútum zárójelben. Vegye figyelembe, hogy más stílusszabályok is alkalmazhatók a létrehozott tartalom megjelenítésének szabályozására.

Oldaltörések kezelése

Annak elkerülése érdekében, hogy az oldaltörések elhagyják az elszigetelt tartalmat, vagy nehezen törjék meg középen, használja az oldaltörési tulajdonságokat: oldaltörés előtt , oldaltörés és oldaltörés . Például:

table { page-break-inside: avoid; }

Ez segíthet abban, hogy a táblázatok ne terjedjenek át több oldalon, feltéve, hogy egyik sem magasabb, mint egy oldal. Hasonlóképpen:

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

Ez azt jelenti, hogy az ilyen címsorok mindig új oldalt nyitnak. Problémákat okozhat, ha azonnal követi az oldal h1 -jét egy h2 -vel, mivel a h1 önmagában fog egy oldalra kerülni. Ennek elkerülése érdekében egyszerűen törölje az oldalszünetet az adott példányt célzó választó segítségével, például:

miért jó a közösségi média törlése
h1 + h2 { page-break-before: avoid; }

Nyomtatási stílusok megtekintése

A böngészőnek és az operációs rendszernek minden esetben biztosítania kell a nyomtatás előnézeti funkcióját, gyakran a szabványos nyomtatási párbeszédablak részeként.

A Chrome böngésző kényelmesebbé teszi a nyomtatási stílusok ellenőrzését, sőt hibakeresését a fejlesztői eszközökön keresztül, amint azt ez a példa is mutatja, amely egy nyomtatási stíluslapot tartalmazó önéletrajzot mutat. Először nyissa meg a főmenüt, és válassza a lehetőséget További eszközök majd a Fejlesztői eszközök választási lehetőség:

A megjelenő új panelen válassza a lehetőséget Menü , azután További eszközök , majd utána Renderelés :

Ezután görgessen lefelé a Emulálja a CSS médiatípust beállítás. A legördülő menüben válthat a dokumentum nyomtatási és képernyő nézetei között:

A nyomtatási stíluslap emulálásakor a szabvány Stílus böngésző elérhető az élő stílus szabályainak megtekintéséhez és módosításához. Ne feledje, hogy a képernyőn a nyomtatási kimenet emulálása még mindig nem 100% -os pontosságú. A böngésző semmit sem tud a papírméretről, és a @oldal a szabály nem követhető.

Nyomtatás PDF -be

A modern operációs rendszerek praktikus tulajdonsága a PDF fájlba történő nyomtatás lehetősége. Valójában bármit, amit kinyomtathat, el lehet küldeni egy PDF -fájlba - nem meglepő, mivel a PDF -fájlnak állítólag nyomtatott dokumentumot kell képviselnie.

Így a HTML a nyomtatási stíluslappal kombinálva kiváló eszköz egy kiváló minőségű dokumentum létrehozásához, amelyet mellékletként és nyomtatva is el lehet küldeni.

Nyomtatási stíluslap segítségével minőségi dokumentumokat hozhat létre, beleértve az önéletrajzát, a recepteket vagy az eseményhirdetéseket. A weboldalak tipikusan csúnyának tűnnek, és nem kívánt részleteket tartalmaznak nyomtatáskor, de néhány stílusmódosítás jelentősen javíthatja a nyomtatási eredményeket. A végeredmények PDF formátumban történő mentése gyors módja annak, hogy vonzó, professzionális dokumentumokat hozzon létre.

Részvény Részvény Csipog Email Weblapok nyomtatása PDF formátumba a Microsoft Edge segítségével

Találkozott már érdekes cikkel, amelyet későbbre akart elmenteni? Nos, PDF formátumban mentheti az Edge segítségével három egyszerű lépésben.

Olvassa tovább Kapcsolódó témák
  • Programozás
  • Nyomtatás
  • CSS
A szerzőről Bobby Jack(58 cikk megjelent)

Bobby technológiai rajongó, aki két évtized nagy részében szoftverfejlesztőként dolgozott. Szenvedélyesen szereti a játékot, a Switch Player Magazin Vélemények szerkesztőjeként dolgozik, és elmerül az online közzététel és webfejlesztés minden területén.

Továbbiak Bobby Jack -től

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide