CSS引入方式 - 码农教程

HTML5学堂：CSS引入方式存在三种，分别为标签内联书写、页面头部书写、外部引入，那么这三者有何区别？本文给大家讲解了从不同的角度分析他们的优势与劣势。

1、外部引入：

在HTML的head部分<link rel="stylesheet" type="text/css" href="css文件路径">，引入外部的CSS文件;

一个CSS文件可控制多个页面

易改版、便于维护

减少代码量、代码简洁规范易于分工协作

有效利用缓存机制

相对于单页有垃圾代码

外部引入中的href属性会给服务器造成请求的压力

<head>
<title>HTML5学堂</title>
<link rel="stylesheet" type="text/css"  href="css文件路径">
</head>

在head部分加入标签，CSS代码就写在标签内（style是表明引入文件类型的标签；type是表明文件类型；）

速度快，没有服务器请求压力

相对于外部引入单页代码量少

不易改版与维护

代码较乱不易前后台沟通

<head>
<title>HTML5学堂</title>
<style type="text/css">
*{CSS样式}
</style>
</head>

直接把css标签写在页面标签里;

优先级最高

冗余代码多，代码量大

不利于维护

<p style="width:20px; height:10px;">HTML5学堂</p>

在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程（也就是增加页面的总体加载时间）

在IE中使用@import 将会引起文件的下载顺序被改变。这更会引起样式文件花费更长的时间来下载，这会阻碍页面的渲染，让人感到页面比较慢。

@import url('b.css');

使用@import引入CSS—部分参考前端观察文章