CSS的引入方式

1.内联式

内联式是最简单的插入方法，直接把CSS代码写在现有的HTML标签中。
例如：
<p style="color:blue; background=pink; font-size:12px;"></p>
这种方式的优点是简单直接，在CSS样式简单的情况下可以这样写。但是如果CSS样式复杂的时候，会导致HTML文件中有很多的style属性，HTML文件体积过大，不利于后期的维护。

2.嵌入式

嵌入式是将CSS代码写在<head></head>之间，并用<style type="text/css"></style>进行声明。
例如：

<!DOCTYPE HTML>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>CSS样式的插入方式</title>
        <style type="text/css">
            p {
                color: blue;
                font-size: 12px;
            }
        </style>
    </head>

    <body>
        <p>这是嵌入式的CSS样式写法。</p>
    </body>

</html>

这种方式适用于CSS代码不多，文件很少的情况。如果一个网站有多个页面，那么即使使用的CSS样式相同，每个页面也是要重新定义的。

3.外部式

外部式是将CSS代码放在一个单独的外部文件中，CSS文件样式以“.css”为扩展名，在<head></head>标签中加上<link href="style.css" type="text/css" rel="stylesheet" />将CSS样式文件链接到HTML文件中就可以了。
例如：
HTML文件

<!DOCTYPE HTML>
<html>

    <head>
        <title>CSS样式的插入方式</title>
        <link href="style.css" type="text/css" rel="stylesheet" />
    </head>

    <body>
        <p>这是嵌入式的CSS样式写法。</p>
    </body>

</html>

CSS样式文件（命名为“style.css”）

p{
color:blue;
font-size:12px;
}

这种方式使用的最多，它的好处是将HTML文件和CSS文件分离，使得维护起来比较容易，而且如果一个网站有多个页面，这些页面都使用同一套样式的话，可以都调用同一个CSS文件，就可以保持页面风格的统一了。

4.导入式

用@import的方式来导入CSS样式，在HTML初始化的时候，会被导入到HTML文件里，成为文件的一部分。
例如：
@import url(“style.css”);
这种方式不推荐使用，因为@import有个小缺陷，它会等到页面全部被加载完再被加载，当用户的网速较慢时，会出现一段页面没有CSS样式的时间，等全部加载好了才能看到样式。

四种样式的优先级：内联式>嵌入式>外部式>导入式

@import与link的区别:

link引用的CSS在HTML文件一开始加载的时候开始加载，而@import引用的CSS会等到页面全部被加载完再被加载；
@import可以引入多个样式表集合到同一个文件；
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。