引入外部css有几种方式?

引入外部css样式有2种方式,分别为:通过<link>引入css外部文件和通过import 导入css外部文件。下面本篇文章给大家主要介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

方式1:通过<link>引入css外部文件

在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css。

<link> 标签定义文档与外部资源的关系,<link> 标签最常见的用途是链接样式表。

语法:

<link rel="stylesheet" href="css文件路径" type="text/css" />

优点:易于维护、可复用、利于蜘蛛抓取(源代码量少,抓取速度快)、分线程加载(页面打开速度快)

缺点:暂无

方式2:通过import 导入css外部文件

CSS @import规则,用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则,@import不能在条件组的规则中使用。

@import规则语法

@import url("文件路径");

优点:无

缺点:会等到页面全部被下载完再被加载、只有在IE5以上的才能识别、DOM不可控制、只能引入31次css文件

综合对比

建议使用link引入方式,加载css样式文件,link方式是HTML方式,而import方式是css方式,有着本质上的区别。在优缺对比方面,link有着非常明显的优势。

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是引入外部css有几种方式?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读