如何用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{
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写打印样式的更多相关文章
- css 写打印样式问题
(1)背景颜色打印不出来问题解决方法 background样式要加上 !important: color样式要加上 !important: -webkit-print-color-adjust: ...
- [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.
最近在做Lodop打印功能: 思路是: 用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是: 在打印的JS文件中, 引 ...
- jquery 利用CSS 控制打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="cs ...
- JQuery巧妙利用CSS操作打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="cs ...
- 如何用css写一个带斜切角、有边框又有内外阴影的按钮呢?
如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no ...
- 网页中如何用 CSS 设置打印分页符
Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. <p>第 1 页</p> ...
- 纯CSS写九宫格样式,高宽自适应正方形
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- 小三角图标如何用CSS写
上三角▲ 1 width: 0; 2 height: 0; 3 line-height: 0; 4 font-size: 0; 5 border-width: 10px; 6 border-s ...
- web的各种前端打印方法之CSS控制网页打印样式
来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人 ...
随机推荐
- Maven快速指南
Maven是Apache基金会提供的项目管理工具, 其采用项目对象模型(Project Object Model, POM)描述项目配置, 并使用生命周期模型管理构建过程中各种操作. POM mave ...
- SpringData 基于SpringBoot快速入门
SpringData 基于SpringBoot快速入门 本章通过学习SpringData 和SpringBoot 相关知识将面向服务架构(SOA)的单点登录系统(SSO)需要的代码实现.这样可以从实战 ...
- js 继承的简单易懂小例子
js 继承 今天主要说原型链继承.构造继承.组合继承三种常用继承方式,分享一下我的理解. 原型链继承例子1 //原型继承function A(name){ this.name = name;}func ...
- 转载 Mysql安装过程
目录 一.概述 二.MySQL安装 三.安装成功验证 四.NavicatforMySQL下载及使用 一.概述 MySQL版本:5.7.17 下载地址:http://rj.baidu.com/soft/ ...
- UVA 12009 - Avaricious Maryanna(数论)
UVA 12009 - Avaricious Maryanna 题目链接 题意:给定一个n.求出n个数位组成的数字x,x^2的前面|x|位为x 思路:自己先暴力打了前几组数据,发现除了1中有0和1以外 ...
- mov指令具体解释
MOV指令能够在CPU内或CPU和存储器之间传送字或字节.它传送的信息能够从寄存器到寄存器,马上数到寄存器,马上数到存储单元,从存储单元到寄存器.从寄存器到存储单元,从寄存器或存储单元到除CS外的段寄 ...
- UVA 540(队列)
Description Team Queue Queues and Priority Queues are data structures which are known to most comp ...
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记38 Unwind Segue反向过渡
之前我们接触过了segue,这是IOS中最主要的传递方式,今天来解说一下怎样进行反向的segue. 反向过渡的使用前提是发出过渡的MVC必须是由目标MVC直接或者间接正向过渡来的.反向过渡是唯一不会创 ...
- [源码]解析 SynchronousQueue 上界,下界.. 数据保存和数据传递. 堵塞队列. 有无频繁await?
简析SynchronousQueue.LinkedBlockingQueue(两个locker,更快),ArrayBlockingQueue(一个locker,读写都竞争) 三者都是bloc ...
- ElasticSearch和ElasticSearch Head环境搭建和数据模拟
首先elasticsearch-6.0.0\bin目录下运行elasticsearch服务 修改elasticsearch-6.0.0\elasticsearch.yml文件 在文件最后加入下面代码, ...