CSS 打印样式 @page

CSS打印样式：@media print、@page页面设置（size/margin）、page-break分页控制、:left/:right/:first伪类、隐藏导航/显示完整URL、打印调试技巧 · 难度：进阶 · +15XP

CSS @media print —— 优化网页打印效果

用户可能会打印你的网页。如果不做任何优化，打印出来会包含导航栏、广告、背景色、彩色链接等不必要的内容。@media print就是专门优化打印输出的。

基本配置

@media print {
  /* 隐藏不需要打印的元素 */
  nav, footer, .ad, .sidebar, .comments, .share-buttons {
    display: none;
  }
  /* 黑白打印 */
  body { font-size: 12pt; color: black; background: white; }
  /* 链接后面显示URL */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
  /* 避免图片跨页断裂 */
  img, table, figure { break-inside: avoid; }
}

动手练习

1. 基础练习：给你的一篇文章页加上@media print样式，隐藏导航和侧边栏。
2. 进阶应用：在打印样式中给所有链接后面显示实际URL地址。
3. 项目实战：用浏览器的打印预览（Ctrl+P）检查你网站的打印效果，添加完整的打印优化样式。