Create a CSS style for your printout

css| Create | print

Sometimes you don't have to create a separate print-related page on your Web site.

Most Web pages are displayed on a computer screen, and people watch them on the screen, but sometimes users want to print some of the content online, which requires connecting to the print media. Because it used to be the kind of format that makes Web pages look good on the screen, but not so good when printed, web creators typically create separate pages that are closely related to printers, and users often print them. But if you use XHTML tags and CSS, you don't have to create a separate page to connect to the printer, you just need a few CSS styles to format the content of the pages you want to print so that you can print the output.

　　Start with a good mark

XHTML and CSS have a special function, that is, content and presentation are separate; You can change its format to another form of media without having to change its contents or change its basic markup. But in order to make this idea possible in practice, you should make your structure a little bit better, clean and tidy. So, before you create a page that is connected to a printer with CSS, take a closer look at its XHTML markup.

Clears all inline styles in the tag and other intrinsic presentation formats. In order for the print media's CSS file to function, all styles and formatting must be determined by the style sheet it brings, not by the formatting in its markup. Also, remove all CSS styles from the header and store them in an external style sheet that is attached (attached or entered) to the XHTML document.

When checking the tag, you want to make sure that its contents are grouped logically, divided into Div, and that each div is identified by its ID or category.

　　First step: Add a print style sheet

The first step in creating a page with CSS that is closely related to the printer is to attach the print media CSS file to your XHTML document. I prefer to use the links in the XHTML header with the following two separate CSS files, one for all media (or screen media) and another for print media. The link looks a little like the following:

<link rel= "stylesheet" type= "Text/css" media= "All" href= "Mysite-all.css"/>
<link rel= "stylesheet" type= "Text/css" media= "print" href= "Mysite-print.css"/>

　　Step two: Set colors and fonts

On the screen, those colored text, colorful colors, and a clear texture of the background look pleasant, but if it is a black and white printer printed on the paper, may not be so good. In this case, it is usually a simple black background with white letters that look better.

Often designers set the default background and text color in the principal tag Selector. The selector also sets the default font shape and size, as follows:

Body {
Font-family:arial, Helvetica, Sans-serif;
font-size:10px;
Background-color:maroon;
Color:silver;
}

To make this style work better with the printer, you should change the color to a white background black font, and set the basic font size. The main styles are as follows:

Body {
Font-family:arial, Helvetica, Sans-serif;
font-size:12pt;
Background-color:white;
Color:black;
}

Note that in the print style sheet, the font size is measured in dots (PT). If you want to specify the screen display unit of measure, the pixel is more appropriate than the point and feet, and in print, the situation is the opposite, people tend to use the former.

On the other hand, many people suggest using a serif font to replace the sans-serif fonts that are widely used on the screen, and I personally feel that this is a design-by-project, so I don't automatically convert the fonts in each print style sheet.

　　Step three: The style of the link

There are two different views on the handling of links in the printout, each of which is a separate faction. One idea is that links do not work on paper, so they should be designed as much as other parts of the design text. Another view is that links are critical to a web's structure, and because of its importance, it should be clearly visible in printed text.

If you do not consider your design intent, whether you want to highlight the link or let it into the text, one thing is beyond doubt, that is, you want to change the normal Web page and print version of the link between the style. Because there's no difference between a regular link and a visited link, you can combine the two selectors, like this:

a:link,a:visited {
Color: #3333CC;
Text-decoration:underline;
Font-weight:bold;
}

The box sets the link to dark blue (dark gray on a black-and-white printer), bold and underlined, which is also one of the most common unformatted styles of a link, the black text on a white background.

　　Fourth step: Hide the navigation bar and the tool bar

One of the aims of designers to design a page that is tightly linked to a printer is to eliminate the contents of the main page, including navigation bars, ads, toolbars, and so on.

In the output, navigation buttons do not work, and those ads do not click into the function, as for the toolbar, it provides users with some relevant information links between to make the page content richer, but in the printout, often counterproductive, resulting in unnecessary confusion.

The key to removing these factors from the page is to separate them in the markup and divide them into separate, but distinguishable, Div. For example, you can divide the navigation bar into a div named NavBar, with the following style:

div#navbar{
margin:0 79% 0 0;
padding:0px;
Background-color: #eeeeee;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}

You can use the following CSS to hide the contents of the DIV in this page:

Div#navbar {
Display:none;
}

In a page connected to a printer, you can use the same method to move ads, toolbars, headers, footers, animations, unwanted pictures, and other unimportant parts.

　　Step Fifth: Set width and margin margins

After hiding those unimportant parts, it's time to design the rest so that it's easier to print. Typically, the main content is in a div that may have been designed so that it can coexist with other components, such as navigation bars and toolbars, and share a screen.

div#content{
width:75%;
margin:10px;
padding:10px 15px;
}

As all the other components of the page have been excluded, now all we have to do is set up the div in the printed page, like this:

div#content{
width:100%;
margin:0pt;
padding:0pt;
}

Set width: 100%, this setting fills the portion of the page that can be printed. Of course, you can have other options, you can set a specific width (in inches) and then use margin padding and padding so that you can better control the printout, however, you need to think carefully and test carefully to make sure your settings are valid for most printers.

　　Sixth step: Make content not floating

Some browsers print floating div in the process, there will be a problem that needs special attention. For example, a gecko browser, such as Netscape 6+, truncates the contents of a floating element when it is used by a user to browse a printout page. The content will not be transferred to the printer, and the next page will not have its trace-it disappears.

Thankfully, there is a very convenient workspace for this problem. In your printed page there are still some div, you just need to remove the floating animals in the div. Typically, the page layout looks simpler after you remove the toolbars and navigation bars, and you don't need those floating animals. You can use a method similar to the following to remove a floating object:

div#content2{
Float:none;
}

　　Step Seventh: Check the other styles that need to be adjusted

When you have completed the previous steps, be particularly careful about the major changes that are required to make a page closely linked to the printer. Still, there may be some styles that will lead users astray, which should get our attention. Now, you should enable your documents and stylesheets, and tidy up the bits and pieces of the material. Start the browser's Print preview feature and preview the effect of your print media style sheet.

The author: Michael Meadhra, who has been involved in the IT industry since the advent of the Web, has published more than 30 books, including the I-Everything with Dreamweaver MX (Osborne/mcgraw-hill Publishing).