JQuery が CSS と印刷スタイルを組み合わせる方法_jquery

このセクションの内容:
JQuery および CSS 操作の印刷スタイル。

1. 印刷スタイルを追加します

1. 以下に示すように、画面表示用と印刷用の CSS ファイルをそれぞれ準備します。
画面表示用の CSS:

コードをコピー コードは次のとおりです:

印刷用CSS:

コードをコピー コードは次のとおりです:

3. CSS ファイルに画面表示スタイルと印刷スタイルを直接記述します:

コードをコピーします


コードは次のとおりです

@media print {}{

h1 {
color: black;

} h2 {}{ color: grey; } }

@media printの内容は印刷内容のみ有効で、その他の内容は画面表示スタイルとなります。

その他:
メディア タイプを指定しない (または media="all" を利用する) スタイルシートを作成すると便利なことがよくあります。
印刷専用のルールを定義する準備ができたら、印刷時に見栄えが悪いスタイルを無効にする別のスタイルシートを作成するだけです。
このアプローチを使用する場合の問題の 1 つは、プリンター スタイルが実際にメイン スタイルシートをオーバーライドすることを確認する必要があることです。すぐに使用できます。重要です。

2. 印刷スタイルに関する注意事項:

1. ブラウザーはデフォルトで CSS の背景コンテンツを印刷できないため、背景を印刷するように設定されている場合にのみ背景を印刷することは推奨されません (つまり、ブラウザーの詳細オプション)。 (オプション)。

背景が印刷された場合でも、その上に重ねられたテキストよりも優先される可能性があります。 これは、色付きの背景を持つモニターではコントラストが強いテキストの場合に特に当てはまりますが、白黒プリンターで印刷するとこの背景に溶け込んでしまいます。

背景: なし。背景画像と色を削除します。

background-color 属性を使用して、背景色を白に設定できます (background-color:white)。
背景のショートカット「背景:白」を使用しても同じ効果が得られます。したがって、background:white;
のようなステートメントは、背景色を白に設定するだけでなく、背景画像もすべて削除します。背景ショートカット プロパティを使用すると、非常に少ないコードで、白い背景の設定と画像の削除という 2 つの目的を達成できます。

2. 印刷コンテンツに画像を表示する必要がある場合は、HTML コードに追加してください。

3. 印刷設定では物理単位を使用するため、サイズにはピクセル (px) を使用しないことをお勧めします。

4. 不要なコンテンツや二次的なコンテンツを非表示にします。表示: なし

5. 一部のブラウザではフローティング div を印刷するときに問題が発生するため、特別な注意が必要です。

印刷スタイルシートでは、float: none; のようにブロックをフローティングにしないでください。

たとえば、Gecko ベースのブラウザ (Netscap 6 など) を使用して印刷ページを参照すると、フローティング要素のコンテンツが切り詰められます。
コンテンツはプリンターには送信されず、次のページにはその痕跡は残らず、消えてしまいます。

6. 印刷スタイルの手間を大幅に省くことができるように、HTML コード内の重要なコンテンツをできるだけ優先してください。

7. 印刷は Web ページとは異なり、白い枠線を残す必要があり、単位はインチ (インチ) です。

8. ページ上のすべてのテキストが黒で印刷されるようにするには、ワイルドカード セレクター (54 ページを参照) を使用して、各タグを黒のテキストとしてフォーマットする単一のスタイルを作成します。

コードをコピーします

コードは次のとおりです:

*{ color: ##000# !重要 }

9. 印刷時にリンク URL 情報を表示します:
高度なセレクター: after と content という高度な CSS プロパティを使用して、スタイル要素の最後に画面に表示されないテキストを印刷します。

既存の問題:
after セレクターと content 属性のトリックは、Internet Explorer 6 以前 (または IE 7) では機能しません。
ただし、Firefox と Safari では動作するため、訪問者がブラウザを使用できるように、少なくとも URL が明確に記載されています。

これを行うには、各リンクの後に URL を印刷するスタイルを印刷スタイルシートに追加します。見た目を良くするために括弧などの他のテキスト項目を追加することもできます:
a:after {content: " (" attr(href) ") ";}
ただし、この CSS は外側と内側を区別しません。リンクなので、同じサイト上の他のページへの役に立たない相対ドキュメント リンクも印刷します: 「ホーム ページにアクセス (../../index.html)」。少し CSS 3 の魔法を使用すると、このスタイルを強制的に絶対印刷のみにすることができます。 URL (http:// で始まるもの):

コードをコピーします コードは次のとおりです:

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

10. 印刷に改ページを追加する: 広く認識されている 2 つの属性は、page-break-before と page-break-after です。
page-break-before は、指定されたスタイルの前に改ページを挿入するように Web ブラウザーに指示します。ページ全体に収まるように画像を新しいページに印刷するには、page-break-before 属性を使用します。
要素を印刷ページの最後の項目として表示するには、その要素のスタイルに
page-break-after: always を追加します。

次のように .break_after と .break_before のような名前の 2 つのクラス スタイルを作成します。

コードをコピー コードは次のとおりです。 :

.break_before { ページ区切り前: 常に; }
.break_after { ページ区切り後: 常に;
これらのスタイルを、ページの上部または下部に印刷する要素に選択的に適用できます。

3. 印刷スタイルをテストする

通常、プリンターを使用してテストすることはできません。IE ブラウザーの「ファイル」メニューバーに「印刷プレビュー」があります。テストする。