Fatal编程技术网
  • css/
  • 如何定义CSS类来设置横向模式下的打印页面？

如何定义CSS类来设置横向模式下的打印页面？

css

如何定义CSS类来设置横向模式下的打印页面？,css,Css,我创建了一个CSS样式表，可以使用以下@media规则以横向模式打印HTML页面： @media print{ @page {size: landscape;} } 我不想打印所有以横向模式加载此样式表的HTML页面。理想情况下，我希望能够指定一个景观类来实现这一点 在生成HTML时，我总是可以创建一个单独的scanner.css文件，并根据需要将其附加到标题中，但我希望有一种更干净的方法来处理类 作为后续行动，我还尝试了以下方法，但没有成功： @page rotat

我创建了一个CSS样式表，可以使用以下@media规则以横向模式打印HTML页面：

   @media print{
      @page {size: landscape;}
    }
我不想打印所有以横向模式加载此样式表的HTML页面。理想情况下，我希望能够指定一个景观类来实现这一点

在生成HTML时，我总是可以创建一个单独的scanner.css文件，并根据需要将其附加到标题中，但我希望有一种更干净的方法来处理类

作为后续行动，我还尝试了以下方法，但没有成功：

@page rotated {
  size: landscape;
}
@media print{
  .rotate {
    page: rotated;
  }
}
我可能只是在为一个似乎只在基于webkit的浏览器中工作的解决方案而头痛。@page size:landscape设置在Firefox或（惊喜，惊喜）ie10中似乎不起作用。

我认为实现这一点的最佳方法是执行以下操作：

@media print{
    .class-name{
        @page{
            size:landscape;
        }
    }
}
我还没有测试过这个，如果我错了，请纠正我。祝你好运

我真的不明白你对我做了什么：

@page rotated {
  size: landscape;
}
@media print{
  .rotate {
    page: rotated;
  }
}
无论如何，您希望在
横向
模式下打印某些页面，而其他页面应在默认（
纵向
）模式下打印。因此，我建议：

@media print {
    body.special-page {
        transform:rotate(180deg);
        -webkit-transform: rotate(91deg);
        -moz-transform: rotate(10deg);
        -ms-transform:rotate(20deg);
    }
}
我们将为
正文
添加
。特殊页面
（可能通过JS），如：



Lorem ipsum dolor sit amet，他的感觉粘液
我是内莫雷·尤瓦雷特。南部宪法。我是艾蒂安
实验室、指示或定义和现场。可能的
scribentur专业版。迪坎特埃皮库里酒店。
结帐

我们所做的是通过
@media print
为页面的
print
模式编写特定样式，并将整个页面
旋转180度
，这样，如果
主体
包含
。特殊页面
类，它将像在横向模式下一样工作

我找不到使用
@page
和类的其他方法。

不幸的是，除了提供的
：left
、
：right
、
：first
和
：blank
伪类之外，我们目前无法使用页面类型选择器进行媒体查询

然而，W3C正在考虑为CSS的未来级别添加其他页面伪类[
@page:nth（4）{…}
或
@page（.class）{…}
]。我不知道为什么命名页面无法工作，但截至2016年1月26日，第4级媒体查询（包括@pageat规则）可能包括范围、否定和使用脚本的自定义媒体查询。此外，size属性目前仅在Chrome中受支持

<html>
    <head>
        <style>
            .landscape {
                page-break-before: always;
            }
            @page :left {
                size: landscape;
            }
        </style>
    </head>
    <body>
        <p>This is a normal paragraph.</p>
        <p class="landscape">This is in landscape form, following a page break.</p>
    </body>
</html>

这是我仅使用HTML和CSS所能得到的最接近的结果，它将横向定向应用于偶数页。我知道这不是一个精确的解决方案，它只适用于Chrome

<html>
    <head>
        <style>
            .landscape {
                page-break-before: always;
            }
            @page :left {
                size: landscape;
            }
        </style>
    </head>
    <body>
        <p>This is a normal paragraph.</p>
        <p class="landscape">This is in landscape form, following a page break.</p>
    </body>
</html>


.景观{
前分页符：始终；
}
@页码：左{
规模：景观；
}
这是一个正常的段落


这是横向形式，在分页符之后
技巧在于
媒体
属性设置为
打印
，如下所示：

<style media="print"></style>
下面是一个可以双向打印的工作示例：
（在Chrome、Edge和Firefox上进行测试和工作。）


抱歉使用了这么多Lorem ipsum O:）
/*默认情况下，这将以横向方式打印页面*/
@页面{
规模：景观；
}
/*如果要旋转主体元素，请执行以下操作：*/
/*身体{
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-o变换：旋转（90度）；
-ms变换：旋转（90度）；
变换：旋转（90度）；
}*/
/*如果要沿其他方向旋转主体图元，请执行以下操作：*/
/*身体{
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
-o变换：旋转（-90度）；
-ms变换：旋转（-90度）；
变换：旋转（-90度）；
}*/
知识产权是一种权利，是一种权利，是一种权利，是一种权利，是一种权利
但是，在最低限度的情况下，我们必须在公共消费品的基础上进行实验室实习。

两人或两人在一个不属于任何一方的地方，在一个不属于任何一方的地方
除了偶尔出于谨慎，不能因疏忽而导致动物死亡。

知识产权是一种权利，是一种权利，是一种权利，是一种权利，是一种权利
但是，在最低限度的情况下，我们必须在公共消费品的基础上进行实验室实习。

两人或两人在一个不属于任何一方的地方，在一个不属于任何一方的地方
除了偶尔出于谨慎，不能因疏忽而导致动物死亡。

知识产权是一种权利，是一种权利，是一种权利，是一种权利，是一种权利
但是，在最低限度的情况下，我们必须在公共消费品的基础上进行实验室实习。

两人或两人在一个不属于任何一方的地方，在一个不属于任何一方的地方
除了偶尔出于谨慎，不能因疏忽而导致动物死亡。

知识产权是一种权利，是一种权利，是一种权利，是一种权利，是一种权利
但是，在最低限度的情况下，我们必须在公共消费品的基础上进行实验室实习。

两人或两人在一个不属于任何一方的地方，在一个不属于任何一方的地方
除非圣约翰不冒失，否则不应为自己的罪行负责

@page {
  size: landscape;
}



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Sorry for using so much Lorem ipsum O:)</title>
  <style media="print">
    /* this prints the page in landscape by default. */
    @page {
      size: landscape;
    }
    /* If you would like to rotate the body element: */
    /*body {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
    }*/
    /* If you would like to rotate the body element in the other direction: */
    /*body {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }*/
  </style>
</head>
<body>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
</body>
</html>



<style type="text/css" media="print">
@page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;