大多数Web设计师对打印控制还不是很熟悉，他们往往更迷恋像素，而不是打印机。在现实世界中，很多人依赖从网站上打印网页来参考：
在这个数字时代, 在一些特殊的场合，很多人手中还会拿着纸张。Web开发人员可以采取一些措施来弥补打印机和液晶屏之间的差距。

　　为打印机而不是屏幕设计的样式

1
2
3
4
5
/*
样式将只应用于打印 */
@media
print

{
 
 
}

　　注＊ 也可通单独的CSS文件, 设置link的 media="print" 属性来指定此样式专用于打印

1
<link
type="text/<span id="6_nwp" style="width: auto; height: auto; float: none;"><a id="6_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=14&jk=9c3b21adef64e239&k=css&k0=css&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=39e264efad213b9c&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5933%2Ehtml&urlid=0"
target="_blank" mpid="6" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">css</span></a></span>" rel="stylesheet" href="css/print.css" media="print">

　　为您的网站重塑整个CSS是没有必要的，整体而言，由打印继承默认样;仅对不同的需要加以限定。为了节省打印时的碳粉，大多数浏览器会自动反转颜色。为了达到最佳效果，应使色彩变化明显：

1
2
3
4
5
6
7
/*白纸黑字*/
@media
print {
   body
{
      color:
#000;
      background:
#fff;
   }
}

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

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

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

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

　　链接的处理

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

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

　　显示效果可能是这样的

　　控制打印设置选项

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

　　@PAGE规则纸张大小设置

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

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

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

1
2
3
@page
{
  size:
A4;
}

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

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

　　PAGE模型　The Page Model

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

　　注*　支持浏览器较少

1
@page
{ width: 50em; }

　　PAGE边距模型　 Page-Margin Boxes

　　在进一步讨论之前，我们应该了解的页面的盒子模型，因为它的行为跟如何在屏幕上的工作有些不同。

　　页面模型定义了页面区域，然后划分了16个周边缘盒。可以控制页区域的大小和页区域的边缘和页面本身的端部之间的余量的尺寸。

　　左右页边距

1
2
3
4
5
6
7
8
@page
:left {
  margin-left:
30cm;
}
 
 
@page
:right {
  margin-left:
4cm;
}

　　下面的css将在底部左边显示标题，在右下角的网页计数器，并在右上角显示一章的标题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@page:right{
  @bottom-left
{
    margin:
10pt 0 30pt 0;
    border-top:
.25pt solid #666;
    content:
"Our Cats";
    font-size:
9pt;
    color:
#333;
  }
 
 
  @bottom-right
{
    margin:
10pt 0 30pt 0;
    border-top:
.25pt solid #666;
    content:
counter(page);
    font-size:
9pt;
  }
 
 
  @top-right
{
    content: 
string(doctitle);
    margin:
30pt 0 10pt 0;
    font-size:
9pt;
    color:
#333;
  }
}

　　显示效果如下：

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

最新文章

  1. 《简单的自定义DropDatePicker》-- UIPopoverController 和 代理 以及 Block 实现。
  2. Oracle的exp/imp详解
  3. 抢凳子日数据sql
  4. Solr：文本分析
  5. NYOJ题目168房间安排
  6. C#的惰性枚举
  7. java在url传输前更改字符编码
  8. 结合自己的程序对thinkphp模板常量的理解
  9. hexo git配置问题笔记
  10. jad 反编译 jar包
  11. Windows服务创建及安装
  12. 【VS调试】C#读写Windows 7注册表时抛出“不允许所请求的注册表访问权”的解决办法
  13. React 相关资料
  14. IO流程中IO向量iovec
  15. SQL语句学习
  16. Frequent Value
  17. Python-面向对象（二）-Day7
  18. java_GC
  19. eShopOnContainers 看微服务 ②：配置 启动
  20. C#两个引用类的属性、方法 各位早安

热门文章

  1. jsp作为服务端，ajax请求回应
  2. C#利用微软库完成设备网络定位(经纬度-地址)
  3. jsonp
  4. 基于Yahoo网站性能优化的34条军规及自己的见解
  5. struts 文件上传
  6. IIS7 全新管理工具AppCmd.exe的命令使用实例分享
  7. 分享一个延迟加载图片的JS
  8. oracle表分区、表分析及oracle数据泵文件导入导出开心版
  9. Dynamics AX 2012 R2 无法创建类&quot;Excel.Application&quot;的COM对象
  10. JAVA泛型详解2 转载