欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

【01期】网页打印样式CSS的技巧和要点 print 打印 有大用 有大大用

星期日, 2019-04-07 05:56 — adminshiping1 


image.png

 打印一行, table 里的 tr 涉及到分页时,各个 td 高度不一样
 
 此时 在 td 加上 vertical-align: top; 就可以了 如下的代码



#printbody td{
    vertical-align: top;
}

   


   

【01期】网页打印样式CSS的技巧和要点

96 
田小兔_ 关注            
 0.1 2018.02.04 00:16* 字数 1019 阅读 598评论 3喜欢 1赞赏 1            

网页打印样式CSS的技巧和要点

不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。
我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果：

  • 媒体查询（media query）

  • 打印颜色清晰明了

  • 隐藏不相关内容

  • 打印边距设置

  • 打印不被跨页

  • 添加分页符

  • 图片和列表设置

  • 细节小问题

针对打印的样式，而不是屏幕显示样式

1、首先，我们需要使用媒体查询（media query）针对打印样式设置。
@media print { }
           

重新针对打印写CSS样式是没有必要的，我们只需要针对差异设置打印的样式覆盖掉之前的默认样式。

大多数的浏览器会自动根据打印更改颜色，以节省打印原料，但是我们还是尽可能的手工设置一下。

2、为了达到最佳效果，使颜色清晰明了，我们至少需要包含一下基本的打印样式。
@media print {
body { color: #000; background: #fff; }
}
           
3、对于打印，大多数情况下我们不需要打印整个页面，只需要打印一个简洁的能够突出需要信息的页面，那么我们将不相关的部分隐藏掉。

实列一：隐藏导航条、背景图片

/* Default styles */
h1 {
   color: #fff;
   background: url(banner.jpg);
}
 
@media print {
   h1 {
      color: #000;
      background: none;
   }
 
   nav, aside {
      display: none;
   }
}
           

实列二：media 属性针对两种不同媒介类型的两种不同的样式（计算机屏幕和打印）

<html>
<head>
/*网页显示颜色 */
<style type="text/css">
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>

/*打印显示颜色 */
<style type="text/css" media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
</head>

<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
           

media 属性用于为不同的媒介类型规定不同的样式。
如需在一个 style 元素中定义一个以上的媒介类型，请使用逗号分隔的列表
例如：<style type="text/css" media="screen,projection">）            

4、为了保证打印样式有用，写CSS样式使打印的内容距离纸张边缘，看起来更好，需要使用 @page 这个语法：
@media print {
  @page {
      margin: 2cm;
   }
}
           
5、为了保证不被跨页打印

如一个标题和内容在页面底部被分开：

h2, h3 { page-break-after: avoid; }
           
6、给打印添加分页符：两种被广泛认可的属性是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; }
           
7、另一中情况是要防止图片过宽而超出纸张边缘：
img {
   max-width: 100% !important;
}
           
8、确保 articles 文章标签的内容，在新的一页开始：
article {
   page-break-before: always;
}
           
9、注意列表和图片不被分开在不同的页
ul, img {
   page-break-inside: avoid;
}
           
10、注意细节问题

1.为屏幕显示和打印分别准备一个css文件，如下所示：
用于屏幕显示的css：

<link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />
           

用于打印的css：

<link rel="stylesheet" href="css/printstylesheet.css" media="print" />
           

  1. 如果需要在打印内容中出现图片，请在HTML代码中加入；

  2. 打印设置使用的是物理单位，所以尺寸最好不要用像素(px)，可以用pt也可以用cm；

  3. 隐藏不需要的或是次要的内容。display：none；

  4. 尽可能的在HTML代码中做好内容重要的先后次序，这样在打印样式中可以节省不少的麻烦；

  5. 打印与网页不一样，打印一定要留下白边，单位用英寸(in)；

  6. 要确保页面上的所有文本以黑色打印，就用通配选择器（见第54页）和!important来创建把每个标签都格式化为黑色文本的单个样式：

