在网页开发过程中，CSS的引入方式决定了样式的复用性和维护成本，而针对打印场景的特殊样式配置，则能让用户获得更符合预期的打印结果，避免打印出导航栏、广告等冗余内容。不同的CSS引入方式适配不同的开发场景，而@media print媒体查询则是实现打印样式定制的核心手段。
常见的CSS引入方式
1. 外部样式表引入
外部样式表是最推荐的引入方式，将CSS代码写在独立的.css文件中，通过link标签引入到HTML页面。这种方式可以实现样式复用，多个页面可以共用同一个CSS文件，修改样式时只需要调整一个文件即可，维护成本极低。
引入代码如下：
<link rel="stylesheet" href="styles.css">
对应的styles.css文件内容示例：
/* 全局基础样式 */
body {
font-family: "Microsoft YaHei", sans-serif;
color: #333;
}
2. 内部样式表引入
内部样式表是将CSS代码写在HTML页面的<style>标签内，通常放在<head>标签中。这种方式适合单个页面的专属样式，不需要单独创建CSS文件，但是无法在多页面之间复用。
代码示例：
<head>
<style>
.header {
background-color: #f5f5f5;
padding: 20px;
}
</style>
</head>
3. 行内样式引入
行内样式是直接将CSS样式写在HTML元素的style属性中，优先级最高，会覆盖外部和内部样式表中的同名样式。这种方式适合临时调整单个元素的样式，但是可维护性差，不推荐大规模使用。
代码示例：
<div style="color: red; font-size: 16px;">这是行内样式设置的文本</div>
@media print媒体查询基础
@media print是CSS媒体查询的一种，专门用于匹配打印设备，当页面被打印时，该规则内的样式会生效，覆盖普通屏幕显示的样式。基本语法如下：
@media print {
/* 打印场景下的专属样式 */
选择器 {
属性: 值;
}
}
我们也可以将打印样式写在外部CSS文件中，和普通屏幕样式共存，浏览器会自动根据当前场景匹配对应的样式规则。
@media print实用技巧
1. 隐藏非必要元素
打印页面时，导航栏、侧边栏、广告、按钮等元素通常不需要被打印出来，可以通过display: none隐藏这些元素。
@media print {
/* 隐藏导航栏、侧边栏、广告、按钮 */
.nav, .sidebar, .ad, .btn {
display: none;
}
}
2. 调整字体与颜色适配打印
屏幕显示常用的浅色背景、彩色文字在打印时可能效果不佳，打印样式中建议将背景设为无，文字设为黑色，字体适当调大，提升可读性。
@media print {
body {
background: none;
color: #000;
font-size: 14pt;
}
/* 移除所有元素的背景色和阴影 */
* {
background-image: none !important;
box-shadow: none !important;
}
}
3. 设置打印页面边距
可以通过@page规则设置打印页面的边距，避免内容贴近纸张边缘。
@media print {
@page {
margin: 2cm;
}
}
4. 处理链接显示
屏幕上的链接通常有下划线或特殊颜色，打印时无法点击，所以可以在打印样式中显示链接的完整地址，方便用户查看链接内容。
@media print {
a[href]::after {
content: " (" attr(href) ")";
font-size: 12pt;
color: #666;
}
/* 排除锚点链接和站内相对路径链接的地址显示 */
a[href^="#"]::after, a[href^="/"]::after {
content: "";
}
}
5. 避免分页截断内容
对于表格、列表等连续内容，可以通过page-break-inside属性避免打印时内容被分页截断。
@media print {
table, ul, ol {
page-break-inside: avoid;
}
}
不同引入方式下的打印样式配置
如果采用外部样式表引入CSS，可以直接在样式文件中添加@media print规则，示例如下：
/* 普通屏幕样式 */
.container {
width: 1200px;
margin: 0 auto;
}
/* 打印样式 */
@media print {
.container {
width: 100%;
margin: 0;
}
.nav {
display: none;
}
}
如果是内部样式表引入，同样可以在<style>标签内添加@media print规则，优先级遵循CSS本身的优先级规则。
注意事项
- 打印样式的优先级高于普通屏幕样式，但是如果行内样式没有特指打印场景，也会被打印样式覆盖，因为@media print规则的选择器优先级和普通规则一致。
- 部分浏览器可能对@page规则的支持存在差异，测试时建议使用主流浏览器验证效果。
- 不要过度设置!important，避免后续样式调整困难，尽量通过选择器优先级控制样式覆盖逻辑。
CSS引入方式media_print打印样式响应式设计修改时间：2026-07-04 07:36:15