我如何在CSS中设置打印html页面的样式

时间:2014-06-30 23:01:02

标签: html css css3

我写这个代码用80mm的纸张打印纸质拷贝的html页面,但这段代码不能正常工作我需要一些帮助才能纠正它

@media print {
    div.invoice{
       background: #FFFFFF;
       width:40%;
       margin-left:30%;
       margin-top: 0px
       }
       div.invoice div{
          background: #FFFFFF;
          color: black;
          margin-left: 1%;
       }
       div.invoice h2{
            font-size: 14px;
       }
       div.invoice h3{
            font-size: 13px;
       }
       div.invoice h4{
            font-size: 12px;
       }
       div.invoice div h2, div.invoice div h3, div.invoice div h4{
       color: black;
       line-height:0.8em;
       margin-top:1px;
       -webkit-margin-before: 0.8em;
       -webkit-margin-after: 0.8em;
          }
      h1, h2, h3, h4{
          -webkit-margin-before: 0.4em;
          -webkit-margin-after: 0.4em;
          }
   }

1 个答案:

答案 0 :(得分:1)

请按照以下步骤操作:

第1步:将 media =" print" 添加到您的样式表链接或示例中:

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

第2步:然后按照以下媒体查询。

@media print 
{
 body { margin: 0; background-image: none; font-size: 12pt; }
}