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

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

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

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

印刷用CSS:

h1 {
color: black;

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

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

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

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

たとえば、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:// で始まるもの):

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

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

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