CSSを使用してページ印刷を設定する方法

この記事では、CSS を使用してページの印刷を設定する方法を紹介します。メディアの種類を設定すると、印刷時に適用される CSS が反映されます。具体的な内容を見てみましょう。

まず、CSS メディア タイプ とは何かを見てみましょう。

screen

print

tv

projection

all )

もちろん他にも種類はありますが、主に print を使用して印刷ページを作成する方法を紹介します。

CSS 設定ページの印刷の具体的な内容を見てみましょう

これを実現するには 2 つの方法があります

最初の 1 つ

CSS コード

<link rel="stylesheet" type="text/css" href="sample_print.css" media="print">

はここでよく使用され、CSS は内部に "media="print"" を設定することで印刷時にのみ適用されます。

上記の方法では、通常のWebページと印刷用のWebページの2種類のCSSを記述する必要があります。

2 つ目

次の CSS コードを見てみましょう

@media print{
  /*print的内容*/
}

これはメディア タイプによって実装されており、これを内部に適用できます。 CSS "@media print"

最初のメソッドを例として具体的な例を見てみましょう

コードは次のとおりです

HTML コード

  
    
    
    <link rel="stylesheet" type="text/css" href="sample_print.css" media="print">
    
  
  
    
Sample
    
如果是CSSを使用してページ印刷を設定する方法页可以看到文字
  

CSS コード

sample_print.css

p{
  color: #000000;
}

sample_screen.css

p{
  color: #ffffff;
 }

ブラウザ ページには次のように表示されます。効果

#メディアタイプが「スクリーン」であるため、「スクリーン」を使用しているCSSの文字色が白となり、下の文字が見えなくなります。

印刷プレビューを実行すると、下の図に示すように、次のテキストが表示されます。

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