如何为需要打印的网页设置单独的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%的人还看了以下文章

  • vue学习v-on:click绑定HTML的单击事件

    v-on:click缩写为@click <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>125jz.com-vue</title> <script src=”js/vue.js” type=”text/ja…

    2020年6月14日
    2.9K0
  • 纯CSS制作红色网站二级下拉导航菜单

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

    2019年4月17日
    3.8K0
  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    4.3K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    2.0K0
  • 纯CSS3制作的垂直手风琴效果,点击标题展开详细介绍

    纯CSS3制作的垂直手风琴效果 CSS代码: @import url(“css/font-awesome.css”); * { margin: 0; padding: 0; } *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; font: 16px/1 ‘O…

    2018年12月26日
    2.5K0
  • 第7课:元素的分类与标识(class和id)

    有时,你希望对特定元素或者特定一组元素应用特殊的样式。在这一课,我们将深入学习如何利用class和id来为所选元素指定属性。 如何实现为网站上许多标题中的某一个单独应用颜色?如何实现把网站上的链接分为不同的类,并对各类链接分别应用不同的样式?这只是本课将解决的诸多问题中的最具代表性的两个问题。 用class对元素进行分类 比方说,我们有两个由链接组成的列表。…

    2020年2月25日
    2.5K0

发表回复

登录后才能评论