印刷を制御するために特別に設計された CSS スタイル-CSSチュートリアル-php.cn

印刷を制御するために特別に設計された CSS スタイル

巴扎黑

リリース： 2017-05-01 14:40:36

オリジナル

2534 人が閲覧しました

ほとんどの Web デザイナーは印刷コントロールに慣れておらず、プリンターよりもピクセルに夢中になることがよくあります。現実の世界では、多くの人が参照用に Web サイトから Web ページを印刷することに依存しています。このデジタル時代でも、特別な機会には多くの人が依然として紙を手にしています。 Web 開発者がプリンターと LCD スクリーンの間のギャップを埋めるためにできることはいくつかあります。

スクリーンではなくプリンター用に設計されたスタイル

/* 样式将只应用于打印 */
@media print {


}

ログイン後にコピー

注* 別の CSS ファイルでリンクの media="print" 属性を設定して、このスタイルが印刷専用であることを指定することもできます

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

ログイン後にコピー

サイトの CSS 全体を再構成する必要はありません。全体として、デフォルトのスタイルはさまざまなニーズに対応するためにのみ継承されます。印刷時にトナーを節約するために、ほとんどのブラウザでは色が自動的に反転されます。最良の結果を得るには、色の変化が目立つようにする必要があります:

/*白纸黑字*/
@media print {
   body {
      color: #000;
      background: #fff;
   }
}

ログイン後にコピー

私たちは Web ページ全体のスクリーンショットを作成しているのではなく、適切にデザインされた読みやすい Web サイトを示すためだけに作成しています:

/*去除背景图片, 节约笔黑 */

h1 {
   color: #fff;
   background: url(banner.jpg);
}


@media print {
   h1 {
      color: #000;
      background: none;
   }


   nav, aside {
      display: none;
   }
}

ログイン後にコピー

プリンターの効率を高めるには、メインコンテンツのみを表示し、ヘッダーとフッターのナビゲーションバーを削除する必要があります

@media print {
   h1 {
      color: #000;
      background: none;
   }


   nav, aside {
      display: none;
   }


   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }


   @page {
      margin: 2cm;
   }
}

ログイン後にコピー

リンク処理

リンクはプリンターでは表示されません。ハイパーリンクを展開する必要があります

/*在超链接后面添加带<http://XXX>的完整地址*/
@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }


   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }
}

ログイン後にコピー

。表示効果はこんな感じかも