CSS系列（24）-- 打印样式详解

前端技术探索系列：CSS 打印样式详解 🖨️

致读者：探索打印样式的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS 打印样式，学习如何优化网页的打印体验。

打印样式基础 🚀

媒体查询

css">/* 打印样式表 */
@media print {/* 隐藏非必要元素 */.no-print,.header-nav,.footer,.ads {display: none !important;}/* 确保黑色文本 */body {color: #000;background: #fff;font-size: 12pt;line-height: 1.5;}/* 显示完整链接 */a[href]::after {content: " (" attr(href) ")";font-size: 90%;}/* 显示缩写解释 */abbr[title]::after {content: " (" attr(title) ")";}
}

分页控制

css">@media print {/* 避免元素被分页 */.keep-together {page-break-inside: avoid;}/* 强制分页 */.page-break {page-break-before: always;}/* 表格标题 */thead {display: table-header-group;}/* 避免图片被分页 */img {page-break-inside: avoid;}/* 章节控制 */h1, h2, h3 {page-break-after: avoid;page-break-inside: avoid;}
}

打印优化 🎯

颜色和背景

css">@media print {/* 优化颜色 */* {-webkit-print-color-adjust: exact;print-color-adjust: exact;}/* 移除背景图 */.background-image {background-image: none !important;}/* 确保对比度 */.content {color: #000 !important;background: #fff !important;text-shadow: none !important;}/* 边框优化 */.border {border-color: #000 !important;}
}

布局优化

css">@media print {/* 重置布局 */.container {width: 100% !important;max-width: none !important;margin: 0 !important;padding: 0 !important;}/* 展开折叠内容 */.collapse {display: block !important;height: auto !important;}/* 表格优化 */table {width: 100% !important;border-collapse: collapse !important;}/* 确保表格边框 */table, th, td {border: 1px solid #000 !important;}
}

响应式打印 💫

页面尺寸

css">@media print {/* 设置页面尺寸 */@page {size: A4;margin: 2cm;}/* 横向打印 */@page landscape {size: A4 landscape;}.landscape-content {page: landscape;}/* 自定义页眉页脚 */@page {@top-center {content: "公司文档";}@bottom-right {content: "第 " counter(page) " 页";}}
}

响应式表格

css">@media print {/* 长表格处理 */.large-table {font-size: 10pt;}/* 确保表格标题重复 */thead {display: table-header-group;}tfoot {display: table-footer-group;}/* 响应式列宽 */.table-column {width: auto !important;}
}

特殊场景处理 ⚡

表单打印

css">@media print {/* 显示表单值 */input, textarea {border: 1px solid #999;background: #fff !important;}/* 显示选中状态 */input[type="checkbox"],input[type="radio"] {-webkit-appearance: none;border: 1px solid #000;width: 13px;height: 13px;}input[type="checkbox"]:checked::after {content: "✓";display: block;text-align: center;line-height: 13px;}/* 下拉框值 */select {appearance: none;border: 1px solid #999;}
}

代码打印

css">@media print {/* 代码块处理 */pre, code {white-space: pre-wrap !important;word-wrap: break-word !important;border: 1px solid #ccc;padding: 1em;background: #f5f5f5 !important;font-size: 10pt;font-family: "Courier New", monospace;}/* 行号处理 */.line-numbers {counter-reset: line;}.line-numbers span::before {counter-increment: line;content: counter(line);display: inline-block;width: 2em;text-align: right;margin-right: 1em;color: #999;}
}