css @import必须放到其他css样式定义之前

q821424508

浏览: 123007 次
性别:
来自: 郑州

最近访客更多访客>>

lzdjavaeye

azrael6619

89652691

wangyihu0318

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css @import css导入其他css

今天没事看下css的东西，发现了一个小问题，
问题虽小，但是当你找不到原因的时候真是让人郁闷半天。

下面有个例子：

定义one.css文件：
one.css:

/****************
* fileName:one.css
****************/

p{
	color:red;
}

定义two.css文件：

two.css:

/****************
* fileName:two.css
****************/

p{
	background:yellow;
}

定义test.css文件：

test.css:

/****************
* fileName:test.css
****************/

p{
	border:2px solid blue;
}
@import url("two.css");
@import url("one.css");

定义css.html文件

/****************
* fileName:css.html
****************/

<html>
	<head>
		<title>css</title>
		 <link rel="stylesheet" type="text/css" href="css/test.css" />
		</head>
	<body>
		<p>aaa</p>
		<p style="text-align:center">bbb</p>
		<p>ccc</p>
		</body>
	</html>

从上面的代码中可以看出来，test.css引用了one.css和two.css两个文件。

上面的代码看上去没什么问题？！

我在IE中打开css.html的时候所有定义的css样式都可以显示出来，

但是当我在chrome浏览器中打开css.html的时候发现，只有test.css中的p段落定义的样式有效果，

而通过@import引入进来的css文件都没有效果。

通过网上查资料才发现，原来是css引入的时候，必须放到css文件的开头，

也就是说test.css的文件必须如下定义：

正确的test.css定义:

/****************
* fileName:test.css
****************/


@import url("two.css");
@import url("one.css");
p{
	border:2px solid blue;
}

在chrome浏览器上试了一下，所有的样式定义都出来啦，

感觉cctv，终于出来了

总结：

1.IE对css和html的支持都使不严格的，

2.chrome对css和html的定义比较IE来说更加遵循W3C的定义。

3.要想执行跨浏览器的网页，必须严格遵循W3C的定义，同时兼顾一下IE6~IE9（IE10暂时用的人非常少，只会在window8系统上有）

0
顶

0
踩

分享到：

java对象的复制 | mysql 左连接

2012-10-06 18:54
浏览 1954
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论