Newsletter

  • Immer informiert über die neusten Trends, Webseiten und Tutorials! Einfach hier für den monatlichen Newsletter anmelden.
  •  Eintragen
  •  Austragen

Login

Umfrage

  • Haben Sie Interesse an Softwaretipps für Webmaster?
  •  
  • ja
  • nein
  •  


Linktipps

Anzeige

 

www.finanzcheck.de
» Startseite » HTML, CSS und JavaScript Tutorials

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:

  1.  <html>
  2.  <head>
  3.  <style type="text/css">
  4.  @media print {
  5.   p{
  6.    font-family: Arial, Helvetica, sans-serif;
  7.    font-size: 11px;
  8.    font-weight: bold;
  9.   }
  10.  }
  11.  @media screen {
  12.   p{
  13.    font-family: Arial, Helvetica, sans-serif;
  14.    font-size: 11px;
  15.    font-weight: bold;
  16.   }
  17.   p.print {
  18.    display: none;
  19.   }
  20.  </style>
  21.  </head>
  22.  <body>
  23.  <p>
  24.  Drucken Sie diese Seite aus (Rechtsklick >
  25.  Drucken) und vergleichen Sie die Unterschiede.
  26.  </p>
  27.  <p class="print">
  28.  Dieser Text wird nur beim Drucken ausgegeben.
  29.  </p>
  30.  </body>
  31.  </html>


Ein Beispiel dazu.

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

  1.  <html>
  2.  <head>
  3.  <style type="text/css">
  4.  @media print {
  5.   p{
  6.    font-family: Arial, Helvetica, sans-serif;
  7.    font-size: 11px;
  8.    font-weight: bold;
  9.   }
  10.   p.screen {
  11.    display: none;
  12.   }
  13.  }
  14.  @media screen {
  15.   p{
  16.    font-family: Arial, Helvetica, sans-serif;
  17.    font-size: 11px;
  18.    font-weight: bold;
  19.   }
  20.  }
  21.  </style>
  22.  </head>
  23.  <body>
  24.  <p>
  25.  Drucken Sie diese Seite aus (Rechtsklick >
  26.  Drucken) und vergleichen Sie die Unterschiede.
  27.  </p>
  28.  <p class="screen">
  29.  Dieser Text wird beim Drucken <b>nicht</b> ausgegeben.
  30.  </p>
  31.  </body>
  32.  </html>


Auch hier zu ein Beispiel.

Fragen? Probleme? Keine Antworten? Hilfe finden Sie im Webmaster Forum!

Diese Artikel könnten Sie auch interessieren:
XHTML - HTML allgemein
XHTML - Textauszeichnungen
monatlich wechselnder Link mit JavaScript
XHTML - Grafiken
Übersichlichere Formulare


 
Anzeige