我们如何在打印预览中添加 css？

Question

代码：<style>  .center {    float: left;    text-align: center;  }  .center h3 {    color: #000;    font-weight: 600;  }  .left {    font-size: 14px;    float: left;    width: 30%;    color: #000;  }  .right {    font-size: 14px;    float: right;    width: 70%;    color: #000;  }  #bot {    margin-bottom: 2em;  }  #left {    font-size: 14px;    float: left;    width: 42%;    color: #000;  }  #right {    font-size: 14px;    float: right;    width: 58%;    color: #000;  }  table, td, th {      border: 1px solid #000;    text-align: left;    font-size: 14px;    font-weight: inherit;  }  table {    border-collapse: collapse;    width: 100%;  }  th, td {    padding: 15px;  }  #pp {    font-size:14px;    color:#000;  }  .table-responsive {      overflow-x: hidden!important;  }  .dataTables_wrapper .dataTables_paginate .paginate_button {    padding:0px!important;  }  </style><div class="col-md-12">  <a href="javascript:void(0)" class="btn btn-success" style="float: right;" onclick='printDiv();'>Print Sheet</a></div><div id="print_wrapp">  <div class="col-md-12" id="bot">    <div class="col-md-2">      <img src="<?php echo base_url(); ?>uploads/images/Lingayas Vidyapeeth Logo.png" class="img-responsive" style="width: 110px;">    </div>    <div class="col-md-10">      <div class="center">        <h3>          Lingaya's Vidyapeeth, Fraidabad<br>          Award Sheet<br>          End Semester Examination<br>          (May-June, 2019)        </h3>      </div>    </div>  </div>在这段代码中，我只是<div id="print_wrapp">通过单击功能在 div 中运行打印内容，即printDiv它可以正常工作，但问题是打印预览 css 没有正确显示 div 内容，下面提到了图像：我的原始页面如下所示： 那么，我该如何解决这个问题呢？请帮我。

Answer 1

您也可以使用 media='screen,print' 在打印和屏幕上应用样式表

<link ../bootstrap.min.css' rel='stylesheet' media='screen,print'>

或者

<link ../bootstrap.min.css' rel='stylesheet' media='all'>

Answer 2

当我们想在打印页面时应用一些样式时，我们需要使用@media print 来应用样式。然后只有样式将适用于 windows 打印功能。

样式.css

@media print

{

    .center {

        float: left;

        text-align: center;

      }

      .center h3 {

        color: #000;

        font-weight: 600;

      }

      .left {

        font-size: 14px;

        float: left;

        width: 30%;

        color: #000;

      }

      .right {

        font-size: 14px;

        float: right;

        width: 70%;

        color: #000;

      }

}

然后将要打印页面的css文件链接到样式。

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

在按钮单击时调用打印函数

<button onclick="printPage()" class="center">Print</button>

<script>

    function printPage()

    {

        print();

    }

</script>