Use CSS to separate page display and printing

Document directory

• Making the Association
• Restyling for print

There are 10 defined media types:

You can define CSS to control whether the element needs to be displayed during web printing.

For example:

@ Media Print
{}{
# Hidebtn {display: None}
}

If you do not need to display, you can set the CSS style of the element to not display, so that the element is invisible during the print preview.

The following is an English article for your reference:

Http://meyerweb.com/eric/articles/webrev/200001.html

Although you may not realize it, the Web is a multi-medium information source. no, I'm not talking about multimedia -- audio and video streams, for example -- but the actual medium through which the web's content is conveyed to us. for the vast majority of users, the medium is visual: the monitors we use every day to display pages. but there are missing who also turn to the medium of print, creating "hard copies" of pages using their laser printers.

However, the overwhelming aim of web design is visual, and drawing web page designs don't print out very well. navigation bars, ad banners, and other such things clutter up printouts and make them much harder to read. how many times have you seen a page on the web which has, off to one side, a link which says, "Click here for a printer-friendly version "?

There are certainly other media -- audio browsers and handheld devices are two such examples -- but the output medium which most concerns authors is still the printer. css2 offers a way to address this, giving authors the ability to create stylesheets which are medium-specific. this month, we'll look how you can style a single page for both screen (MONITOR) and print output, and provide an example you can try using Internet Explorer 5 for windows, or MSIE 4.5 for the Macintosh.

Making the Association

There are a variety of ways to associate media-specific stylesheets to a document. The most familiar way is to useLINKElement and simply addmediaAttribute:

<LINK rel="stylesheet" type"text/css"href="print.css" media="print">

In the previous example, we see that the stylesheetprint.cssHas been givenmediaOfprint; Thus, its styles will be used only when the document is printed. these styles will have no effect on the display of the document when viewed using a monitor, audio browser, or any other non-printing device.

There are currently ten defined media types:

• All
• Aural
• Braille
• Embossed
• Handheld
• Print
• Projection
• Screen
• Tty
• TV

These media types are described in some detail in Chapter 7 of the css2 specification. The most important isall, Which is the default value for any stylesheet which does not have a definedmedia.

There are other ways to assign media to stylesheets. For example, you can list one or more media types on an @ import statement:

@import url(paged.css) print,projection;

Thus, the styles inpaged.cssWill be used in bothprintAndprojectionMedia, both of which are knownPaged Media. Multiple media can be specifiedLINKEd stylesheets as well. The following two statements are equivalent:

<LINK rel="stylesheet" type"text/css"href="print.css" media="print,projection">@import url(print.css) print,projection;

There is one other way to apply media-specific styles:@mediaRule. Here's an example:

<STYLE type="text/css">@media print {BODY {font-size: 10pt; line-height: 120%; background: white;}}@media screen {BODY {font-size: medium; line-height: 1em; background: silver;}}</STYLE>

Restyling for print

Let's now look at a real example of alternate-media stylesheets. in order for these examples to work, you'll need to be using msie5/win or msie4.5/Mac, and it will be helpful (though not strictly necessary) if you have a printer handy. navigator 4.x does not support Alternate media on any platform, so it won't be much help with these examples.

First, let's assume a simple page of text with some various elements: paragraphs, headings, hyperlinks, and so on. This file is calledlatinesque.html, And we want to display it differently depending on whether it's on a monitor, or on paper. first we write a stylesheet for Screen Display (Remember, there's no accounting for taste ):

/* screen display styles */BODY {color: silver; background: black;}A:link {color: yellow; background: #333333; text-decoration: none;}A:visited {color: white; background: #333333; text-decoration: none;}A:active {color: black; background: white; text-decoration: none;}H1, H2, H3 {color: #CCCCCC; background: black; padding-bottom: 1px;border-bottom: 1px solid gray;}

This will give us a page something like that shown in Example 1. Note the ad banner, which is a feature common to so many sites.

All right, now we need to decide how the printed page shoshould look. We decide on a simple, conventional print style, without an ad banner, and so the stylesheet turns out like this:

/* print styles */BODY {color: black; background: white;}A:link, A:visited {background: white; color: black; text-decoration: underline;font-weight: bold;}H1, H2, H3 {background: white; color: black; padding-bottom: 1px;border-bottom: 1px solid gray;}DIV.adbanner {display: none;}

We 've added the last style in order to get rid of the ad banner in the printed version. to get an idea of what this will look like, take a peek at Example 2. realize that this is a screen approximation of a printout, but for the moment, it will do.

Now, to the top of the document, we add the followingLINKElements:

<LINK rel="stylesheet" type"text/css"href="screen.css" media="screen"><LINK rel="stylesheet" type"text/css"href="print.css" media="print">

Thus we get the document shown in Example 3, which has the screen appearance of Example 1 but the printed appearance of Example 2 -- load it up in MSIE, print it out, and see what happens!

(If you 'd like to see another example of print-media stylesheets in action, try printing out the CSS support grid .)