HTML页面引入CSS的几种方式及区别
2016-11-28 本文已影响196人
evelynlab
1. 使用HTML标签的style属性
例如：
<p style="font-size:12px; color: blue">
优点：分散灵活方便；
缺点：缺乏整体性和规划性，不利于维护，维护成本高；
这种方式的CSS渲染的优先级要高于其它三种。
2. 将样式代码写在<style></style>标签中
通常将style标签放到HTML文件<head></head>标签里
例如：
<html>
<head>
<style>
div { background: #fff; }
</style>
</head>
</html>
优点：单个页面内的CSS代码具有统一性和规划性，便于维护。
缺点：多个页面之间CSS复用仍然不够。
3. 使用<link>标签，引入外部CSS文件
<link rel='stylesheet' type='text/css' href = '/css/base.css'>
外部CSS文件，base.css:
p { color: #000}
...
优点：一个页面可以引入多个外部CSS文件，方便CSS代码复用，方便维护；目前应用最多。
缺点：代码量集中，容易混乱。
4. 使用@import，引入CSS文件
这种方法既可以用在<style>标签里，也可以用在外部CSS文件中，例如：
@import url ('/css/list.css')
或者：
@import './css/list.css';
注意：第一种写法，url 与（）之间不能有空格。分号也不能省略。
特点：引入方便，但性能可能较差
使用link 标签和@import区别：
- 范畴不同： link是HTML标签，除了加载CSS之外，还可以定义其他如RSS事务；@import属于CSS范畴，只能加载CSS；
- 加载顺序不同：link引入CSS时，在页面加载时同时加载，而@import需要页面完全载入以后加载；
- 兼容性差别： link是XHTML标签，因此无兼容问题，而@import是在CSS2.1提出的（IE5以上才能识别），因此低版本的浏览器不兼容；
- 是否支持JS DOM改变： link支持使用JavaScript控制DOM改变CSS样式，@import不支持；
- 权重不同： link方式样式的权重高于@import样式的权重。
第4，5条经验证，发现不成立。网上这么多文章都列了这两点，是为什么。
