好了,直入主题,大家都知道,CSS的中文名叫做层叠样式表,而CSS在控制样式的时候,有三种引入方式,分别是:
1>外部样式表 : 将样式规则直接写在*.css文件中,然后再*.html页面中通过<link>标签引入的方式
2>内部样式表 :(位于 <head> 标签内部)
3>内联样式 :(在 HTML 元素内部)
按照W3School网站(点这里直达)的说法,当同一个 HTML 元素被不止一个样式定义时,它们是有优先级之分的,如下,将优先级从小到大排列出来,其中4的优先级最高:
1.浏览器缺省设置
2.外部样式表
3.内部样式表(位于 <head> 标签内部)
4.内联样式(在 HTML 元素内部)
对于这个结论,相信大家一定有很多疑问,而网上很多都是直接对官网的内容进行复制然后粘贴发布就算了,让我们非常厌倦和烦恼,所以,在这里让我们一起来验证对比下。
注意:本次验证主要针对后面3个优先级,关于浏览器缺省设置这个,相信大家都知道,他一定是最低的,我们在此就不过多的举例验证了。
一、验证环境的描述
浏览器:FireFox 22.0
语言:HTML 4.01/CSS
开发工具:Aptana Studio 3
二、使用三种方式直接对标签进行元素定义样式
1>首先,我们先直接使用外部样式表来定义div标签的样式:
xiaoxuetu.css
xiaoxuetu.html
<meta charset="UTF-8" /></p>
<p> <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</head>
<body>
<div>外部样式表</div>
</body>
</html>
显示效果:
下面我们开始验证吧。
2>外部样式表 VS 内部样式表(先定义内部样式表,再引入外部样式表定义文件) 加入内部样式表,也就是说,直接在<head>标签中定义样式规则,这个时候我们修改一下xiaoxuetu.html中的代码:
xiaoxuetu.html
显示效果:
得出优先级结果:外部样式表 > 内部样式表
3>外部样式表 VS 内部样式表(先引入外部样式表定义文件,再定义内部样式表)这步很简单,其实就是直接将link标签剪切移动到上面到head标签中定义内部样式表的前面:
xiaoxuetu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01