CSS print 套打是一種使用 CSS 進行print 樣式設計的技術，可以將網頁、圖片、表格等元素進行print 套打，實現在打印機或顯示器上正常顯示和打印的效果。
使用 CSS print 套打，可以輕松實現以下效果：
1. 將網頁中的重要信息、圖片等元素進行打印，讓信息更容易查找和保留。
2. 實現海報、宣傳單等平面效果的打印，讓設計作品更加美觀、震撼。
3. 將表格、數據等元素進行打印，方便用戶查看和管理數據。
4. 將整個網站或頁面進行打印，讓用戶體驗更加完整和一致。
下面是一個使用 CSS print 套打實現的簡單網頁示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>Printable Webpage</title>
<style>
body {
background-color: #F0F0F0;
font-family: Arial, sans-serif;
.print-container {
max-width: 360px;
margin: 0 auto;
padding: 10px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
display: flex;
justify-content: center;
align-items: center;
.print-container > div {
margin-bottom: 20px;
font-size: 24px;
color: #333;
.print-container > div:nth-child(1) {
background-color: #7CAF50;
color: #fff;
.print-container > div:nth-child(2) {
background-color: #B0CAF5;
color: #fff;
.print-container > div:nth-child(3) {
background-color: #9EBF50;
color: #fff;
.print-container > div:nth-child(4) {
background-color: #87CB50;
color: #fff;
.print-container > div:nth-child(5) {
background-color: #69CB50;
color: #fff;
.print-container > div:nth-child(6) {
background-color: #5CAF50;
color: #fff;
.print-container > div:nth-child(7) {
background-color: #4398DB;
color: #fff;
.print-container > div:nth-child(8) {
background-color: #3398DB;
color: #fff;
.print-container > div:nth-child(9) {
background-color: #2398DB;
color: #fff;
.print-container > div:nth-child(10) {
background-color: #1E967A;
color: #fff;
.print-container > div:nth-child(11) {
background-color: #1C967A;
color: #fff;
.print-container > div:nth-child(12) {
background-color: #13967A;
color: #fff;
.print-container > div:nth-child(13) {
background-color: #0D967A;
color: #fff;
.print-container > div:nth-child(14) {
background-color: #00967A;
color: #fff;
.print-container > div:nth-child(15) {
background-color: #00967A;
color: #fff;
.print-container > div:nth-child(16) {
background-color: #3C91C6;
color: #fff;
.print-container > div:nth-child(17) {
background-color: #2E91C6;
color: #fff;
.print-container > div:nth-child(18) {
background-color: #2191C6;
color: #fff;
.print-container > div:nth-child(19) {
background-color: #1E91C6;
color: #fff;
.print-container > div:nth-child(20) {
background-color: #1D91C6;
color: #fff;
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a paragraph.</p>
<div class="print-container">
<h2>This is a header</h2>
<p>This is a paragraph.</p>
<div class="print-container">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div class="print-container">
<h4>This is a header</h4>
<p>This is a paragraph.</p>
</div>
<div class="print-container">
<h5>This is a header</h5>
<p>This is a paragraph.</p>
<div class="print-container">
<h6>This is a header</h6>
<p>This is a paragraph.</p>
</div>
</div>
</body>
</html>