CSS-Druckeinstellungen

Mit der kontinuierlichen Weiterentwicklung und dem Fortschritt der Front-End-Entwicklung ist CSS3 nach und nach zu einem unverzichtbaren Bestandteil der modernen Webentwicklung geworden. CSS3 eignet sich jedoch nicht nur für das Browser-Rendering im Web, sondern kann auch in Nicht-Web-Szenarien wie Drucken und PDF verwendet werden. Deshalb konzentrieren wir uns in diesem Artikel auf die Erläuterung der CSS-Druckeinstellungen, damit diese im Arbeitsalltag besser angewendet werden können.

Bevor wir mit der Diskussion der CSS-Druckeinstellungen beginnen, müssen wir zunächst einen Begriff verstehen – „Medienabfrage“. Medienabfrage ist ein wichtiges Modul in CSS3. Es kann sich je nach den Eigenschaften des Gerätebildschirms oder Ausgabegeräts an verschiedene Stile anpassen, um ein responsives Design zu erreichen. Laienhaft ausgedrückt sagen uns Medienabfragen, welche Art von Inhalten der Browser gerade ausgibt. Und diese Informationen sind auch für unseren Druck sehr wichtig.

Als nächstes werden wir es in drei Abschnitte unterteilen, um die relevanten Kenntnisse der CSS-Druckeinstellungen zu vertiefen.

1. So legen Sie Druckstile fest

In CSS3 können wir @media print verwenden, um einen bestimmten Satz von Druckstilen anzugeben. In dieser Medienabfrage können wir alle CSS-Eigenschaften verwenden, um den gewünschten Stil des Dokuments beim Drucken anzugeben.

Die spezifische Verwendung ist wie folgt:

@media print {
/ Druckstil /
}

Sie können auch den Link-Tag verwenden, um das angegebene Druckstilblatt am Kopf des Dokuments zu laden:

< ;link rel="stylesheet" type="text/css" media="print" href="Print style.css" />

Beachten Sie, dass Sie beim Festlegen des Druckstils für ein Dokument nicht die Anzeige verwenden sollten: kein Attribut darin, da dies dazu führt, dass das Element beim Drucken nicht angezeigt wird. Wir sollten „visibility:hidden“ verwenden, um Elemente auszublenden, damit die Formatierung und Paginierung des Dokuments nicht beeinträchtigt werden.

2. Übersicht über allgemeine Druckeinstellungen

Einige Webinhalte sind beim Drucken nicht für die direkte Ausgabe auf Papier geeignet.

2.1 Seitenumbrüche

Durch die Verwendung von CSS zur Implementierung von Seitenumbrüchen können wir besser steuern, wo Seiten umgebrochen werden. CSS bietet zwei Eigenschaften: Seitenumbruch vor und Seitenumbruch nachher. Die Werte dieser beiden Eigenschaften können automatisch, immer, vermeiden oder erben sein.

2.2 Horizontales Drucken

Manchmal müssen wir breitere Tabellen oder Diagramme horizontal drucken. In diesem Fall müssen wir das Rotationsattribut in CSS3 verwenden. Das Rotationsattribut kann ein Element um einen bestimmten Winkel um einen Mittelpunkt drehen, und negative Werte können verwendet werden, um einen horizontalen Druck zu erreichen.

@media print {
body {

transform:rotate(-90deg);
transform-origin:top left;

}
}

2.3 Seitengröße anpassen

Die Standardseitengröße für HTML und CSS ist A4-Format, bei einigen Druckern sind jedoch möglicherweise kleinere oder größere Seiten erforderlich. In diesem Fall können wir das Seitenattribut in CSS3 verwenden:

@media print {
@page {

size: A5 landscape;

}
}

Hier stellen wir die Seitengröße auf A5-Papier im Querformat ein.

3. Techniken zur Druckoptimierung

Um den Druckeffekt zu verbessern, können Sie einige praktische Techniken anwenden:

3.1 Verwendung von Text

Beim Drucken Einige Texte können anstelle von Symbolen oder anderen grafischen Elementen verwendet werden. Obwohl diese Art von Text nicht so intuitiv ist wie ein Symbol, kann sie das Drucken in Schwarzweiß verbessern.

3.2 Überflüssige Elemente löschen

Normalerweise befinden sich einige unnötige Elemente am Kopf oder Ende des Dokuments, wie z. B. Navigationsmenüs, Fußzeilen usw. Diese Elemente wirken sich beim Drucken wahrscheinlich negativ auf die Ästhetik des Seitenstils aus. Daher sollten wir beim Drucken diese überflüssigen Elemente entfernen.

3.3 Seite vergrößern

Manchmal müssen wir die Seite verkleinern, damit wir mehr Informationen auf einer Seite unterbringen können. Im tatsächlichen Betrieb können wir CSS verwenden, um eine Seitenskalierung zu erreichen.

@media print {
body {

zoom: 0.8;

}
}

Durch Festlegen des Werts des Zoom-Attributs können Sie die Seite zoomen.

Hier listen wir nur einige häufig verwendete CSS-Druckeinstellungen und Optimierungstechniken auf. In der tatsächlichen Entwicklung müssen wir je nach Bedarf auch eine Reihe von Versuchen und Praktiken durchführen. Im Allgemeinen kann die Beherrschung der Methode der CSS-Druckeinstellungen dazu führen, dass wir uns bei der Webentwicklung wohler fühlen und uns besser an die sich ständig ändernden Benutzeranforderungen anpassen können.

Das obige ist der detaillierte Inhalt vonCSS-Druckeinstellungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!