Skip to main content
FreeToolkit .ai

打印样式表生成器 根据选项生成 @media 打印样式表，包括隐藏元素、设置文本样式和控制页面断点。

打印样式表生成器 illustration
🎨

打印样式表生成器

根据选项生成 @media 打印样式表，包括隐藏元素、设置文本样式和控制页面断点。

1

选择要隐藏的元素

切换在打印时隐藏哪些元素（导航、页脚、侧边栏、按钮、广告）

2

配置打印样式

启用黑色文本、白色背景、显示 URL 和控制页面断点

3

复制 CSS

复制项目的完整 @media print 样式表

Loading tool...

What Is 打印样式表生成器?

打印样式生成器创建了优化的 @media print CSS，使网页更适合打印。当用户打印网页时，许多元素（导航、广告、侧边栏）是无必要的，并且浪费墨水和纸张。此工具生成了一份全面的打印样式表，它隐藏非必需元素，强制使用可读的黑色文本在白色背景上，选项显示链接后的 URL，控制标题和图像周围的页面断点，并将内容扩展到全宽度。你可以切换要隐藏的元素（导航、页脚、侧边栏、按钮、广告、图像），配置文本样式（字体大小、行高）和设置页面边距。生成的 CSS 使用 @media print 查询，确保它只在打印时应用。

Why Use 打印样式表生成器?

  • 切换控件以隐藏特定的非必需元素
  • 强制使用黑色文本和白色背景以提高可读性并节省墨水
  • 智能页面断点控制，适用于标题、图像和表格
  • 可配置的字体大小、行高和页边距

Common Use Cases

博客文章

创建打印友好的博客帖子和文章版本

文档

确保技术文档打印清晰完整

发票和报告

优化发票和报告页面的打印效果，包括适当的页边距

食谱和指南

使食谱和操作指南易于打印，不含杂乱内容

Technical Guide

@media print 查询仅在页面被打印时应用样式。最佳实践包括：使用 display: none !important 隐藏非必需元素（导航、页脚、广告）；强制 color: #000 和 background: #fff 以实现可读性和墨水效率；使用 page-break-after: avoid 在标题上以保持它们与内容一起；使用 page-break-inside: avoid 在图像和表格上以防止尴尬的分割；显示链接 URL 使用 a[href]::after { content: " (" attr(href) ")"; }；并通过删除固定宽度约束将内容扩展到 width: 100%。@page at-rule 控制页面边距：@page { margin: 2cm; }。使用 !important 声明覆盖内联样式和特异性问题。打印样式表应在浏览器的打印预览中测试。对于响应式网站，确保打印样式表覆盖任何基于媒体查询的布局更改。考虑为应该从新页面开始的部分使用 page-break-before: always。

Tips & Best Practices

  • 1
    始终使用浏览器打印预览（Ctrl/Cmd + P）测试打印样式
  • 2
    在打印样式中使用 !important 覆盖内联样式和特定样式
  • 3
    设置适当的页边距（1.5-2.5cm）以便于阅读
  • 4
    考虑隐藏图像以节省墨水，除非它们是必需内容

Related Tools

媒体查询生成器 - free online tool

媒体查询生成器

根据特征条件和预设断点生成CSS媒体查询。

🎨 CSS & Design
CSS 变量生成器 - free online tool

CSS 变量生成器

为颜色、间距和字体样式生成 CSS 自定义属性（变量）。

🎨 CSS & Design
CSS 重置查看器 - free online tool

CSS 重置查看器

查看和比较流行的 CSS 重置和标准化样式表。

🎨 CSS & Design
电子邮件CSS内联工具 - free online tool

电子邮件CSS内联工具

将CSS样式内联到HTML元素中，以确保电子邮件模板的兼容性。

🎨 CSS & Design

Frequently Asked Questions

Q 如何测试打印样式？
使用浏览器打印预览（Ctrl+P / Cmd+P）或浏览器开发工具来模拟打印媒体
Q 是否应该为打印创建单独的 CSS 文件？
两种方法都有效。可以在主 CSS 中使用 @media print 块，也可以使用 media="print" 的 link 标签创建单独的文件
Q 为什么要在打印样式中使用 !important？
打印样式通常需要覆盖内联样式和高特异性选择器，以确保正确渲染
Q 如何控制页面断点？
可以在元素上使用 page-break-before、page-break-after 和 page-break-inside 属性来控制内容跨页的方式
Q 是否可以为不同页面设置不同的边距？
可以使用 @page :first 来指定第一页的样式，使用 @page :left/@page :right 来指定交替页面的边距

About This Tool

打印样式表生成器 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.