发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
一、添加打印样式 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浏览器菜单栏“文件”中有“打印预览”,可以通过这打印预览来做测试。
来自: 昵称10504424 > 《工作》
0条评论
发表
请遵守用户 评论公约
10个CSS简写技巧让你永远受用【转】 - - JavaEye技术网站
10个CSS简写技巧让你永远受用【转】 - - JavaEye技术网站CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化。今天,暴风彬彬整理了一些CSS简写技巧,它们其实是CSS最常用的写法,但是太多...
CSS基础语法和CSS经常用到的知识点总结
CSS前叙
a. style标签或者link标签或者style属性这几个都是写正确b. 保证css代码和html代码产生关联,产生关联的方法有多种(id<==>#) 学习到底有多少方法可以关联html标签c. 告诉浏览器要把html修饰成...
「学习笔记」CSS基础
<head><style type="text/CSS"> 选择器(选择的标签) { 属性1: 属性值1; 属性2: 属性值2; ...
CSS快速入门
优先级:行内样式 >id选择器 >类选择器 >元素选择器 >通配符选择器元素选择器(标签选择器)最常见的 CSS 选择器是元素选择器...
CSS样式更改篇——背景Background
<div style=''background-position:center''></div>center 中间top 顶部bottom 底部right 右边left 左边还可以使用百分比来设置定位:<div style=''background...
有利于SEO的DIV+CSS的命名规则收集
有利于SEO的DIV+CSS的命名规则收集一、CSS文件及样式命名 1、CSS文件命名规范 全局样式:global.css;想了解@import语法的详细说明,可以看这里《centricle''s css filter chart》 十八、CSS h...
1 x证书Web前端开发初级理论考试试卷三(1)
A、animation-name.B、animation-duration.C、animation-timing-function.下述有关 css 属性 position 的属性值的描述,说法正确的是?D、absolute:生成绝对定位的元素,相对于 static 定位以外的第一...
代码学习笔记33【页内插入样式应用】
【css样式表的用法】2、css样式表的“行内插入样式”,就是在html代码的某个(标签)中插入“css样式”,把“css样式”作为html代码某个...
微信扫码,在手机上查看选中内容