Verwenden Sie jquery CSS, um den Druckstil_jquery zu steuern

1. Druckstil hinzufügen

1. Bereiten Sie eine CSS-Datei für die Bildschirmanzeige und den Druck vor, wie unten gezeigt:
CSS für die Bildschirmdarstellung:
CSS zum Drucken:

2. Importmethode:

3. Schreiben Sie den Bildschirmanzeigestil und den Druckstil direkt in eine CSS-Datei:
@media print {}{
h1 {
Farbe: schwarz;
}
h2 {}{
Farbe: grau;
}
}
Der Inhalt in @media print gilt nur für den gedruckten Inhalt, der andere Inhalt ist der Bildschirmanzeigestil.

Andere:
Es ist oft nützlich, ein Stylesheet zu erstellen, das keinen Medientyp angibt (oder media="all" verwendet). Wenn Sie bereit sind, etwas Besonderes zu definieren
Wenn es um Druckregeln geht, können Sie einfach ein separates Stylesheet erstellen und alle Stile deaktivieren, die beim Drucken nicht gut aussehen. Ein Problem bei diesem Ansatz besteht darin, dass Sie sicherstellen müssen, dass die Druckerstile tatsächlich das Haupt-Stylesheet überschreiben. Es ist gebrauchsfertig! wichtig.

2. Hinweise zum Druckstil:

1. Es wird nicht empfohlen, Hintergrund in Druckstilen zu verwenden, da der Browser den Hintergrundinhalt standardmäßig nicht ausdrucken kann. Er kann nur verwendet werden, wenn der Browser
ist Der Hintergrund kann nur gedruckt werden, wenn der Hintergrund zum Drucken eingestellt werden kann (optional in den erweiterten Optionen des IE). Selbst wenn der Hintergrund gedruckt wird, überlagert er möglicherweise den darüber liegenden Text.
Dies gilt insbesondere für Texte, die auf einem Monitor mit farbigem Hintergrund stark kontrastieren, beim Ausdruck auf einem Schwarzweißdrucker jedoch mit diesem Hintergrund verschmelzen.
Hintergrund: keiner; Hintergrund entfernen
Bilder und Farben.

Sie können das Attribut „Hintergrundfarbe“ verwenden, um die Hintergrundfarbe wie folgt auf Weiß festzulegen: „font-family: Arial line-height: 26px;“> Sie können den gleichen Effekt auch erzielen, indem Sie die Hintergrundverknüpfung verwenden: Hintergrund: weiß. Daher wie Hintergrund: weiß;
Eine solche Anweisung setzt nicht nur die Hintergrundfarbe auf Weiß, sondern eliminiert auch alle Hintergrundbilder. Verwenden Sie das Shortcut-Attribut dieses Hintergrunds,
Sie erreichen zwei Dinge – einen weißen Hintergrund festlegen und das Bild entfernen – mit sehr wenig Code.

2. Wenn Bilder im gedruckten Inhalt erscheinen sollen, fügen Sie diese bitte in den HTML-Code ein.

3. Die Druckeinstellungen verwenden physikalische Einheiten, daher ist es am besten, keine Pixel (px) für die Größe zu verwenden. Sie können pt oder cm verwenden

4. Unnötige oder sekundäre Inhalte ausblenden. Anzeige: keine;

5. Versuchen Sie, den Inhalt nicht schweben zu lassen. Einige Browser verursachen Probleme beim Drucken von schwebenden Divs, was besondere Aufmerksamkeit erfordert.

Verwenden Sie in gedruckten Stylesheets keine Floating-Blöcke wie diesen: float: none;. Zum Beispiel ein Gecko-basierter Browser
(z. B. Netscape 6) Wenn der Benutzer es zum Durchsuchen einer Ausdruckseite verwendet, wird der Inhalt des schwebenden Elements abgeschnitten.
Der Inhalt wird nicht an den Drucker gesendet und auf der nächsten Seite ist keine Spur mehr davon zu sehen – er verschwindet.

6. Geben Sie Ihr Bestes, um den wichtigen Inhalt im HTML-Code zu priorisieren, was beim Druckstil viel Ärger ersparen kann.

7. Beim Drucken müssen weiße Ränder übrig bleiben und die Einheit ist Zoll (Zoll).

8. Um sicherzustellen, dass der gesamte Text auf der Seite in Schwarz gedruckt wird, verwenden Sie einen Platzhalter-Selektor (siehe Seite 54) und !important, um eine Variable zu erstellen, die jeden

trennt Alle Tags sind mit einem einzigen schwarzen Textstil formatiert:
*{ Farbe: ##000# !important }

9. Link-URL-Informationen beim Drucken anzeigen: Verwenden Sie einen erweiterten Selektor: nach und eine erweiterte CSS-Eigenschaft namens Inhalt,

Drucken Sie Text, der nicht auf dem Bildschirm angezeigt wird, am Ende eines Stilelements.
Leider funktionieren die :after-Selektor- und Inhaltsattribut-Tricks nicht mit Internet Explorer 6 oder früher
(Zum jetzigen Zeitpunkt funktioniert es auch nicht unter IE 7). Aber es funktioniert auf Firefox und Safari, sodass Sie zumindest die Klarheit haben
Beschreiben Sie die URL, damit Besucher ihren Browser verwenden können.

Fügen Sie dazu dem Druck-Stylesheet einen Stil hinzu, der die URL nach jedem Link druckt. Sie können sogar zusätzliche Textelemente hinzufügen

Verwenden Sie Klammern, damit es besser aussieht:
a:after {content: " (" attr(href) ") ";}

Dieses CSS unterscheidet jedoch nicht zwischen externen und internen Links, sodass es auch nutzlose relative
zu anderen Seiten derselben Website ausgibt. Dokumentlink: „Homepage besuchen (../../index.html).“ Mit ein wenig CSS 3-Magie können Sie diesen Stil dazu zwingen, nur
einzugeben Geben Sie absolute URLs (d. h. solche, die mit http:// beginnen) wie folgt aus:
a[href^="http://"]:after {content: " (" attr(href) ") ";}

10. Fügen Sie Seitenumbrüche zum Drucken hinzu: Zwei weithin anerkannte Attribute sind Seitenumbruch vor und Seitenumbruch nachher.
page-break-before weist den Webbrowser an, vor einem angegebenen Stil einen Seitenumbruch einzufügen. Verwenden Sie page-break-before
Die Eigenschaft bewirkt, dass das Bild auf einer neuen Seite gedruckt wird und auf die gesamte Seite passt.
Um ein Element als letztes Element auf der gedruckten Seite erscheinen zu lassen, fügen Sie dem Stil dieses Elements page-break-after: Always hinzu.

Erstellen Sie zwei Klassenstile mit den Namen .break_after und .break_before, etwa so:
.break_before { page-break-before: immer; }
.break_after { page-break-after: Always;

Sie können diese Stile dann selektiv auf Elemente anwenden, die oben oder unten auf der Seite gedruckt werden sollen.

3. Druckstil testen

Normalerweise ist es uns nicht möglich, einen Drucker zum Testen zu verwenden. In der Menüleiste „Datei“ des IE-Browsers gibt es eine „Druckvorschau“, die verwendet werden kann

Druckvorschau zum Testen.