189 8069 5689

利用css样式打印,打印样式设计

CSS打印样式。需要让水印背景重复打印,水印图片要怎么设置才能打印出来?

跟css没关系,打印网页时打印机将忽略所有网页里面的背景图,只有以img...形式插入的图片才会打印出来!

鼓楼网站制作公司哪家好,找成都创新互联公司!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作,到程序开发,运营维护。成都创新互联公司从2013年创立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司

(你找下页面设置里面有没有能勾选打印背景图的参数,这个我不确定)

怎样使用 css 的@media print控制打印

HTML HEAD TITLE New Document /TITLE /HEAD

BODY style media="print"//这表示是在打印时的样式 .noprint { display: none;font-size:19px;COLOR: blue; } /style

style media="screen" //这表示是在屏幕显示时的样工 .print {font-size:19px;COLOR: red; } /style

body span class="print" 打印部分/spanbrbrBr span class="noprint" 不打印,但可以看部分/span /BODY /HTML

==================================================================== @media版本:CSS2  兼容性:IE5+

语法:

@media sMedia { sRules }

说明:

sMedia :  指定设备名称。请参阅附录:设备类型 sRules :  样式表定义

指定样式表规则用于指定的设备类型。请参阅link对象的media属性(特性)。

示例:

// 设置显示器用字体尺寸 @media screen { BODY {font-size:12pt; } }

// 设置打印机用字体尺寸 @media print { @import "print.css" BODY {font-size:8pt;} }

=====================================================================

Media Types 设备类型

Media Type 设备类型 CSS Version 版本 Compatibility 兼容性 Description 简介 all CSS2 IE4+ 用于所有设备类型 aural CSS2 NONE 用于语音和音乐合成器 braille CSS2 NONE 用于触觉反馈设备 embossed CSS2 NONE 用于凸点字符(盲文)印刷设备 handheld CSS2 NONE 用于小型或手提设备 print CSS2 IE4+ 用于打印机 projection CSS2 NONE 用于投影图像,如幻灯片 screen CSS2 IE4+ 用于计算机显示器 tty CSS2 NONE 用于使用固定间距字符格的设备。如电传打字机和终端 tv CSS2 NONE 用于电视类设备

如何使用CSS控制网页打印页面格式?

