如何为需要打印的网页设置单独的css样式

项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。

此时可以用link标签中的media属性解决此问题。

如下面这两个引用:

<link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />

当浏览器访问的时候,只会引用渲染screen.css中的样式,呈现效果是screen.css中的样子;

当打印的时候,呈现的则是print.css中的内容。

media属性有以下这些:

描述
screen 计算机屏幕(默认)。
tty 电传打字机以及类似的使用等宽字符网格的媒介。
tv 电视机类型设备(低分辨率、有限的滚屏能力)。
projection 放映机。
handheld 手持设备(小屏幕、有限带宽)。
print 打印预览模式/打印页面。
braille 盲人点字法反馈设备。
aural 语音合成器。
all 适用于所有设备。

 

所以我们可以通过link标签中的media属性来让网页的呈现效果更适应多变的场景,让其更智能。

本文转载自daixiaorui博客,原文链接:https://www.daixiaorui.com/read/236.html ,本文观点不代表125jz立场。

(0)
江山如画的头像江山如画管理团队
上一篇 2019年11月20日 下午12:35
下一篇 2019年11月20日 下午8:01

99%的人还看了以下文章

  • CSS常用类/ID命名规范

    书写规范请查看《CSS语法及命名规范(入门)》,本文介绍常用类/ID命名规范,CSS文件命名规范,如页面主体:main 内容:content 标签页:tab  章列表:list 信息:msg   标题:title   热点:hot 新闻:news注册:regsiter 合作伙伴:partner 友情链接:friendlink 页脚:footer 版权:cop…

    2019年3月14日
    4.5K0
  • 手把手教你做响应式网页,响应式布局实例入门(精)

    刚接触响应式布局的童鞋会感觉响应式布局很高大上,很难,但实际上只用CSS就能实现响应式布局。今天中国网页设计通过一个响应式布局实例,手把手教你如何制作响应式网页。 响应式布局(Responsive Layout) 响应式布局分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 响应式布局实例 当窗口大…

    2018年7月28日
    3.8K0
  • 实现表格单线边框的两种方法

    实现表格单线边框方法一 border-collapse: collapse; 代码如下: See the Pen 实现表格单线边框的两种方法 by 江山如画 (@jgyzhr)on CodePen. 实现表格单线边框方法二 给table上边和左边设上边框线,给td下边和右边设上边框线 See the Pen 实现表格单线边框方法二 by 江山如画 (@jgy…

    2019年10月31日
    3.3K0
  • 纯CSS制作红色网站二级下拉导航菜单

    纯CSS制作红色网站二级下拉导航菜单,代码非常简洁,适合修改后使用,入门就能掌握。 二级下拉导航菜单HTML代码: <nav> <ul> <li><a href=”#”>首页</a></li> <li><a href=”#”>电影</a> <ul…

    2019年4月17日
    3.7K0
  • 第8课:组织元素(span和div)

    pan和div元素用于组织和结构化文档,并经常联合class和id属性一起使用。 在这一课中,我们将进一步探究span和div的用法,因为这两个HTML元素对于CSS是很重要的。 用span组织元素 用div组织元素 用span组织元素 span元素可以说是一种中性元素,因为它不对文档本身添加任何东西。但是与CSS结合使用的话,span可以对文档中的部分文本…

    2020年2月25日
    2.0K0
  • 第9课:盒状模型

    CSS中的盒状模型(box model)用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距(margin)、边框(border)、内边距(padding)和内容的具体操作。下图显示了盒状模型的结构: CSS中的盒状模型 上面的图示看上去可能感觉有点理论化,好吧,让我们试着用一个实例来解释盒状模型。在我们的例子中,有一个标题和一些文本…

    2020年2月25日
    3.8K0

发表回复

登录后才能评论