A webszerkesztés alapjai

Nyomtatás

Ha weblapunkra nem adunk meg a nyomtatásra vonatkozó utasításokat, az oldalunk minden egyes része nyomtatásba kerül. A nyomtatási tulajdonságok beállításával lehetőségünk van arra, hogy a nyomtatás során csak az általunk kiválasztott elemek legyenek kinyomtatva.
(Az oldalunk nyomtatási képét (elölnézetét) a böngésző Fájl menüjében ellenőrizni tudjuk.)

Nyomtatási stíluslap meghatározása

A megoldás egy nyomtatási stíluslap készítése, melyen egyrészt meg tudjuk határozni, hogy mely elemeket szeretnénk a nyomtatásból kizárni, másrészt, a nyomtatásba kerülő elemek tulajdonságait tudjuk beállítani.

Első lépésként a CSS lapunkat mentsük el főmappánkban egy másik néven. (itt: nyomtatas.css)
Ezután a már meglévő CSS utasításunk után:
<link rel="stylesheet" href="#.css" type="text/css">,
kapcsoljuk hozzá a dokumentumunkhoz a nyomtatásra vonatkozó CSS lapot:
<link rel="stylesheet" href="nyomtatas.css" type="text/css" media="print">
Ha a <media="print"> utasítás "media" jellemzőjének "print" értéket adunk, akkor a stíluslapot csak a nyomtatók fogják figyelembe venni, azaz a dokumentumunk elemei csak nyomtatási nézetben veszik fel a stíluslapon lévő formázásokat.
Ha nem így teszünk, akkor a nyomtatási formázást normál nézetben is átveheti a lapunk, ha közelebb van a dokumentum törzséhez, mint a "normál" CSS lap.

A <display:none> utasítás

<display:none>: Az utasítást az elemek elrejtésére kell használni.
Egyes kijelölőket és teljes DIV szakaszokat is láthatatlanná tudunk vele tenni. Az alábbi utasítás a "menu" nevű DIV szakaszt rejti el a nyomtató elől.

 #menu{
 display: none;}

A nyomtatási stíluslap formázása

A megmaradt elemeket tovább formázhatjuk.

• Betűcsalád:
  A jobb olvashatóság miatt talpas betűtípust adjunk meg.
  body{Georgia, "Times New Roman", Times, serif}
• Szövegbehúzás
  Bekezdéseink első sorának a p{text-ident:#} utasítással tudunk behúzást adni.
• Színek és háttér
  Induljunk ki abból, hogy a felhasználók jelentős része nem használ színes nyomtatót és nem nyomtat hátteret. Próbáljuk a tartami részt ezt figyelembe véve nyomtatásra optimalizálni.
• Betűméret
  A nyomtatók a pontot (pt) és a hüvelyket (in) ismerik. Az elfogadható betűméret a 12pt, a címsoroknak adhatunk nagyobb méretet is.
  p{font-size:12pt;}
• Margók beálllítása
  Itt használhatjuk a hüvelyket (in).
  body{margin:0.5in} (12,7mm)

Oldaltörések

Oldaltörést helyezhetünk el, vagy tilthatunk le egy blokk előtt, után, illetve közben, a :
{page-break-before: }
{page-break-after:  }
{page-break-inside: }
utasítással.
A böngészők által elég jól támogatott értékei:

• always - mindig sort tör
• avoid - elkerüli a sortörést
• auto - nem tiltja és nem írja elő a sortörést

Az utasítást elhelyezhetjük a nyomtatási CSS lapon, de a normál HTML oldalunkon is, közvetlenül a blokkhoz rendelve.

A böngészők eltérő értelmezése, valamint a nyomtatási értékek felhasználókénti beállítása miatt nehéz böngészőfüggetlen nyomtatási képet alkotni.