Heim > Artikel > Web-Frontend > Wie erstelle ich eine druckbare Webseite mithilfe von CSS-Medienabfragen?

Wie erstelle ich eine druckbare Webseite mithilfe von CSS-Medienabfragen?

WBOYnach vorne: 2023-09-10 08:21:02995Durchsuche

如何使用 CSS 媒体查询创建可打印的网页？

Wir können eine druckbare Webseite erstellen und die CSS-Medienabfrage-Druckeigenschaft @media print verwenden, um den Stil in der Seitendruckvorschau zu steuern. @media print ist eine CSS-Medienabfrage, die es uns ermöglicht, Seitenstile zur Druckvorschauseite jeder Webseite hinzuzufügen. Mit dieser Funktion können wir druckbare Webseiten erstellen, indem wir die „Sichtbarkeit“ von HTML-Elementen bei einer Medienabfrage als „sichtbar“ oder „ausgeblendet“ angeben. Wir können auch dem Druckvorschaubildschirm hinzufügen, was wir wollen. Jede @media-Druckabfrage im anderen Stil .

Grammatik

@media print {
   /* CSS Styles here */
}

Hier ist @media print die CSS-Medienabfrage, die wir verwenden werden, um Stile zur Druckvorschauseite hinzuzufügen.

Beispiel 1

In diesem Beispiel zeigen wir den Inhalt des „p“-Tags in der Druckvorschau der Webseite an, indem wir in der @media print-CSS-Abfrage die „Sichtbarkeit“ auf „sichtbar“ setzen.

<html lang="en">
<head>
   <title>How to create printable webpage using CSS media queries?</title>
   <style>
      @media print {
         p {
            visibility: visible;
         }
      }
   </style>
</head>
<body>
   <h3>How to create printable webpage using CSS media queries?</h3>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil et rem quasi, iusto expedita modi saepe libero voluptatum. Alias explicabo cum et vel pariatur numquam facere fugiat consequatur necessitatibus laudantium!</p>
</body>
</html>

Beispiel 2

In diesem Beispiel blenden wir den Inhalt des „p“-Tags in der Druckvorschau der Webseite aus, indem wir in der CSS-Abfrage @media print die „Sichtbarkeit“ auf „Ausblenden“ setzen.

<html lang="en">
<head>
   <title>How to create printable webpage using CSS media queries?</title>
   <style>
      @media print {
         p {
            visibility: hidden;
         }
      }
   </style>
</head>
<body>
   <h3>How to create printable webpage using CSS media queries?</h3>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil et rem quasi, iusto expedita modi saepe libero voluptatum. Alias explicabo cum et vel pariatur numquam facere fugiat consequatur necessitatibus laudantium!</p>
</body>
</html>

Fazit

In diesem Artikel haben wir die CSS-Medienabfrage @media print kennengelernt und sie anhand zweier verschiedener Beispiele verwendet, um eine druckbare Webseite zu erstellen. Im ersten Beispiel zeigen wir den Inhalt des „p“-Tags auf der Druckvorschauseite an und im zweiten Beispiel blenden wir den Inhalt des „p“-Tags auf der Druckvorschauseite aus.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine druckbare Webseite mithilfe von CSS-Medienabfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html print

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie ändere ich die Linkfarbe in CSS?Nächster Artikel：Wie ändere ich die Linkfarbe in CSS?

In Verbindung stehende Artikel

Mehr sehen