CSS样式表的规划与组织(续)_关于@import样式表规则

CSS样式表的规划与组织文章列表

1：《CSS样式表的规划与组织》

2：《CSS样式表的规划与组织(续)_关于@import样式表规则》

3：《CSS样式表的规划与组织再续_一套确实可行的方案实例》

在CSS样式表的规划与组织中@import这个规则扮演着较为重要的角色。今天就来主要的了解一下。

（其实是朱王伟提醒我这个点，惭愧，较为浮躁，钻研精神不足。）

@import

语法：

@import url (url) sMedia ;

说明：

url : 使用绝对或相对地址指定导入的外部样式表文件。请参阅link对象

sMedia : 指定设备类型。

指定导入的外部样式表及目标设备类型。

该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。

用此规则导入的样式表，其owningElement特性是一个link对象或style对象。请参阅我的其他著作。

导入的外部样式表中的定义将被文当中的同名定义覆盖。

示例：

@import url("foo.css") screen, print;

@import "print.css"

请注意sMedia这个参数。这个参数可以用来指示你要导入的这个样式表用于何种媒体（屏幕或者打印机等）。

举个例子：

html代码：

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title> New Document </title>

<style type="text/css">



</style>

</head>

<body>

<div>／×××××××××××</div>

<div id="divNoPrintMe">i won't been print!</div>

<div>×××××××××××／</div>

</body>

</html>

screen.css文件代码：

#divNoPrintMe{

border:1px solid red;

}

print.css文件代码：

#divNoPrintMe{

display:none;

}

这样，当页面显示是就有红色边框（图1），而当打印是就不会出现此区域（图2）。

然而不幸的是，就如大家所看到的截图，这个规则只能FireFox这样的标准浏览器能完全的支持。IE，无论是6以前的版本，还是最新的IE7都将不认识eMedia参数。甚至，你只要加上这个参数，即使是screen，也将导致整个样式表的引入不能被识别。-_-b...

所有，如果大家想通过import来更好的组织打印样式表，看来只能是未来的事情了。Orz..

tag:管理css,css管理,管理样式表,样式表管理,css规划,css组织,css样式表,web标准网站,web标准,web标准资料,CSS样式表的规划与组织

posted @ 2007-05-28 11:32 阿一(杨正祎) 阅读(3897) 评论(1) 收藏举报

刷新页面返回顶部