使用@media print可控制网页打印样式，通过隐藏非必要元素、调整字体与颜色、设置分页等方式优化打印效果，提升用户体验。
在网页开发中，有时需要控制页面打印时的显示效果，比如隐藏导航栏、广告或按钮，只保留核心内容。CSS 提供了通过 media="print" 来定义打印样式的方法，让网页在打印时自动应用特定样式。
最常用的方式是在 CSS 文件或页面的 <style> 标签中使用 @media print 规则，专门设置打印时生效的样式。
例如：
@media print {
.header, .sidebar, .footer, .no-print {
display: none !important;
}
body {
font-size: 12pt;
color: #000;
}
.content {
width: 100%;
margin: 0;
}
}
这样在打印时，带有 .no-print 类的元素将被隐藏，正文内容则以更合适的字体大小和布局输出。
立即学习“前端免费学习笔记（深入）”；
也可以在 HTML 的 <head> 中单独引入一个专用于打印的 CSS 文件：
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />
其中：
这种方式可以分离屏幕样式与打印样式，便于维护。
为了让打印结果更清晰实用，可以考虑以下做法：
基本上就这些。通过 media="print"，你可以轻松控制网页打印时的外观，提升用户体验。不复杂但容易忽略。
以上就是CSS如何在HTML中引入打印样式_使用media="print"控制打印输出样式的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
915
收藏
