INLINE_CSS VS INTERNAL_CSS VS EXTERNAL_CSS

Published:

本篇文章介绍不同类型样式的一些优缺点。

Inline CSS

<p style="color: sienna; margin-left: 20px">This is a paragraph.</p>

优点:

  1. 方便 test
  2. 快速修复
  3. 很小的站点
  4. 减少 http 请求

缺点:

  1. 无法被重写，优先级最高
  2. 每一个元素，inline css 需要在每一个元素上都设置
  3. 伪类，inline css 无法实现伪类

Internal CSS

<head>
<style>
    hr {
        color: red;
    }
    p {
        margin-left: 20px;
    }
    body {
        background-image: url(images/back40.gif);
    }
</style>
</head>

优点:

  1. 缓存问题，所有浏览器都会读取内部样式，除非它们被黑客入侵隐藏，这样可以使用 media = all 或 @import 来隐藏 IE4 和 NN4 等旧版浏览器的风格。
  2. 伪类，Internal CSS 可以实现伪类
  3. 相同元素的样式只用设置一次
  4. 没有多余的 http 请求

缺点:

  1. 多页面，多个页面时就得在每个页面上都设置
  2. 页面加载会比 inline css 和 External CSS 慢
  3. 页面体积会更大一些

External CSS

<head>
    <link href="mystyle.css" rel="stylesheet">
</head>

优点:

  1. 页面结构更标准，完全控制页面结构
  2. 减少页面体积
  3. 减少加载时间，主要是由于 external css 文件可以被浏览器缓存，后续访问时会通过直接缓存或协商缓存来加载 css 文件
  4. 更高的 page ranking