INLINE_CSS VS INTERNAL_CSS VS EXTERNAL_CSS
Published:
本篇文章介绍不同类型样式的一些优缺点。
Inline CSS
<p style="color: sienna; margin-left: 20px">This is a paragraph.</p>
优点:
- 方便 test
- 快速修复
- 很小的站点
- 减少 http 请求
缺点:
- 无法被重写,优先级最高
- 每一个元素,inline css 需要在每一个元素上都设置
- 伪类,inline css 无法实现伪类
Internal CSS
<head>
<style>
hr {
color: red;
}
p {
margin-left: 20px;
}
body {
background-image: url(images/back40.gif);
}
</style>
</head>
优点:
- 缓存问题,所有浏览器都会读取内部样式,除非它们被黑客入侵隐藏,这样可以使用 media = all 或 @import 来隐藏 IE4 和 NN4 等旧版浏览器的风格。
- 伪类,Internal CSS 可以实现伪类
- 相同元素的样式只用设置一次
- 没有多余的 http 请求
缺点:
- 多页面,多个页面时就得在每个页面上都设置
- 页面加载会比 inline css 和 External CSS 慢
- 页面体积会更大一些
External CSS
<head>
<link href="mystyle.css" rel="stylesheet">
</head>
优点:
- 页面结构更标准,完全控制页面结构
- 减少页面体积
- 减少加载时间,主要是由于 external css 文件可以被浏览器缓存,后续访问时会通过直接缓存或协商缓存来加载 css 文件
- 更高的 page ranking