澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站:打字与印刷样式,调整打

2019-10-02 作者:澳门新萄京赌场网址   |   浏览(192)

打印样式CSS的技巧和要点

2013/08/02 · CSS · 2 评论 · CSS

原文出处: cocss   

不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。

我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果:

  • 使用响应式布局设置打印的效果
  • 在合适的时候打印背景图片和颜色
  • 添加显示的网址或页面链接,以供参考
  • 使用css filter 提高打印的图形效果

引入样式:
<link rel=“” href=“” media=“print”/>
@media print{}

引入样式:

jquery 利用CSS 控制打印样式,jquerycss

一、添加打印样式 

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

  2. import方式:
      <style type="text/css">
          @import url("css/printstylesheet.css") print;
      </style>

  3. 直接把屏幕显示样式和打印样式写在一个css文件中:
      @media print {}{
        h1 {
          color: black;
        }
        h2 {}{
          color: gray;
        }
      }
      @media print里面的内容只对打印出来的内容有效,之外的内容就是屏幕显示的样式。

其他:
创建一个不指定媒体类型的样式表通常很有用(或者利用media="all")。当你准备好定义一些特别用
于打印的规则时,可以只创建一个单独的样式表,使任何在打印时看起来不好的样式都失效。使用这种方法的一个问题是必须确保打印机样式实际上确实覆盖了主样式表。可以使用!important.

二、打印样式注意事项: 

1. 打印样式中不推荐使用背景,因为浏览器默认情况下并不能打印出CSS中的背景内容,只有当浏览器被
  设置可以打印背景的情况下才能打印出背(ie的高级选项中可选)。即使背景可以打印,它也可能盖过叠在它上面的任何文本。
  这是真的,尤其对于用彩色背景在显示器上强烈对比的文本,但是在黑白打印机上打印时会融合这一背景。
  background:none;去掉背景
  图片和颜色。

  可以利用background-color属性设置背景颜色为白色,像这样: font-family: Arial; line-height: 26px;">  使用background的快捷法也可以获得相同的效果:background: white。因此像background: white;
  这样的声明不仅设置了背景颜色为白色,而且消除了所有背景图片。利用这个background的快捷属性,
  你实现了两个目的——设置了一个白色背景,并消除了图片——只用很少的代码。   

  1. 如果需要在打印内容中出现图片,请在HTML代码中加入。

3. 打印设置使用的是物理单位,所以尺寸最好不要用像素(px),可以用pt也可以用cm;

  1. 隐藏不需要的或是次要的内容。display:none;

5. 尽量不要让内容浮动,有些浏览器打印浮动的div的过程中,会有一个麻烦,需要特别加以注意。 
 不要在打印的样式表中浮动的块,像这样:float: none;。例如,基于Gecko的浏览器
 (例如Netscape 6 ),当用户用它来浏览一个打印输出页面时,它会截去浮动元素中的内容。
 这些内容就不会被传送到打印机,下一个页面也不会有它的踪影――它消失了。

6. 尽可能的在HTML代码中做好内容重要的先后次序,这样在打印样式中可以节省不少的麻烦。

  1. 打印与网页不一样,打印一定要留下白边,单位用英寸(in)。

