CSS3 打印样式

章节简介

打印样式是网页设计中的重要组成部分，确保网页内容在打印时能够以清晰、美观的格式呈现。虽然现代网页主要面向屏幕显示，但良好的打印样式仍然是专业网站的标志之一。CSS3提供了丰富的工具和属性来创建专门的打印样式，包括媒体查询、页面设置、内容优化等。本章节将介绍如何使用CSS3创建有效的打印样式，确保网页内容在打印时能够保持良好的可读性和专业外观。

核心知识点

1. 打印媒体查询

媒体查询是创建打印样式的基础，通过@media print规则可以针对打印设备应用特定的样式。

基本语法：

/* 打印样式 */
@media print {
  /* 打印特定样式 */
}

/* 组合媒体查询 */
@media print and (min-width: 8.5in) {
  /* 针对特定纸张尺寸的打印样式 */
}

常用打印媒体特性：

width - 纸张宽度
height - 纸张高度
orientation - 页面方向（portrait或landscape）
resolution - 打印分辨率

2. 页面设置

CSS3提供了@page规则来控制打印页面的基本设置，如边距、大小和方向。

基本语法：

/* 基本页面设置 */
@page {
  margin: 1in;
}

/* 针对第一页的设置 */
@page :first {
  margin-top: 2in;
}

/* 针对左侧页面的设置 */
@page :left {
  margin-right: 1.5in;
}

/* 针对右侧页面的设置 */
@page :right {
  margin-left: 1.5in;
}

常用页面属性：

size - 页面大小（如A4、letter）和方向
margin - 页面边距
marks - 裁剪标记和注册标记
bleed - bleed区域大小

3. 内容优化

为了确保打印内容的可读性，需要对屏幕上的内容进行优化，包括隐藏不必要的元素、调整字体大小和行高、优化图像等。

常见内容优化技术：

@media print {
  /* 隐藏不必要的元素 */
  nav,
  footer,
  .social-links,
  .advertisement {
    display: none;
  }
  
  /* 调整字体样式 */
  body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  
  /* 调整链接样式 */
  a {
    color: #000;
    text-decoration: underline;
  }
  
  /* 显示链接的URL */
  a:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
  
  /* 优化图像 */
  img {
    max-width: 100% !important;
    height: auto;
    page-break-inside: avoid;
  }
  
  /* 避免元素被分页截断 */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  p {
    page-break-inside: avoid;
  }
}

4. 打印特定样式

打印样式中需要考虑一些屏幕上不存在的概念，如分页、页码、页眉页脚等。

分页控制：

@media print {
  /* 强制分页 */
  .page-break {
    page-break-before: always;
  }
  
  /* 避免分页 */
  .no-break {
    page-break-inside: avoid;
  }
  
  /* 在元素后避免分页 */
  .no-break-after {
    page-break-after: avoid;
  }
  
  /* 在元素前避免分页 */
  .no-break-before {
    page-break-before: avoid;
  }
}

页码和页眉页脚：

@media print {
  /* 页码样式 */
  @page {
    @bottom-center {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 10pt;
      color: #666;
    }
  }
  
  /* 页眉样式 */
  @page {
    @top-center {
      content: "My Website";
      font-size: 10pt;
      color: #666;
      border-bottom: 1px solid #ccc;
      padding-bottom: 0.25in;
    }
  }
}

5. 打印预览优化

打印预览是用户在打印前查看效果的重要环节，优化打印预览可以提高用户体验。

打印预览优化技巧：

确保打印样式在打印预览中正确显示
提供打印预览按钮，方便用户在打印前查看效果
确保打印样式与屏幕样式有合理的区别，同时保持品牌一致性
测试不同浏览器的打印预览效果，确保兼容性

实用案例

案例1：基本打印样式设置

HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>打印样式示例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>我的网站</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>文章标题</h2>
      <p>这是文章的第一段内容，介绍文章的主题和背景。</p>
      <p>这是文章的第二段内容，详细阐述文章的核心观点。</p>
      <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20business%20article%20illustration&image_size=landscape_4_3" alt="文章插图">
      <p>这是文章的第三段内容，进一步扩展文章的内容。</p>
      <h3>子标题</h3>
      <p>这是子标题下的内容，讨论相关的细节问题。</p>
    </article>
  </main>
  
  <footer>
    <p>&copy; 2024 我的网站. 保留所有权利.</p>
    <div class="social-links">
      <a href="#">Facebook</a>
      <a href="#">Twitter</a>
      <a href="#">Instagram</a>
    </div>
  </footer>
  
  <button class="print-button">打印此页</button>
</body>
</html>

CSS样式：

/* 屏幕样式 */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

