`

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
分享到:
评论

相关推荐

    css笔记课程笔记2019,5,22

    * 对数据进行操作,需要把数据放到一个区域里面(div) 5、布局的漂浮(了解) float - left: 后面的div到右边 - right:后面的div到左边 6、布局的定位(了解) position - absolute ** 从文档流中拖出 -...

    cms后台管理

    将解压后得到的jeecms-3.0.2-final文件夹下的root文件夹更名为jeecms拷贝到tomcat 安装目录下的webapps 文件夹下(例如: D:\Tomcat 6.0\webapps\),启动tomcat,在地址栏中输入http://localhost:8080/jeecms, 您...

    XMl实用大全(资料全易学习)

    12.6 在CSS样式单中添加注释 341 12.7 CSS中的单位 342 12.7.1 长度值 342 12.7.2 URL值 344 12.7.3 颜色值 345 12.7.4 关键字值 346 12.8 块、内联或列表项元素 347 12.8.1 列表项 352 12.8.2 whitespace属性 354 ...

    xml实用大全和轻松学习手册和无废话xml

    12.6 在CSS样式单中添加注释 341 12.7 CSS中的单位 342 12.7.1 长度值 342 12.7.2 URL值 344 12.7.3 颜色值 345 12.7.4 关键字值 346 12.8 块、内联或列表项元素 347 12.8.1 列表项 352 12.8.2 whitespace属性 354 ...

    XML实用大全(web开发必备手册)

    12.6 在CSS样式单中添加注释... 341 12.7 CSS中的单位... 342 12.7.1 长度值... 342 12.7.2 URL值... 344 12.7.3 颜色值... 345 12.7.4 关键字值... 346 12.8 块、内联或列表项元素... 347 12.8.1 列表项... ...

    XML实用大全----xml详细参考书

    12.6 在CSS样式单中添加注释... 341 12.7 CSS中的单位... 342 12.7.1 长度值... 342 12.7.2 URL值... 344 12.7.3 颜色值... 345 12.7.4 关键字值... 346 12.8 块、内联或列表项元素... 347 12.8.1 列表项... ...

    XML编程综合资料库

    12.6 在CSS样式单中添加注释... 341 12.7 CSS中的单位... 342 12.7.1 长度值... 342 12.7.2 URL值... 344 12.7.3 颜色值... 345 12.7.4 关键字值... 346 12.8 块、内联或列表项元素... 347 12.8.1 列表项... ...

    dreamweaver的各种组件

    Reverse Timeline Reverse Timeline可以从TIMELINE的帧15倒放到帧1,但必须将其放到TIMELINE的文件夹下,否则它不会工作 Layer f(x) Behavior 这个Behavior 可以让一个层(layer)按照一个圆形、螺旋形或一些 特殊...

    XML实用大全

    339 12.6 在CSS样式单中添加注释... 341 12.7 CSS中的单位... 342 12.7.1 长度值... 342 12.7.2 URL值... 344 12.7.3 颜色值... 345 12.7.4 关键字值... 346 12.8 块、内联或列表项元素... ...

    js使用小技巧

    favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下 收藏栏图标 查看源码 查看网页源代码 onclick="window.location = "view-source:"+ "http://www.csdn.net/""&gt; 关闭输入法 自动全选 ()"&gt; ...

Global site tag (gtag.js) - Google Analytics