CSS的三种用法

CSS有三种用法，或者说在HTML里不同的位置。

1. 内联的CSS

像前面看到的一样，CSS代码是放到HTML元素的style属性里的：

<p style="color:red">这是一段内容</p>

CSS样式代码和HTML具体元素的代码在一起，这就是内联(inline)。前面提到过这种写法有很多的维护和重用的问题，所以一般情况下不建议这么用。

2. 内部的CSS

CSS通过选择器来定义每个HTML元素的样式，但是是在<style>标签里面，而不是和HTML代码混在一起。

<style>
    p {
        color:red;
    }
</style>
<p>这是一段话</p>

<style>标签里面的代码就是CSS，这样代码就和HTML代码分开了，看起来比较清晰，但是问题是如果想在不同页面都用这样的样式的话，就不太容易了。

3. 外部的CSS文件

我们可以把CSS定义到HTML代码文件外部的CSS文件里，一般以.css作为文件的后缀。假如我们定义了一个叫做main.css文件，放到了web服务器的根目录下，那么就可以这么写：

<link rel="stylesheet" type="text/css" href="/main.css">
<p>这是一段内容</p>

我们平时写代码，如何选择哪种写法呢？

内联样式前面说过了，一般情况下不推荐使用。不是完全不可以用，可能用到内联CSS的地方有：

• HTML创建的email
• 陈旧的网站
• CMS创建的页面内容（比如WordPress, Drupal等）
• 页面上动态的内容（比如JavaScript动态创建或改变的内容）

内部CSS和外部CSS文件做对比：

• 由于外部CSS文件可以被多个HTML文件共用，一般情况下大小项目都有不止一个HTML页面，所以使用外部的CSS文件都通常是最优的选择。
• 不过也会出现一些特殊情况，比如因为外部的CSS文件需要额外的HTTP请求，因此主页面加载完之后还要等后续的CSS文件加载结束，因此对加载性能非常敏感的网站和应用则会选择使用内部CSS来减少额外的HTTP请求。比如百度搜索的网页代码，就是这种情况。

遵守最佳的编码实践是减少问题的最好的办法！