ホームページ  >  記事  >  ウェブフロントエンド  >  CSS を使用して印刷ページを作成する方法を教えます

CSS を使用して印刷ページを作成する方法を教えます

巴扎黑
巴扎黑オリジナル
2017-04-05 16:44:391716ブラウズ

CSS を使用して印刷ページを作成します。印刷専用の HTML ファイルを作成する必要はありません。CSS+p を使用して「WEB 標準」に従って HTML ページをレイアウトすることが前提となります。

まず、プリンターに設定したCSSファイルをHTMLページに追加します

<link href="css/admin.css" rel="stylesheet" type="text/css" media="screen" />	
<link href="css/admin-print.css" rel="stylesheet" type="text/css" media="print" />

media="screen" は画面指向です

media="print" は印刷用です。 次に、ページの印刷版を作成し、ナビゲーション、サイドバー、広告、著作権などの不要なページ要素を削除します。このとき、「WEB標準」に準拠してページを作成するメリットが反映されます。 CSSでレイアウトを変更するのが簡単です。

りー

第三に、印刷ボタン機能は IE と Firefox で正常に印刷できます。

りー

さらに、「印刷設定」と「印刷プレビュー」を実行できるローカル バージョンの印刷ページもありますが、この設定のため、ネットワーク印刷では IE ブラウザのコントロールを呼び出す必要があり、ActiveX のセキュリティが必要になります。制御を減らす必要があり、IE でのみ使用でき、実用的ではありません。したがって、バックアップ用の呼び出しコードのみを投稿します。

りー

4つ目、注意事項

印刷スタイルでは、印刷フォント サイズはポイント (pt) 単位で測定されます。画面上のフォント サイズ表示では、ポイントやフィートよりもピクセル (px) の方が適切です。

印刷スタイルでは、CSSのfloat属性が原因で印刷ページが欠けてしまう場合がありますので、不要なブロック単位の表示を削除するようにしてください。

印刷設定やヘッダー・フッターのカスタマイズについては、いろいろ調べたところ、CSSやHTMLは制御できず、ActiveXコントロールを呼び出すことでしか実現できないとのことですが、これは安全ではありません。最善の方法は、印刷する前にブラウザのメニューをクリックして自分で印刷設定を行うことです。

CSS には、「page-break-after」と「page-break-before」という改ページを設定できるタグもあります。私の休日ページには多くのテーブルがあるため、この CSS は適用しませんでした。具体的な効果は自分でテストできます。

以上がCSS を使用して印刷ページを作成する方法を教えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。