ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS を使用して印刷ページを設定する方法の簡単な紹介_html/css_WEB-ITnose

CSS を使用して印刷ページを設定する方法の簡単な紹介_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:30:25
オリジナル
1113 人が閲覧しました

CSS を使用して印刷ページを設定する方法の簡単な紹介:
多くの場合、Web ページ全体ではなく、Web ページの特定の部分を印刷する必要があるため、Web ページの内容を伝えるより良い方法です。印刷する部分を印刷し、CSS を使用して設定します。まずコードを見てください:

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
ログイン後にコピー

上記の 2 行のコードは、特別な必要があるものを示しています。 Media 属性値がそれぞれ screen と print であり、CSS スタイル シートによって提供されるオブジェクトを指定するために使用されます。属性値が media の場合、表示を制御するために使用されることを意味します。属性値が print の場合、印刷する必要がある要素のスタイルを制御するために CSS コードが使用されることを意味します。
印刷する必要のないページ要素を非表示にする:
印刷を制御する CSS を使用して、印刷する必要のないページ要素を非表示にします。次に、[印刷] をクリックし、印刷スタイルの制御下で非表示になっていない要素のみを非表示にします。シートが印刷されます。
コードは次のとおりです:

/* 隐藏不打印项 start */h1 span{   display:none; } #sidebar{   display:none; } /* 隐藏不打印项 end */
ログイン後にコピー

上記のコードは単なるデモンストレーションであり、ページ内の関連要素は印刷されません。
クリックして印刷:

<input type="button" value="点击打印" onclick="window.print()"/>
ログイン後にコピー

印刷効果を実現するには、上のボタンをクリックしてください。

元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=12813

詳細については、以下を参照してください: http://www.softwhy.com/divcss/

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート