注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

飘泊

努力做到全面...

 
 
 

日志

 
 

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

2010-03-08 14:37:20|  分类: DIV+CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

<!--

@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样式表的规划与组织(续)_关于@imp<wbr>ort样式表规则 - 蚊子 - 飘泊

CSS样式表的规划与组织(续)_关于@imp<wbr>ort样式表规则 - 蚊子 - 飘泊

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

 

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

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

  评论这张
 
阅读(178)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017