APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > css >

收藏
分享到

CSS @media print使用

css 来源：互联网 作者：佚名 发布时间：2025-03-19 21:30:59 人浏览
摘要

@media print是 CSS 中的打印媒体查询，用于定义仅在打印文档时生效的样式规则。通过它，你可以优化网页的打印效果，比如隐藏不必要的元素、调整布局、修改字体颜色等。下面我会结合代码实

@media print 是 CSS 中的打印媒体查询，用于定义仅在打印文档时生效的样式规则。通过它，你可以优化网页的打印效果，比如隐藏不必要的元素、调整布局、修改字体颜色等。下面我会结合代码实例详细讲解。

一、基本语法

1

2

3

4

5

6

@media print {

  /* 在此处编写打印时生效的 CSS 规则 */

  选择器 {

    属性: 值;

  }

}

二、常见使用场景 & 代码示例

1. 隐藏非必要元素

打印时通常需要隐藏导航栏、广告、按钮等无关内容。

1

2

3

4

5

@media print {

  .navbar, .ad-banner, .print-button {

    display: none !important;

  }

}

2. 调整字体和颜色

打印时建议使用深色字体（避免浅色文字不清晰），并优先使用pt单位。

1

2

3

4

5

6

7

@media print {

  body {

    font-family: "Times New Roman", serif;

    font-size: 12pt;

    color: #000 !important; /* 强制黑色打印 */

  }

}

3. 处理链接的 URL 显示

打印时让超链接显示完整的 URL（默认不显示）。

1

2

3

4

5

6

7

@media print {

  a::after {

    content: " (" attr(href) ")";

    font-size: 0.8em;

    color: #666;

  }

}

4. 分页控制

避免内容被截断，控制分页位置。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

@media print {

  /* 避免在 h2 标题前分页 */

  h2 {

    page-break-before: avoid;

  }

  /* 禁止在段落中间分页 */

  p {

    page-break-inside: avoid;

  }

  /* 在 footer 前强制分页 */

  .footer {

    page-break-before: always;

  }

}

5. 调整边距和背景

去掉背景图/颜色（节省墨水），自定义页边距。

1

2

3

4

5

6

7

8

9

10

11

12

@media print {

  body {

    background: none !important;

    margin: 2cm; /* 设置打印边距 */

  }

  /* 打印时强制显示白色背景的元素 */

  .resume-section {

    background-color: white !important;

    -webkit-print-color-adjust: exact; /* Chrome/Safari */

    print-color-adjust: exact;

  }

}

三、完整代码实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<!DOCTYPE html>

<html>

<head>

  <style>

    /* 常规样式 */

    .nav { background: #333; color: white; padding: 10px; }

    .sidebar { float: right; width: 30%; background: #f0f0f0; }

    a { color: blue; }

    /* 打印样式 */

    @media print {

      .nav, .sidebar { display: none; }

      body {

        font-size: 12pt;

        color: #000;

        margin: 1cm;

      }

      a::after { content: " (" attr(href) ")"; }

      .page-break { page-break-before: always; }

    }

  </style>

</head>

<body>

  <nav class="nav">导航栏（打印时隐藏）</nav>

  <div class="content">

    <h1>我的简历</h1>

    <p>联系我：<a href="https://example.com">个人网站</a></p>

    <div class="page-break"></div>

    <h2>工作经历</h2>

    <p>2020-2023：前端工程师</p>

  </div>

  <div class="sidebar">侧边栏（打印时隐藏）</div>

</body>

</html>

四、关键注意事项

测试方法：
无需实际打印，用浏览器「打印预览」（快捷键 Ctrl/Cmd + P）即可调试。

单位选择：
建议用 pt（点）、cm/mm（物理单位）而非 px，更符合纸张尺寸。

覆盖默认样式：
打印样式可能需要 !important 覆盖原有样式（但尽量少用）。

背景颜色处理：
浏览器默认不打印背景色，如需显示需强制设置：

1

2

-webkit-print-color-adjust: exact;

print-color-adjust: exact;

五、进阶技巧

自定义页眉页脚：
通过 @page 规则定义：

1

2

3

4

5

6

@page {

  margin: 2cm;

  @top-center {

    content: "我的简历";

  }

}

（注意：浏览器支持有限，不同浏览器效果可能不同）

多页面不同样式：
使用命名页面：

1

2

3

4

5

6

.cover-page {

  page: cover; /* 指定页面名称 */

}

@page cover {

  margin: 5cm;

}

版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • CSS中z-index属性的作用及在什么情况下会失效
    大白话谈谈 CSS 中z - index属性的作用及在什么情况下会失效。 1. z-index 属性的作用 在 CSS 里，z-index属性就像是一个楼层控制器。想象一下网
  • CSS @media print使用
    @media print是 CSS 中的打印媒体查询，用于定义仅在打印文档时生效的样式规则。通过它，你可以优化网页的打印效果，比如隐藏不必要的元素

  • CSS实现高频出现的复杂怪状按钮之镂空的内凹圆

    CSS实现高频出现的复杂怪状按钮之镂空的内凹圆
    你可以在这里看到：CodePen Demo -- CSS Various Button Shapes | CSS 各种造型按钮 接下来几篇文章中，将在上述基础上，额外补充一些在日常设计稿中
  • CSS3实现动态旋转加载样式的代码
    要使用 CSS3 创建一个动态旋转加载样式，可以使用 CSS 动画和旋转变换。下面是一个简单的示例： HTML： 1 div class=loader/div CSS： 1 2 3 4 5 6 7
  • CSS3动态效果之过渡属性介绍
    过渡CSS3动态效果 过渡属性 一、什么是过渡： 通过 css3 可以在不使用 flash 动画或 javascript 的情况下，为元素从一种样式变换为另一种样式时

  • css3 实现icon刷新转动效果的代码

    css3 实现icon刷新转动效果的代码
    先了解一下-webkit-transform、animation、@keyframes这三个属性吧 -webkit-transform可以实现平移、旋转、缩放和倾斜等效果 有以下几个属性 translate(x
  • css3 display:flex 弹性盒模型的使用方法
    CSS3 中的display: flex是一种强大的布局模式，被称为弹性盒布局或Flexbox。它允许我们通过一套简洁的规则，轻松地对网页元素进行对齐、排列

  • CSS3模拟实现一个雷达探测扫描动画特效

    CSS3模拟实现一个雷达探测扫描动画特效
    之前好长时间住在唐家岭，从路口往上地走的时候，总能看见一个一个的雷达，好壮观，今天用CSS3实现一个雷达探测扫描的效果。 1. 实现思

  • css实现渐变色圆角边框

    css实现渐变色圆角边框
    渐变色圆角边框(内容区域圆角) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 !DOCTYPE html html lang=en head meta charset=UTF-8 t

  • css渐变色背景gradient的介绍

    css渐变色背景gradient的介绍
    使用渐变色作为背景 可以直接将渐变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背景background一个属性值不是背景颜色
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计