Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to design CSS styles for printing". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

CSS Code copies content to the clipboard

/ * Styles will only be applied to plots * /

@ media print {

}

Note * you can also set the media= "print" property of link through a separate CSS file to specify that this style is dedicated to printing.

CSS Code copies content to the clipboard

It is not necessary to reshape the entire CSS for your site, as a whole, print inherits the default samples; only limit different needs. To save toner when printing, most browsers automatically reverse the color. In order to achieve the best results, the color change should be obvious:

CSS Code copies content to the clipboard

/ * in black and white * /

@ media print {

Body {

Color: # 000

Background: # fff

}

}

We are not creating a screenshot of the entire page, just to show a well-designed and readable website:

/ * remove the background picture and save the black pen * /

CSS Code copies content to the clipboard

H2 {

Color: # fff

Background: url (banner.jpg)

}

@ media print {

H2 {

Color: # 000

Background: none

}

Nav, aside {

Display: none

}

}

In order to make the printer more efficient, only the main content should be displayed and the header and footer navigation bar should be removed.

CSS Code copies content to the clipboard

@ media print {

H2 {

Color: # 000

Background: none

}

Nav, aside {

Display: none

}

Body, article {

Width: 100%

Margin: 0

Padding: 0

}

@ page {

Margin: 2cm

}

}

Handling of links

The link is not visible on the printer and the hyperlink should be extended

/ * add the full address after the hyperlink * /

CSS Code copies content to the clipboard

@ media print {

Article a {

Font-weight: bolder

Text-decoration: none

}

Article a [href ^ = http]: after {

Content: ""

}

}

The display effect may be like this.

Control print setup options

The @ page rule allows you to specify aspects of the page. For example, you will specify the size of the page. Margins, headers and footers are all very important. [supported by many browsers]

@ PAGE Rule Paper size setting

With the following CSS, you can set the paper size, 5.5in wide and 8.5in high.

CSS Code copies content to the clipboard

@ page {

Size: 5.5in 8.5in

}

You can also control the paper size through aliases, such as "A4" or "legal."

CSS Code copies content to the clipboard

@ page {

Size: A4

}

You can also control the print direction, portrait: print vertically, landscape: landscape

CSS Code copies content to the clipboard

@ page {

Size: A4 landscape

}

PAGE model The Page Model

In the paging media format model, the document is transferred to one or more page boxes. The page frame is mapped to a rectangular plane. This is roughly similar to the css box model.

Note * few browsers are supported

CSS Code copies content to the clipboard

@ page {width: 50em;}

PAGE margin model Page-Margin Boxes

Before going any further, we should understand the box model of the page, because its behavior is somewhat different from how it works on the screen.

The page model defines the page area, and then divides 16 perimeter 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 margin

CSS Code copies content to the clipboard

@ page: left {

Margin-left: 30cm

}

@ page: rightright {

Margin-left: 4cm

}

The following css will display the title at the bottom left, the page counter in the lower right corner, and the title of a chapter in the upper right corner.

CSS Code copies content to the clipboard

@ page:rightright {

@ bottombottom-left {

Margin: 10pt 0 30pt 0

Border-top: .25pt solid # 666

Content: "Our Cats"

Font-size: 9pt

Color: # 333

}

@ bottombottom-rightright {

Margin: 10pt 0 30pt 0

Border-top: .25pt solid # 666

Content: counter (page)

Font-size: 9pt

}

@ top-rightright {

Content: string (doctitle)

Margin: 30pt 0 10pt 0

Font-size: 9pt

Color: # 333

}

}

The display effect is as follows:

This is the end of the content of "how to design CSS styles for printing". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.