Druck-CSS festlegen

SET PRINT CSS

Mit dem Aufkommen des Internetzeitalters wurden Papierdokumente nach und nach durch elektronische Dokumente ersetzt, aber in bestimmten Situationen, wie Schulprüfungen, Genehmigung offizieller Dokumente usw. Papierdokumente spielen immer noch eine wichtige Rolle. In diesem Fall müssen wir darüber nachdenken, wie Webinhalte elegant auf Papierdokumenten dargestellt werden können, und dieser Prozess muss bestimmten Regeln folgen, nämlich dem Drucken von CSS-Stylesheets.

Das sogenannte CSS-Stylesheet ist eine Reihe von Regeln, mit denen das Aussehen, die Position und das Verhalten von HTML-Elementen in verschiedenen Zuständen definiert werden, einschließlich Bildschirm-Stylesheets und Druck-Stylesheets. Ein Druck-Stylesheet ist ein Stylesheet, das speziell für den Druck entwickelt wurde. Es ermöglicht uns, die Größe, Position und Anordnung von Elementen auf der gedruckten Seite besser zu steuern, sodass Papierdokumente besser dargestellt werden können.

Wie sollte also das Druck-CSS-Stylesheet eingerichtet werden? Im Folgenden werde ich es aus den folgenden drei Aspekten vorstellen:

1. Grundeinstellungen

Beim Einrichten von Druck-CSS müssen wir die folgenden Punkte berücksichtigen:

# 🎜 🎜#

Druck-Stylesheets sollten in HTML-Dateien definiert werden.
1. Druck-Stylesheets sollten nach Bildschirm-Stylesheets definiert werden.
2. Druck-Stylesheets sollten mit @media print definiert werden.

Die Grundvorlage lautet wie folgt:

@media print {

/

Definieren Sie hier den Druckstil# 🎜🎜# /}

Wenn es mehrere Druckstilanforderungen gibt, können Sie diese mithilfe von @page-Regeln definieren. Wenn Sie beispielsweise die Kopfzeile der Seite auf den Firmennamen festlegen müssen, können Sie den folgenden Code verwenden:

@page {

@top {#🎜🎜 #

content: "Firmenname";

}

}

2. Layout der Seitenelemente

#🎜 🎜#Für Papierdokumente Mit anderen Worten: Das Layout der Seitenelemente ist sehr wichtig. Wir müssen die Lesbarkeit und Ästhetik von Papierdokumenten sicherstellen. Bei CSS-Stylesheets zum Drucken sind folgende Punkte zu beachten:

Gemischtes Chinesisch und Englisch müssen verarbeitet werden.

in Chinesisch und Englisch Bei gemischtem Layout müssen wir auf die unterschiedlichen Größen chinesischer und englischer Schriftarten achten. Normalerweise kann die Einstellung der englischen Schriftart auf die Hälfte der chinesischen Schriftart die Seite sauberer machen.
1. body {

Schriftfamilie: Arial, Helvetica, Sans-Serif;

}

body.zh {

Schriftfamilie: „宋体“, Arial, Helvetica, serifenlos;

}

body.zh p {#🎜🎜 #

line-height: 1.6em;

}

body.en {

font-size: 12px;#🎜🎜 #

}

body.en p {

line-height: 1.2em;

}

#🎜🎜 #

Die Seitenbreite sollte die Größe des Papiers berücksichtigen

Zum Drucken müssen wir die Seitenbreite an das Papier anpassen, normalerweise A4-Papier mit einer Breite von 210 mm Stellen Sie daher die Seite ein. Eine Breite von etwa 200 mm ist die beste Wahl.

Versuchen Sie, Textabschneidungen zu vermeiden.

Wenn beim Drucken eine Textzeile zu lang ist, wird dies vermieden Situation: Wir können das Wortumbruch-Attribut verwenden, um Text automatisch umzubrechen.

p {

3. word-break: break-all;

}

3. Elemente ausblenden und anzeigen # 🎜🎜#

Auf Webseiten verwenden wir normalerweise das Anzeigeattribut, um den Anzeigemodus von Elementen festzulegen. Zum Drucken erfordert die Anzeige bestimmter Elemente jedoch eine spezielle Verarbeitung. Die folgenden Elemente müssen ausgeblendet oder angezeigt werden:

Seitenavigationsleiste und Copyright-Erklärung unten auf der Seite ausblenden

@ Mediendruck {#🎜 🎜#

.navbar,

.navbar-default,

1. .navbar-right,

.footer {

display: none; 🎜🎜#Wir verwenden normalerweise Symbole, um Links auf Webseiten darzustellen, aber beim Drucken sind diese Symbole nicht bequem anzuzeigen, daher können Sie a::after zum Ersetzen von Text verwenden .

a[href]:after {

content: "(" attr(href) ")";

}

# 🎜🎜#

Untertitel anzeigen

Beim Drucken wird der Untertitel des Artikels in der Regel unterhalb des Haupttitels angezeigt.

h2 {

display: block;
2. position: static;

page-break-after: immer;

}

Zusammenfassend lässt sich sagen, dass die Einstellung zum Drucken von CSS-Stylesheets nicht nur zur Schönheit und Lesbarkeit von Papierdokumenten beiträgt, sondern auch ein modischer Ausdruck ist. Für Frontend-Entwickler sind Kenntnisse im Einrichten von CSS-Stylesheets für den Druck eine unbedingt erforderliche Fähigkeit. Ich hoffe, dieser Artikel hat Sie inspiriert.

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