Druck mit CSS Grundlagen

Spezielle CSS-Anweisungen für die Medien 'screen' und 'print' (Bildschirm und Drucker) basieren grundsätzlich auf die Möglichkeit Seitenelemente für bestimmte Medien auszublenden oder anzuzeigen. Zusätzlich kann man für beide Medien noch unterschiedliche Formatierungen zuweisen.

Eine einzige HTML-Seite mit unterschiedlichen Ausgabe-Resultaten für den Bildschirm und beim Ausdruck. Mit CSS ist das möglich. Es existiert also nur noch 1 HTML-Datei, die durch CSS-Anweisungen auf dem Bildschirm anders erscheint als beim Ausdruck. Möglich ist das durch spezielle Format-Definitionen für unterschiedliche Ausgabemedien: für den Bildschirm: @media screen für mobile Geräte: @media handheld für den Drucker: @media print Ich beschänke mich erst einmal auf die beiden Medien Bildschirm und Drucker bzw. kombiniere die beiden Ausgabemedien 'screen' und 'handheld'. Übrigens wird auch diese Seite in der Druckversion anders dargestellt als sie in der Bildschirmversion angezeigt wird.

<div class="navigation">
Hier steht der HTML-Code für das Menü
</div>

<!-- Titellogo für den Bildschirm -->
<div class="bildschirm">
<img src="kopf01.jpg" width="800" height="85" border="0" alt="">
</div>

<!-- Titellogo  für den Drucker -->
<div class="drucker">
<img src="kopf02.jpg" width="800" height="85" border="0" alt="">
</div>

• einen separaten Block für @media screen, handheld
• einen separaten Block für @media print

<style type="text/css">
<!--

@media print {

hier stehen die Anweisungen für Druckerformatierungen

}

@media screen, handheld {

hier stehen die Anweisungen für Bildschirmformatierungen 

}

-->
</style>

<style type="text/css">
<!--

@media print {

.bildschirm {
display:none;
padding:0px;
margin:0px;
}

.drucker {
padding:0px;
margin:0px;
}

/* Überschriften Drucker 14 Pixel schwarz */
.h1 {
font-size:14px;
color:#000000;
}

/* Tabellenbreite Drucker = 600 Pixel */
table {
width:600px;
}

}

@media screen, handheld {

.bildschirm {
padding:0px;
margin:0px;
}

.drucker {
display:none;
padding:0px;
margin:0px;
}

/* Überschriften Bildschirm 18 Pixel blau */
.h1 {
font-size:18px;
color:#0090E0;
}

/* Tabellenbreite Bildschirm = Inhaltsbreite */
table {
width:100%;
}

}

-->
</style>

Die theoretischen Grundlagen zum Thema 'drucken mit CSS' habe ich auf dieser Seite in meiner Sprache erklärt. Wie immer habe ich einige Bereiche ausgelassen, von denen ich glaube, dass sie im Augenblick für das Verstehen eher irritierend wären.

Ich habe Ihnen unterschlagen, dass es unterschiedliche Methoden gibt, CSS-Anweisungen für Bildschim und Druck einzubinden. Das erfahren Sie auf einer separaten Seite.

Demo des Beispiels ansehen

Quelltext der HTML-Datei

CSS-Formatierungen ansehen