由于客户要求,打印时需把打印的按钮去掉。这个时候就用到了控制打印的样式表了。 link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” / 正因为xhtml和css是分离的,所以我们可以在print.css里自由书写需要打印显示的内容和表现形式。那么这也要求我们在书写xhtml的时候更 多考虑到打印显示效果的需求,良好的扩展标记和结构嵌套,使得我们轻松的使用display:none将内容设置为不显示。然后就是去书写 print.css内容的时候了,你象设置word一样去写你想打印的页面吧。 后来想了想,其实单独写一个css增加了请求次数,就想到了@media print{}的作用,代码如下 @media print{ .printdesc { right: 0; width: 685px; height: 69px; background-color: #FFFFFF; float:left; overflow:auto; border:0px; } .text{ float:right; width: 688px; margin-top:20px; } .printlink{ height:0px; display:none; width:0px; z-index:-10; } .printlink a{ display:none; } } 后来想到如果打印页面的某一部分,可以使用iframe来进行操作,现在的打印页面的局部内容基本上就是使用iframe进行处理。

CSS 打印

2017-01-31

本文主要讲解如何使用 CSS 控制打印样式。

使用 CSS 可以控制文档如何正确的显示在不同的媒介 (Media) 上。其中分页媒介 (Paged Media) ,不同于连续媒介 (Continuous Media),它可以控制文档内容,将其分隔至一个或多个不相关联的页面 (如:书、幻灯片)。

页面 (Page Sheet) 是物理介质 (如:纸张) 的表面,它包含可打印区域 (Printable Areas) 和不可打印区域 (Non-printable Areas)。用户代理可以调整文档内容的格式,使其显示在可打印区域。

页面盒子 (Page Box) 是一个由长边 (Long Edge) 和短边 (Short Edge) 组成的矩形。长边的方向决定了页面朝向 (Page Orientation),长边是垂直方向,则页面朝向为纵向 (Portrait Orientation),反之为横向 (Landscape Orientation)。

CSS 打印无法指定文档是否为双面打印 (Duplex Printing),是否双面打印应该通过用户代理指定。不管是否双面打印,CSS 打印总是包含左页和右页 (分别通过 :left , :right 指定) 。(或者说 CSS 打印假定所有文档是双面打印)

和 CSS 盒子模型一样,页面盒子模型由外边距 (margin)、边框 (border)、内边距 (padding) 和 内容区域 (content area) 构成。

其中内容区域和外边距有着特殊的功能:

页面进度 (Page Progression)方向 是文档被分隔后的页面的排列方向。比如:现代中文页面进度多是从左至右;而古代中文的页面进度则相反。可以通过设置根元素 (root element) 的 direction 和 writing-mode 属性来改变页面进度。

页面的“第一页”是左页还是右页,可以由页面进度的方向决定,当页面进度方向为从左至右时,第一页是右页;反之为左页。(事实上也可以通过设置根元素的 break-before 属性来强制改变第一页是左页还是右页)

在 CSS 中使用 @media print

在 CSS 中使用 @import

在 HTML 中使用 link 标签

在 @media print 或 my-print-style.css 中,可以自由的修改大部分样式。

使用打印媒介查询可以自定义很多样式,当希望改变页面大小、边距等,就需要用到 @page 了。页面上下文 (Page Context) 中仅支持部分 CSS 属性,支持的属性有: margin 、 size 、 marks 、 bleed 以及页面外边距盒子等,不支持的属性将会被忽略。

注:常见浏览器都不支持该属性,推荐使用 Prince

页面的外边距被分成了 16 个页面外边距盒子。每个外边距盒子都有自己的外边距、边框、内边距和内容区域。页面外边距盒子用于创建页眉和页脚,页眉和页脚是页面的一部分,用于补充信息,如页码或标题。

页面外边距盒子需要在 @page 下使用,使用起来和伪类类似,也包含 content 属性。

margin 系列属性( margin-top 、 margin-right 、 margin-bottom 、 margin-left 和 margin )用于指定页面外边距大小。

在 CSS2.1 中,页面上下文中只支持 margin 系列属性。而且因为 CSS2.1 的页面上下文中没有字体的概念, margin 系列属性的值的单位不支持 em 和 ex 。

size 属性支持 auto 、 landscape 、 portrait 、 length{1,2} 和 page-size 。

页面上下文也支持使用伪类,其中支持的伪类有: :left 、 :right 、 :first 和 :blank 。

需要双面打印时,通常需要将左页和右页设置不同的样式(如页边距、页码位置)。这时左页和右页可以分别用 :left 和 :right 表示。再次强调, 通过 :left 和 :right 设置左右页面不同样式,并不代表用户代理会将页面双面打印

伪类 :first 用于匹配到文档的第一页。

伪类 :blank 用于匹配文档的空白页。

注意,空白页既可能是左页,又可能是右页,设置左页或右页的样式也会显示在空白页上,如果不希望显示在空白页上,可以清除这些样式。

用于控制元素之前、之后或之中是否分页, 没有生成盒子的块元素不会生效 。

page-break-before 、 page-break-after 属性支持 auto 、 always 、 avoid 、 left 、 right 、 recto 和 verso 。

page-break-inside 属性仅支持 auto 和 avoid ,表示在元素内允许或禁止分页。

orphans 和 windows 用于指定在页面的底部或顶部,元素中允许剩余的最少行数,默认为 2 行。

示例:

参考链接:


分享名称:利用css样式打印,打印样式设计
网页路径:http://jkwzsj.com/article/dsgiejj.html

其他资讯