Wie kann ich mit CSS steuern, welche Elemente beim Drucken einer Webseite angezeigt werden?

Anzeige ausgewählter Inhalte beim Drucken mit CSS

Viele Webseiten enthalten umfangreiche Daten, Layouts und Inhalte. Um den Druck zu optimieren, möchten Sie möglicherweise nur bestimmte Elemente anzeigen. Während das Erstellen einer separaten Seite zum Drucken eine Lösung sein kann, bietet CSS mit der Funktion „@media print“ eine leistungsstarke Alternative.

Browserunterstützung für „@media print“

Die Funktion „@media print“ wird von modernen Browsern weitgehend unterstützt. Damit können Sie CSS-Regeln gezielt beim Drucken der Seite anwenden. Zu den Browsern, die „@media print“ unterstützen, gehören:

• Chrome
• Firefox
• Safari
• Edge

Zielelemente zum Drucken

Um alle Elemente außer denen, die Sie drucken möchten, auszublenden, können Sie die Eigenschaft „display:none“ verwenden. Fügen Sie dann den Elementen, die Sie beim Drucken anzeigen möchten, eine „printable“-Klasse hinzu und wenden Sie „display:block“ auf diese Elemente innerhalb des „@media print“-Blocks an.

CSS:

@media print {
    * {
        display: none;
    }
    .printable,
    .printable > * {
        display: block;
    }
}

Wenn Sie jedoch Elemente nur beim Drucken anzeigen und im Browser ausblenden möchten, sollten Sie einen umgekehrten Ansatz in Betracht ziehen:

CSS:

@media print {
    body *:not(.printable *) {
        display: none;
    }
}

Diese Technik würde beim Drucken alles außer Elementen mit der Klasse „printable“ verbergen.

Zusätzliche Überlegungen

• Um zu vermeiden, dass verlinkte Inhalte angezeigt werden, wenn Fügen Sie zum Drucken die Klasse „noPrint“ zu den entsprechenden Elementen oder Links hinzu.
• Um Logos, Briefköpfe oder andere Elemente anzuzeigen, die nur beim Drucken angezeigt werden sollen, erstellen Sie Abschnitte mit der Klasse „onlyPrint“.

CSS:

@media print {
    .noPrint {
        display: none;
    }
}
@media screen {
    .onlyPrint {
        display: none;
    }
}

HTML:

<div class="noPrint">

Durch Befolgen dieser Methoden können Sie die Sichtbarkeit einfach steuern von bestimmten Elementen beim Drucken von Webseiten, wodurch Unordnung vermieden und die Druckeffizienz optimiert wird.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS steuern, welche Elemente beim Drucken einer Webseite angezeigt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!