*{ color: ##000# !important }
       


小礼物走一走，来简书关注我

赞赏支持

 日记本    
© 著作权归作者所有
96关注田小兔_         

写了 1019 字，被 2 人关注，获得了 1 个喜欢

喜欢            
 
1            
   更多分享    



来自 https://www.jianshu.com/p/2748d0fdad0e



CSS打印样式研究与总结（一）


CSS打印样式研究与总结（一）

2018年05月02日 15:46:03 ruanhongbiao 阅读数：779                

在做一些后台管理系统的时候，经常会遇到需要打印的表格，这就会用到css的打印样式，但是在调用浏览器自带打印功能时有很多坑，而且各个浏览器的打印设置都不一样，一般js打印的方法主要有window.print( )和jquery.jqprint两种，第一种是js原生的打印方法，第二种是一个比较流行的一个jquery打印插件，下面主要来说说打印的样式问题。

一般给页面设置打印样式有两种方式，一种是设置样式只应用于打印，写在页面里的style里，如：

  1. /* 样式将只应用于打印 */
                            

  3. @media print {
    
                            

  4. 
                            
  5. }
               

还有一种是引用外部的css文件，设置link的 media="print" 属性来指定此样式专用于打印，如：                

<link type="text/css" rel="stylesheet" href="css/print.css" media="print">
               
为您的网站重塑整个CSS是没有必要的，整体而言，由打印继承默认样式;仅对不同的需要加以限定。为了节省打印时的碳粉，大多数浏览器会自动反转颜色。为了达到最佳效果，应使色彩变化明显：
  1. /*白纸黑字*/
                            
  2. @media print {
    
                            

  3. 
                            
  4. body {


  6. color: #000;


  8. background: #fff;


  10. }
    
                            

  11. 
                            
  12. }
               

我们不是在创建整个网页的截图,只是为了展现一个设计良好,可读性强的网站:                

  1. /*去除背景图片, 节约笔墨 */
                            
  2. h1 {


  4. color: #fff;


  6. background: url(banner.jpg);


  8. }
    
                            

  9. 
                            
  10. @media print {
    
                            

  11. 
                            
  12. h1 {


  14. color: #000;


  16. background: none;


  18. }
    
                            

  19. 
                            
  20. nav, aside {


  22. display: none;


  24. }
    
                            

  25. 
                            
  26. }
    
                            

  27. 
                            
               

为了使打印机更具效率,应只显示主体内容,去除页眉页脚导航栏                

  1. @media print {
    
                            

  2. 
                            
  3. h1 {


  5. color: #000;


  7. background: none;


  9. }
    
                            

  10. 
                            
  11. nav, aside {


  13. display: none;


  15. }
    
                            

  16. 
                            
  17. body, article {


  19. width: 100%;


  21. margin: 0;


  23. padding: 0;


  25. }
    
                            

  26. 
                            
  27. @page {
    
                            

  28. 
                            
  29. margin: 2cm;


  31. }
    
                            

  32. 
                            
  33. }
    
                            

  34. 
                            
               

链接的处理

在打印机上链接是看不到的,应对超链接进行扩展                

  1. /*在超链接后面添加带<http://XXX>的完整地址*/
    
                            

  2. 
                            
  3. @media print {
    
                            

  4. 
                            
  5. article a {


  7. font-weight: bolder;


  9. text-decoration: none;


  11. }
    
                            

  12. 
                            
  13. article a[href^=http]:after {


  15. content:" <" attr(href) "> ";


  17. }
    
                            

  18. 
                            
  19. }
               

显示效果可能是这样的                


                

               

控制打印设置选项


               

该@page规则允许您指定页面的各个方面。例如，你将要指定页面的尺寸。页边 距,页眉页脚等都是非常重要的。[很多浏览器均己支持]                

               

@PAGE规则纸张大小设置

通过下面这条CSS您可以设置纸张大小,5.5英寸宽,8.5英寸高.                

  1. @page {
    
                            

  2. 
                            
  3. size: 5.5in 8.5in;


  5. }
               

你还可以通过别名控制纸张大小,如"A4"或“legal.”                

  1. @page {
    
                            

  2. 
                            
  3. size: A4;


  5. }
               

你还可以控制打印方向，　portrait： 纵向打印地,  landscape: 横向                

  1. @page {
    
                            

  2. 
                            
  3. size: A4 landscape;


  5. }
               

ＰＡＧＥ模型　The Page Model

在分页媒体格式模型中，文档被转移到一个或多个页面框。该页框是映射到一个矩形平面。这大致类似于css盒子模型。
注*　支持浏览器较少

               

@page { width: 50em; }
               

PAGE边距模型　 Page-Margin Boxes

在进一步讨论之前，我们应该了解的页面的盒子模型，因为它的行为跟如何在屏幕上的工作有些不同。
页面模型定义了页面区域，然后划分了16个周边缘盒。可以控制页区域的大小和页区域的边缘和页面本身的端部之间的余量的尺寸。

               


               

左右页边距
  1. @page :left {
    
                            

  2. 
                            
  3. margin-left: 30cm;


  5. }
  6. @page :right {
    
                            

  7. 
                            
  8. margin-left: 4cm;


  10. }
               
下面的ＣＳＳ将在底部左边显示标题，在右下角的网页计数器，并在右上角显示一章的标题。
  1. @page:right{
    
                            

  2. 
                            
  3. @bottom-left {
    
                            

  4. 
                            
  5. margin: 10pt 0 30pt 0;


  7. border-top: .25pt solid #666;


  9. content: "Our Cats";


  11. font-size: 9pt;


  13. color: #333;


  15. }
  16. @bottom-right {
    
                            

  17. 
                            
  18. margin: 10pt 0 30pt 0;


  20. border-top: .25pt solid #666;


  22. content: counter(page);


  24. font-size: 9pt;


  26. }
    
                            

  27. 
                            
  28. @top-right {
    
                            

  29. 
                            
  30. content:  string(doctitle);


  32. margin: 30pt 0 10pt 0;


  34. font-size: 9pt;


  36. color: #333;


  38. }
    
                            

  39. 
                            
  40. }
               
该@page规则允许您指定页面的各个方面。例如，你将要指定页面的尺寸。页边 距,页眉页脚等都是非常重要的。[很多浏览器均己支持]                
显示效果如下：
               


               

注* 此文整理自:Tips And Tricks For Print Style Sheets　和　Designing For Print With CSS　和　css3 page 规范                

http://ourjs.com/detail/54d1ef3e232227083e000026
               

注* 此文整理自:Tips And Tricks For Print Style Sheets　和　Designing For Print With CSS　和　css3 page 规范                



CSS打印样式研究与总结（一）

2018年05月02日 15:46:03  阅读数 1333

在做一些后台管理系统的时候，经常会遇到需要打印的表格，这就会用到css的打印样式，但是在调用浏览器自带打印功能时有很多坑，而且各个浏览器的打印设置都不一样，一般js打印的方法主要有window.print( )和jquery.jqprint两种，第一种是js原生的打印方法，第二种是一个比较流行的一个jquery打印插件，下面主要来说说打印的样式问题。

一般给页面设置打印样式有两种方式，一种是设置样式只应用于打印，写在页面里的style里，如：

  1. /* 样式将只应用于打印 */
  2. @media print {
  3. }

还有一种是引用外部的css文件，设置link的 media="print" 属性来指定此样式专用于打印，如：

<link type="text/css" rel="stylesheet" href="css/print.css" media="print">
为您的网站重塑整个CSS是没有必要的，整体而言，由打印继承默认样式;仅对不同的需要加以限定。为了节省打印时的碳粉，大多数浏览器会自动反转颜色。为了达到最佳效果，应使色彩变化明显：
  1. /*白纸黑字*/
  2. @media print {
  3. body {
  4. color: #000;
  5. background: #fff;
  6. }
  7. }

我们不是在创建整个网页的截图,只是为了展现一个设计良好,可读性强的网站:

  1. /*去除背景图片, 节约笔墨 */
  2. h1 {
  3. color: #fff;
  4. background: url(banner.jpg);
  5. }
  6. @media print {
  7. h1 {
  8. color: #000;
  9. background: none;
  10. }
  11. nav, aside {
  12. display: none;
  13. }
  14. }

为了使打印机更具效率,应只显示主体内容,去除页眉页脚导航栏

  1. @media print {
  2. h1 {
  3. color: #000;
  4. background: none;
  5. }
  6. nav, aside {
  7. display: none;
  8. }
  9. body, article {
  10. width: 100%;
  11. margin: 0;
  12. padding: 0;
  13. }
  14. @page {
  15. margin: 2cm;
  16. }
  17. }

链接的处理

在打印机上链接是看不到的,应对超链接进行扩展

  1. /*在超链接后面添加带<http://XXX>的完整地址*/
  2. @media print {
  3. article a {
  4. font-weight: bolder;
  5. text-decoration: none;
  6. }
  7. article a[href^=http]:after {
  8. content:" <" attr(href) "> ";
  9. }
  10. }

显示效果可能是这样的


控制打印设置选项


该@page规则允许您指定页面的各个方面。例如，你将要指定页面的尺寸。页边 距,页眉页脚等都是非常重要的。[很多浏览器均己支持]

@PAGE规则纸张大小设置

通过下面这条CSS您可以设置纸张大小,5.5英寸宽,8.5英寸高.

  1. @page {
  2. size: 5.5in 8.5in;
  3. }

你还可以通过别名控制纸张大小,如"A4"或“legal.”

  1. @page {
  2. size: A4;
  3. }

你还可以控制打印方向，　portrait： 纵向打印地,  landscape: 横向

  1. @page {
  2. size: A4 landscape;
  3. }

ＰＡＧＥ模型　The Page Model

在分页媒体格式模型中，文档被转移到一个或多个页面框。该页框是映射到一个矩形平面。这大致类似于css盒子模型。
注*　支持浏览器较少

@page { width: 50em; }

PAGE边距模型　 Page-Margin Boxes

在进一步讨论之前，我们应该了解的页面的盒子模型，因为它的行为跟如何在屏幕上的工作有些不同。
页面模型定义了页面区域，然后划分了16个周边缘盒。可以控制页区域的大小和页区域的边缘和页面本身的端部之间的余量的尺寸。


左右页边距
  1. @page :left {
  2. margin-left: 30cm;
  3. }
  4. @page :right {
  5. margin-left: 4cm;
  6. }
下面的ＣＳＳ将在底部左边显示标题，在右下角的网页计数器，并在右上角显示一章的标题。
  1. @page:right{
  2. @bottom-left {
  3. margin: 10pt 0 30pt 0;
  4. border-top: .25pt solid #666;
  5. content: "Our Cats";
  6. font-size: 9pt;
  7. color: #333;
  8. }
  9. @bottom-right {
  10. margin: 10pt 0 30pt 0;
  11. border-top: .25pt solid #666;
  12. content: counter(page);
  13. font-size: 9pt;
  14. }
  15. @top-right {
  16. content:  string(doctitle);
  17. margin: 30pt 0 10pt 0;
  18. font-size: 9pt;
  19. color: #333;
  20. }
  21. }
该@page规则允许您指定页面的各个方面。例如，你将要指定页面的尺寸。页边 距,页眉页脚等都是非常重要的。[很多浏览器均己支持]
显示效果如下：


注* 此文整理自:Tips And Tricks For Print Style Sheets　和　Designing For Print With CSS　和　css3 page 规范

http://ourjs.com/detail/54d1ef3e232227083e000026


来自  https://blog.csdn.net/qappleh/article/details/80166617

普通分类: 
div+css
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2