CSS 在卷纸上打印

在本文中，我们将介绍如何使用CSS样式在卷纸上进行打印。打印是日常生活和办公工作中的重要环节，让我们学习如何通过CSS来控制打印样式，以确保打印效果符合预期。

阅读更多：CSS 教程

CSS 打印样式简介

在设计打印样式时，CSS提供了一些有用的特性和属性，可以控制文档的布局、尺寸、颜色等方面。通过使用这些CSS样式，我们可以确保打印出的文档在纸张上的每一页都具有一致的外观和格式。

设置页面尺寸和方向

通过CSS样式，我们可以设置打印页面的尺寸和方向，以适应不同类型的纸张。常见的页面尺寸包括A4、Letter、Legal等，而常见的页面方向有横向和纵向两种。以下是一些示例代码：

@media print {
  @page {
    size: A4; /* 设置页面尺寸为A4 */
    margin: 0; /* 去掉边距 */
    orienation: landscape; /* 设置页面方向为横向 */
  }
}

通过上述代码，我们可以将打印页面的尺寸设置为A4，并且去掉边距以便充分利用纸张空间。另外，通过将页面方向设置为横向，我们可以在需要时使用更宽的页面宽度。

控制页面内容和排版

在打印页面上，我们可能需要对内容进行适当的调整和排版，以确保打印效果更好。CSS提供了一些属性和方法，可以帮助我们实现这一目标。

控制元素显示和隐藏

通过使用display属性，我们可以选择在打印页面上显示或隐藏某些元素。例如，我们可以隐藏导航栏、广告等与打印输出无关的内容。以下是一些示例代码：

@media print {
  .header {
    display: none; /* 隐藏头部导航栏 */
  }

  .sidebar {
    display: none; /* 隐藏侧边栏内容 */
  }
}

分页控制

在打印页面上，我们可能希望某些内容保持在同一页上，而不被分割到不同的页。通过使用page-break属性，我们可以控制页面如何分页。以下是一些示例代码：

@media print {
  .content {
    page-break-inside: avoid; /* 阻止内容在页面中分页 */
  }

  .section {
    page-break-before: always; /* 在每个section开始时插入新页 */
  }
}

上述代码中，我们通过page-break-inside: avoid属性阻止了.content元素在页面中分页。另外，通过page-break-before: always属性，我们可以在每个.section元素开始时插入新的页。

自定义样式

通过使用常规的CSS属性和选择器，我们可以实现更自定义的打印样式。例如，我们可以改变文本的颜色、字体、大小等属性，或者添加背景颜色和边框等样式。以下是一个示例代码：

@media print {
  body {
    color: #333; /* 改变文本颜色为深灰色 */
    font-size: 14px; /* 设置字体大小为14像素 */
  }

  .box {
    background-color: #f2f2f2; /* 添加淡灰色的背景颜色 */
    border: 1px solid #ccc; /* 添加浅灰色的边框 */
    padding: 10px; /* 添加内边距 */
  }
}

通过上述代码，我们可以将打印页面的文本颜色改为深灰色，字体大小改为14像素。同时，我们还可以为.box元素添加背景颜色、边框和内边距。

CSS 打印样式的应用举例

为了更好地理解CSS打印样式的应用，以下是一个使用CSS打印样式设计的简历示例：

<html>
<head>
  <style>
    @media print {
      @page {
        size: A4;
        margin: 0;
      }

      .header {
        display: none;
      }

      .contact {
        font-size: 14px;
      }

      .skills {
        page-break-before: always;
      }

      .experience {
        page-break-before: always;
      }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>简历</h1>
  </div>

  <div class="contact">
    <h2>联系信息</h2>
    <p>姓名：张三</p>
    <p>电话：123456789</p>
    <p>邮箱：[email protected]</p>
  </div>

  <div class="skills">
    <h2>技能</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </div>

  <div class="experience">
    <h2>工作经历</h2>
    <p>公司A - 前端开发工程师</p>
    <p>2018年至今</p>
    <p>公司B - 实习生</p>
    <p>2017年</p>
  </div>
</body>
</html>

通过上述示例，我们可以看到简历的打印页面中，头部显示了”简历”的标题，而联系信息、技能和工作经历分别在不同的页面上显示，并且工作经历和技能标题之前插入了新的页。