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

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

構文

@media

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

聴覚点字エンボス加工 ハンドヘルドprintプリンター用投影CSS2なし スライドショーなどの画像の投影用スクリーンCSS2IE4+ コンピューターモニター用ttyCSS2CSS2説明: 用紙サイズ、向き、ページ余白など、印刷ページのいくつかの属性を指定するために使用されます。 、ページングおよびその他の機能。 ...はい、違いの印刷スタイルを設定して、以前のデフォルトのスタイルをオーバーライドするだけで済みます。 ピクセル単位 印刷スタイル シートを記述するときは、単位として画面ピクセル単位ではなくセンチメートルまたはインチを使用することに注意する必要があります。実際の単位は印刷に非常に役立ちます。一般的な DPI (Dot Per Inch) が 96 の画面の場合、px と cm の変換関係は次のとおりです: 1 = 2.54 cm1cm = 96/2.54 ≈ 37.80 px

CSS2	なし	音声および音楽シンセサイザー用
CSS2	なし	触覚フィードバックデバイス用
CSS2	なし	用浮き彫り文字 (ブラインドテキスト) 印刷装置
CSS2	なし	小型またはハンドヘルドデバイス用
CSS2	IE4+
なし	固定間隔の文字グリッドを使用するデバイスの場合。テレタイプライターや端末など		tv
NONE	テレビ機器用		@page
	// 设置显示器用字体尺寸@media screen {body {font-size:12pt; }}// 设置打印机用字体尺寸@media print {body {font-size:8pt;}}

1px = インチ 2.5 4/ 96 ≈ 0.0265 cm

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

96DPI解像度では、対応するピクセルのおおよそのサイズ:

794px * 1123px

ページマージン

印刷スタイルを有効にするには、印刷内容を紙の端から遠ざけて見栄えを良くするための CSS スタイルを記述する必要があります。 @page を使用する必要があります。この構文:

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

• ページ変更 印刷

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

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

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

article {   page-break-before: always;}

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

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

物件紹介

プロパティ

説明

CSS

改ページ後

設置元素後の分数実行

2

page-break-before

設置元素前の分页行です

2

page-break-inside

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

2

值	描述
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，不能使用背景图和颜色。