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可以控制的。
网友评论