网页打印格式设置总结

CSS打印样式技巧

最新推荐文章于 2019-02-27 10:54:09 发布

最新推荐文章于 2019-02-27 10:54:09 发布 · 552 阅读

文章标签：

7 篇文章

订阅专栏

本文介绍如何使用CSS控制网页打印效果，包括添加分页符、统一浏览器显示效果、设置A4纸张打印宽度、修饰表格样式及控制打印内容的可见性。

1.分页符的添加

.page_break{
	page-break-after:always;
}

分页的时候加上：<div class="page_break"></div>

2.为使各个浏览器显示效果尽量一致，加上

*{
	margin:0;
	padding:0;
}

3.A4纵向打印，浏览器显示和打印效果相差不大，设置body的宽度

body{
	width:640px;
	font-size:12px;
}

4.css擅长样式的控制，table善于格式的显示。css修饰table

参考文章：http://www.w3schools.com/css/css_table.asp

table添加边框

table{
	border-collapse:collapse;
}
table, th, td{
	border:1px solid #000000;
}

如果一个页面有多个table，这个table和其他table格式略有不同，可以使用下面的方法

<div id="t1">
  <table>
    <tr>
      <th scope="col">&nbsp;</th>
    </tr>
  </table>
</div>

css中，控制不同的格式

#t1 table{
	width:640px;
}
#t1 table,#t1 th,#t1 td{
	text-align:center;
}

5.控制打印时是否显示

@media print{<!--控制哪些打印，哪些不打印的样式-->            
  .print   {display:block;}      
  .notPrint {display:none;}      
}

我们在html中引入css： <link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />

media="screen"，也可以时media="print"，分别代表控制浏览器里面的格式，或者打印时的格式，如果没有写media属性，则表示css既控制浏览器显示，有控制打印显示，

所以上面的css就是单独控制打印的

-- 文字间距行间距

.space{
	word-spacing:20px;
	letter-spacing:20px;
	line-height:60px;
}

--EOF--