怎样引入外部css样式表

107 阅读 0 评论 71 点赞

我是靠谱客的博主昏睡项链，最近开发中收集的这篇文章主要介绍怎样引入外部css样式表，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

引入外部css样式表的方法

1、使用 <link> 标签

语法：

<link rel="stylesheet" href="css文件路径" />
登录后复制

2、使用使用 @import 规则

@import 规则允许您将样式表导入另一张样式表中。

语法：

<style type="text/css">
@import url("css文件路径");
</style>
登录后复制

<link>和@import方法的区别

link 属于 HTML 标签，而 @import 是 CSS 提供的。
页面被加载时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载。
@import 只在 IE 5 以上才能识别，而 link 是 HTML 标签，无兼容问题。
link 方式的样式的权重高于 @import 权重。

说明：路径

相对路径(Relative Path)

顾名思义：就是css文件相对某一个参照物的位置。

上物理课的时候老师都会提到相对运动：指某一个物体对另外一个物体的相对于一个固定参照物来是相对运动的。我们走路看汽车的时候觉得汽车往后走，汽车看我们的时候是往前走，那么相对路径也是酱样子的，网页所处目录就是我们的参照物。

像下面这段css代码的引入就是一个相对路径地址style.css文件跟这个网页文件是同处一个目录层级。

<link rel="stylesheet" href="style.css" />
登录后复制

绝对路径(Absolute Path)

既然是绝对的，那就说明这个地址是唯一性，独立性。相对本地来说，刚刚的站点test的绝对地址为F:test，相对服务器来说，就应该是127.0.0.1/test类似这样的IP地址。

例：

<link rel="stylesheet" href="http://xxx.com/test/css/style.css" />
登录后复制

关于路径引入

要相对路径还是绝对路径引入css文件，个人认为本地预览的时候可以选择相对路径，项目上线的时候改成绝对路径来引入，为什么？有以下几点：

1. 减少索引，绝对地址的唯一性可以确保用户在输入网页的时候，浏览器直接去索引到那个IP地址，直接一刀致命，没有拖沓。而相对路径就要一步步索引目录，这就好比在路上遇见一个心仪的妹纸，我们害羞不敢当面去谈话，于是我们制造了无数的偶遇之后才有胆子上去问联系方式，到最后才发现妹纸早名花有主，早知如此，何必当初呢~

2. 增加外链，对于做SEO的人来说，我们都知道外链能带来不错的权重提高，就算是别人来抓我们的内容，假如它没有改成自己的服务器地址，那说明这个网站的引用地址还是我们的网址，爬虫会通过这个图片引用地址反爬回去，但相对路径引用，因为地址发生变更，因此爬虫爬回去之后找不到相应的文件，因此爬虫的工作也即将停止。

3. 提高排名，假如是你一个干前端的，那么多少都会遇到某一个自己喜欢的动画效果，HTML搞下来了，但是不想要直接把css也下下来，因此会在本地直接调用网络地址。当你预览这个页面的时候不小心点到了引入地址，会跳转到相应的网站css，即使你没有访问其主页，但是你还是访问了他的域名，无意之中还是增加了其访问量。

（学习视频分享：css视频教程）

以上就是怎样引入外部css样式表的详细内容，更多请关注靠谱客其它相关文章！