如何⽤css写打印样式
打印样式
打印样式就是针对⽹页被打印时设置给⽂档的样式，由于打印时是显⽰在纸上，跟屏幕还是有区别的，对于有打印需求的⽹页往往需要设置专门的打印样式来适配页⾯。
@media print
声明⾃⼰是打印样式有两种⽅法：在css⽂件中可以使⽤@media print，在html⽂件的style标签中写上media=print属性:
<style media="print">...</style>
当写有打印需求的页⾯时，最好将css分成两类，⼀类是@media screen ，另⼀类是@media print ，如果有两种media通⽤的css，在设置print 的样式时，因为通⽤样式的层叠，可能会导致样式失效，这时需要采⽤!important来确保浏览器采⽤print下⾯的样式，举个例⼦:
nav.nav{
css文件怎么写color: red;
display: block;
}
@media print{
.nav{
display:none!important;
}
}
上⾯的例⼦中去掉!important时，由于通⽤css nav.nav的权重更⾼，会导致print中的样式⽆效，。所以，或者将screen和print样式完全分开。或者当打印样式⽆效是使⽤!important.
2
@page
@page可以控制打印页⾯的边距⼤⼩，就像word中那样:
@page {
margin: 1cm;
}
-webkit-print-color-adjust
-webkit-print-color-adjust是⼀个在浏览器中强制打印背景颜⾊和字体颜⾊的css属性，当打印出来的某些元素的背景颜⾊没有被显⽰时，可以使⽤-webkit-print-color-adjust:exact
bootstrap对打印样式的⽀持
参考，bootstrap对打印样式主要提供了⼏个class，⽅便我们在页⾯被打印时显⽰或隐藏⼀些元素：
class浏览器打印机
.visible-print-block
隐藏可见
.visible-print-inline
.visible-print-inline-block
.hidden-print可见隐藏
class浏览器打印机
### bootStrap留下的坑
如果你的项⽬使⽤了bootstrap，打印页⾯上的A标签可能也会显⽰出来，如果这不是你想要的，可以看

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。