print_html/css_WEB-ITnose を制御するために特別に設計された CSS スタイル

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

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

1

2

3

4

5

/* スタイルは印刷にのみ適用されます*/

@メディアプリント {

}

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

1

<リンクタイプ="text/ css" rel="stylesheet" href="css/print.css" media="print">

サイト全体の CSS を全体的にデフォルトのスタイルに変更する必要はありません。 print によって継承されます。さまざまなニーズにのみ限定されます。印刷時にトナーを節約するために、ほとんどのブラウザでは色が自動的に反転されます。最良の結果を得るには、色の変化が明らかである必要があります:

1

2

3

4

5

6

7

/*白紙 黒文字*/

@media print {

body {

color: #000;

}

}

適切にデザインされたものを表示するためだけに、読めるウェブサイト:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

/*背景画像を削除し、ペン黒を保存*/

h1 {

color: #fff;

背景: url(banner.jpg);

}

@media print {

ナビ、余談 {

}

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

@media print {

h1 {

color: #000;

背景: なし。

}

ナビ、脇 {

表示: なし。

}

本文、記事 {

width: 100%;

マージン: 0;

パディング: 0;

}

@page {

余白: 2cm;

}

}

链接的处理

在打机上链接是看不到,应对超链接行扩展

1

2

3

4

5

6

7

8

9

10

11

12

/*在超链接后面添加带< http://XXX>的完全地址*/

@media print {

記事 a {

font-weight: 太字;

テキスト装飾: なし。

}

記事 a[href^=http]:after {

content:" <" attr(href) "> ";

}

}

显示效果可能性是这样的

制御打印設置选项

该@pageたとえば、表面のサイズを指定することができます。距、页眉页脚、页眉页脚、都等都是非常重要的的的的的

己

@page

规则规则纸张张大小大小设置设置设置

条条css

1

2

3

@page {

サイズ: 5.5インチ 8.5インチ;

}

你还可通过别名控制纸张大小、如く「A4」または「legal.」

1

2

3

@page {

サイズ: A4;

}

印刷方向を制御することもできます。ポートレート: ポートレート印刷、ランドスケープ: ランドスケープ

1

2

3

@page {

size: A4 land;

}

PAGE Model ページモデル

ページングメディアフォーマットモデルでは、ドキュメントは 1 つ以上のページボックスに転送されます。ページ フレームは長方形の平面にマッピングされます。これは CSS ボックス モデルとほぼ同様です。

注意* 対応しているブラウザは少ないです

1

@page { width: 50em; }

PAGE margin model Page-Margin Boxes

Beforeさらに議論すると、ページのボックスを理解する必要があります画面上での動作とは少し異なる動作をするためです。

ページモデルはページ領域を定義し、それを16個の周縁ボックスに分割します。ページ領域のサイズと、ページ領域の端とページ自体の終わりの間の余白のサイズを制御できます。

左右の余白

1

2

3

4

5

6

7

8

@page :left {

margin-left: 30cm;

}

@page :right {

margin-left: 4cm

}

以下のCSSは左下にページカウンターを表示します。右下隅、と右上の隅に章のタイトルが表示されます。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

@page:right{

@bottom-left {

余白: 10pt 0 30pt 0 ;

コンテンツ: 文字列(doctitle);

マージン: 30pt 0 10pt 0;

カラー: #333;

表示効果は以下の通りです。

注* この記事は、 Tips And Tricks For Print Style Sheets and Designing For Print With CSS and css3 page仕様 から編集されています