CSS: @media print

Mit @media print {} kann man die Eigenschaften beim ausdrucken verändern, dies kann z.B. sehr praktisch sein, wenn sie etwas mitausdrucken wollen was auf der Webseite nicht sichtbar bzw. versteckt ist.

Syntax:

<html>
<head>
<style type=„text/css„>
@media print {
p{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
}
@media screen {
p{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
p.print {
display: none;
}
</style>
</head>
<body>
<p>
Drucken Sie diese Seite aus (Rechtsklick >
Drucken) und vergleichen Sie die Unterschiede.
</p>
<p class=„print„>
Dieser Text wird nur beim Drucken ausgegeben.
</p>
</body>
</html>

Oder wenn sie auf der Webseite etwas anzeigen wollen was aber nicht mit ausgedruckt werden soll:

<html>
<head>
<style type=„text/css„>
@media print {
p{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
p.screen {
display: none;
}
}
@media screen {
p{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
}
</style>
</head>
<body>
<p>
Drucken Sie diese Seite aus (Rechtsklick >
Drucken) und vergleichen Sie die Unterschiede.
</p>
<p class=„screen„>
Dieser Text wird beim Drucken <b>nicht</b> ausgegeben.
</p>
</body>
</html>