【01期】网页打印样式CSS的技巧和要点

网页打印样式CSS的技巧和要点

不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。
我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果:

  • 媒体查询(media query)
  • 打印颜色清晰明了
  • 隐藏不相关内容
  • 打印边距设置
  • 打印不被跨页
  • 添加分页符
  • 图片和列表设置
  • 细节小问题

针对打印的样式,而不是屏幕显示样式

1、首先,我们需要使用媒体查询(media query)针对打印样式设置。
@media print { }

重新针对打印写CSS样式是没有必要的,我们只需要针对差异设置打印的样式覆盖掉之前的默认样式。

大多数的浏览器会自动根据打印更改颜色,以节省打印原料,但是我们还是尽可能的手工设置一下。

2、为了达到最佳效果,使颜色清晰明了,我们至少需要包含一下基本的打印样式。
@media print {
body { color: #000; background: #fff; }
}
3、对于打印,大多数情况下我们不需要打印整个页面,只需要打印一个简洁的能够突出需要信息的页面,那么我们将不相关的部分隐藏掉。

实列一:隐藏导航条、背景图片

/* Default styles */
h1 {
   color: #fff;
   background: url(banner.jpg);
}
 
@media print {
   h1 {
      color: #000;
      background: none;
   }
 
   nav, aside {
      display: none;
   }
}

实列二:media 属性针对两种不同媒介类型的两种不同的样式(计算机屏幕和打印)

<html>
<head>
/*网页显示颜色 */
<style type="text/css">
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

/*打印显示颜色 */
<style type="text/css" media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>

<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>

media 属性用于为不同的媒介类型规定不同的样式。
如需在一个 style 元素中定义一个以上的媒介类型,请使用逗号分隔的列表
例如:<style type="text/css" media="screen,projection">)

4、为了保证打印样式有用,写CSS样式使打印的内容距离纸张边缘,看起来更好,需要使用 @page 这个语法:
@media print {
  @page {
      margin: 2cm;
   }
}
5、为了保证不被跨页打印

如一个标题和内容在页面底部被分开:

h2, h3 { page-break-after: avoid; }
6、给打印添加分页符:两种被广泛认可的属性是page-break-before和page-break-after。

page-break-before告诉网页浏览器在一个指定样式之前插入一个分页符。利用page-break-before
属性使图片打印在一张新页面上,并且适合整张页面。
要使一个元素作为打印页上的最后一个项目显示,就给那个元素的样式添加page-break-after: always。

实列:创建两个类样式,以类似于.break_after和.break_before的名字来命名,然后你可以选择性地把这些样式应用给应该打印在网页顶部或者底部的元素。

.break_before { page-break-before: always; }
.break_after { page-break-after: always; }
7、另一中情况是要防止图片过宽而超出纸张边缘:
img {
   max-width: 100% !important;
}
8、确保 articles 文章标签的内容,在新的一页开始:
article {
   page-break-before: always;
}
9、注意列表和图片不被分开在不同的页
ul, img {
   page-break-inside: avoid;
}
10、注意细节问题

1.为屏幕显示和打印分别准备一个css文件,如下所示:
用于屏幕显示的css:

<link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />

用于打印的css:

<link rel="stylesheet" href="css/printstylesheet.css" media="print" />
  1. 如果需要在打印内容中出现图片,请在HTML代码中加入;
  2. 打印设置使用的是物理单位,所以尺寸最好不要用像素(px),可以用pt也可以用cm;
  3. 隐藏不需要的或是次要的内容。display:none;
  4. 尽可能的在HTML代码中做好内容重要的先后次序,这样在打印样式中可以节省不少的麻烦;
  5. 打印与网页不一样,打印一定要留下白边,单位用英寸(in);
  6. 要确保页面上的所有文本以黑色打印,就用通配选择器(见第54页)和!important来创建把每个标签都格式化为黑色文本的单个样式:
*{ color: ##000# !important }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,674评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,270评论 0 11
  • 假如我是个诗人, 我要写一篇坚强励志的诗歌, 提醒我们时刻不能退缩。 假如我是个作曲家, ...
    迷之尴尬阅读 209评论 1 0
  • 作者:Marty Cagan HP,Netscape, AOL, eBuy 主要内容部分: 关于人员 - 负责定义...
    huanzhang阅读 252评论 0 0