Heim >Web-Frontend >CSS-Tutorial >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:021020Durchsuche
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!