Beispiel:Print-CSS.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel für Print-CSS</title>
<style>
:root {
color-scheme: light dark;
--blue-darker: hsl(201 50% 15%);
--blue: hsl(201 50% 40%);
--yellow: hsl(44 75% 50%);
--yellow1: hsl(44 75% 70%);
--yellow3: hsl(43 76% 90%);
--bgcolor: white;
--text-color: var(--blue-darker);
--link-color: var(--blue);
}
@page {
margin: 0 1cm;
}
@page :first {
margin-top: 4cm;
}
@page :left {
margin-right: 2.5cm;
}
@page :right {
margin-left: 2.5cm;
}
@media print {
body {
padding-top: 3cm;
padding-bottom: 2cm;
}
h2 {
break-before: page;
margin-top: 1cm;
margin-left: 3cm;
}
h1,
h2,
h3,
h4,
h5 {
break-after: avoid;
}
}
body {
max-width: 55em;
margin: 2em auto;
border: thin dashed;
}
img {
float: left;
margin-right: 1em;
}
aside {
border: thin solid var(--yellow);
background-image: linear-gradient(to bottom, var(--yellow3), var(--yellow1));
border-radius: .5rem;
float: right;
width: 13em;
margin-left: 1em;
padding: 0.5em;
}
.achtung {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
</style>
</head>
<body>
<h1>Beispiel für Print-CSS</h1>
<aside class="toc">
<h4>Inhaltsverzeichnis</h4>
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
</ul>
</aside>
<p><img src="https://wiki.selfhtml.org/images/3/3b/Printer-Icon.svg" alt="Printer-Icon" width="150">Webseiten können nicht nur am Bildschirm angezeigt, sondern in jedem Browser auch ausgedruckt werden.</p>
<p>Dieser Kurs zeigt, wie man Webseiten mit Hilfe von Print-Stylesheets für die Druckausgabe optimiert. Die zum Teil stark voneinander abweichenden Default-Stylesheets der Browser werden so an Benutzerwünsche angepasst. Basis ist das <a href="https://www.w3.org/TR/css-page-3">CSS Paged Media Module</a>.</p>
<aside class="achtung">
<h4>Achtung</h4>
<p> Hintergrundbilder und Verläufe werden nur gedruckt, wenn Sie dies im CSS angeben.</p>
</aside>
<p><a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/print-color-adjust"><code>print-color-adjust: exact</code></a></p>
<h2>Seite 2</h2>
<p>Blablubb</p>
<h2>Seite 3</h2>
<p>Blablubb</p>
<h2>Seite 4</h2>
<p>Blablubb</p>
</body>
</html>
