设为首页收藏本站

17nyy 国内著名免费干货分享社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 378|回复: 0

css控制打印内容的样式

[复制链接]
  • TA的每日心情
    难过
    2020-10-4 20:24
  • 主题

    帖子

    0

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0
    发表于 2019-12-19 21:35:22 | 显示全部楼层 |阅读模式
    使用css也可以控制打印机对页面的打印样式,当然规则有些许不同。
    下面就简单介绍一下它的相关规则,需要的朋友可以做一下参考,如果想要熟练操作,当然要实际应用了。
    一.专门为打印指定样式:

    1. /* 样式将只应用于打印 */
    2. @media print {
    3.   /*code*/
    4. }
    复制代码


    关于媒体查询可以参阅css3 Media Queries媒体查询一章节。
    当然我们也可以从外部引入专门针对打印机的css样式,代码如下:

    1. <link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
    复制代码


    再来看如下代码:

    1. /*白纸黑字*/
    2. @media print {
    3.   body {
    4.     color: #000;
    5.     background: #fff;
    6.   }
    7. }
    复制代码


    上面可以设置打印内容ewing白纸黑字。
    通常我们不是在创建整个网页的截图,只是为了展现一个设计良好的网站相关内容:
    1. /*去除背景图片, 节约笔黑 */
    2. h1 {
    3.   color: #fff;
    4.   background: url(banner.jpg);
    5. }
    6. @media print {
    7.   h1{
    8.     color: #000;
    9.     background: none;
    10.   }
    11.   nav, aside {
    12.     display: none;
    13.   }
    14. }
    复制代码


    为了使打印机更具效率,应只显示主体内容,去除页眉页脚导航栏
    1. @media print {
    2.   h1 {
    3.     color: #000;
    4.     background: none;
    5.   }
    6.   nav, aside {
    7.     display: none;
    8.   }
    9.    
    10.   body, article {
    11.     width: 100%;
    12.     margin: 0;
    13.     padding: 0;
    14.   }
    15.   @page {
    16.     margin: 2cm;
    17.   }
    18. }
    复制代码



    二.对于链接的处理:
    打印的时候,并不能够将链接展示出来,并不能够像使用正常浏览器一样,使用鼠标点击就可以访问。
    但是我们可以通过别的途径进行以下弥补,具体可以参阅css打印如何处理链接地址一章节。
    三.控制打印设置选项:
    @page规则允许您指定页面的各个方面。例如将要指定页面的尺寸、页边距和页眉页脚等都是非常重要的。
    这里不多介绍了,具体可以参阅css利用@page规则控制打印设置选项一章节。


    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|一起赢 ( 蜀ICP备19039281号-1 )

    GMT+8, 2020-10-29 00:36 , Processed in 0.104285 second(s), 27 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表