打印样式指南

基本结构

/* 方式一：在样式表中 */
@media print {
  /* 打印专用规则 */
}

/* 方式二：独立文件 */
<link rel="stylesheet" href="print.css" media="print">

隐藏 / 显示元素

@media print {
  /* 隐藏打印时无用的元素 */
  nav, header, footer, .sidebar, .ads, .cookie-banner,
  button, .no-print, video, audio, [aria-hidden="true"] {
    display: none !important;
  }

  /* 显示仅打印内容 */
  .print-only {
    display: block !important;
  }
}

链接后显示 URL

@media print {
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #666;
  }
  /* 不显示内部链接/JS链接 */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

分页控制

@media print {
  /* 避免在元素内部分页 */
  h1, h2, h3, h4, blockquote, pre, figure {
    break-inside: avoid;
    page-break-inside: avoid; /* 兼容旧写法 */
  }

  /* 每篇文章前强制分页 */
  article {
    break-before: page;
    page-break-before: always;
  }

  /* 避免孤立标题 */
  h1, h2, h3 {
    break-after: avoid;
  }
}

页面设置

@page {
  size: A4 portrait;     /* A4、letter、landscape */
  margin: 2cm 2.5cm;
}

@page :first { margin-top: 3cm; }
@page :left { margin-left: 3cm; }
@page :right { margin-right: 3cm; }