CSS styles designed specifically for controlling printing_html/css_WEB-ITnose

Most web designers are not very familiar with print controls and are often more obsessed with pixels than printers. In the real world, many people rely on printing web pages from websites for reference: In this digital age, many people still have paper in their hands on some special occasions. There are some things web developers can do to bridge the gap between printers and LCD screens.

Styles designed for printers rather than screens

1

2

3

4

5

/* Style will only be applied to print*/

@media print {

}

Note＊ You can also specify this style specifically for printing by setting the media="print" attribute of the link in a separate CSS file

1

It is not necessary to reshape the entire CSS for your site; overall, the default style is inherited from print; only limited to different needs. To save toner when printing, most browsers automatically invert colors. For best results, the color change should be obvious:

1

2

3

4

5

6

7

/*black and white*/

@media print {

body {

color: #000;

background: #fff; We are not creating screenshots of the entire web page, just to show a well-designed, readable website:

1

2 3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

/*Remove background image, save pen black*/

h1 {

color: #fff;

background: url(banner.jpg);

}

@media print {

h1 {

color: #000;

background: none;

}

nav, aside {

display: none; The printer is more efficient and should only display the main content and remove the header and footer navigation bar

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;

       background: none;

    }

 

 

    nav, aside {

       display: none;

    }

 

 

    body, article {

       width: 100%;

       margin: 0;

       padding: 0;

    }

 

 

    @page {

       margin: 2cm;

    }

}

　　链接的处理

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

1

2

3

4

5

6

7

8

9

10

11

12

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

@media print {

    article a {

       font-weight: bolder;

       text-decoration: none;

    }

 

 

    article a[href^=http]:after {

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

    }

}

　　显示效果可能是这样的

　　控制打印设置选项

　　该@page规则允许您指定页面的各个方面。例如，你将要指定页面的尺寸。页边 距,页眉页脚等都是非常重要的。[很多浏览器均己支持]

　　@PAGE规则纸张大小设置

　　通过下面这条CSS您可以设置纸张大小,5.5英寸宽,8.5英寸高.

1

2

3

@page {

   size: 5.5in 8.5in;

}

　　你还可以通过别名控制纸张大小,如"A4"或“legal.”

1

2

3

@page {

size: A4;

}

You still have You can control the printing direction, portrait: portrait printing, landscape: landscape: landscape

1

2

3

@page {

size: A4 landscape;

}

　PAGE ModelThe Page Model

　In paginated media In the formatting model, documents are moved into one or more page boxes. The page frame is mapped to a rectangular plane. This is roughly similar to the CSS box model.

　Note*: Supports fewer browsers

1

@page { width: 50em; }

　PAGE Margin ModelPage-Margin Boxes

Before going any further, we should understand the box model of the page because it behaves with how it works on the screen The job is a little different.

The page model defines the page area and then divides it into 16 peripheral edge boxes. You can control the size of the page area and the size of the margin between the edge of the page area and the end of the page itself.

Left and right margins

1

2

3

4

5

6

7

8

@page :left {

margin- left: 30cm;

}

@page :right {

margin-left: 4cm;

}

The following css will display the title at the bottom left, the page counter at the bottom right, and the chapter title at the top right.

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 {

margin: 10pt 0 30pt 0;

border-top: .25pt solid #666;

content: "Our Cats";

font-size: 9pt;

color: #333;

}

@bottom-right {

margin: 10pt 0 30pt 0;

border-top: .25pt solid #666;

content: counter(page);

font -size: 9pt;

}

@top-right {

content: string(doctitle);

margin: 30pt 0 10pt 0;

font-size: 9pt;

color: #333;

}

}

The display effect is as follows:

Note* This article is compiled from: Tips And Tricks For Print Style Sheets and Designing For Print With CSS and css3 page specifications