suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie deaktiviere ich Browser-Druckoptionen (Kopfzeile, Fußzeile, Ränder) auf einer Seite mithilfe von CSS?

Wie deaktiviere ich Browser-Druckoptionen (Kopfzeile, Fußzeile, Ränder) auf einer Seite mithilfe von CSS?

WBOY
WBOYnach vorne
2023-08-30 14:01:021090Durchsuche

如何使用 CSS 从页面禁用浏览器打印选项（页眉、页脚、边距）？

Wir können die Kopf- und Fußzeile sowie die Ränder der Druckvorschauseite über CSS steuern und sogar das gewünschte Layout und die Richtung des Seitenmediums erreichen. Wir werden die @page-Direktive verwenden, um unsere Ergebnisse zu erzielen.

Bei der Vorschau der gedruckten Seite im Browser können wir einige zusätzliche Seiteninformationen sehen, wie z. B. Seitentitel, Datum und Uhrzeit der Seitenvorschau sowie Seitennummer in der Vorschau, die in der Kopf- und Fußzeile der Seite angezeigt werden. Wir können auch einige zusätzliche Ränder sehen, die auf die Seitenvorschaumedien angewendet wurden.

Grammatik

@media print {
   @page {
      /* Desired CSS */
   }
}
Die chinesische Übersetzung von

Erklärung

lautet:

Erklärung

Bei diesem Ansatz verwenden wir die @page at-Regel (oder -Anweisung) innerhalb der @media-Druckregel, die von CSS bereitgestellt wird und es uns ermöglicht, Formatierungen auf paginierte Medien anzuwenden, einschließlich auf dem Bildschirm sichtbarer Seiten, Papiere usw .

Mit der @page-Direktive können wir Layout, Design, Ränder, Ausrichtung der gedruckten Seite und sogar das Design einer bestimmten Seite steuern. Diese Direktive wird häufig zum Entwerfen diskreter (ausgelagerter) Medien verwendet.

Paginierte Medien unterscheiden sich von üblichen fortlaufenden Medien (wie Websites), da bei paginierten Medien der Inhalt, wenn er überläuft, in separate Seiten aufgeteilt wird. Wir können das Layout der Seite weiterhin über die Pseudoklasse der @page-Direktive steuern.

Die chinesische Übersetzung von

Beispiel 1

lautet:

Beispiel 1

In diesem Beispiel entfernen wir die sichtbare Kopf- und Fußzeile sowie zusätzliche Ränder in paginierten Medien, indem wir die Ränder in der @paged-Direktive auf „0“ setzen. 

<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
   @page {
   margin: 0;
   }
</style>
<body>
   <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
      magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
      aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
      reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque
      repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
      rerum consequatur tempore dignissimos nostrum officiis nam minima omnis
   </p>
</body>
</html>

Drücken Sie Befehl + P (in Mac) oder Strg + P (in Windows, Linux), um den Druckvorschaubildschirm anzuzeigen

Beispiel 2

In diesem Beispiel entfernen wir die Browser-Druckoption aus den paginierten Medien, fügen aber Ränder zum Körperelement im paginierten Medienbildschirm hinzu. 

<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
   @media print {
      @page {
         margin: 0;
      }
      body {
         margin: 2rem;
      }
   }
</style>
<body>
   <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
      magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
      aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
      reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque
      repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
      rerum consequatur tempore dignissimos nostrum officiis nam minima omnis
   </p>
</body>
</html>

Drücken Sie Befehl + P (in Mac) oder Strg + P (in Windows, Linux), um den Druckvorschaubildschirm anzuzeigen

Fazit

In diesem Artikel haben wir etwas über die CSS-Direktive @paged erfahren und erfahren, wie Sie damit Browser-Druckoptionen nur mithilfe von CSS aus der Druckvorschau entfernen/deaktivieren können.

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich Browser-Druckoptionen (Kopfzeile, Fußzeile, Ränder) auf einer Seite mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：CSSue-before-EigenschaftNächster Artikel：CSSue-before-Eigenschaft

In Verbindung stehende Artikel

Mehr sehen