印刷 CSS コントロール印刷効果_html/css_WEB-ITnose

Web サイト上のページを何も処理せずに直接印刷すると、満足のいく結果が得られません。モニター (画面) とプリンター (プリンター) はまったく異なるデバイスであるため、ブラウザーに表示されるページと印刷されるページは、実際に表示されるものとは大きく異なる場合があります。したがって、印刷効果を正確に制御したい場合は、print css を使用する必要があります。次に、最初にいくつかの構文を学習しましょう。

構文

@media

• 説明: @media は、指定されたデバイス タイプにさまざまなスタイルを使用するために使用されます。
• 構文: @media sMedia { sRules }
• 説明: sMedia: デバイス タイプ、sRules: スタイル シート定義
• 互換性: IE5+ (これは CSS2 のみを指し、C33@media はより強力ですが、IE9+ のみがサポートします)
...

// 设置显示器用字体尺寸@media screen {body {font-size:12pt; }}// 设置打印机用字体尺寸@media print {body {font-size:8pt;}}

• 100px = 2.65 cm
• A4 用紙の標準サイズは:
21.0 cm * 29.7 cm

794px * 1123px

@media print {   @page {      margin: 2cm;   }}

ログイン後にコピー

• ページ変更 印刷

• ページの下部でタイトルとコンテンツが分離しないようにするなど、2 ページにまたがって印刷されないようにするには:

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

  ログイン後にコピー

• 記事の記事タグのコンテンツが新しいページで開始できるようにします:

article {   page-break-before: always;}

リストと写真が別のページに分離されないようにします:

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

ログイン後にコピー

物件紹介

プロパティ

設置元素後の分数実行

設置元素前の分页行です

設置元素内部の分页行です

值	描述
auto	默认。如果必要则在元素后插入分页符。
always	在元素后插入分页符。在遇到特定的组件时，打印机会重新开始一个新的打印页
avoid	避免在元素后插入分页符。
left	在元素之后足够的分页符，一直到一张空白的左页为止。
right	在元素之后足够的分页符，一直到一张空白的右页为止。
inherit	规定应该从父元素继承 page-break-after 属性的设置。

背景图片和颜色

如果用户是在 webkit 内核浏览器上打印的话，我们可以强制打印机打印屏幕上所看到的颜色（即强制在打印页面上出现任何的背景图和颜色），一般来说彩色打印机可以做到这点，我们需要一个单独的媒体查询：

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

ログイン後にコピー

注意:在firefox opera 和IE，不能使用背景图和颜色。