CSS控制样式的三种方式控制样式的三种方式(优先级对比验证优先级对比验证)
好了，直入主题，大家都知道，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
复制代码代码如下:
div {
color:blue
}
xiaoxuetu.html
复制代码代码如下:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>CSS样式表优先级测试</title>
<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
复制代码代码如下:
下载后可阅读完整内容，剩余5页未读，立即下载
weixin_38654220
- 粉丝: 10
- 资源: 931
我的内容管理
展开
最新资源
- C++多态实现机制详解：虚函数与早期绑定
- Java多线程与异常处理详解
- 校园导游系统：无向图实现最短路径探索
- SQL2005彻底删除指南：避免重装失败
- GTD时间管理法：提升效率与组织生活的关键
- Python进制转换全攻略：从10进制到16进制
- 商丘物流业区位优势探究：发展战略与机遇
- C语言实训：简单计算器程序设计
- Oracle SQL命令大全：用户管理、权限操作与查询
- Struts2配置详解与示例
- C#编程规范与最佳实践
- C语言面试常见问题解析
- 超声波测距技术详解：电路与程序设计
- 反激开关电源设计：UC3844与TL431优化稳压
- Cisco路由器配置全攻略
- SQLServer 2005 CTE递归教程：创建员工层级结构
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