8. 要确保页面上的所有文本以黑色打印,就用通配选择器(见第54页)和!important来创建把每个
  标签都格式化为黑色文本的单个样式:
  *{ color: ##000# !important }

9. 在打印中显示链接url的信息:利用一个高级的选择器:after和一个高级的CSS属性称作content,
  把不在屏幕上显示的文本打印在一个样式元素的末端。
  不幸的是,:after选择器和content属性技巧在Internet Explorer 6或者更早的版本上不起作用
  (到编写本书为止,在IE 7上也不行)。但是它在Firefox和Safari上的确可以,因此你至少可以清楚
  地说明URL以便访问者可以使用他们的浏览器。

  为了做到这点,给打印样式表添加一个样式,在每个链接后面打印出URL。你甚至可以添加其他文本项
  目比如圆括号,使它更好看些:
  a:after {content: " (" attr(href) ") ";}

  然而,这个CSS不区分外部或者内部的链接,因此它也打印出到达同一个网站其他页面的没用的相对
  文档链接:“访问主页(../../index. html)。”利用一点点CSS 3魔法,就可以强制这个样式只打
  印绝对的URL(即以
  a[href^=" {content: " (" attr(href) ") ";}

10.给打印添加分页符:两种被广泛认可的属性是page-break-before和page-break-after。
  page-break-before告诉网页浏览器在一个指定样式之前插入一个分页符。利用page-break-before
  属性使图片打印在一张新页面上,并且适合整张页面。
  要使一个元素作为打印页上的最后一个项目显示,就给那个元素的样式添加page-break-after: always。

  创建两个类样式,以类似于.break_after和.break_before的名字来命名,像这样:
  .break_before { page-break-before: always; }
  .break_after { page-break-after: always; }

  然后你可以选择性地把这些样式应用给应该打印在网页顶部或者底部的元素。

三、测试打印样式 

通常来说我们不可能用打印机来进行测试,在IE浏览器菜单栏“文件”中有“打印预览”,可以通过这
打印预览来做测试。

利用CSS 控制打印样式,jquerycss 一、添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: link r...

使用jquery CSS实现控制打印样式,jquerycss

一、添加打印样式

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

  2. import方式:
      <style type="text/css">
          @import url("css/printstylesheet.css") print;
      </style>

  3. 直接把屏幕显示样式和打印样式写在一个css文件中:
      @media print {}{
        h1 {
          color: black;
        }
        h2 {}{
          color: gray;
        }
      }
      @media print里面的内容只对打印出来的内容有效,之外的内容就是屏幕显示的样式。

其他:
创建一个不指定媒体类型的样式表通常很有用(或者利用media="all")。当你准备好定义一些特别用
于打印的规则时,可以只创建一个单独的样式表,使任何在打印时看起来不好的样式都失效。使用这种方法的一个问题是必须确保打印机样式实际上确实覆盖了主样式表。可以使用!important.

二、打印样式注意事项:

1. 打印样式中不推荐使用背景,因为浏览器默认情况下并不能打印出CSS中的背景内容,只有当浏览器被
  设置可以打印背景的情况下才能打印出背(ie的高级选项中可选)。即使背景可以打印,它也可能盖过叠在它上面的任何文本。
  这是真的,尤其对于用彩色背景在显示器上强烈对比的文本,但是在黑白打印机上打印时会融合这一背景。
  background:none;去掉背景
  图片和颜色。

  可以利用background-color属性设置背景颜色为白色,像这样: font-family: Arial; line-height: 26px;">  使用background的快捷法也可以获得相同的效果:background: white。因此像background: white;
  这样的声明不仅设置了背景颜色为白色,而且消除了所有背景图片。利用这个background的快捷属性,
  你实现了两个目的——设置了一个白色背景,并消除了图片——只用很少的代码。  

  1. 如果需要在打印内容中出现图片,请在HTML代码中加入。

3. 打印设置使用的是物理单位,所以尺寸最好不要用像素(px),可以用pt也可以用cm;

  1. 隐藏不需要的或是次要的内容。display:none;

5. 尽量不要让内容浮动,有些浏览器打印浮动的div的过程中,会有一个麻烦,需要特别加以注意。
 不要在打印的样式表中浮动的块,像这样:float: none;。例如,基于Gecko的浏览器
 (例如Netscape 6 ),当用户用它来浏览一个打印输出页面时,它会截去浮动元素中的内容。
 这些内容就不会被传送到打印机,下一个页面也不会有它的踪影――它消失了。

6. 尽可能的在HTML代码中做好内容重要的先后次序,这样在打印样式中可以节省不少的麻烦。

  1. 打印与网页不一样,打印一定要留下白边,单位用英寸(in)。

8. 要确保页面上的所有文本以黑色打印,就用通配选择器(见第54页)和!important来创建把每个
  标签都格式化为黑色文本的单个样式:
  *{ color: ##000# !important }

9. 在打印中显示链接url的信息:利用一个高级的选择器:after和一个高级的CSS属性称作content,
  把不在屏幕上显示的文本打印在一个样式元素的末端。
  不幸的是,:after选择器和content属性技巧在Internet Explorer 6或者更早的版本上不起作用
  (到编写本书为止,在IE 7上也不行)。但是它在Firefox和Safari上的确可以,因此你至少可以清楚
  地说明URL以便访问者可以使用他们的浏览器。

  为了做到这点,给打印样式表添加一个样式,在每个链接后面打印出URL。你甚至可以添加其他文本项
  目比如圆括号,使它更好看些:
  a:after {content: " (" attr(href) ") ";}

  然而,这个CSS不区分外部或者内部的链接,因此它也打印出到达同一个网站其他页面的没用的相对
  文档链接:“访问主页(../../index. html)。”利用一点点CSS 3魔法,就可以强制这个样式只打
  印绝对的URL(即以
  a[href^=" {content: " (" attr(href) ") ";}

10.给打印添加分页符:两种被广泛认可的属性是page-break-before和page-break-after。
  page-break-before告诉网页浏览器在一个指定样式之前插入一个分页符。利用page-break-before
  属性使图片打印在一张新页面上,并且适合整张页面。
  要使一个元素作为打印页上的最后一个项目显示,就给那个元素的样式添加page-break-after: always。

  创建两个类样式,以类似于.break_after和.break_before的名字来命名,像这样:
  .break_before { page-break-before: always; }
  .break_after { page-break-after: always; }

  然后你可以选择性地把这些样式应用给应该打印在网页顶部或者底部的元素。

三、测试打印样式

通常来说我们不可能用打印机来进行测试,在IE浏览器菜单栏“文件”中有“打印预览”,可以通过这
打印预览来做测试。

一、添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: l...

针对打印的样式,而不是屏幕显示样式

首先,我们需要使用媒体查询(media query)针对打印样式设置。

JavaScript

@media print { }

1
2
3
@media print {
 
}

重新针对打印写CSS样式是没有必要的,我们只需要针对差异设置打印的样式覆盖掉之前的默认样式。

大多数的浏览器会自动根据打印更改颜色,以节省打印原料,但是我们还是尽可能的手工设置一下。

为了达到最佳效果,使颜色清晰明了,我们至少需要包含一下基本的打印样式。

JavaScript

@media print { body { color: #000; background: #fff; } }

1
@media print { body { color: #000; background: #fff; } }

对于打印,大多数情况下我们不需要打印整个页面,只需要打印一个简洁的能够突出需要信息的页面,那么我们将不相关的部分隐藏掉(如:导航条、背景图片)。

JavaScript

/* Default styles */ h1 { color: #fff; background: url(banner.jpg); } @media print { h1 { color: #000; background: none; } nav, aside { display: none; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Default styles */
 
h1 {
   color: #fff;
   background: url(banner.jpg);
}
 
@media print {
   h1 {
      color: #000;
      background: none;
   }
 
   nav, aside {
      display: none;
   }
}

在编写打印样式表的时候,你要注意要使用厘米或者英寸作为单位而不是屏幕像素单位,实际的单位对打印非常有用。

为了保证打印样式有用,写CSS样式使打印的内容距离纸张边缘,看起来更好,需要使用 @page 这个语法:

JavaScript

@media print { h1 { color: #000; background: none; } nav, aside { display: none; } body, article { width: 100%; margin: 0; padding: 0; } @page { margin: 2cm; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media print {
   h1 {
      color: #000;
      background: none;
   }
 
   nav, aside {
      display: none;
   }
 
   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }
 
   @page {
      margin: 2cm;
   }
}

为了保证不被跨页打印,如一个标题和内容在页面底部被分开:

JavaScript

h2, h3 { page-break-after: avoid; }

1
h2, h3 { page-break-after: avoid; }

另一中情况是要防止图片过宽而超出纸张边缘:

JavaScript

img { max-width: 100% !important; }

1
2
3
img {
   max-width: 100% !important;
}

第三个要点是确保 articles 文章标签的内容,在新的一页开始:

JavaScript

article { page-break-before: always; }

1
2
3
article {
   page-break-before: always;
}

最后,还要注意列表和图片不被分开在不同的页:

JavaScript

ul, img { page-break-inside: avoid; }

1
2
3
ul, img {
   page-break-inside: avoid;
}

尽管这些还不完美,不过这是一个良好的开始

单位****(cm,in****英寸****)
1 inch = 2.54 cm
1cm = 96/2.54 ≈ 37.80 px
1px = 2.54/96 ≈ 0.0265 cm
100px = 2.65 cm
A4纸的标准尺寸为:
21.0cm * 29.7 cm
在96DPI分辨率下,其对应的像素尺寸大约为:
794px * 1123px

  1. <link rel=“” href=“” media=“print”/>
  2. @media print{}

背景图片和颜色

对于一些网站,颜色和背景图还是非常必要需要遵循的。如果用户是在 webkit 内核浏览器上打印的话,我们可以强制打印机打印屏幕上所看到的颜色(即强制在打印页面上出现任何的背景图和颜色),一般来说彩色打印机可以做到这点,我们需要一个单独的媒体查询:

JavaScript

@media print and (color) { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

1
2
3
4
5
6
@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}

遗憾的是,这不能马上应用于firefox opera 和IE.

web打印总结:
设置基本的打印样式**** @media print { body { color: #000; background: #fff; } }
隐藏不相关的部分如:导航条、背景图片
使用厘米或者英寸作为单位
使用**** @page ****控制打印样式**** @page {margin: 2cm; }
避免标题和内容跨页**** h2, h3 { page-break-after: avoid; }
防止图片过宽超出纸张**** img {max-width: 100% !important;}
articles ****文章内容新分页:**** article {page-break-before: always;}
列表和图片不被页:**** ul, img {page-break-inside: avoid;}
强制打印页面背景图和颜色(****firefox opera ****和****IE****可能不支持)
@media print and (color) { * { -webkit-print-color-adjust: exact;print-color-adjust: exact; }}

单位(cm,in英寸)
1 inch = 2.54 cm
1cm = 96/2.54 ≈ 37.80 px
1px = 2.54/96 ≈ 0.0265 cm
100px = 2.65 cm
A4纸的标准尺寸为:
21.0cm *澳门新萄京官方网站:打字与印刷样式,调整打字与印刷样式。 29.7 cm
在96DPI分辨率下,其对应的像素尺寸大约为:
794px * 1123px

扩展打印样式里的超链接

如果直接打印,超链接将只是一点文字,而不会出现链接的网址,这样来说,是没有意义的。

我们可以将url链接展示在打印的页面上,我们可以使用:after伪类来实现而不影响周围的元素布局:

JavaScript

@media print { article a { font-weight: bolder; text-decoration: none; } article a[href^=http]:after { content:" <" attr(href) "> "; } }

1
2
3
4
5
6
7
8
9
10
@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }
 
   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }
}

看下面这是HTML:

JavaScript

<p>You’ve explored this <a href="/blog">website</a>; now it’s time to <a href=" other Web development documentation</a>.</p>

1
<p>You’ve explored this <a href="/blog">website</a>; now it’s time to <a href="http://www.webplatform.org/">read other Web development documentation</a>.</p>

下面是显示的效果:
澳门新萄京官方网站 1
其中一个问题是,打印页面上的锚文本和图像链接也将扩大。我们可以很好的用CSS规则修复。

JavaScript

article a[href^="#"]:after { content: ""; }

1
2
3
article a[href^="#"]:after {
   content: "";
}

链接周围图像是比较麻烦的,理想的情况是图像周围的链接将有一个class。

JavaScript

$a:after > img { content: ""; }

1
2
3
$a:after > img {
   content: "";
}

CSS选择器实现将很简单:

JavaScript

a:not(:local-link):after { content:" <" attr(href) "> "; }

1
2
3
a:not(:local-link):after {
   content:" <" attr(href) "> ";
}

所有这些方法都假定用户将继续通过手工输入网址。 一个更好的解决方案是通过提供匹配的QR码的数字版本的页面更容易访问。

扩展超链接
@media print {
article a {
font-weight: bolder;
text-decoration: none;
}

web打印总结:
设置基本的打印样式 @media print { body { color: #000; background: #fff; } }
隐藏不相关的部分如:导航条、背景图片
使用厘米或者英寸作为单位
使用 @page 控制打印样式 @page {margin: 2cm; }
避免标题和内容跨页 h2, h3 { page-break-after: avoid; }
防止图片过宽超出纸张 img {max-width: 100% !important;}
articles 文章内容新分页: article {page-break-before: always;}
列表和图片不被页: ul, img {page-break-inside: avoid;}
强制打印页面背景图和颜色(firefox opera 和IE可能不支持)
@media print and (color) { * { -webkit-print-color-adjust: exact;print-color-adjust: exact; }}

打印链接二维码使之更容易访问

如下图:

澳门新萄京官方网站 2

我们需要使用谷歌 图形API来实现:

  • 我们希望谷歌提供的图表信息( qr ,在我们的例子中);
  • 呈现大小的的QR印记,以像素为单位;
  • URL进行编码;
  • 使用的字符编码形式。

通常我们会在页面顶部的一个标题元素关联的URL:

XHTML

<header> <h1>Lizabeth’s Salon</h1> <h2>Providing Intellectual Stimulation Online Since 2001</h1> </header>

1
2
3
4
<header>
<h1>Lizabeth’s Salon</h1>
<h2>Providing Intellectual Stimulation Online Since 2001</h1>
</header>

为了创造预期的打印结果,我们将提供足够的间距给H1用来放置二维码,因为这个二维码需要增加到每个页面,我们需要增加一条CSS规则:

JavaScript

@media print { header h1:after { content: url(); position: absolute; right: 0; top: 0; } }

1
2
3
4
5
6
7
8
@media print {
   header h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://yourdomain.com&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

这个方法的缺点是使开发者每个元素都请求一个API。如果你的主机是PHP,则可以自动生成当前页面的URL:

JavaScript

@media print { h1:after { content: url( &chl=; &choe=UTF-8); position: absolute; right: 0; top: 0; } }

1
2
3
4
5
6
7
8
9
10
@media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>
&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

给wordpress的样式:

JavaScript

@media print { h1:after { content: url( &chl=); position: absolute; right: 0; top: 0; } }

1
2
3
4
5
6
7
8
9
@media print {
   h1:after {
      content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=http://<?phpthe_permalink();?>&choe=UTF-8);
      position: absolute;
      right: 0;
      top: 0;
   }
}

article a[href^=http]:after {
content:" <" attr(href) "> ";
}
}

扩展超链接
@media print {
article a {
font-weight: bolder;
text-decoration: none;
}

使用CSS3 Filter 提高打印的质量

浏览器通常会打印出横幅图像,特别是如果有问题的旗帜在黑暗的背景是白色的:

澳门新萄京官方网站 3

JavaScript

@media print { header { background: none; color: #000; } header img { filter: url(inverse.svg#negative); -webkit-filter: invert(100%); filter: invert(100%); } }

1
2
3
4
5
6
7
8
9
10
11
12
@media print {
   header {
      background: none;
      color: #000;
   }
 
   header img {
      filter: url(inverse.svg#negative);
      -webkit-filter: invert(100%);
      filter: invert(100%);
   }
}

CSS3的过滤器做什么,你所期望的 – 在头图像反色,变成黑白色,反之亦然 – 但它们只能在Chrome和Safari。 为了弥补Firefox,我们需要一种不同的方法 – 相当于过滤器作为一个单独的SVG文件写:

JavaScript

<svg xmlns="; <filter id="negative"> <feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /> </filter> </svg>

1
2
3
4
5
6
7
8
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="negative">
<feColorMatrix values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0" />
</filter>
</svg>

从理论上讲,你可以使用一个CSS sprite 之间进行切换不同版本的打印的标志,但是这将意味着增加一倍的文件大小可能没有什么好处。 相反,我建议使用CSS过滤器(和SVG当量,为Firefox)的反转图像之前,打印的页面: 印刷两种形式的标志(即α-蒙面PNG或纯黑色背景)的结果是:

 澳门新萄京官方网站 4

article a[澳门新萄京官方网站:打字与印刷样式,调整打字与印刷样式。href^="#"]:after {
content: "";
}
//链接周围图像是比较麻烦的,理想的情况是图像周围的链接将有一个class。
$a:after > img {
content: "";
}
//CSS选择器实现将很简单:
a:not(:local-link):after {
content:" <" attr(href) "> ";
}

article a[href^=http]:after {
content:" <" attr(href) "> ";
}
}

总结

由于打印不方便跟踪,而且缺乏重视。在WEB开发中也往往被忽略,大多数时候我们只阅读线上的网页,而不是打印出来。 另一方面即使人们只是偶尔需要打印的东西从网站,这将是理想的,如果页面设计适合的打印机,就像现代的网站适应各种屏幕尺寸和设备。 打印的自适应设计,可用性和可访问性和Web开发的重要组成部分,同样应考虑的另一个方面。 处理打印自适应设计的另一个方面,我们实现更多的网站用户的需求-并在同一时间,节省墨水,纸张和其他资源,所有这些都是重要的方面可持续发展的设计 。

赞 1 收藏 2 评论

澳门新萄京官方网站 5

打印链接二维码使之更容易访问
我们需要使用谷歌 图形API来实现:
我们希望谷歌提供的图表信息( qr ,在我们的例子中);
呈现大小的的QR印记,以像素为单位;
URL进行编码;
使用的字符编码形式。

article a[href^="#"]:after {
content: "";
}
//链接周围图像是比较麻烦的,理想的情况是图像周围的链接将有一个class。
$a:after > img {
content: "";
}
//CSS选择器实现将很简单:
a:not(:local-link):after {
content:" <" attr(href) "> ";
}

通常我们会在页面顶部的一个标题元素关联的URL:
@media print {
header h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://yourdomain.com&choe=UTF-8);
position: absolute;
right: 0;
top: 0;
}
}
这个方法的缺点是使开发者每个元素都请求一个API。如果你的主机是PHP,则可以自动生成当前页面的URL:

打印链接二维码使之更容易访问
我们需要使用谷歌 图形API来实现:

@media print {
h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=;
&choe=UTF-8);
position: absolute;
right: 0;
top: 0;
}
}
给wordpress的样式:
@media print {
h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=);
position: absolute;
right: 0;
top: 0;
}
}

  • 我们希望谷歌提供的图表信息( qr ,在我们的例子中);
  • 呈现大小的的QR印记,以像素为单位;
  • URL进行编码;
  • 使用的字符编码形式。
    通常我们会在页面顶部的一个标题元素关联的URL:
    @media print {
    header h1:after {
    content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://yourdomain.com&choe=UTF-8);
    position: absolute;
    right: 0;
    top: 0;
    }
    }
    这个方法的缺点是使开发者每个元素都请求一个API。如果你的主机是PHP,则可以自动生成当前页面的URL:

使用****CSS3 Filter ****提高打印的质量
浏览器通常会打印出横幅图像,特别是如果有问题的旗帜在黑暗的背景是白色的:

@media print {
h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=;
&choe=UTF-8);
position: absolute;
right: 0;
top: 0;
}
}
给wordpress的样式:
@media print {
h1:after {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150
&chl=);
position: absolute;
right: 0;
top: 0;
}
}

@media print {
header {
background: none;
color: #000;
}

使用CSS3 Filter 提高打印的质量
浏览器通常会打印出横幅图像,特别是如果有问题的旗帜在黑暗的背景是白色的:

header img {
filter: url(inverse.svg#negative);
-webkit-filter: invert(100%);
filter: invert(100%);
}
}
CSS3的过滤器做什么,你所期望的 – 在头图像反色,变成黑白色,反之亦然 – 但它们只能在Chrome和Safari。 为了弥补Firefox,我们需要一种不同的方法 – 相当于过滤器作为一个单独的SVG文件写:
<svg xmlns=";
<filter id="negative">
<feColorMatrix values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0" />
</filter>
</svg>
从理论上讲,你可以使用一个CSS sprite 之间进行切换不同版本的打印的标志,但是这将意味着增加一倍的文件大小可能没有什么好处。 相反,我建议使用CSS过滤器(和SVG当量,为Firefox)的反转图像之前,打印的页面: 印刷两种形式的标志(即α-蒙面PNG或纯黑色背景)的结果是:

@media print {
header {
background: none;
color: #000;
}

*@page***规则**** **
纸张尺寸,方向,页边距,分页
可用尺寸:5.5*8.5英寸
纸质尺寸:A4 legal
页面方向:portrait 或 landscape
eg: @page{size: A4 landscape; margin:2cm}

header img {
filter: url(inverse.svg#negative);
-webkit-filter: invert(100%);
filter: invert(100%);
}
}
CSS3的过滤器做什么,你所期望的 – 在头图像反色,变成黑白色,反之亦然 – 但它们只能在Chrome和Safari。 为了弥补Firefox,我们需要一种不同的方法 – 相当于过滤器作为一个单独的SVG文件写:
<svg xmlns=";
<filter id="negative">
<feColorMatrix values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0 0 1 0" />
</filter>
</svg>
从理论上讲,你可以使用一个CSS sprite 之间进行切换不同版本的打印的标志,但是这将意味着增加一倍的文件大小可能没有什么好处。 相反,我建议使用CSS过滤器(和SVG当量,为Firefox)的反转图像之前,打印的页面: 印刷两种形式的标志(即α-蒙面PNG或纯黑色背景)的结果是:


@page规则
纸张尺寸,方向,页边距,分页
可用尺寸:5.5*8.5英寸
纸质尺寸:A4 或 legal
页面方向:portrait 或 landscape
eg: @page{size: A4 landscape; margin:2cm}

页面模块
页面模块定义了页面区域和16个环绕的边距盒。页面区域是页面上一块页面内容流动的空间。当超出了它的容纳范围,就会创建另一个页面。边界盒只在CSS生成的内容上使用。

页面模块
页面模块定义了页面区域和16个环绕的边距盒。页面区域是页面上一块页面内容流动的空间。当超出了它的容纳范围,就会创建另一个页面。边界盒只在CSS生成的内容上使用。

**左边距**** **@page :left { margin-left: 3cm; }
**右边距**** **@page :right { margin-left: 4cm;}
**:first **@page :first {// 选择器选中是文档的第一页}
**:blank **@page :blank {// 选中任何“故意左侧留白”的页面。要添加这样的文字,我们可以使用目标是边距盒顶部中心的生成内容。
@top-center { content: "This page is intentionally left blank." }
}

左边距 @page :left { margin-left: 3cm; }
右边距 @page :right { margin-left: 4cm;}
:first @page :first {// 选择器选中是文档的第一页}
:blank @page :blank {// 选中任何“故意左侧留白”的页面。要添加这样的文字,我们可以使用目标是边距盒顶部中心的生成内容。
@top-center { content: "This page is intentionally left blank." }
}

生成内容
eg:把书名添加到奇数页边距盒的左下角
@page:right{
@bottom-left {margin: 10pt 0 30pt 0; border-top: .25pt solid *#666; *content: "My book"; font-size: 9pt; color: #333;}
}

生成内容
eg:把书名添加到奇数页边距盒的左下角
@page:right{
@bottom-left {margin: 10pt 0 30pt 0; border-top: .25pt solid #666; content: "My book"; font-size: 9pt; color: #333;}
}

分页符
强制标题处于页面开头
避免标题后面立即断页
避免断开图像和表格
h1 { page-break-before: always;}
h1, h2, h3, h4, h5 { page-break-after: avoid;}
table, figure { page-break-inside: avoid;}

分页符
强制标题处于页面开头
避免标题后面立即断页
避免断开图像和表格
h1 { page-break-before: always;}
h1, h2, h3, h4, h5 { page-break-after: avoid;}
table, figure { page-break-inside: avoid;}

计数器
页码:
CSS提供了预定义页面计数器;它从1开始并且每新的一页加1 。放到边距盒的其中之一。
在下面的例子中,我们把页码放在奇数页的右下角和偶数页的左下角。
@page:right{
@bottom-right {content: counter(page); }
}
@page:left{
@bottom-left { content: counter(page); }
}

计数器
页码:
CSS提供了预定义页面计数器;它从1开始并且每新的一页加1 。放到边距盒的其中之一。
在下面的例子中,我们把页码放在奇数页的右下角和偶数页的左下角。
@page:right{
@bottom-right {content: counter(page); }
}
@page:left{
@bottom-left { content: counter(page); }
}


自定义css计数器
为章节创建一个叫chapternum的计数器并且每出现h1增加-
body {
counter-reset: chapternum;// 计数器名
}
h1:before {
counter-increment: chapternum; //计数增加
content: counter(chapternum) ". ";
}

自定义****css****计数器
为章节创建一个叫chapternum的计数器并且每出现h1增加-
body {
counter-reset: chapternum;// 计数器名
}
h1:before {
counter-increment: chapternum; //计数增加
content: counter(chapternum) ". ";
}

图像的计数
使用chapternum.figurenum。所以“Figure 3-2”代表第三章第二幅图。
body {
counter-reset: chapternum figurenum;
}
h1 {
counter-reset: figurenum; // 重置figurenum让它每章都从1开始
}
h1.title:before {
counter-increment: chapternum;
content: counter(chapternum) ". ";
}
figcaption:before {
counter-increment: figurenum;
content: counter(chapternum) "-" counter(figurenum) ". ";
}

图像的计数
使用chapternum.figurenum。所以“Figure 3-2”代表第三章第二幅图。
body {
counter-reset: chapternum figurenum;
}
h1 {
counter-reset: figurenum; // 重置figurenum让它每章都从1开始
}
h1.title:before {
counter-increment: chapternum;
content: counter(chapternum) ". ";
}
figcaption:before {
counter-increment: figurenum;
content: counter(chapternum) "-" counter(figurenum) ". ";
}

生成内容
string-set的值是你想给这段内容取得名字然后使用content()。随后你可以用string()作为生成内容输出。
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}

生成内容
string-set的值是你想给这段内容取得名字然后使用content()。随后你可以用string()作为生成内容输出。
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}

page-break-after 设置元素后是否应当放置分页符。 auto、always、avoid、left、right
page-break-before 设置元素前否应当放置分页符。 auto、always、avoid、left、right
page-break-inside 设置元素内部是否应当放置分页符。 auto、avoid


orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。
widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。比如:


h2, h3 { page-break-after: avoid; }


分页
表格

page-break-after 设置元素后是否应当放置分页符。 auto、always、avoid、left、right
page-break-before 设置元素前否应当放置分页符。 auto、always、avoid、left、right
page-break-inside 设置元素内部是否应当放置分页符。 auto、avoid

orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。
widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。比如:

h2, h3 { page-break-after: avoid; }

分页
表格

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站:打字与印刷样式,调整打

关键词: