CSS打印样式表

虽然我们很少从网络上打印内容,但打印样式表不容忽视。它们可以用来确保您的网站内容以易读和适合打印的方式呈现。以下是一个简单的、主观的打印样式表,您可以将其用作自己的基础:

@media print {
  @page {
    size: A4;
  }

  body {
    margin: 0;
    padding: 0;
  }

  body, p, h1, h2, h3, h4, h5, h6, li {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12pt;
    font-weight: normal;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    margin-bottom: 0.5em;
  }

  h1 {
    font-size: 24pt;
  }

  h2 {
    font-size: 18pt;
  }

  h3 {
    font-size: 14pt;
  }

  a:any-link {
    color: #0000FF;
    text-decoration: none;
  }

```css
a:any-link::after {
  content: " [" attr(href) "] ";
}

img {
  width: 100%;
}

header, footer, nav, aside, form, iframe, script {
  display: none;
}

@media print {
  @page {
    size: auto;
  }

  body {
    margin: 0;
    padding: 0;
  }

  body, p, h1, h2, h3, h4, h5, h6, li {
    font-family: "宋体", sans-serif;
    font-size: 12pt;
    font-weight: normal;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    margin-bottom: 10pt;
  }

  h1, h2, h3 {
    font-size: 14pt;
  }

  a:any-link {
    color: #000;
    text-decoration: none;
  }

  a:any-link::after {
    content: " [" attr(href) "] ";
  }

  img {
    width: 100%;
  }

  header, footer, nav, aside, form, iframe, script {
    display: none;
  }
}
  • @media print - 打印媒体查询,用于在打印页面时应用样式。
  • @page:
  • size - 指定页面大小。
  • body:
  • margin - 移除默认的边距。
  • padding - 移除默认的内边距。
  • body, p, h1, h2, h3, h4, h5, h6, li:
  • font-family - 使用适合打印的字体。
  • font-size - 使用易读的字体大小。
  • font-weight - 重置字体粗细。
  • h1, h2, h3, h4, h5, h6:
  • font-weight - 使标题加粗。
  • margin-bottom - 在标题和下方内容之间添加一些间距。
  • h1-h3:
  • font-size - 使用较大的字体大小。
  • a:any-link:
  • color - 使用适合打印的颜色。
  • text-decoration - 移除链接的下划线。
  • a:any-link::after:
  • content - 在链接后添加链接的URL。
  • img:
  • width - 使图片填满页面宽度。
  • header, footer, nav, aside, form, iframe, script:
  • display - 从页面中移除不必要的元素。