CSS控制print打印样式
来源:http://blog.csdn.net/pangni/article/details/6224533
一、添加打印样式
1. 为屏幕显示和打印分别准备一个css文件,如下所示:
用于屏幕显示的css: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />
用于打印的css:<link rel="stylesheet" href="css/printstylesheet.css" media="print" />
2. import方式:
<style type="text/css">
@import url("css/printstylesheet.css") print;
</style>
3. 直接把屏幕显示样式和打印样式写在一个css文件中:
@media print {}{
h1 {
color: black;
}
h2 {}{
color: gray;
}
}
@media print里面的内容只对打印出来的内容有效,之外的内容就是屏幕显示的样式。
其他:
创建一个不指定媒体类型的样式表通常很有用(或者利用media="all")。当你准备好定义一些特别用
于打印的规则时,可以只创建一个单独的样式表,使任何在打印时看起来不好的样式都失效。使用这种方法的一个问题是必须确保打印机样式实际上确实覆盖了主样式表。可以使用!important.
二、打印样式注意事项:
1. 打印样式中不推荐使用背景,因为浏览器默认情况下并不能打印出CSS中的背景内容,只有当浏览器被
设置可以打印背景的情况下才能打印出背(ie的高级选项中可选)。即使背景可以打印,它也可能盖过叠在它上面的任何文本。
这是真的,尤其对于用彩色背景在显示器上强烈对比的文本,但是在黑白打印机上打印时会融合这一背景。
background:none;去掉背景
图片和颜色。
可以利用background-color属性设置背景颜色为白色,像这样:background-color: white。
使用background的快捷法也可以获得相同的效果:background: white。因此像background: white;
这样的声明不仅设置了背景颜色为白色,而且消除了所有背景图片。利用这个background的快捷属性,
你实现了两个目的——设置了一个白色背景,并消除了图片——只用很少的代码。
2. 如果需要在打印内容中出现图片,请在HTML代码中加入。
3. 打印设置使用的是物理单位,所以尺寸最好不要用像素(px),可以用pt也可以用cm;
4. 隐藏不需要的或是次要的内容。display:none;
5. 尽量不要让内容浮动,有些浏览器打印浮动的div的过程中,会有一个麻烦,需要特别加以注意。
不要在打印的样式表中浮动的块,像这样:float: none;。例如,基于Gecko的浏览器
(例如Netscape 6+),当用户用它来浏览一个打印输出页面时,它会截去浮动元素中的内容。
这些内容就不会被传送到打印机,下一个页面也不会有它的踪影――它消失了。
6. 尽可能的在HTML代码中做好内容重要的先后次序,这样在打印样式中可以节省不少的麻烦。
7. 打印与网页不一样,打印一定要留下白边,单位用英寸(in)。
8. 要确保页面上的所有文本以黑色打印,就用通配选择器(见第54页)和!important来创建把每个
标签都格式化为黑色文本的单个样式:
*{ color: ##000# !important }
9. 在打印中显示链接url的信息:利用一个高级的选择器:after和一个高级的CSS属性称作content,
把不在屏幕上显示的文本打印在一个样式元素的末端。
不幸的是,:after选择器和content属性技巧在Internet Explorer 6或者更早的版本上不起作用
(到编写本书为止,在IE 7上也不行)。但是它在Firefox和Safari上的确可以,因此你至少可以清楚
地说明URL以便访问者可以使用他们的浏览器。
为了做到这点,给打印样式表添加一个样式,在每个链接后面打印出URL。你甚至可以添加其他文本项
目比如圆括号,使它更好看些:
a:after {content: " (" attr(href) ") ";}
然而,这个CSS不区分外部或者内部的链接,因此它也打印出到达同一个网站其他页面的没用的相对
文档链接:“访问主页(../../index. html)。”利用一点点CSS 3魔法,就可以强制这个样式只打
印绝对的URL(即以http://开头的那些),像这样:
a[href^="http://"]:after {content: " (" attr(href) ") ";}
10.给打印添加分页符:两种被广泛认可的属性是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; }
然后你可以选择性地把这些样式应用给应该打印在网页顶部或者底部的元素。
三、测试打印样式
通常来说我们不可能用打印机来进行测试,在IE浏览器菜单栏“文件”中有“打印预览”,可以通过这
打印预览来做测试。
CSS控制print打印样式的更多相关文章
- web的各种前端打印方法之CSS控制网页打印样式
来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人 ...
- css设置网页打印样式
有三种方法 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="css/n ...
- css控制页面打印(分页、屏蔽不需要打印的对象)
样式: <style media="print"> .Noprint { DISPLAY: none;} .PageNext { ...
- css控制默认滚动条样式
针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...
- CSS控制滚动条的样式
到今天(2018年10月25日)为止, 这还是chrome上的一个实验性特性: ::-webkit-scrollbar{width:4px;height:4px;} ::-webkit-scrollb ...
- window.print()打印网页(一)
有时候需要将网页内容打印到纸上,最简单的一种方法是用window对象的print方法. window.print()默认打印当前网页的所有部分.(除了背景,默认打印都是白底黑字,如果有特别的设置 要另 ...
- 【学习DIV+CSS】2. 学习CSS(一)--CSS控制页面样式
1. CSS如何控制页面 使用XHTML+CSS布局页面,其中有一个很重要的特点就是“结构与表现相分离”(结构指XHTML,表现指CSS).有人这样描述这种分离的关系,结构XHTML好比一个人,表现C ...
- window.print控制打印样式
我们可能会去使用window.print()方法来打印页面,但是当我们遇到需要改变打印时候的字体大小等css样式的时候你可能会懵逼. 所以搜索成了我们的必经之路,我相信在网上搜索出来的最好的答案就是使 ...
- jquery 利用CSS 控制打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="cs ...
随机推荐
- compare:(字符串的大小比较)
1.字符串的比较是按照ascall码进行比较的 比如A比a的值小, if([string1 compare:string2] == (以下描述)) 如果比较的结果是NSOrderedDescendin ...
- Cocos2d-x 3.x项目创建
1.首先打开终端,cd到cocos2d-x-3.2目录下,运行命令./setup.py 2. 首先,打开终端cd到目录/cocos2d-x-3.2/tools/cocos2d-console/bin下 ...
- UI基础:UICollectionView
UITableView 和 UICollectionView的设计思路: 1.UITableView 的布局由TableView和UItableViewDelegate完成. 2.UICollecti ...
- 通讯录CoreData数据库实现版
一,创建新项目,选择空模板,名字MultyViewAddressBookCoreDataVersion,选择下面的use Core Data创建项目 首先在datamodel中创建一个实体,创建属性
- MongoDB在Windows下安装及配置
第一步 下载MongoDB http://www.mongodb.org/downloads 第二步 解压到D:\mongodb\目录下,为了命令行的方便,可以把D:\mongodb\bin加到系统环 ...
- HDU 5100
http://acm.hdu.edu.cn/showproblem.php?pid=5100 用1*k方格覆盖n*n方格 有趣的一道题,查了下发现m67的博客还说过这个问题 其实就是两种摆法取个最大值 ...
- 在Entity Framework中使用事务
继续为想使用Entity Framework的朋友在前面探路,分享的东西虽然技术含量不高,但都是经过实践检验的. 在Entity Framework中使用事务很简单,将操作放在TransactionS ...
- WCF服务端行为的一些设置
[ServiceBehavior( InstanceContextMode = InstanceContextMode.Single, //表示所有的请求都用一个服务实例来处理 Concurren ...
- mysql 获得当前月1号的日期 和 0点日期方法
day)) 当月0点时间:2015-12-01 00:00:00 day)) 当月1号时间:2015-12-01 10:45:22 day) 2015-12-01 <!-- 查询上月债权额度 - ...
- 详解for循环(各种用法)
常见的for循环一般是一下代码这种结构: for (int i = 0; i < 100; i++){ Console.WriteLine(i);} 或者递减的: ...