打印样式

打印样式就是针对网页被打印时设置给文档的样式，由于打印时是显示在纸上，跟屏幕还是有区别的，对于有打印需求的网页往往需要设置专门的打印样式来适配页面。

@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{

    color: red;

    display: block;

}

@media print{

    .nav{

       display:none!important;

   }

}

上面的例子中去掉!important时，由于通用cssnav.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对打印样式的支持

参考bootcss网站的打印类，bootstrap对打印样式主要提供了几个class，方便我们在页面被打印时显示或隐藏一些元素：

class 浏览器 打印机
.visible-print-block

.visible-print-inline

.visible-print-inline-block 		隐藏 可见
.hidden-print 可见 隐藏

### bootStrap留下的坑

如果你的项目使用了bootstrap,打印页面上的A标签可能也会显示出来，如果这不是你想要的，可以看这里

如何用css写打印样式的更多相关文章

  1. css 写打印样式问题

      (1)背景颜色打印不出来问题解决方法 background样式要加上 !important: color样式要加上 !important: -webkit-print-color-adjust: ...

  2. [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.

    最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引 ...

  3. jquery 利用CSS 控制打印样式

    一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: <link rel="stylesheet" href="cs ...

  4. JQuery巧妙利用CSS操作打印样式

    一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: <link rel="stylesheet" href="cs ...

  5. 如何用css写一个带斜切角、有边框又有内外阴影的按钮呢？

    如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no ...

  6. 网页中如何用 CSS 设置打印分页符

    Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. <p>第 1 页</p> ...

  7. 纯CSS写九宫格样式，高宽自适应正方形

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  8. 小三角图标如何用CSS写

    上三角▲     1 width: 0; 2 height: 0; 3 line-height: 0; 4 font-size: 0; 5 border-width: 10px; 6 border-s ...

  9. web的各种前端打印方法之CSS控制网页打印样式

    来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人 ...

随机推荐

  1. SSM框架开发web项目系列（三） MyBatis之resultMap及关联映射

    前言 在上篇MyBatis基础篇中我们独立使用MyBatis构建了一个简单的数据库访问程序,可以实现单表的基本增删改查等操作,通过该实例我们可以初步了解MyBatis操作数据库需要的一些组成部分(配置 ...

  2. Linux定义变量的脚本

    现有两段基本一样的代码,只是变量进行改变,其他都没有变化,但是执行过程中出现了不一样的结果 代码一: vi back.sh #backup import file,such as /etc/rc.lo ...

  3. Java开发小技巧（四）：配置文件敏感信息处理

    前言 不知道在上一篇文章中你有没有发现,jdbc.properties中的数据库密码配置是这样写的: jdbc.password=5EF28C5A9A0CE86C2D231A526ED5B388 其实 ...

  4. 495A - Digital Counter

    A. Digital Counter time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  5. 家居环境监測系统设计（PC上位机版）（手机APP版待定）

    下面是我的毕业设计:家居环境监測系统设计(PC上位机临时版.手机app版待定).本系统採用STC12C5A60S2单片机.结合传感器.分别对空气湿度.空气温度.气压.海拔.进水温度.出水温度.光照强度 ...

  6. javaweb：推断当前请求是否为移动设备訪问

    这段时间都是在做pc端的业务.结果经理找到我说,可能要做移动端的应用,后台逻辑还是用我写的逻辑.可是须要修改一些,看看怎么处理. 因为移动端和pc端还是略微有些差别的,我认为最好是在一个地儿统一推断, ...

  7. canvas绘制多边形

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 人工智能背景下的Office 365现状和发展趋势

    作者:陈希章 发表于 2017年7月31日 引子 谈论人工智能是让人兴奋的,因为它具有让人兴奋的两大特征 -- 每个人都似乎知道一点并且以知道一点为荣,但又好像没多少人能真正讲的明白.毫无疑问,我也仅 ...

  9. 【SqlServer】【问题收集】必须声明标量变量

    1   问题概述 在DAL层,通过标量给变量赋值时,出现如下异常 我们来看看在数据访问层的SQL语句: //根据EmployeeName条件获取数据 public DataTable GetEmplo ...

  10. python 列表解析

    列表解析,主要用于动态创建列表 本篇主要说一下,lambda.map().和filter()同列表解析语句之间结合的用法 列表解析的基本语法为:[expr for iter_var in iterab ...