利用css可以实现页面显示和打印分开
2007-08-28 19:06
513 查看
共有10种定义的媒体类型:
你可以通过定义css来控制在web打印时该元素需要是否显示
例如:
@media print
}
如果你不需要显示可以设置该元素的css样式为不显示,这样在打印预览时则看不到该元素
下面是一篇英文文章,大家可以参考:
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 many 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 many 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.
In the previous example, we see that the stylesheet
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 is
There are other ways to assign media to stylesheets. For example, you can list one or more media types on an @import statement:
Thus, the styles in
There is one other way to apply media-specific styles: the
First, let's assume a simple page of text with some various elements: paragraphs, headings, hyperlinks, and so on. This file is called
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 should look. We decide on a simple, conventional print style, without an ad banner, and so the stylesheet turns out like this:
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 following
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.)
你可以通过定义css来控制在web打印时该元素需要是否显示
例如:
@media print
}
如果你不需要显示可以设置该元素的css样式为不显示,这样在打印预览时则看不到该元素
下面是一篇英文文章,大家可以参考:
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 many 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 many 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 use theLINKelement and simply add the
mediaattribute:
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
In the previous example, we see that the stylesheet
print.csshas been given a
mediaof
There are currently ten defined media types:
all
aural
braille
embossed
handheld
projection
screen
tty
tv
These media types are described in some detail in Chapter 7 of the CSS2 specification. The most important is
all, which is the default value for any stylesheet which does not have a defined
media.
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 in
paged.csswill be used in both
projectionmedia, both of which are known as paged media. Multiple media can be specified for
LINKed 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: the
@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 called
latinesque.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 should 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 following
LINKelements:
<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.)
相关文章推荐
- 利用css和js实现firefox和IE都支持的页面局部打印
- 利用CSS快速实现页面打印的分页设置
- 利用css和js实现页面的标签效果。(标签个数可以动态变化)
- 利用css页面隐藏和显示,实现页面滑动
- 纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
- 利用JS实现:页面组件的动态显示、隐藏
- 利用PreLoader实现一个平视显示(HUD)效果(可以运用到加载等待效果),并进行简单的讲解
- html页面中,表格数据可以固定表头,表数据部分做滚动条显示,如何实现
- Java Web 2.2.3 案例——利用CSS对注册页面实现修饰
- CSS小技巧:利用CSS,给WEB页面强制分页,用于打印!
- 巧妙使用CSS创建可以打印的页面
- 利用Ajax实现在页面显示局部刷新
- CSS+JS实现同一页面可以重复使用的选项卡
- 利用Css实现WEB打印分页设置
- 利用PreLoader实现一个平视显示(HUD)效果(可以运用到加载等待效果),并进行简单的讲解
- 通过定义css让页面可以打印指定的底色
- CSS实现屏幕显示与打印结果不一样的方法
- 应用CSS的page-break-after属性 实现WEB页面强制分页打印
- 利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果
- Css实现Div在页面上垂直居中显示