Skip to main content
FreeToolkit .ai

Druck-Stylesheet-Generator Erstellen Sie @media Druck-Stylesheets mit Optionen, um Elemente zu verstecken, Text zu stylen und Seitenumbrüche zu kontrollieren.

Druck-Stylesheet-Generator illustration
🎨

Druck-Stylesheet-Generator

Erstellen Sie @media Druck-Stylesheets mit Optionen, um Elemente zu verstecken, Text zu stylen und Seitenumbrüche zu kontrollieren.

1

Auswahl der zu versteckenden Elemente

Wählen Sie die Elemente (Nav, Footer, Sidebar, Schaltflächen, Anzeigen), die beim Drucken ausgeblendet werden sollen.

2

Konfiguration des Druckstils

Aktivieren Sie schwarzen Text, weißen Hintergrund, URL-Anzeige und Seitenumbuchsteuerung.

3

Kopieren des CSS-Codes

Kopieren Sie das vollständige @media print-Stylesheet für Ihr Projekt.

Loading tool...

What Is Druck-Stylesheet-Generator?

Der Druck-Stylesheet-Generator erstellt optimiertes @media print CSS, um Webseiten druckfreundlich zu machen. Wenn Benutzer Webseiten drucken, sind viele Elemente (Navigation, Werbung, Seitenleisten) unnötig und verschwenden Tinte und Papier. Dieses Tool generiert ein umfassendes Druck-Stylesheet, das nicht essentielle Elemente ausblendet, lesbares schwarzes Text auf weißen Hintergründen erzwingt, optional URLs nach Links anzeigt, Seitenumbrüche um Überschriften und Bilder steuert und den Inhalt auf die volle Breite erweitert. Sie können ein- oder ausschalten, welche Elemente ausgeblendet werden sollen (Navigation, Fußzeile, Seitenleiste, Schaltflächen, Werbung, Bilder), Textstyling konfigurieren (Schriftgröße, Zeilenabstand) und Seitenumrandungen festlegen. Das generierte CSS verwendet die @media print-Abfrage, um sicherzustellen, dass es nur beim Drucken angewendet wird.

Why Use Druck-Stylesheet-Generator?

  • UmSchaltflächen zur Ausblendeung spezifischer nicht essentieller Elemente
  • Erzwingen von schwarzem Text und weißem Hintergrund für bessere Lesbarkeit und Tintennersparnis
  • Intelligente Steuerung der Seitenumbuchung für Überschriften, Bilder und Tabellen
  • Konfigurierbare Schriftgröße, Zeilenhöhe und Seitenumrandungen

Common Use Cases

Blog-Artikel

Erstellen Sie druckfreundliche Versionen von Blog-Beiträgen und Artikeln.

Dokumentation

Stellen Sie sicher, dass technische Dokumentation sauber und vollständig gedruckt wird.

Rechnungen und Berichte

Optimieren Sie Rechnungs- und Berichtsseiten für das Drucken mit geeigneten Umrandungen.

Rezepte und Anleitungen

Machen Sie Rezepte und Anleitungen leicht druckbar, ohne dass sie von unnötigen Elementen überlagert werden.

Technical Guide

Die @media print-Abfrage wendet Styles nur an, wenn die Seite gedruckt wird. Best Practices umfassen: das Ausblenden nicht essentieller Elemente (nav, footer, ads) mit display: none !important; das Erzwingen von color: #000 und background: #fff für Lesbarkeit und Tinteneffizienz; die Verwendung von page-break-after: avoid bei Überschriften, um sie mit ihrem Inhalt zu halten; page-break-inside: avoid bei Bildern und Tabellen, um unangemessene Aufteilungen zu vermeiden; das Anzeigen von Link-URLs mit a[href]::after { content: " (" attr(href) ")"; }; und die Erweiterung des Inhalts auf width: 100% durch Entfernen fester Breitenbeschränkungen. Die @page-Regel steuert die Seitenumrandungen: @page { margin: 2cm; }. Verwenden Sie die !important-Deklaration, um Inline-Stile und Spezifitätsprobleme zu überschreiben. Druck-Stylesheets sollten mit der Browser-Druckvorschau getestet werden. Für responsive Seiten sollte das Druck-Stylesheet alle layoutbezogenen Änderungen aufgrund von Media-Abfragen außer Kraft setzen. In Betracht ziehen Sie die Verwendung von page-break-before: always für Abschnitte, die auf neuen Seiten beginnen sollten.

Tips & Best Practices

  • 1
    Testen Sie immer die Druckstile mit der Browser-Druckvorschau (Strg/Cmd + P)
  • 2
    Verwenden Sie !important bei Druckstilen, um Inline- und spezifische Stile zu überschreiben
  • 3
    Setzen Sie geeignete Seitenumrandungen (1,5-2,5 cm) für komfortables Lesen
  • 4
    Überlegen Sie, ob Sie Bilder ausblenden sollten, um Tinte zu sparen, es sei denn, sie sind essentieller Inhalt

Related Tools

Medienabfrage-Generator - free online tool

Medienabfrage-Generator

Erstellen Sie CSS-Medienabfragen mit Funktionsbedingungen und vorgegebenen Breakpoints.

🎨 CSS & Design
CSS-Variable-Generator - free online tool

CSS-Variable-Generator

Erstellen Sie benutzerdefinierte CSS-Eigenschaften (Variablen) für Farben, Abstände und Typografie.

🎨 CSS & Design
CSS-Reset-Anzeige - free online tool

CSS-Reset-Anzeige

Beliebte CSS-Reset- und Normalize-Stylesheets anzeigen und vergleichen.

🎨 CSS & Design
E-Mail-CSS-Inliner - free online tool

E-Mail-CSS-Inliner

CSS-Styles direkt in HTML-Elemente einfügen, um E-Mail-Vorlagen kompatibel zu machen.

🎨 CSS & Design

Frequently Asked Questions

Q Wie teste ich Druckstile?
Verwenden Sie die Browser-Druckvorschau (Strg+P / Cmd+P) oder die Browser-Entwicklerwerkzeuge, um das Drucken zu emulieren.
Q Sollte ich eine separate CSS-Datei für den Druck verwenden?
Beide Ansätze funktionieren. Ein @media print-Block in Ihrem Haupt-CSS oder eine separate Datei mit media="print" im Link-Tag.
Q Warum sollte ich !important bei Druckstilen verwenden?
Druckstile müssen oft Inline-Stile und hochspezifische Selektoren überschreiben, um ein ordnungsgemäßes Rendern zu gewährleisten.
Q Wie kann ich Seitenumbuchungen steuern?
Verwenden Sie die Eigenschaften page-break-before, page-break-after und page-break-inside auf Elementen, um zu steuern, wie der Inhalt über Seiten umbrochen wird.
Q Kann ich unterschiedliche Umrandungen für verschiedene Seiten setzen?
Verwenden Sie @page :first für die erste Seite und @page :left/@page :right für abwechselnde Seitenumrandungen.

About This Tool

Druck-Stylesheet-Generator is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.