CSS样式优先权，样式控制的三种方式

暗夜幽灵 · 发表于 2016-1-7 00:39:53

本帖最后由 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导入<链接<内嵌

cl476874045 · 发表于 2016-1-7 07:23:43

支持中国红客联盟(ihonker.org)

wtsqq123 · 发表于 2016-1-7 08:32:20

感谢楼主的分享~

08-wh · 发表于 2016-1-7 09:06:32

支持中国红客联盟(ihonker.org)

wanmznh · 发表于 2016-1-7 12:18:42

支持中国红客联盟(ihonker.org)

a136 · 发表于 2016-1-7 13:42:30

支持中国红客联盟(ihonker.org)

Micah · 发表于 2016-1-8 05:03:52

还是不错的哦，顶了

r00tc4 · 发表于 2016-1-8 06:19:02

还是不错的哦，顶了

ayang · 发表于 2016-1-8 09:00:15

还是不错的哦，顶了

H.U.C-麦麦 · 发表于 2016-1-8 14:19:18

支持中国红客联盟(ihonker.org)

CSS样式优先权，样式控制的三种方式

指导单位

旗下站点

联系我们