打印样式

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

@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. Maven快速指南

    Maven是Apache基金会提供的项目管理工具, 其采用项目对象模型(Project Object Model, POM)描述项目配置, 并使用生命周期模型管理构建过程中各种操作. POM mave ...

  2. SpringData 基于SpringBoot快速入门

    SpringData 基于SpringBoot快速入门 本章通过学习SpringData 和SpringBoot 相关知识将面向服务架构(SOA)的单点登录系统(SSO)需要的代码实现.这样可以从实战 ...

  3. js 继承的简单易懂小例子

    js 继承 今天主要说原型链继承.构造继承.组合继承三种常用继承方式,分享一下我的理解. 原型链继承例子1 //原型继承function A(name){ this.name = name;}func ...

  4. 转载 Mysql安装过程

    目录 一.概述 二.MySQL安装 三.安装成功验证 四.NavicatforMySQL下载及使用 一.概述 MySQL版本:5.7.17 下载地址:http://rj.baidu.com/soft/ ...

  5. UVA 12009 - Avaricious Maryanna(数论)

    UVA 12009 - Avaricious Maryanna 题目链接 题意:给定一个n.求出n个数位组成的数字x,x^2的前面|x|位为x 思路:自己先暴力打了前几组数据,发现除了1中有0和1以外 ...

  6. mov指令具体解释

    MOV指令能够在CPU内或CPU和存储器之间传送字或字节.它传送的信息能够从寄存器到寄存器,马上数到寄存器,马上数到存储单元,从存储单元到寄存器.从寄存器到存储单元,从寄存器或存储单元到除CS外的段寄 ...

  7. UVA 540(队列)

    Description  Team Queue  Queues and Priority Queues are data structures which are known to most comp ...

  8. 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记38 Unwind Segue反向过渡

    之前我们接触过了segue,这是IOS中最主要的传递方式,今天来解说一下怎样进行反向的segue. 反向过渡的使用前提是发出过渡的MVC必须是由目标MVC直接或者间接正向过渡来的.反向过渡是唯一不会创 ...

  9. [源码]解析 SynchronousQueue 上界,下界.. 数据保存和数据传递. 堵塞队列. 有无频繁await?

     简析SynchronousQueue.LinkedBlockingQueue(两个locker,更快),ArrayBlockingQueue(一个locker,读写都竞争)     三者都是bloc ...

  10. ElasticSearch和ElasticSearch Head环境搭建和数据模拟

    首先elasticsearch-6.0.0\bin目录下运行elasticsearch服务 修改elasticsearch-6.0.0\elasticsearch.yml文件 在文件最后加入下面代码, ...