Beispiel:Print-CSS.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<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: 2px;
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></li>
<li>
<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>
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>.
<aside class="achtung">
<h4>Achtung</h4>
<p>Hintergrundbilder und Verläufe werden nur gedruckt, wenn Sie dies im CSS angeben.
</aside>
<p> <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/print-color-adjust"><code>print-color-adjust: exact</code></a>
<h2>Seite 2</h2>
<p>Blablubb
<h2>Seite 3</h2>
<p>Blablubb
<h2>Seite 4</h2>
<p>Blablubb
</body>
</html>
