Page printing pagination

First, how to achieve the difference between screen display and printing:

Usually we will set up CSS as follows:

<!--Inline Type -<styletype= "Text/css">. Demo1{...}. Demo2{...}. Demo3{...}</style><!--External-linked -<Linkrel= "stylesheet"type= "Text/css"href= "Mycss.css"> 

In fact, this time we omitted a called media property, which is used to specify the valid range of CSS. The writing method of the media attribute should be this:

<!--Inline Type -<styletype= "Text/css">@media All{. demo1{ .}. Demo2{...}. Demo3{...}}</style><!--External-linked -<Linkrel= "stylesheet"type= "Text/css"href= "Mycss.css"Media= "All">

Of course, this is the same as the non-media property, the scope is all, the following explanation of the meaning of media other values:

the value of the media property	meaning
All	For all device types
Aural	For speech and music synthesizers
Braille	For tactile feedback devices
Embossed	Printing equipment for convex dot character (braille)
Handheld	For small or portable devices
Print	For printers
Projection	For projecting images, such as slides
Screen	For computer monitors
Tty	Used for devices that use fixed-spacing character formatting. such as telex typewriters and terminals
Tv	For TV-type equipment

In fact, because the specification is not uniform, not all the values can be used, but now can be confirmed that the mainstream three browser kernel ie, Firefox and chrome all support all, screen and print, for printing is enough.

So in the case of pages that need to differentiate between print and screen display, we can write CSS like this:

<!--Inline Type -<styletype= "Text/css">@media Screen{. demo1{ .}. Demo2{...}. Demo3{...}} @media Print{. demo1{ .}. Demo2{......}. Demo3{......}}</style><!--External-linked -<Linkrel= "stylesheet"type= "Text/css"href= "Screen.css"Media= "Screen"><Linkrel= "stylesheet"type= "Text/css"href= "Print.css"Media= "Print">

This way, when the screen is displayed, it will be printed according to the print settings when printed.

Second, how to set the print size

The size of the screen is not much, the pixel is the basic unit, according to the circumstances of the use of EM and so on. In fact, when printing the same simple, using the actual physical size can be, the common metric units are cm cm and mm mm. Take a picture as an example:

<!--Inline Type -<styletype= "Text/css">@media Screen{. demo1{width:500px;Height:400px;  }} @media Print{. demo1{width:150mm;Height:120mm;  }}</style><!--the picture in body -<imgsrc="..."class= "Demo1">

This will be displayed as 500*400px when the screen appears, while printing will print to 15*12 cm. If the elements are more independent, it is also possible to use the ID and the # selector.

Third, print the paging

Printing paging is a very handy property that media provides, which allows you to print the contents of a page on multiple sheets of paper, without requiring you to make pages into multiple pages, which is Page-break-after, Set the value of the Page-break-after in the CSS, and then insert this property on the page in a paging place, and the page will be printed at the end of the current element. There is also a page-break-before, from the name can be seen, and page-break-after is used for paging, the difference is its position before the object.

available property values for Page-break-after	meaning
Auto	Insert a page break after the object, if necessary
Always	Always insert a page break after an object
Avoid	Avoid inserting page separators after objects
Left	Inserts a page break after the object until it reaches a blank left-side page
Right	Inserts a page break after the object until it reaches a blank right-side page
Null	Null value. IE5 used to cancel page break settings

Examples of Use:

<!--Inline Type -<styletype= "Text/css">@media Screen{#demo1 {width:500px;Height:400px;  }#demo2{width:500px;Height:400px;  }} @media Print{#demo1 {width:150mm;Height:120mm;Page-break-after: always;  }#demo2{width:150mm;Height:120mm;  }}</style><!--the picture in body will be displayed on the same page, but the two pictures will be printed on 2 sheets of paper separately . -<imgsrc="..."ID= "Demo1"><imgsrc="..."ID= "Demo2">

Of course, we can also use inline code to page out

<src= "..."  ID= "Demo1"  style= "Page-break-after: Always; " > <  src= "..."  ID= "Demo2">

The effect is the same.

Page printing pagination

Page printing pagination