nav li {
  display: inline;
  margin-right: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

main {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

img {
  max-width: 100%;
  height: auto;
  margin: 20px 0;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
  margin-top: 20px;
}

.social-links {
  margin-top: 10px;
}

.social-links a {
  color: #fff;
  margin: 0 10px;
  text-decoration: none;
}

.print-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

/* 打印样式 */
@media print {
  /* 页面设置 */
  @page {
    margin: 1in;
  }
  
  /* 隐藏不必要的元素 */
  nav,
  footer,
  .social-links,
  .print-button {
    display: none;
  }
  
  /* 调整基本样式 */
  body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
  }
  
  header {
    background: #fff;
    color: #000;
    padding: 0;
    margin-bottom: 20pt;
  }
  
  main {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    box-shadow: none;
  }
  
  /* 调整链接样式 */
  a {
    color: #000;
    text-decoration: underline;
  }
  
  /* 显示链接的URL */
  a:after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: #666;
  }
  
  /* 优化图像 */
  img {
    max-width: 100% !important;
    height: auto;
    page-break-inside: avoid;
  }
  
  /* 分页控制 */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    margin-top: 20pt;
    margin-bottom: 10pt;
  }
  
  p {
    page-break-inside: avoid;
    margin-top: 0;
    margin-bottom: 10pt;
  }
  
  /* 页码样式 */
  @page {
    @bottom-center {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 10pt;
      color: #666;
    }
  }
}

JavaScript功能：

// 打印按钮功能
document.querySelector('.print-button').addEventListener('click', function() {
  window.print();
});

案例2：多页面文档打印样式

HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多页面文档</title>
  <link rel="stylesheet" href="print.css">
</head>
<body>
  <div class="document">
    <div class="cover-page">
      <h1>项目报告</h1>
      <h2>2024年度</h2>
      <p>作者：张三</p>
      <p>日期：2024年1月1日</p>
    </div>
    
    <div class="page-break"></div>
    
    <div class="table-of-contents">
      <h2>目录</h2>
      <ul>
        <li><a href="#introduction">1. 引言</a></li>
        <li><a href="#overview">2. 项目概述</a></li>
        <li><a href="#methods">3. 研究方法</a></li>
        <li><a href="#results">4. 研究结果</a></li>
        <li><a href="#conclusion">5. 结论</a></li>
      </ul>
    </div>
    
    <div class="page-break"></div>
    
    <section id="introduction">
      <h2>1. 引言</h2>
      <p>本报告介绍了2024年度项目的研究背景、目的和意义。</p>
    </section>
    
    <section id="overview">
      <h2>2. 项目概述</h2>
      <p>本部分详细介绍了项目的基本情况，包括项目目标、范围和时间线。</p>
    </section>
    
    <section id="methods">
      <h2>3. 研究方法</h2>
      <p>本部分介绍了项目中采用的研究方法和技术手段。</p>
    </section>
    
    <section id="results">
      <h2>4. 研究结果</h2>
      <p>本部分展示了项目的研究结果和数据分析。</p>
      <table>
        <thead>
          <tr>
            <th>指标</th>
            <th>目标值</th>
            <th>实际值</th>
            <th>完成率</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>项目进度</td>
            <td>100%</td>
            <td>95%</td>
            <td>95%</td>
          </tr>
          <tr>
            <td>成本控制</td>
            <td>100%</td>
            <td>98%</td>
            <td>98%</td>
          </tr>
          <tr>
            <td>质量标准</td>
            <td>100%</td>
            <td>100%</td>
            <td>100%</td>
          </tr>
        </tbody>
      </table>
    </section>
    
    <section id="conclusion">
      <h2>5. 结论</h2>
      <p>本部分总结了项目的主要成果和经验教训，并提出了未来的改进方向。</p>
    </section>
  </div>
</body>
</html>

CSS样式：

/* 基本样式 */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

