在web前端开发中，CSS是一种用来表现HTML或XML等文件样式的语言。很多处于web前端初学阶段的朋友，很多人都不知道CSS引入方式存在三种方法，css引入方式分别为标签内联书写、页面头部书写、外部引入，那么这三者有何区别？本文给大家讲解了从不同的角度分析他们的优势与劣势。
1、外部引入：
在HTML的head部分<link rel="stylesheet" type="text/css" href="css文件路径">，引入外部的CSS文件;
优势：
一个CSS文件可控制多个页面
易改版、便于维护
减少代码量、代码简洁规范易于分工协作
有效利用缓存机制
劣势：
相对于单页有垃圾代码
外部引入中的href属性会给服务器造成请求的压力
示例：
<head>
<title>麦子学院</title>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
2、头部书写：
在head部分加入 标签，CSS代码就写在标签内（style是表明引入文件类型的标签；type是表明文件类型；）
优势：
速度快，没有服务器请求压力
相对于外部引入单页代码量少
劣势：
不易改版与维护
代码较乱不易前后台沟通
示例：
<head>
<title>麦子学院</title>
<style type="text/css">
*{CSS样式}
</style>
</head>
3、在标签内直接写CSS:
直接把css标签写在页面标签里;
优势：
优先级最高
劣势：
冗余代码多，代码量大
不利于维护
示例：
<p style="20px; height:10px;">麦子学院</p>
4、使用@import引入CSS
劣势：
在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程（也就是增加页面的总体加载时间）
在IE中使用@import 将会引起文件的下载顺序被改变。这更会引起样式文件花费更长的时间来下载，这会阻碍页面的渲染，让人感到页面比较慢。
示例：
@import url('b.css');
使用@import引入CSS—部分参考前端观察文章
以上就是web前段开发中CSS引入方式的内容，说CSS简单，其实也不简单，还需要学习web前段开发的初学者经常做项目实战练习，这样才能从实战中体会到web前段开发的真正意义。
来源：http://www.docin.com/p1-1403278348.html