简易详细介绍CSS设定复印网页页面的方式及css里

日期:2021-01-20 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

在许多是情况下常常要复印网页页面中的某1一部分,而并不是所有网页页面,因此告知复印机要复印的一部分,应用css开展1下设定是1个较为好的方法,先看1段编码:

拷贝编码
编码以下:

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

以上两行编码是引进外界css款式表,必须非常现实主义的是media特性值各自是screen和print,用来要求css款式表要服务的目标,假如特性值是media,则表明是以便在显示屏操纵网页页面的显示信息,假如特性值是print,则表明css编码是用于操纵必须复印的元素的款式的。
掩藏不必须复印的网页页面元素:
应用操纵复印的css掩藏不必须复印的网页页面元素便可,那末点一下复印,挨打印的仅有复印款式表操纵下沒有被掩藏的元素。
编码以下:

拷贝编码
编码以下:

/* 掩藏不复印项 start */
h1 span{
display:none;
}
#sidebar{
display:none;
}
/* 掩藏不复印项 end */

以上编码只是1个简易的演试,网页页面中的有关元素将不容易挨打印。
点一下开展复印:

拷贝编码
编码以下:

<input type="button" value="点一下复印" onclick="window.print()"/>

点一下以上按钮便可以完成复印实际效果。
css里media的应用
大家在网页页面里引入外界的css文档时,一般是用以下的编码:

拷贝编码
编码以下:

<link rel="stylesheet" type="text/css" href="mycss.css">

具体上,上面的link目标里,大家是省略了1个叫“media”的特性,这个特性特定款式表标准用于特定的机器设备种类。它有以下值能用:
all-- 用于全部机器设备种类
aural-- 用于视频语音和歌曲生成器
braille-- 用于触觉意见反馈机器设备
embossed-- 用于凸点标识符(盲文)包装印刷机器设备
handheld-- 用于小型或手提机器设备
print-- 用于复印机
projection-- 用于投射图象,如幻灯片
screen-- 用于测算机显示信息器
tty-- 用于应用固定不动间隔标识符格的机器设备。如电传打字机和终端设备
tv-- 用于电视机类机器设备
这么多的值,其实不是每一个都可以用,由于访问器厂商并沒有所有完成它们。
在IE里边,能用的值有all,print,screen3个。上面的编码里,大家沒有应用“media”,具体上IE或别的访问器是用了“all”这个值。“screen”,用于显示信息器,也便是大家1般看到的实际效果。“print”,用于复印的实际效果。
也便是说,大家沒有特定“media”,那末大家看到的实际效果和复印的实际效果,它们用的全是一样的css文档。假如大家特定了1个“screen”,又特定了1个“print”,那末在复印时就会用“print”特定的css来3D渲染网页页面并复印。比如1个网页页面里有以下编码:

拷贝编码
编码以下:

<link rel="stylesheet" type="text/css" media="screen" href="mycss.css">
<link rel="stylesheet" type="text/css" media="print" href="myprintcss.css">

那就表明,大家根据IE看到的网页页面,用到的css文档是mycss.css,而根据IE复印时用到的css文档则是myprintcss.css。想起甚么了吗?对,大家能够根据print的设定,来让网页页面上的1些不必须复印的內容掩藏起来,例如,复印按钮。具体上,media还能够这样应用:

拷贝编码
编码以下:

<style media=print>
//这里界定你要复印时用到的css类
</style>

或这样应用:

拷贝编码
编码以下:

<style>
@media print {
//这里界定你要复印时用到的css类
}
</style>

上一篇:CSS中的line 返回下一篇:没有了