如何用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 可见 隐藏

原文地址:https://www.cnblogs.com/imgss/p/8241323.html

时间: 2024-10-05 04:45:46

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

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

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

jquery 利用CSS 控制打印样式

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

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

最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引用外部css文件时, 需要拼出实际的含有IP地址的CSS文件地址, 并且需要用双斜杠(//)来代替单斜杠. 代码如下: //母版页, 注意:  url的拼接形式 <input id="hidCssRef" name="hidCssRef" type="h

小三角图标如何用CSS写

上三角▲ 1 width: 0; 2 height: 0; 3 line-height: 0; 4 font-size: 0; 5 border-width: 10px; 6 border-style: solid; 7 border-color: transparent transparent #000 transparent; 下三角▼ 1 width: 0; 2 height: 0; 3 line-height: 0; 4 font-size: 0; 5 border-width: 10p

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

来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措.如果你也有这种现象,那么我告诉你吧,在W3school查到CSS的midia的作用. midia 定义和用法: media 属性规定被链接文档将显示在什么设备上. media 属性用于为不同的媒介类型规定不同的样式. 原来用到media来指定css的媒体类型,它的

纯css写带小三角对话框

在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个三角形,如果想要带边框的三角形,则可以两个重叠使用.代码如下: <div class="box2"> 纯css写带小三角对话框 </div> .box2{ float:left; position:relative; width:200px; height:100p

CSS文件及样式命名

一.CSS文件及样式命名 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 容 器:container/box 头 部:header 主 导 航:mainNav 子 导 航:subNav 顶 导 航:topNav 网站标志:logo 大 广 告:banner 页面中部:mainBody 底 部:footer 菜 单:menu 菜单内容:menuContent 子 菜 单:subMenu

CSS控制print打印样式

来源:http://blog.csdn.net/pangni/article/details/6224533 一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示:   用于屏幕显示的css: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />   用于打印的css:<link rel="stylesheet&

4月6日学习笔记——css设置网页打印样式

有三种方法 1. 为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: <link rel="stylesheet" href="css/noprint.css" media="screen" />  用于打印的css:<link rel="stylesheet" href="css/print.css" media="print" />