css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表
Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能
比如说, 有的博文写得不错, 想保存, 但是以什么样的方式保存是个问题
以前我会用为知, EverNote之类的笔记软件保存, 但是我又有格式强迫症, 总觉得保存下来的网页不够漂亮, 因为会保存一些不必要的格式
所以还是存为PDF对我来说可看性强一点
许多网站并没有Print Style Sheet这个东西, 直接后果是我存为PDF时会连导航栏, 底部信息等跟文章无关的东西一并保存了, 需要打印的话这些也会一起打印出来
因此, 对于信息类的网站, 有一个Print Style Sheet我认为是非常有必要的
而这个东西的创建又极其的简单, 只要在原有的样式表中添加一个media="print"的样式表
原有的样式表的media="screen", 否则打印样式表会继承原有的样式表(非必须)
需要注意的是, Chrome的打印功能本身对页面进行了处理, 因此一些样式不设置也不影响
但是对于内容的显示与否, Chrome的打印样式并未做处理
下面是创建样式的主要步骤(同参考文档, 详细解说可看参考文档):
1. Remove the Navigation
更简单的说, 就是移除一切不需要显示的, 设置display: none;
#nav, #sidebar { display: none; }
一个小技巧, 就是为所有不需要打印的元素添加一个类
.no-print { display: none; }
2. Enlarge the Content Area
扩大正文区域, 一般我们文章显示宽度并非100%, 这边修改正文区域为100%, 并移除浮动
#content { width: 100%; margin: 0; float: none; }
3. Reset the Background Colors
重置背景色, 打印一般为白底黑字, 但一些网页的背景颜色是深色, 而字体是浅色, 所以要重置
body { background: white; }
#content { background: transparent; }
4. Reset Text Colors
既然要重置背景色, 当然字体颜色也要重置了, 否则打印字体颜色为白色的字, 那就没法阅读了
#author { color: #111; }
5. Display the Destination of Links
网页中的链接在打印的文章中是无法点击的, 这时打印出链接会更直观的表示出这里是链接, 而不是直接略过了, 当然并不是所有链接都需要打印出, 通常是正文中的链接才需要打印出
a:link:after { content: " (" attr(href) ") "; }
6. Make Links Stand Out from Regular Text
给链接添加样式, 比如加粗, 或加下划线
a:link { font-weight: bold; text-decoration: underline; color: #06c; }
7. What About Font Size?
设置字体大小, 差不多就行了
p { font-size: 12pt; }
8. What About Fonts?
设置字体
body { font-family: Georgia, ‘Times New Roman’, serif; }
9. My Blog Has a Lot of Comments. What Should I Do?
对于评论的处理, 显示还是不显示? 让读者自己选择吧, 使用分页, 将评论的页面单独出来, 打印或保存时都可以选择打印部分页
#comments { page-break-before: always; }
10. Show a Print-Only Message
只在打印中显示的信息, 方法就是设置一段在正常页面不显示的段落, 然后在打印页面中显示出来, 利用display属性
我的print.css
添加样式前:
添加样式后:
Chrome的开发人员工具中还有模拟media的功能
将Emulate CSS media修改为print后页面显示为
参考文档:
存在问题
在Chrome中经常会直接显示打印的效果...用Ctrl+F5刷新才显示正常, 为什么? 在IE下没发现这个问题..
css设置打印样式表,[CSS] 创建打印样式表相关推荐
- oracle创建新指定表空间,oracle创建表空间 创建用户指定表空间并授权
1.创建表空间 例如: (1)表空间名为myplace: (2)数据文件路径为E:\oracle\oracle_home\oradata\myspace (3)文件名为mydbf.dbf,空间大小为3 ...
- html边框定义css设置,表格边框的css语法
表格边框的css语法 更新时间:2006年09月21日 00:00:00 作者: 我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下 ...
- css设置div不可编辑,css 怎么设置div不可点击
css设置div不可点击的方法:1.通过"event.preventDefault()"方法取消事件的默认动作:2.通过"event.stopPropagation()& ...
- css设置四个圆角,css怎么设置4个圆角?css设置4个圆角方法
div如何设置css圆角边框?css设置4个圆角方法有哪些?这对于刚刚入门的css新手,比较陌生,那么css怎么设置4个圆角?下面我们来看一下css设置4个圆角方法.[推荐学习:CSS3教程] CSS ...
- css设置个性字体大小,css设置字体大小的属性名是什么
css设置字体大小的属性名是"font-size",该属性使用css中表示尺寸的单位(px.em.rem等)设置字体大小,也可以使用百分号等单位来设置.实际上font-size设置 ...
- Excel插件E灵:按家庭建表,创建一户一表。将明细表转成一户一表
单击播放视频: 教你将Excel明细表转换成一户一表,即按家庭创建新表 01需求概述 图1是档案明细表,图2是家庭收入采集表的模板样式.现要求将明细表转换成家庭收入采集表,有几个家庭就生成几份单独的采 ...
- php里建立数据库和表,PHP 创建数据库和表 | w3cschool菜鸟教程
PHP 创建数据库和表 数据库存有一个或多个表. 创建数据库 CREATE DATABASE 语句用于在 MySQL 中创建数据库. 我们必须添加 CREATE DATABASE 语句到 mysqli ...
- MySQL57图形化建表_Navicat 创建数据库和表之图形化界面方法
本文主要介绍 Navicat 连接 MySQL 使用,创建数据库和表. 创建之前,我们需要一台已经配置好MySQL数据库和安装了Navicat客户端的电脑. 使用Navicat创建数据库和表有两种方法 ...
- spool命令、创建一个表,创建并且copy表,查看别的用户下的表,rowid行地址 索引的时候使用,表的增删改查,删除表,oracle的回收站
1.spool 命令 spool "D:\test.txt" spool off SQL> host cls 2.创建一个表 SQL> --条件(1):有创 ...
- oracle实验数据库和表,1oracle创建数据库和表.doc
1oracle创建数据库和表.doc 实验一:创建数据库和表 一.实验目的 1. 掌握使用DBCA创建数据库 2. 掌握手工创建Oracle数据库的方法 3. 掌握创建数据表的方法 二.实验内容及步骤 ...
最新文章
- jQuery+ajax中,让window.open不被拦截(转)
- stm32cubemx生成不了keil工程文件_STM32CubeMX系列教程03_创建并生成代码工程
- Android 求圆的面积
- Yii2 中cookie的用法(2)
- python3 快速排序
- 小师妹学JavaIO之:Buffer和Buff
- linux主机中util啥意思,Util-linux
- CoreAnimation-CATransaction
- asp.net应用程序级别跟踪
- 人工智能实验2——用遗传算法求解TSP问题
- 为什么要减少代码中该死的 if else 嵌套
- USB3.0 HUB方案之GL3520
- 京东快运 | 快递单号查询API
- html css remove,CSS類別操作--.removeClass()
- 美通社企业新闻汇总 | 2019.3.7 | 百胜中国在上海设创新中心;折叠手机2019年预计仅占智能手机市场渗透率0.1%...
- Linux基础知识------账号和权限管理
- 计算机设计大赛中南赛区2019通告,我院6支队伍在2019中国大学生计算机设计大赛 中南地区赛喜获佳绩...
- svg怎么转换成png格式?
- 关于计算机科技科幻作文600字,小学生科幻作文600字:未来世界
- Potplayer制作视频缩略图的方法
热门文章
- 素材 | 3D立体设定数据多彩数据统计图元素PSD模板
- 平面设计师进步素材模板,设计基础!
- python设置文件权限_Python os.chmod() 方法
- Windows互斥锁的使用
- GDB Checkpoints
- VFIO - 将 DMA 映射暴露给用户态
- onvif device manager 找不到ipc_常见网络摄像机IP搜索不到可能导致的问题及解决办法汇总...
- Django模板层:内置模板标签if,for in(forloop.counter)with,url,spaceless,autoescape,verbatim,firstof,block,cycle
- web前端基础(06css)
- java集合的扩容研究