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 - 从页面中移除不必要的元素。