看过两种指定媒体类型的方法之后,接着来看看如何实际以它们提供屏幕显示与打印时使用的样式.
分开屏幕显示与打印的样式
假设我们想为同一份文件提供两份CSS:一个在显示时使用,另一个在打印时使用.现在以我的个人网站作为示范.
我以<link>标签引用整个网站的主体样式表(styles.css).styles.css的内容只是个简单的@import规则,用以引入另一个外部样式表,这样能够对老旧浏览器(像是Netscape 4.x)隐藏样式设定.
在页面的<head>里,链接到主体样式表styles.css
<link rel="stylesheet" type="text/css" href="/css/style.css" />
同时也建立另一个特别针对打印设计的样式表(print.css).在print.css里,我写了只在页面打印时适用的样式.
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/print.css" />
然后,现在要如何确保这些CSS只会针对各自适合的媒体发挥作用呢?为<link>标签加上media属性就可以了(与方法A一样).
<link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" />
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />
通过为styles.css指定screen,就能确保styles.css包含的样式只会对电脑屏幕使用,同样的,把media属性设为print就能确保print.css包含的样式只在使用者打印页面时使用.
站长工具
相关文章
请稍等，评论加载中...