怎么引入外部css文件样式？

怎么引入外部css文件样式，来给html标记添加各种样式？下面本篇文章就来给大家介绍一下引入外部css文件样式的方法，希望对大家有所帮助。

方法1：使用<link>来引入外部的css文件

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

语法：

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

说明：

这种方法会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页。

方法2：使用@import引入外部CSS文件

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

将一个独立的.css文件引入HTML文件中，使用css @import规则引入外部css文件，写在<head>标记的<style>标记中

@import语法结构

@import + 空格+ url(CSS文件路径地址);

在html中使用

<style type="text/css">
@import url(CSS文件路径地址);
</style>

在css中直接使用

@import url(CSS文件路径地址);

说明：

这种方法会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。

两种调用外部css样式方法的区别：

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
link引入的样式权重大于@import引入的样式。

以上就是怎么引入外部css文件样式？的详细内容，更多请关注0133技术站其它相关文章！