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

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

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

3:《这个规则扮演着较为重要的角色。今天就来主要的了解一下。

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

 

@import

语法:  

@import  url (urlsMedia ;  

说明:  

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">

<!--

@import url(screen.css) screen;

@import url(print.css) print;

-->

</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)。
CSS样式表的规划与组织(续)_关于@import样式表规则
CSS样式表的规划与组织(续)_关于@import样式表规则

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

 

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

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

相关文章:

  • 2021-12-25
  • 2022-12-23
  • 2021-11-29
  • 2021-08-14
  • 2022-12-23
  • 2021-07-04
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-12-03
  • 2022-02-07
  • 2022-03-02
  • 2021-09-16
  • 2021-12-06
相关资源
相似解决方案