.document {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.cover-page {
  text-align: center;
  padding: 100px 0;
}

.cover-page h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

.cover-page h2 {
  font-size: 24px;
  margin-bottom: 40px;
}

.cover-page p {
  font-size: 18px;
  margin-bottom: 10px;
}

.table-of-contents {
  margin-top: 40px;
}

.table-of-contents h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.table-of-contents ul {
  list-style: none;
  padding: 0;
}

.table-of-contents li {
  margin-bottom: 10px;
  font-size: 18px;
}

.table-of-contents a {
  color: #333;
  text-decoration: none;
}

section {
  margin-top: 40px;
}

section h2 {
  font-size: 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

table th,
table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.page-break {
  height: 20px;
  margin: 20px 0;
  border-bottom: 1px dashed #ccc;
}

/* 打印样式 */
@media print {
  /* 页面设置 */
  @page {
    size: A4;
    margin: 1in;
  }
  
  /* 首页设置 */
  @page :first {
    margin-top: 2in;
    margin-bottom: 2in;
  }
  
  /* 基本样式调整 */
  body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
  }
  
  .document {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    box-shadow: none;
  }
  
  /* 封面页样式 */
  .cover-page {
    text-align: center;
    padding: 0;
    page-break-after: always;
  }
  
  .cover-page h1 {
    font-size: 24pt;
    margin-bottom: 12pt;
  }
  
  .cover-page h2 {
    font-size: 18pt;
    margin-bottom: 24pt;
  }
  
  .cover-page p {
    font-size: 12pt;
    margin-bottom: 6pt;
  }
  
  /* 目录样式 */
  .table-of-contents {
    margin-top: 0;
    page-break-after: always;
  }
  
  .table-of-contents h2 {
    font-size: 18pt;
    margin-bottom: 12pt;
  }
  
  .table-of-contents li {
    margin-bottom: 6pt;
    font-size: 12pt;
  }
  
  /* 章节样式 */
  section {
    margin-top: 24pt;
  }
  
  section h2 {
    font-size: 16pt;
    margin-bottom: 12pt;
    border-bottom: 1px solid #000;
    padding-bottom: 6pt;
  }
  
  /* 表格样式 */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 12pt 0;
    page-break-inside: avoid;
  }
  
  table th,
  table td {
    border: 1px solid #000;
    padding: 6pt;
    text-align: left;
    font-size: 10pt;
  }
  
  table th {
    background: #f2f2f2;
    font-weight: bold;
  }
  
  /* 分页控制 */
  .page-break {
    display: block;
    page-break-before: always;
    height: 0;
    margin: 0;
    border-bottom: none;
  }
  
  /* 页码样式 */
  @page {
    @bottom-center {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 10pt;
      color: #666;
    }
  }
  
  /* 首页不显示页码 */
  @page :first {
    @bottom-center {
      content: "";
    }
  }
}

案例3：产品说明书打印样式

HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品说明书</title>
  <link rel="stylesheet" href="product.css">
</head>
<body>
  <div class="product-manual">
    <header>
      <h1>产品说明书</h1>
      <h2>超级智能手表 X1</h2>
    </header>
    
    <main>
      <section class="product-info">
        <h3>产品信息</h3>
        <div class="product-image">
          <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=smart%20watch%20product%20photography%20on%20white%20background&image_size=square" alt="超级智能手表 X1">
        </div>
        <ul class="specs">
          <li><strong>型号：</strong>X1</li>
          <li><strong>尺寸：</strong>42mm × 36mm × 10mm</li>
          <li><strong>重量：</strong>45g</li>
          <li><strong>屏幕：</strong>1.3英寸 AMOLED</li>
          <li><strong>电池：</strong>300mAh，续航7天</li>
          <li><strong>防水：</strong>50米</li>
        </ul>
      </section>
      
      <section class="features">
        <h3>产品特性</h3>
        <div class="feature">
          <h4>健康监测</h4>
          <p>实时监测心率、血氧、睡眠质量等健康数据。</p>
        </div>
        <div class="feature">
          <h4>运动模式</h4>
          <p>支持100+种运动模式，自动识别运动类型。</p>
        </div>
        <div class="feature">
          <h4>智能通知</h4>
          <p>接收手机通知，支持来电、短信、应用消息等。</p>
        </div>
        <div class="feature">
          <h4>支付功能</h4>
          <p>支持NFC支付，出门无需携带手机和钱包。</p>
        </div>
      </section>
      
      <section class="usage">
        <h3>使用说明</h3>
        <ol>
          <li>长按电源键3秒开机</li>
          <li>下载并安装"智能手表"APP</li>
          <li>打开APP，按照提示配对手表</li>
          <li>完成初始设置后即可正常使用</li>
        </ol>
      </section>
      
      <section class="care">
        <h3>保养须知</h3>
        <ul>
          <li>避免在高温环境下使用</li>
          <li>避免与化学品接触</li>
          <li>定期清洁手表表面</li>
          <li>电池电量低时及时充电</li>
        </ul>
      </section>
    </main>
    
    <footer>
      <p>&copy; 2024 科技公司. 保留所有权利.</p>
      <p>客服热线：400-123-4567</p>
    </footer>
  </div>
</body>
</html>

CSS样式：

/* 屏幕样式 */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

.product-manual {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid #333;
}

header h1 {
  font-size: 32px;
  margin-bottom: 10px;
}

header h2 {
  font-size: 24px;
  color: #666;
}

.product-info {
  margin-bottom: 40px;
}

