jquery CSS を使用して印刷を制御する style_jquery

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

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

2. インポート方法:

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

@media print {}{
h1 {
色: 黒;
}
h2 {}{
色: グレー;
}
}
@media printの内容は印刷内容のみ有効で、その他の内容は画面表示スタイルとなります。

その他:

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

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

1. ブラウザーはデフォルトで CSS の背景コンテンツを印刷できないため、印刷スタイルで背景を使用することはお勧めできません。ブラウザーが

の場合にのみ使用できます。 背景を印刷できるように設定できる場合のみ、背景を印刷できます (IE の詳細オプションでオプション)。背景が印刷された場合でも、その上に重ねられたテキストよりも優先される可能性があります。
これは、色付きの背景を持つモニターではコントラストが強いテキストでも、白黒プリンターで印刷すると背景に溶け込んでしまう場合に特に当てはまります。
背景:なし; 背景を削除します
絵も色も。

次のように、background-color 属性を使用して背景色を白に設定できます: font-family: Arial; line-height: 26px;"> 背景のショートカットを使用しても同じ効果を得ることができます。背景: 白 したがって、背景: 白;

と同様です。 このようなステートメントは、背景色を白に設定するだけでなく、すべての背景画像を削除します。この背景のショートカット属性
を使用します。 非常に少ないコードで、背景を白に設定し、画像を削除するという 2 つのことを実現できます。

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

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

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

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

印刷スタイルシートでは、float: none; のようなフローティング ブロックを使用しないでください。たとえば、Gecko ベースのブラウザ
(Netscape 6 など)、ユーザーがそれを使用して印刷出力ページを参照すると、フローティング要素のコンテンツが切り詰められます。
コンテンツはプリンターに送信されず、次のページにはその痕跡が残らず、消えてしまいます。

6. HTML コード内で重要なコンテンツを優先するよう最善を尽くしてください。これにより、印刷スタイルでの多くの手間が省けます。

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

8. ページ上のすべてのテキストが黒で印刷されるようにするには、ワイルドカード セレクター (54 ページを参照) を使用して、各

を区切る変数を作成します。 タグはすべて、単一スタイルの黒いテキストで書式設定されます:
*{ color: ##000# !重要 }

9. 印刷時にリンク URL 情報を表示する: 高度なセレクターを使用し、コンテンツと呼ばれる高度な CSS プロパティを使用します。

画面に表示されないテキストをスタイル要素の末尾に印刷します。
残念ながら、:after セレクターと content 属性のトリックは Internet Explorer 6 以前では機能しません
(この記事の執筆時点では、IE 7 でも動作しません)。ただし、Firefox と Safari では動作するので、少なくとも理解はできます
訪問者がブラウザから利用できるようにURLを記述します。

これを行うには、各リンクの後に URL を印刷するスタイルを印刷スタイルシートに追加します。さらにテキスト項目を追加することもできます

見た目を良くするには括弧を使用してください:
a:after {content: " (" attr(href) ") ";}

ただし、この CSS は外部リンクと内部リンクを区別しないため、同じ Web サイト上の他のページに対して役に立たない相対
も出力します。 ドキュメントリンク: 「ホームページ (../../index.html) にアクセスしてください。」 CSS 3 のちょっとした魔法を使えば、このスタイルに
のみを入力するように強制できます。 次のように、絶対 URL (つまり http:// で始まる URL) を出力します:
a[href^="http://"]:after {content: " (" attr(href) ") ";}

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

次のように、.break_after と .break_before のような名前の 2 つのクラス スタイルを作成します。
.break_before { ページ区切り前: 常に }
.break_after { ページ区切り後: 常に }

これらのスタイルを、ページの上部または下部に印刷する要素に選択的に適用できます。

3. テスト印刷スタイル

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