这篇文章将为大家详细讲解有关如何实现外部引入css，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
外部引入css的方法：1、使用link来调用外部的css文件，标签定义文档与外部资源的关系；2、使用@import引用外部CSS文件。
本文操作环境：Windows7系统、css3版、Dell G3电脑
怎么引入外部css？
方法1：使用link来调用外部的css文件
在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，使用html规则引入外部css。
<link> 标签定义文档与外部资源的关系，<link> 标签最常见的用途是链接样式表。
语法：
<link rel="stylesheet" href="css文件路径" type="text/css" />
链接外部css样式时候link标签的内容结构解释：
href：为外部资源地址，这里是css的地址
rel：定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet
type：规定被链接文档的 MIME 类,这里是值为text/css
说明：
这种方法会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页。
方法2：使用@import引用外部CSS文件
CSS @import规则，用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@import不能在条件组的规则中使用。
@import规则语法
@import url("文件路径");说明：
这种方法会在整个网页装载完后再装载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的选择器可以分为三大类，即id选择器、class选择器、标签选择器。它们之间可以有多种组合，有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等
关于“如何实现外部引入css”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