.product-info h3 {
  font-size: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.product-image {
  text-align: center;
  margin-bottom: 30px;
}

.product-image img {
  max-width: 300px;
  height: auto;
}

.specs {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.specs li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.specs li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #333;
}

.features {
  margin-bottom: 40px;
}

.features h3 {
  font-size: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.feature {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.feature h4 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

.usage {
  margin-bottom: 40px;
}

.usage h3 {
  font-size: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.usage ol {
  padding-left: 20px;
}

.usage li {
  margin-bottom: 10px;
}

.care {
  margin-bottom: 40px;
}

.care h3 {
  font-size: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.care ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.care li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.care li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #333;
}

footer {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #ccc;
  color: #666;
  font-size: 14px;
}

/* 打印样式 */
@media print {
  /* 页面设置 */
  @page {
    size: A4;
    margin: 0.75in;
  }
  
  /* 基本样式调整 */
  body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11pt;
    line-height: 1.4;
    color: #000;
    background: #fff;
    margin: 0;
    padding: 0;
  }
  
  .product-manual {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    box-shadow: none;
  }
  
  /* 页眉样式 */
  header {
    text-align: center;
    margin-bottom: 30pt;
    padding-bottom: 15pt;
    border-bottom: 2px solid #000;
  }
  
  header h1 {
    font-size: 24pt;
    margin-bottom: 8pt;
  }
  
  header h2 {
    font-size: 18pt;
    color: #000;
  }
  
  /* 产品信息样式 */
  .product-info {
    margin-bottom: 30pt;
    page-break-inside: avoid;
  }
  
  .product-info h3 {
    font-size: 16pt;
    margin-bottom: 15pt;
    border-bottom: 1px solid #000;
    padding-bottom: 8pt;
  }
  
  .product-image {
    text-align: center;
    margin-bottom: 20pt;
  }
  
  .product-image img {
    max-width: 200px;
    height: auto;
  }
  
  .specs {
    list-style: none;
    padding: 15pt;
    margin: 0;
    background: #f9f9f9;
    border: 1px solid #ccc;
  }
  
  .specs li {
    margin-bottom: 8pt;
    padding-left: 15pt;
    position: relative;
  }
  
  .specs li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000;
  }
  
  /* 产品特性样式 */
  .features {
    margin-bottom: 30pt;
  }
  
  .features h3 {
    font-size: 16pt;
    margin-bottom: 15pt;
    border-bottom: 1px solid #000;
    padding-bottom: 8pt;
  }
  
  .feature {
    margin-bottom: 15pt;
    padding: 12pt;
    background: #f9f9f9;
    border: 1px solid #ccc;
  }
  
  .feature h4 {
    font-size: 14pt;
    margin-bottom: 8pt;
    color: #000;
  }
  
  /* 使用说明样式 */
  .usage {
    margin-bottom: 30pt;
  }
  
  .usage h3 {
    font-size: 16pt;
    margin-bottom: 15pt;
    border-bottom: 1px solid #000;
    padding-bottom: 8pt;
  }
  
  .usage ol {
    padding-left: 20pt;
  }
  
  .usage li {
    margin-bottom: 8pt;
  }
  
  /* 保养须知样式 */
  .care {
    margin-bottom: 30pt;
  }
  
  .care h3 {
    font-size: 16pt;
    margin-bottom: 15pt;
    border-bottom: 1px solid #000;
    padding-bottom: 8pt;
  }
  
  .care ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .care li {
    margin-bottom: 8pt;
    padding-left: 15pt;
    position: relative;
  }
  
  .care li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000;
  }
  
  /* 页脚样式 */
  footer {
    text-align: center;
    padding-top: 15pt;
    border-top: 1px solid #000;
    color: #000;
    font-size: 10pt;
  }
  
  /* 页码样式 */
  @page {
    @bottom-center {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 9pt;
      color: #666;
    }
  }
}

章节总结

本章节介绍了CSS3打印样式的核心概念和实践方法，包括：

打印媒体查询：使用@media print规则针对打印设备应用特定的样式。
页面设置：使用@page规则控制打印页面的基本设置，如边距、大小和方向。
内容优化：隐藏不必要的元素、调整字体样式、优化图像等，确保打印内容的可读性。
打印特定样式：处理分页、页码、页眉页脚等打印特定的概念。
打印预览优化：确保打印样式在打印预览中正确显示，提高用户体验。

通过本章节的学习，您应该能够：

理解打印样式的重要性
使用CSS3创建专门的打印样式
优化网页内容的打印效果
控制分页和页面布局
实现专业的打印文档格式

良好的打印样式不仅可以提高用户体验，还可以展示网站的专业性和对细节的关注。在未来的网页开发中，建议始终考虑打印样式的需求，特别是对于包含重要信息、文档或表单的网站。通过合理使用CSS3的打印样式功能，您可以确保用户无论是在屏幕上还是在打印纸上，都能获得良好的内容体验。