JQuery巧妙利用CSS操作打印样式
一、添加打印样式
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浏览器菜单栏“文件”中有“打印预览”,可以通过这打印预览来做测试。
JQuery巧妙利用CSS操作打印样式的更多相关文章
- jquery 利用CSS 控制打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="cs ...
- [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.
最近在做Lodop打印功能: 思路是: 用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是: 在打印的JS文件中, 引 ...
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
- jquery 属性与css操作
属性1.属性 1.1 attr(name|properties|key,value|key,fn) 1) 获取属性值 $("img").attr(&quo ...
- 如何用css写打印样式
打印样式 打印样式就是针对网页被打印时设置给文档的样式,由于打印时是显示在纸上,跟屏幕还是有区别的,对于有打印需求的网页往往需要设置专门的打印样式来适配页面. @media print 声明自己是打印 ...
- jquery 学习(五) - CSS 操作
HTML + CSS 样式 /*CSS样式*/<style> body{ margin: 0; } div{ width: 100%; height: 2000px; background ...
- jQuery如何改变css伪元素样式
首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...
- css 写打印样式问题
(1)背景颜色打印不出来问题解决方法 background样式要加上 !important: color样式要加上 !important: -webkit-print-color-adjust: ...
- web的各种前端打印方法之CSS控制网页打印样式
来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人 ...
随机推荐
- 利用过滤器对string类型的入参进行统一trim
背景 最近做的一些项目都是后台管理系统,主要是对表单数据的增删改查操作,其中有些表单项是字符串类型的,对于这些类型的表单项就需要在保存或编辑之前要进行.trim()处理,刚开始感觉没什么,遇到了就手动 ...
- iOS 9应用开发教程之使用代码添加按钮美化按钮
iOS 9应用开发教程之使用代码添加按钮美化按钮 丰富的用户界面 在iOS9中提供了很多的控件以及视图来丰富用户界面,对于这些视图以及控件我们在上一章中做了简单的介绍.本章我们将详细讲解这些视图. i ...
- linux命令大全之cal命令详解(显示日历)
cal命令可以用来显示公历(阳历)日历. 1.命令格式:cal [参数][月份][年份] 2.命令功能:用于查看日历等时间信息,如只有一个参数,则表示年份(1-9999),如有两个参数,则表示月份和年 ...
- wpf企业应用之SelectButton(用于列表页之类的选择)
在企业级应用中,通常我们会遇到这样的需求,需要点击一个按钮选择列表中的一项或者多项,然后将结果显示到按钮中.这里我给自己的控件命名为SelectButton,具体效果见 wpf企业级开发中的几种常见业 ...
- 【10.26校内测试】【状压?DP】【最小生成树?搜索?】
Solution 据说正解DP30行??? 然后写了100行的状压DP?? 疯狂特判,一算极限时间复杂度过不了aaa!! 然而还是过了....QAQ 所以我定的状态是待转移的位置的前三位,用6位二进制 ...
- Codeforces Round #358 (Div. 2) D. Alyona and Strings dp
D. Alyona and Strings 题目连接: http://www.codeforces.com/contest/682/problem/D Description After return ...
- Comparable<T> 和 Comparator<T>
相同点: Comparable<T> 和 Comparator<T>都是接口 不同点: 两者声明的方法不同.前者是compareTo()方法,后者是compare()方法. C ...
- Running CMD.EXE as Local System(转)
Many times in the past I had to run an interactive command-line shell under the Local SYSTEM account ...
- Automatic WordPress Updates Using FTP/FTPS or SSH
Introduction When working with WordPress in a more secure environment where websites are not entirel ...
- Maven系列--setting.xml 配置详解
文件存放位置 全局配置: ${M2_HOME}/conf/settings.xml 用户配置: ${user.home}/.m2/settings.xml note:用户配置优先于全局配置.${use ...