CSS样式优先权，样式控制的三种方式
本帖最后由 xiaoye 于 2016-1-7 11:12 编辑三种使用css样式的方式：
@import导入
链接
内嵌
第一步创建一个demo.hml,ys1.css
demo.html内容为：
<body>
<h1>饮酒·其五</h1>
<p>结庐在人境，而无车马喧。<br />
问君何能尔？心远地自偏。<br />
采菊东篱下，悠然见南山。<br />
山气日夕佳，飞鸟相与还。<br />
此中有真意，欲辨已忘言。
</p>
</body>
ys1.css内容为：
body{
font-size:20px;
color:blue;
background-color:pink;
}
ys2.css内容为
body{
font-size:25px;
color:blue;
background-color:#ccc;
}
===========================================
将demo改为：
<style type="text/css">
@import url("ys1.css");
</style>
<body>
<h1>饮酒·其五</h1>
<p>结庐在人境，而无车马喧。<br />
问君何能尔？心远地自偏。<br />
采菊东篱下，悠然见南山。<br />
山气日夕佳，飞鸟相与还。<br />
此中有真意，欲辨已忘言。
</p>
</body>
此时打开网页，背景颜色为粉红色，字体颜色为红色。
将ys2.css改为：
body{
font-size:25px;
color:blue;
background-color:#ccc;
}
@import url("ys1.css");
demo.html中将
<style type="text/css">@import url("ys1.css");</style>
修改为：
<link href="ys2.css" rel="stylesheet" type="text/css" />
这是刷新网页：背景颜色为灰色，字体颜色为蓝色。
现在可以确定:链接式比导入式的权限高。
继续。。。。。。
接下来用上内嵌式：
<link href="ys2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{
background-color:#FFFF00;
color:#00FF00;
}
</style>
</head>
<body>
此时显示的是黄色的背景，绿色的文字。
样式优先权为：
@import导入<链接<内嵌 支持中国红客联盟(ihonker.org) 感谢楼主的分享~ 支持中国红客联盟(ihonker.org) 支持中国红客联盟(ihonker.org) 支持中国红客联盟(ihonker.org) 还是不错的哦，顶了 还是不错的哦，顶了 还是不错的哦，顶了 支持中国红客联盟(ihonker.org)